@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/MultiLevelCheckboxSelect-d229cf98.js

@@ -0,0 +1,632 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+require('./Alert-8a511bdc.js');
+require('./Badge-aa4cd9c1.js');
+var Popover = require('./Popover-c4be47ea.js');
+require('./Tab-ccbca1f2.js');
+require('./Tabs-b06c0e24.js');
+require('./Tooltip-d5882b82.js');
+require('./VerificationStatusIcon-9876b68f.js');
+var Checkbox = require('./Checkbox-0b8faf49.js');
+var lodash = require('lodash');
+var TextInput = require('./TextInput-3a567daa.js');
+require('./InputGroup-8d4a4644.js');
+var SectionSeparator = require('./SectionSeparator-e06c7660.js');
+var close = require('./close-1751121a.js');
+var useUpdateEffect = require('@restart/hooks/useUpdateEffect');
+
+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);
+var useUpdateEffect__default = /*#__PURE__*/_interopDefaultLegacy(useUpdateEffect);
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__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"
+  })));
+}
+
+const MultiLevelCheckbox$1 = styled__default["default"].fieldset.attrs(defaultTheme.applyDefaultTheme)`
+  padding: 0;
+  border: 0;
+  margin: 0;
+`;
+const MultiLevelCheckboxLegend = styled__default["default"].legend.attrs(defaultTheme.applyDefaultTheme)`
+  line-height: 1.2;
+  font-size: 0.75rem;
+  padding: 0 0 4px;
+  letter-spacing: 0.03em;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+`;
+const MultiLevelCheckboxNoResults = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  text-align: center;
+  opacity: 0.7;
+  font-size: 0.875rem;
+`;
+const CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: grid;
+  grid-template-rows: 0fr;
+  padding-left: 28px;
+  transition: grid-template-rows 250ms;
+
+  & > div {
+    overflow: hidden;
+  }
+
+  ${props => props.$expanded && styled.css`
+      grid-template-rows: 1fr;
+    `}
+}
+`;
+const CheckboxTree$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  width: fit-content;
+`;
+const CheckboxTreeCheckboxContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: relative;
+  margin-top: 4px;
+`;
+const ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  position: absolute;
+  height: 100%;
+  cursor: pointer;
+  color: currentColor;
+
+  & > svg {
+    display: block;
+    width: 10px;
+    transform: rotate(-90deg);
+    transition: transform 250ms;
+
+    ${props => props.$expanded && styled.css`
+        transform: rotate(0deg);
+      `}
+  }
+}
+`;
+
+function findChildValues(node) {
+  const result = [];
+  function traverse(node) {
+    if (lodash.isArray(node.children) && node.children.length > 0) {
+      node.children.forEach(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(childNode => checkedValues.includes(childNode.value))) {
+    return true;
+  }
+  return node.children.some(childNode => 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(childNode => !checkedValues.includes(childNode.value))) {
+    return false;
+  }
+  return node.children.every(childNode => hasAllChildrenSelected(childNode, childNode.value, checkedValues));
+}
+function getLabelByValue(targetValue, nodes) {
+  for (const node of nodes) {
+    if (node.value === targetValue) {
+      return node.label;
+    }
+    if (node.children) {
+      const result = getLabelByValue(targetValue, node.children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+const MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLevelCheckbox({
+  options,
+  checked,
+  search,
+  label,
+  noResultsText,
+  onChange,
+  ...props
+}, forwardedRef) {
+  const [internalChecked, setInternalChecked] = React.useState(includeAllChildren(checked, options));
+  const anySearchResults = React.useMemo(() => {
+    if (lodash.isEmpty(search)) {
+      return true;
+    }
+    return options.some(node => {
+      const childValues = findChildValues(node);
+      return [node.value, ...childValues].map(v => getLabelByValue(v, options)).some(v => v.match(new RegExp(search, 'i')));
+    });
+  }, [options, search]);
+  function includeAllChildren(checked, nodes, honorParent = true) {
+    let newChecked = [];
+    function fillSiblings(nodes) {
+      nodes.forEach(node => {
+        if (hasAllChildrenSelected(node, node.value, checked)) {
+          newChecked.push(node.value);
+        }
+        if (honorParent && checked.includes(node.value)) {
+          const childValues = findChildValues(node);
+          return newChecked = newChecked.concat([node.value, ...childValues]);
+        }
+        if (node.children) {
+          fillSiblings(node.children);
+        }
+      });
+    }
+    fillSiblings(nodes);
+    return newChecked;
+  }
+  const onAdd = React.useCallback(values => {
+    setInternalChecked(prevChecked => lodash.uniq(includeAllChildren([...prevChecked, ...values], options)));
+  }, [options]);
+  const onRemove = React.useCallback(values => {
+    setInternalChecked(prevChecked => includeAllChildren(prevChecked.filter(v => !values.includes(v)), options, false));
+  }, [options]);
+  React.useEffect(() => {
+    onChange([...internalChecked].sort());
+  }, [internalChecked, onChange]);
+  React.useEffect(() => {
+    if (!lodash.isEqual([...checked].sort(), [...internalChecked].sort())) {
+      setInternalChecked(includeAllChildren(checked, options));
+    }
+  }, [checked, options]);
+  return React__default["default"].createElement(MultiLevelCheckbox$1, _rollupPluginBabelHelpers._extends({}, props, {
+    ref: forwardedRef
+  }), label && React__default["default"].createElement(MultiLevelCheckboxLegend, null, label), options.map(node => React__default["default"].createElement(CheckboxTree, {
+    key: node.value,
+    nodes: options,
+    node: node,
+    checked: checked.filter(c => [node.value, ...findChildValues(node)].includes(c)),
+    onAdd: onAdd,
+    onRemove: onRemove,
+    search: search
+  })), !anySearchResults && React__default["default"].createElement(MultiLevelCheckboxNoResults, null, noResultsText));
+});
+const NodeType = defaultTheme.PropTypes.shape({
+  label: defaultTheme.PropTypes.string.isRequired,
+  value: defaultTheme.PropTypes.any.isRequired,
+  children: NodeType
+});
+MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  options: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.array
+  })),
+  checked: defaultTheme.PropTypes.array.isRequired,
+  label: defaultTheme.PropTypes.string,
+  search: defaultTheme.PropTypes.string,
+  noResultsText: defaultTheme.PropTypes.string,
+  onChange: defaultTheme.PropTypes.func.isRequired
+} : {};
+MultiLevelCheckbox.defaultProps = {
+  options: [],
+  noResultsText: 'No results.'
+};
+const CheckboxTree = React__default["default"].memo(function CheckboxTree({
+  node,
+  nodes,
+  checked,
+  onAdd,
+  onRemove,
+  search = ''
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [expandedBySearch, setExpandedBySearch] = React.useState(false);
+  const onChange = React.useCallback(event => {
+    if (event.target.checked) {
+      onAdd([event.target.value, ...findChildValues(node)]);
+    } else {
+      onRemove([event.target.value, ...findChildValues(node)]);
+    }
+  }, [onAdd, onRemove]);
+  const onChildrenAdd = React.useCallback(newValues => {
+    if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {
+      return onAdd([node.value, ...newValues]);
+    }
+    onAdd(newValues);
+  }, [node, checked, onAdd]);
+  const hideOption = React.useMemo(() => {
+    if (lodash.isEmpty(search)) {
+      return;
+    }
+    const childValues = findChildValues(node);
+    return ![node.value, ...childValues].map(v => getLabelByValue(v, nodes)).some(v => v.match(new RegExp(search, 'i')));
+  }, [node, nodes, search]);
+  React.useEffect(() => {
+    const childValues = findChildValues(node);
+    const expandBySearch = !lodash.isEmpty(search) && [node.value, ...childValues].map(v => getLabelByValue(v, nodes)).some(v => 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: () => {
+      setExpandedBySearch(current => {
+        if (current) {
+          setExpanded(false);
+        } else {
+          setExpanded(v => !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(childNode => React__default["default"].createElement(CheckboxTree, {
+    key: childNode.value,
+    checked: checked.filter(c => [childNode.value, ...findChildValues(childNode)].includes(c)),
+    onAdd: onChildrenAdd,
+    onRemove: onRemove,
+    node: childNode,
+    nodes: nodes,
+    search: search
+  })))));
+}, lodash.isEqual);
+CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  node: defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+      label: defaultTheme.PropTypes.string.isRequired,
+      value: defaultTheme.PropTypes.any.isRequired,
+      children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
+    }))
+  }),
+  nodes: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+      label: defaultTheme.PropTypes.string.isRequired,
+      value: defaultTheme.PropTypes.any.isRequired,
+      children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
+    }))
+  })),
+  checked: defaultTheme.PropTypes.array.isRequired,
+  search: defaultTheme.PropTypes.string,
+  onAdd: defaultTheme.PropTypes.func.isRequired,
+  onRemove: defaultTheme.PropTypes.func.isRequired
+} : {};
+
+const MultiLevelCheckboxSelect$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: relative;
+  border: 1px solid;
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 44px;
+  box-sizing: border-box;
+  padding: 8px 6px;
+  border-radius: 3px;
+  transition: border-color 350ms;
+
+  &:focus-within {
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1)}
+  }
+`;
+const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  background: #272727;
+  color: #f7f8f9;
+  font-size: 12px;
+  height: 26px;
+  border-radius: 3px;
+`;
+const ItemLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding: 0 5px 0 8px;
+`;
+const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+  color: inherit;
+  border: none;
+  background: none;
+  -webkit-appearance: none;
+  height: 100%;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding: 0 7px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.getColor('red-500')};
+  }
+
+  & > svg {
+    width: 8px;
+    display: block;
+  }
+`;
+const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: -8px;
+  left: 7px;
+  line-height: 1.2;
+  font-size: 0.75rem;
+  font-weight: 400;
+  padding: 0 3px;
+  //padding: 0 0 4px;
+  letter-spacing: 0.03em;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+  ${props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`)}
+`;
+const Placeholder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  line-height: 26px;
+  padding-left: 4px;
+  opacity: 0.4;
+`;
+const PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  max-height: inherit;
+  display: flex;
+  flex-direction: column;
+`;
+const PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+`;
+const SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding: 12px 8px;
+`;
+const OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding: 12px 8px;
+  overflow: auto;
+  box-sizing: border-box;
+`;
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = React.useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  React.useEffect(() => {
+    const targetElement = element?.current ?? window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+    const listener = event => savedHandler.current(event);
+    targetElement.addEventListener(eventName, listener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+function useOnClickOutside(ref, handler, mouseEvent = 'mousedown') {
+  useEventListener(mouseEvent, event => {
+    const el = ref?.current;
+    if (!el || el.contains(event.target)) {
+      return;
+    }
+    handler(event);
+  });
+}
+
+const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function MultiLevelCheckboxSelect({
+  label,
+  options,
+  checked: checkedProp,
+  placeholder,
+  noResultsText,
+  onChange,
+  onParentChange,
+  ...props
+}, forwardedRef) {
+  const inputRef = React.useRef(null);
+  const popoverContentRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const [searchString, setSearchString] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const handleClickInside = React.useCallback(() => {
+    setOpen(true);
+    searchInputRef.current?.focus();
+  }, []);
+  const handleKeyDown = React.useCallback(event => {
+    if (!open) return;
+    if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }, [open]);
+  useEventListener('focus', handleClickInside, inputRef);
+  useEventListener('mousedown', handleClickInside, inputRef);
+  useEventListener('keydown', handleKeyDown);
+  const handleClickOutside = event => {
+    if (popoverContentRef?.current === event.target || popoverContentRef?.current?.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  useOnClickOutside(inputRef, handleClickOutside);
+  const checked = React.useMemo(() => {
+    const checkedParents = [];
+    function iterate(nodes) {
+      nodes.forEach(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)]);
+  const getLabelByValue = React.useCallback((targetValue, nodes = options) => {
+    for (const node of nodes) {
+      if (node.value === targetValue) {
+        return node.label;
+      }
+      if (node.children) {
+        const result = getLabelByValue(targetValue, node.children);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }, [options]);
+  const removeItem = React.useCallback(value => {
+    let node = null;
+    function findNodeByValue(options, value) {
+      for (let 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) {
+      const childValues = findChildValues(node);
+      const valuesToRemove = [value, ...childValues];
+      onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));
+    }
+  }, [options, checkedProp]);
+  useUpdateEffect__default["default"](() => {
+    if (lodash.isFunction(onParentChange)) {
+      onParentChange(checked);
+    }
+  }, [checked]);
+  return React__default["default"].createElement(MultiLevelCheckboxSelect$1, _rollupPluginBabelHelpers._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: ({
+        state
+      }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      effect: ({
+        state
+      }) => {
+        state.elements.popper.style.width = `${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: e => {
+        if (open) {
+          e.target.focus();
+        }
+      },
+      icon: React__default["default"].createElement(SvgSearch, null),
+      value: searchString,
+      onChange: e => 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(option => React__default["default"].createElement(Item, {
+    key: option
+  }, React__default["default"].createElement(ItemLabel, null, getLabelByValue(option)), React__default["default"].createElement(ItemRemoveButton, {
+    onClick: () => {
+      removeItem(option);
+    }
+  }, React__default["default"].createElement(close.SvgClose, null)))))));
+});
+MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  options: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(NodeType)
+  })).isRequired,
+  checked: defaultTheme.PropTypes.array.isRequired,
+  noResultsText: defaultTheme.PropTypes.string,
+  onChange: defaultTheme.PropTypes.func.isRequired,
+  onParentChange: defaultTheme.PropTypes.func
+} : {};
+MultiLevelCheckboxSelect.defaultProps = {
+  checked: []
+};
+
+exports.MultiLevelCheckbox = MultiLevelCheckbox;
+exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;