@ntbjs/react-components 2.0.0-rc.29 → 2.0.0-rc.30

package/build/MultiLevelCheckboxSelect-d8044c88.js

@@ -1,604 +0,0 @@
-import { _ as _extends$1 } from './_rollupPluginBabelHelpers-c245b26a.js';
-import * as React from 'react';
-import React__default, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled, { css } from 'styled-components';
-import './Alert-e6847a22.js';
-import './Badge-d93586a9.js';
-import { P as Popover } from './Popover-20050b91.js';
-import './Tab-04d435c3.js';
-import './Tabs-74d1ea8a.js';
-import './Tooltip-c1d1199e.js';
-import './VerificationStatusIcon-49cb1c1b.js';
-import { C as Checkbox } from './Checkbox-4a5fd716.js';
-import { isEmpty, uniq, isEqual, isArray, isFunction } from 'lodash';
-import { T as TextInput } from './TextInput-fab35842.js';
-import './InputGroup-1294d190.js';
-import { S as SectionSeparator } from './SectionSeparator-f47760a2.js';
-import { S as SvgClose } from './close-a5d37608.js';
-import useUpdateEffect from '@restart/hooks/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.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.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.fieldset.attrs(applyDefaultTheme)`
-  padding: 0;
-  border: 0;
-  margin: 0;
-`;
-const MultiLevelCheckboxLegend = styled.legend.attrs(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.div.attrs(applyDefaultTheme)`
-  text-align: center;
-  opacity: 0.7;
-  font-size: 0.875rem;
-`;
-const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)`
-  display: grid;
-  grid-template-rows: 0fr;
-  padding-left: 28px;
-  transition: grid-template-rows 250ms;
-
-  & > div {
-    overflow: hidden;
-  }
-
-  ${props => props.$expanded && css`
-      grid-template-rows: 1fr;
-    `}
-}
-`;
-const CheckboxTree$1 = styled.div.attrs(applyDefaultTheme)`
-  width: fit-content;
-`;
-const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-  margin-top: 4px;
-`;
-const ExpandTreeButton = styled.button.attrs(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 && css`
-        transform: rotate(0deg);
-      `}
-  }
-}
-`;
-
-function findChildValues(node) {
-  const result = [];
-  function traverse(node) {
-    if (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 (!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.forwardRef(function MultiLevelCheckbox({
-  options,
-  checked,
-  search,
-  label,
-  noResultsText,
-  onChange,
-  ...props
-}, forwardedRef) {
-  const [internalChecked, setInternalChecked] = useState(includeAllChildren(checked, options));
-  const anySearchResults = useMemo(() => {
-    if (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 = useCallback(values => {
-    setInternalChecked(prevChecked => uniq(includeAllChildren([...prevChecked, ...values], options)));
-  }, [options]);
-  const onRemove = useCallback(values => {
-    setInternalChecked(prevChecked => includeAllChildren(prevChecked.filter(v => !values.includes(v)), options, false));
-  }, [options]);
-  useEffect(() => {
-    onChange([...internalChecked].sort());
-  }, [internalChecked, onChange]);
-  useEffect(() => {
-    if (!isEqual([...checked].sort(), [...internalChecked].sort())) {
-      setInternalChecked(includeAllChildren(checked, options));
-    }
-  }, [checked, options]);
-  return React__default.createElement(MultiLevelCheckbox$1, _extends$1({}, props, {
-    ref: forwardedRef
-  }), label && React__default.createElement(MultiLevelCheckboxLegend, null, label), options.map(node => React__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.createElement(MultiLevelCheckboxNoResults, null, noResultsText));
-});
-const NodeType = PropTypes.shape({
-  label: PropTypes.string.isRequired,
-  value: PropTypes.any.isRequired,
-  children: NodeType
-});
-MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired,
-    children: PropTypes.array
-  })),
-  checked: PropTypes.array.isRequired,
-  label: PropTypes.string,
-  search: PropTypes.string,
-  noResultsText: PropTypes.string,
-  onChange: PropTypes.func.isRequired
-} : {};
-MultiLevelCheckbox.defaultProps = {
-  options: [],
-  noResultsText: 'No results.'
-};
-const CheckboxTree = React__default.memo(function CheckboxTree({
-  node,
-  nodes,
-  checked,
-  onAdd,
-  onRemove,
-  search = ''
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [expandedBySearch, setExpandedBySearch] = useState(false);
-  const onChange = useCallback(event => {
-    if (event.target.checked) {
-      onAdd([event.target.value, ...findChildValues(node)]);
-    } else {
-      onRemove([event.target.value, ...findChildValues(node)]);
-    }
-  }, [onAdd, onRemove]);
-  const onChildrenAdd = useCallback(newValues => {
-    if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {
-      return onAdd([node.value, ...newValues]);
-    }
-    onAdd(newValues);
-  }, [node, checked, onAdd]);
-  const hideOption = useMemo(() => {
-    if (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]);
-  useEffect(() => {
-    const childValues = findChildValues(node);
-    const expandBySearch = !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.createElement(CheckboxTree$1, null, React__default.createElement(CheckboxTreeCheckboxContainer, null, isArray(node.children) && node.children.length > 0 && React__default.createElement(ExpandTreeButton, {
-    $expanded: expanded || expandedBySearch,
-    type: "button",
-    onClick: () => {
-      setExpandedBySearch(current => {
-        if (current) {
-          setExpanded(false);
-        } else {
-          setExpanded(v => !v);
-        }
-        return false;
-      });
-    }
-  }, React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 7.4"
-  }, React__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.createElement(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.createElement(CheckboxTreeChildren, {
-    $expanded: expanded || expandedBySearch
-  }, React__default.createElement("div", null, node.children.map(childNode => React__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
-  })))));
-}, isEqual);
-CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
-  node: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired,
-    children: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.any.isRequired,
-      children: PropTypes.arrayOf(PropTypes.any)
-    }))
-  }),
-  nodes: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired,
-    children: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.any.isRequired,
-      children: PropTypes.arrayOf(PropTypes.any)
-    }))
-  })),
-  checked: PropTypes.array.isRequired,
-  search: PropTypes.string,
-  onAdd: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired
-} : {};
-
-const MultiLevelCheckboxSelect$1 = styled.div.attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-`;
-const MultiLevelCheckboxSelectInput = styled.div.attrs(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.div.attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  background: #272727;
-  color: #f7f8f9;
-  font-size: 12px;
-  height: 26px;
-  border-radius: 3px;
-`;
-const ItemLabel = styled.div.attrs(applyDefaultTheme)`
-  padding: 0 5px 0 8px;
-`;
-const ItemRemoveButton = styled.button.attrs(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.div.attrs(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.div.attrs(applyDefaultTheme)`
-  font-size: 0.875rem;
-  line-height: 26px;
-  padding-left: 4px;
-  opacity: 0.4;
-`;
-const PopoverContainer = styled.div.attrs(applyDefaultTheme)`
-  max-height: inherit;
-  display: flex;
-  flex-direction: column;
-`;
-const PopoverHeader = styled.div.attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-`;
-const SearchContainer = styled.div.attrs(applyDefaultTheme)`
-  padding: 12px 8px;
-`;
-const OptionsContainer = styled.div.attrs(applyDefaultTheme)`
-  padding: 12px 8px;
-  overflow: auto;
-  box-sizing: border-box;
-`;
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-function useEventListener(eventName, handler, element, options) {
-  const savedHandler = useRef(handler);
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  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.forwardRef(function MultiLevelCheckboxSelect({
-  label,
-  options,
-  checked: checkedProp,
-  placeholder,
-  noResultsText,
-  onChange,
-  onParentChange,
-  ...props
-}, forwardedRef) {
-  const inputRef = useRef(null);
-  const popoverContentRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const [searchString, setSearchString] = useState('');
-  const [open, setOpen] = useState(false);
-  const handleClickInside = useCallback(() => {
-    setOpen(true);
-    searchInputRef.current?.focus();
-  }, []);
-  const handleKeyDown = 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 = 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 = 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 = 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(() => {
-    if (isFunction(onParentChange)) {
-      onParentChange(checked);
-    }
-  }, [checked]);
-  return React__default.createElement(MultiLevelCheckboxSelect$1, _extends$1({
-    ref: forwardedRef
-  }, props), React__default.createElement(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.createElement(PopoverContainer, {
-      ref: popoverContentRef
-    }, React__default.createElement(PopoverHeader, null, React__default.createElement(SearchContainer, null, React__default.createElement(TextInput, {
-      ref: searchInputRef,
-      onBlur: e => {
-        if (open) {
-          e.target.focus();
-        }
-      },
-      icon: React__default.createElement(SvgSearch, null),
-      value: searchString,
-      onChange: e => setSearchString(e.target.value)
-    })), React__default.createElement(SectionSeparator, null)), React__default.createElement(OptionsContainer, null, React__default.createElement(MultiLevelCheckbox, {
-      options: options,
-      checked: checkedProp,
-      search: searchString,
-      noResultsText: noResultsText,
-      onChange: onChange
-    })))
-  }, React__default.createElement(MultiLevelCheckboxSelectInput, {
-    tabIndex: "0",
-    ref: inputRef
-  }, label && React__default.createElement(Label, null, label), checked.length === 0 && React__default.createElement(Placeholder, null, placeholder), checked.map(option => React__default.createElement(Item, {
-    key: option
-  }, React__default.createElement(ItemLabel, null, getLabelByValue(option)), React__default.createElement(ItemRemoveButton, {
-    onClick: () => {
-      removeItem(option);
-    }
-  }, React__default.createElement(SvgClose, null)))))));
-});
-MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.any.isRequired,
-    children: PropTypes.arrayOf(NodeType)
-  })).isRequired,
-  checked: PropTypes.array.isRequired,
-  noResultsText: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onParentChange: PropTypes.func
-} : {};
-MultiLevelCheckboxSelect.defaultProps = {
-  checked: []
-};
-
-export { MultiLevelCheckbox as M, MultiLevelCheckboxSelect as a, useIsomorphicLayoutEffect as u };

package/build/SectionSeparator-f47760a2.js

@@ -1,31 +0,0 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
-import React__default from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled from 'styled-components';
-
-const SectionSeparator$1 = styled.div.attrs(applyDefaultTheme)`
-  height: ${props => props.vertical ? '100%' : '1px'};
-  width: ${props => props.vertical ? '1px' : '100%'};
-
-  ${props => props.vertical ? `margin-left: ${props.margin}px; margin-right: ${props.margin}px;` : `margin-top: ${props.margin}px; margin-bottom: ${props.margin}px;`}
-
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
-`;
-
-const SectionSeparator = React__default.forwardRef(function SectionSeparator({
-  vertical = false,
-  margin = 0,
-  ...props
-}, forwardedRef) {
-  return React__default.createElement(SectionSeparator$1, _extends({
-    vertical: vertical,
-    margin: margin,
-    ref: forwardedRef
-  }, props));
-});
-SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: PropTypes.bool,
-  margin: PropTypes.number
-} : {};
-
-export { SectionSeparator as S };