@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

package/MultiLevelCheckboxSelect-acaac96b.js

@@ -1,699 +0,0 @@
-'use strict';
-
-var defaultTheme = require('./defaultTheme-fcd45bd0.js');
-var React = require('react');
-var index = require('./index-39bc450c.js');
-var styled = require('styled-components');
-require('./Alert-e9f818d6.js');
-require('./Badge-72b369a6.js');
-var Popover = require('./Popover-a76d0fe5.js');
-require('./Tab-87287c6e.js');
-require('./Tabs-8e4de5a5.js');
-require('./Tooltip-298f0547.js');
-require('./VerificationStatusIcon-d596165f.js');
-var Checkbox = require('./Checkbox-d77eed5d.js');
-var lodash = require('lodash');
-var TextInput = require('./TextInput-a440374c.js');
-require('./InputGroup-e30507cb.js');
-var SectionSeparator = require('./SectionSeparator-2a1c720b.js');
-var close = require('./close-ebf2f3cf.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
-});
-
-function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref);
-}
-
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
-var MultiLevelCheckbox$1 = styled__default['default'].fieldset.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0;\n  border: 0;\n  margin: 0;\n"])));
-var MultiLevelCheckboxLegend = styled__default['default'].legend.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-});
-var MultiLevelCheckboxNoResults = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  text-align: center;\n  opacity: 0.7;\n  font-size: 0.875rem;\n"])));
-var CheckboxTreeChildren = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n  display: grid;\n  grid-template-rows: 0fr;\n  padding-left: 28px;\n  transition: grid-template-rows 250ms;\n\n  & > div {\n    overflow: hidden;\n  }\n\n  ", "\n}\n"])), function (props) {
-  return props.$expanded && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      grid-template-rows: 1fr;\n    "])));
-});
-var CheckboxTree$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  width: fit-content;\n"])));
-var CheckboxTreeCheckboxContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 4px;\n"])));
-var ExpandTreeButton = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  background: none;\n  border: none;\n  position: absolute;\n  height: 100%;\n  cursor: pointer;\n  color: currentColor;\n\n  & > svg {\n    display: block;\n    width: 10px;\n    transform: rotate(-90deg);\n    transition: transform 250ms;\n\n    ", "\n  }\n}\n"])), function (props) {
-  return props.$expanded && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n        transform: rotate(0deg);\n      "])));
-});
-
-function findChildValues(node) {
-  var result = [];
-
-  function traverse(node) {
-    if (lodash.isArray(node.children) && node.children.length > 0) {
-      node.children.forEach(function (child) {
-        result.push(child.value);
-        traverse(child);
-      });
-    }
-  }
-
-  traverse(node);
-  return result;
-}
-
-function hasChildrenSelected(node, targetValue, checkedValues) {
-  if (!lodash.isArray(node.children) || node.children.length === 0) {
-    return false;
-  }
-
-  if (node.children.some(function (childNode) {
-    return checkedValues.includes(childNode.value);
-  })) {
-    return true;
-  }
-
-  return node.children.some(function (childNode) {
-    return hasChildrenSelected(childNode, childNode.value, checkedValues);
-  });
-}
-
-function hasAllChildrenSelected(node, targetValue, checkedValues) {
-  if (!node.children || node.children.length === 0) {
-    return checkedValues.includes(node.value);
-  }
-
-  if (node.children.some(function (childNode) {
-    return !checkedValues.includes(childNode.value);
-  })) {
-    return false;
-  }
-
-  return node.children.every(function (childNode) {
-    return hasAllChildrenSelected(childNode, childNode.value, checkedValues);
-  });
-}
-
-function getLabelByValue(targetValue, nodes) {
-  var _iterator = defaultTheme._createForOfIteratorHelper(nodes),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var node = _step.value;
-
-      if (node.value === targetValue) {
-        return node.label;
-      }
-
-      if (node.children) {
-        var result = getLabelByValue(targetValue, node.children);
-
-        if (result) {
-          return result;
-        }
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-
-  return null;
-}
-
-var MultiLevelCheckbox = React__default['default'].forwardRef(function MultiLevelCheckbox(_ref, forwardedRef) {
-  var options = _ref.options,
-      checked = _ref.checked,
-      search = _ref.search,
-      label = _ref.label,
-      noResultsText = _ref.noResultsText,
-      onChange = _ref.onChange,
-      props = defaultTheme._objectWithoutProperties(_ref, ["options", "checked", "search", "label", "noResultsText", "onChange"]);
-
-  var _useState = React.useState(includeAllChildren(checked, options)),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      internalChecked = _useState2[0],
-      setInternalChecked = _useState2[1];
-
-  var anySearchResults = React.useMemo(function () {
-    if (lodash.isEmpty(search)) {
-      return true;
-    }
-
-    return options.some(function (node) {
-      var childValues = findChildValues(node);
-      return [node.value].concat(defaultTheme._toConsumableArray(childValues)).map(function (v) {
-        return getLabelByValue(v, options);
-      }).some(function (v) {
-        return v.match(new RegExp(search, 'i'));
-      });
-    });
-  }, [options, search]);
-
-  function includeAllChildren(checked, nodes) {
-    var honorParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var newChecked = [];
-
-    function fillSiblings(nodes) {
-      nodes.forEach(function (node) {
-        if (hasAllChildrenSelected(node, node.value, checked)) {
-          newChecked.push(node.value);
-        }
-
-        if (honorParent && checked.includes(node.value)) {
-          var childValues = findChildValues(node);
-          return newChecked = newChecked.concat([node.value].concat(defaultTheme._toConsumableArray(childValues)));
-        }
-
-        if (node.children) {
-          fillSiblings(node.children);
-        }
-      });
-    }
-
-    fillSiblings(nodes);
-    return newChecked;
-  }
-
-  var onAdd = React.useCallback(function (values) {
-    setInternalChecked(function (prevChecked) {
-      return lodash.uniq(includeAllChildren([].concat(defaultTheme._toConsumableArray(prevChecked), defaultTheme._toConsumableArray(values)), options));
-    });
-  }, [options]);
-  var onRemove = React.useCallback(function (values) {
-    setInternalChecked(function (prevChecked) {
-      return includeAllChildren(prevChecked.filter(function (v) {
-        return !values.includes(v);
-      }), options, false);
-    });
-  }, [options]);
-  React.useEffect(function () {
-    onChange(defaultTheme._toConsumableArray(internalChecked).sort());
-  }, [internalChecked, onChange]);
-  React.useEffect(function () {
-    if (!lodash.isEqual(defaultTheme._toConsumableArray(checked).sort(), defaultTheme._toConsumableArray(internalChecked).sort())) {
-      setInternalChecked(includeAllChildren(checked, options));
-    }
-  }, [checked, options]);
-  return React__default['default'].createElement(MultiLevelCheckbox$1, defaultTheme._extends({}, props, {
-    ref: forwardedRef
-  }), label && React__default['default'].createElement(MultiLevelCheckboxLegend, null, label), options.map(function (node) {
-    return React__default['default'].createElement(CheckboxTree, {
-      key: node.value,
-      nodes: options,
-      node: node,
-      checked: checked.filter(function (c) {
-        return [node.value].concat(defaultTheme._toConsumableArray(findChildValues(node))).includes(c);
-      }),
-      onAdd: onAdd,
-      onRemove: onRemove,
-      search: search
-    });
-  }), !anySearchResults && React__default['default'].createElement(MultiLevelCheckboxNoResults, null, noResultsText));
-});
-var NodeType = index.PropTypes.shape({
-  label: index.PropTypes.string.isRequired,
-  value: index.PropTypes.any.isRequired,
-  children: NodeType
-});
-MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  options: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.array
-  })),
-  checked: index.PropTypes.array.isRequired,
-  label: index.PropTypes.string,
-  search: index.PropTypes.string,
-  noResultsText: index.PropTypes.string,
-  onChange: index.PropTypes.func.isRequired
-} : {};
-MultiLevelCheckbox.defaultProps = {
-  options: [],
-  noResultsText: 'No results.'
-};
-var CheckboxTree = React__default['default'].memo(function CheckboxTree(_ref2) {
-  var node = _ref2.node,
-      nodes = _ref2.nodes,
-      checked = _ref2.checked,
-      onAdd = _ref2.onAdd,
-      onRemove = _ref2.onRemove,
-      _ref2$search = _ref2.search,
-      search = _ref2$search === void 0 ? '' : _ref2$search;
-
-  var _useState3 = React.useState(false),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      expandedBySearch = _useState6[0],
-      setExpandedBySearch = _useState6[1];
-
-  var onChange = React.useCallback(function (event) {
-    if (event.target.checked) {
-      onAdd([event.target.value].concat(defaultTheme._toConsumableArray(findChildValues(node))));
-    } else {
-      onRemove([event.target.value].concat(defaultTheme._toConsumableArray(findChildValues(node))));
-    }
-  }, [onAdd, onRemove]);
-  var onChildrenAdd = React.useCallback(function (newValues) {
-    if (hasAllChildrenSelected(node, '', [].concat(defaultTheme._toConsumableArray(newValues), defaultTheme._toConsumableArray(checked)))) {
-      return onAdd([node.value].concat(defaultTheme._toConsumableArray(newValues)));
-    }
-
-    onAdd(newValues);
-  }, [node, checked, onAdd]);
-  var hideOption = React.useMemo(function () {
-    if (lodash.isEmpty(search)) {
-      return;
-    }
-
-    var childValues = findChildValues(node);
-    return ![node.value].concat(defaultTheme._toConsumableArray(childValues)).map(function (v) {
-      return getLabelByValue(v, nodes);
-    }).some(function (v) {
-      return v.match(new RegExp(search, 'i'));
-    });
-  }, [node, nodes, search]);
-  React.useEffect(function () {
-    var childValues = findChildValues(node);
-    var expandBySearch = !lodash.isEmpty(search) && [node.value].concat(defaultTheme._toConsumableArray(childValues)).map(function (v) {
-      return getLabelByValue(v, nodes);
-    }).some(function (v) {
-      return v.match(new RegExp(search, 'i'));
-    });
-    setExpandedBySearch(expandBySearch);
-  }, [search, nodes, node.value]);
-
-  if (hideOption) {
-    return null;
-  }
-
-  return React__default['default'].createElement(CheckboxTree$1, null, React__default['default'].createElement(CheckboxTreeCheckboxContainer, null, lodash.isArray(node.children) && node.children.length > 0 && React__default['default'].createElement(ExpandTreeButton, {
-    $expanded: expanded || expandedBySearch,
-    type: "button",
-    onClick: function onClick() {
-      setExpandedBySearch(function (current) {
-        if (current) {
-          setExpanded(false);
-        } else {
-          setExpanded(function (v) {
-            return !v;
-          });
-        }
-
-        return false;
-      });
-    }
-  }, React__default['default'].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 7.4"
-  }, React__default['default'].createElement("path", {
-    fill: "currentColor",
-    d: "m6,7.4L0,1.4,1.4,0l4.6,4.6L10.6,0l1.4,1.4-6,6Z",
-    strokeWidth: "0"
-  }))), React__default['default'].createElement(Checkbox.Checkbox, {
-    style: {
-      paddingLeft: 24
-    },
-    muted: !checked.includes(node.value),
-    label: node.label,
-    indeterminate: checked.includes(node.value) && !hasAllChildrenSelected(node, node.value, checked) || hasChildrenSelected(node, node.value, checked) && !hasAllChildrenSelected(node, node.value, checked),
-    checked: hasChildrenSelected(node, node.value, checked) || checked.includes(node.value),
-    value: node.value,
-    onChange: onChange
-  })), node.children && React__default['default'].createElement(CheckboxTreeChildren, {
-    $expanded: expanded || expandedBySearch
-  }, React__default['default'].createElement("div", null, node.children.map(function (childNode) {
-    return React__default['default'].createElement(CheckboxTree, {
-      key: childNode.value,
-      checked: checked.filter(function (c) {
-        return [childNode.value].concat(defaultTheme._toConsumableArray(findChildValues(childNode))).includes(c);
-      }),
-      onAdd: onChildrenAdd,
-      onRemove: onRemove,
-      node: childNode,
-      nodes: nodes,
-      search: search
-    });
-  }))));
-}, lodash.isEqual);
-CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
-  node: index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(index.PropTypes.shape({
-      label: index.PropTypes.string.isRequired,
-      value: index.PropTypes.any.isRequired,
-      children: index.PropTypes.arrayOf(index.PropTypes.any)
-    }))
-  }),
-  nodes: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(index.PropTypes.shape({
-      label: index.PropTypes.string.isRequired,
-      value: index.PropTypes.any.isRequired,
-      children: index.PropTypes.arrayOf(index.PropTypes.any)
-    }))
-  })),
-  checked: index.PropTypes.array.isRequired,
-  search: index.PropTypes.string,
-  onAdd: index.PropTypes.func.isRequired,
-  onRemove: index.PropTypes.func.isRequired
-} : {};
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var MultiLevelCheckboxSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-});
-var MultiLevelCheckboxSelectInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  border: 1px solid;\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  min-height: 44px;\n  box-sizing: border-box;\n  padding: 8px 6px;\n  border-radius: 3px;\n  transition: border-color 350ms;\n\n  &:focus-within {\n    ", "\n  }\n"])), function (props) {
-  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
-}, function (props) {
-  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1);
-});
-var Item = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: #272727;\n  color: #f7f8f9;\n  font-size: 12px;\n  height: 26px;\n  border-radius: 3px;\n"])));
-var ItemLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0 5px 0 8px;\n"])));
-var ItemRemoveButton = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  border: none;\n  background: none;\n  -webkit-appearance: none;\n  height: 100%;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n\n  &:hover {\n    background: ", ";\n  }\n\n  & > svg {\n    width: 8px;\n    display: block;\n  }\n"])), function (props) {
-  return props.theme.getColor('red-500');
-});
-var Label = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -8px;\n  left: 7px;\n  line-height: 1.2;\n  font-size: 0.75rem;\n  font-weight: 400;\n  padding: 0 3px;\n  //padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-}, function (props) {
-  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
-});
-var Placeholder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  line-height: 26px;\n  padding-left: 4px;\n  opacity: 0.4;\n"])));
-var PopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n"])));
-var PopoverHeader = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-});
-var SearchContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
-var OptionsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-function useEventListener(eventName, handler, element, options) {
-  var savedHandler = React.useRef(handler);
-  useIsomorphicLayoutEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  React.useEffect(function () {
-    var _element$current;
-
-    var targetElement = (_element$current = element === null || element === void 0 ? void 0 : element.current) !== null && _element$current !== void 0 ? _element$current : window;
-    if (!(targetElement && targetElement.addEventListener)) return;
-
-    var listener = function listener(event) {
-      return savedHandler.current(event);
-    };
-
-    targetElement.addEventListener(eventName, listener, options);
-    return function () {
-      targetElement.removeEventListener(eventName, listener, options);
-    };
-  }, [eventName, element, options]);
-}
-
-function useOnClickOutside(ref, handler) {
-  var mouseEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mousedown';
-  useEventListener(mouseEvent, function (event) {
-    var el = ref === null || ref === void 0 ? void 0 : ref.current;
-
-    if (!el || el.contains(event.target)) {
-      return;
-    }
-
-    handler(event);
-  });
-}
-
-/**
- * Runs an effect only when the dependencies have changed, skipping the
- * initial "on mount" run. Caution, if the dependency list never changes,
- * the effect is **never run**
- *
- * ```ts
- *  const ref = useRef<HTMLInput>(null);
- *
- *  // focuses an element only if the focus changes, and not on mount
- *  useUpdateEffect(() => {
- *    const element = ref.current?.children[focusedIdx] as HTMLElement
- *
- *    element?.focus()
- *
- *  }, [focusedIndex])
- * ```
- * @param effect An effect to run on mount
- *
- * @category effects
- */
-
-function useUpdateEffect(fn, deps) {
-  var isFirst = React.useRef(true);
-  React.useEffect(function () {
-    if (isFirst.current) {
-      isFirst.current = false;
-      return;
-    }
-
-    return fn();
-  }, deps);
-}
-
-var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function MultiLevelCheckboxSelect(_ref, forwardedRef) {
-  var label = _ref.label,
-      options = _ref.options,
-      checkedProp = _ref.checked,
-      placeholder = _ref.placeholder,
-      noResultsText = _ref.noResultsText,
-      onChange = _ref.onChange,
-      onParentChange = _ref.onParentChange,
-      props = defaultTheme._objectWithoutProperties(_ref, ["label", "options", "checked", "placeholder", "noResultsText", "onChange", "onParentChange"]);
-
-  var inputRef = React.useRef(null);
-  var popoverContentRef = React.useRef(null);
-  var searchInputRef = React.useRef(null);
-
-  var _useState = React.useState(''),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      searchString = _useState2[0],
-      setSearchString = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
-  var handleClickInside = React.useCallback(function () {
-    var _searchInputRef$curre;
-
-    setOpen(true);
-    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
-  }, []);
-  var handleKeyDown = React.useCallback(function (event) {
-    if (!open) return;
-
-    if (event.key === 'Escape') {
-      setOpen(false);
-    }
-  }, [open]);
-  useEventListener('focus', handleClickInside, inputRef);
-  useEventListener('mousedown', handleClickInside, inputRef);
-  useEventListener('keydown', handleKeyDown);
-
-  var handleClickOutside = function handleClickOutside(event) {
-    var _popoverContentRef$cu;
-
-    if ((popoverContentRef === null || popoverContentRef === void 0 ? void 0 : popoverContentRef.current) === event.target || popoverContentRef !== null && popoverContentRef !== void 0 && (_popoverContentRef$cu = popoverContentRef.current) !== null && _popoverContentRef$cu !== void 0 && _popoverContentRef$cu.contains(event.target)) {
-      return;
-    }
-
-    setOpen(false);
-  };
-
-  useOnClickOutside(inputRef, handleClickOutside);
-  var checked = React.useMemo(function () {
-    var checkedParents = [];
-
-    function iterate(nodes) {
-      nodes.forEach(function (node) {
-        if (checkedProp.includes(node.value)) {
-          return checkedParents.push(node.value);
-        }
-
-        if (node.children) {
-          iterate(node.children);
-        }
-      });
-    }
-
-    iterate(options);
-    return checkedParents.sort();
-  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
-  var getLabelByValue = React.useCallback(function (targetValue) {
-    var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options;
-
-    var _iterator = defaultTheme._createForOfIteratorHelper(nodes),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var node = _step.value;
-
-        if (node.value === targetValue) {
-          return node.label;
-        }
-
-        if (node.children) {
-          var result = getLabelByValue(targetValue, node.children);
-
-          if (result) {
-            return result;
-          }
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-
-    return null;
-  }, [options]);
-  var removeItem = React.useCallback(function (value) {
-    var node = null;
-
-    function findNodeByValue(options, value) {
-      for (var i = 0; i < options.length; i++) {
-        if (options[i].value === value) {
-          node = options[i];
-          break;
-        }
-
-        if (options[i].children) {
-          findNodeByValue(options[i].children, value);
-        }
-      }
-    }
-
-    findNodeByValue(options, value);
-
-    if (node) {
-      var childValues = findChildValues(node);
-      var valuesToRemove = [value].concat(defaultTheme._toConsumableArray(childValues));
-      onChange(checkedProp.filter(function (value) {
-        return !valuesToRemove.includes(value);
-      }));
-    }
-  }, [options, checkedProp]);
-  useUpdateEffect(function () {
-    if (lodash.isFunction(onParentChange)) {
-      onParentChange(checked);
-    }
-  }, [checked]);
-  return React__default['default'].createElement(MultiLevelCheckboxSelect$1, defaultTheme._extends({
-    ref: forwardedRef
-  }, props), React__default['default'].createElement(Popover.Popover, {
-    visible: open,
-    arrow: false,
-    placement: 'bottom',
-    offset: [0, 6],
-    modifiers: [{
-      name: 'sameWidth',
-      enabled: true,
-      phase: 'beforeWrite',
-      requires: ['computeStyles'],
-      fn: function fn(_ref2) {
-        var state = _ref2.state;
-        state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-      },
-      effect: function effect(_ref3) {
-        var state = _ref3.state;
-        state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-      }
-    }],
-    content: React__default['default'].createElement(PopoverContainer, {
-      ref: popoverContentRef
-    }, React__default['default'].createElement(PopoverHeader, null, React__default['default'].createElement(SearchContainer, null, React__default['default'].createElement(TextInput.TextInput, {
-      ref: searchInputRef,
-      onBlur: function onBlur(e) {
-        if (open) {
-          e.target.focus();
-        }
-      },
-      icon: React__default['default'].createElement(SvgSearch, null),
-      value: searchString,
-      onChange: function onChange(e) {
-        return setSearchString(e.target.value);
-      }
-    })), React__default['default'].createElement(SectionSeparator.SectionSeparator, null)), React__default['default'].createElement(OptionsContainer, null, React__default['default'].createElement(MultiLevelCheckbox, {
-      options: options,
-      checked: checkedProp,
-      search: searchString,
-      noResultsText: noResultsText,
-      onChange: onChange
-    })))
-  }, React__default['default'].createElement(MultiLevelCheckboxSelectInput, {
-    tabIndex: "0",
-    ref: inputRef
-  }, label && React__default['default'].createElement(Label, null, label), checked.length === 0 && React__default['default'].createElement(Placeholder, null, placeholder), checked.map(function (option) {
-    return React__default['default'].createElement(Item, {
-      key: option
-    }, React__default['default'].createElement(ItemLabel, null, getLabelByValue(option)), React__default['default'].createElement(ItemRemoveButton, {
-      onClick: function onClick() {
-        removeItem(option);
-      }
-    }, React__default['default'].createElement(close.SvgClose, null)));
-  }))));
-});
-MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: index.PropTypes.string,
-  placeholder: index.PropTypes.string,
-  options: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(NodeType)
-  })).isRequired,
-  checked: index.PropTypes.array.isRequired,
-  noResultsText: index.PropTypes.string,
-  onChange: index.PropTypes.func.isRequired,
-  onParentChange: index.PropTypes.func
-} : {};
-MultiLevelCheckboxSelect.defaultProps = {
-  checked: []
-};
-
-exports.MultiLevelCheckbox = MultiLevelCheckbox;
-exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;