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

package/{esm/components → build}/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js

@@ -1,34 +1,24 @@
 import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9;
-const MultiLevelCheckbox = styled.fieldset.attrs(applyDefaultTheme)(_t || (_t = _`
+const MultiLevelCheckbox = styled.fieldset.attrs(applyDefaultTheme)`
   padding: 0;
   border: 0;
   margin: 0;
-`));
-const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+`;
+const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)`
   line-height: 1.2;
   font-size: 0.75rem;
   padding: 0 0 4px;
   letter-spacing: 0.03em;
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const MultiLevelCheckboxNoResults = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  ${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)(_t4 || (_t4 = _`
+`;
+const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)`
   display: grid;
   grid-template-rows: 0fr;
   padding-left: 28px;
@@ -38,19 +28,19 @@ const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _
     overflow: hidden;
   }
 
-  ${0}
-}
-`), props => props.$expanded && css(_t5 || (_t5 = _`
+  ${props => props.$expanded && css`
       grid-template-rows: 1fr;
-    `)));
-const CheckboxTree = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+    `}
+}
+`;
+const CheckboxTree = styled.div.attrs(applyDefaultTheme)`
   width: fit-content;
-`));
-const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+`;
+const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)`
   position: relative;
   margin-top: 4px;
-`));
-const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+`;
+const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)`
   -webkit-appearance: none;
   background: none;
   border: none;
@@ -65,11 +55,12 @@ const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
     transform: rotate(-90deg);
     transition: transform 250ms;
 
-    ${0}
+    ${props => props.$expanded && css`
+        transform: rotate(0deg);
+      `}
   }
 }
-`), props => props.$expanded && css(_t9 || (_t9 = _`
-        transform: rotate(0deg);
-      `)));
+`;
 
 export { CheckboxTree, CheckboxTreeCheckboxContainer, CheckboxTreeChildren, ExpandTreeButton, MultiLevelCheckbox, MultiLevelCheckboxLegend, MultiLevelCheckboxNoResults };
+//# sourceMappingURL=MultiLevelCheckbox.styled.js.map

package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLevelCheckbox.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const MultiLevelCheckbox = styled.fieldset.attrs(applyDefaultTheme)`\n  padding: 0;\n  border: 0;\n  margin: 0;\n`;\n\nexport const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)`\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n`;\n\nexport const MultiLevelCheckboxNoResults = styled.div.attrs(applyDefaultTheme)`\n  text-align: center;\n  opacity: 0.7;\n  font-size: 0.875rem;\n`;\n\nexport const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)`\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  ${props =>\n    props.$expanded &&\n    css`\n      grid-template-rows: 1fr;\n    `}\n}\n`;\n\nexport const CheckboxTree = styled.div.attrs(applyDefaultTheme)`\n  width: fit-content;\n`;\n\nexport const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n  margin-top: 4px;\n`;\n\nexport const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)`\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    ${props =>\n      props.$expanded &&\n      css`\n        transform: rotate(0deg);\n      `}\n  }\n}\n`;\n"],"names":["MultiLevelCheckbox","styled","fieldset","attrs","applyDefaultTheme","MultiLevelCheckboxLegend","legend","props","theme","themeProp","getColor","MultiLevelCheckboxNoResults","div","CheckboxTreeChildren","$expanded","css","CheckboxTree","CheckboxTreeCheckboxContainer","ExpandTreeButton","button"],"mappings":";;;AAGO,MAAMA,kBAAkB,GAAGC,MAAM,CAACC,QAAQ,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1E;AACA;AACA;AACA,EAAC;AAEM,MAAMC,wBAAwB,GAAGJ,MAAM,CAACK,MAAM,CAACH,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC9E;AACA;AACA;AACA;AACA,EAAIG,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,2BAA2B,GAAGV,MAAM,CAACW,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC9E;AACA;AACA;AACA,EAAC;AAEM,MAAMS,oBAAoB,GAAGZ,MAAM,CAACW,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAC;AAEM,MAAMC,YAAY,GAAGf,MAAM,CAACW,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC/D;AACA,EAAC;AAEM,MAAMa,6BAA6B,GAAGhB,MAAM,CAACW,GAAG,CAACT,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAChF;AACA;AACA,EAAC;AAEM,MAAMc,gBAAgB,GAAGjB,MAAM,CAACkB,MAAM,CAAChB,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,CAAA;AACT;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;;;;"}

package/build/inputs/MultiLevelCheckbox/index.js

@@ -0,0 +1,3 @@
+export { default } from './MultiLevelCheckbox.js';
+export { NodeType, findChildValues } from './types.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/MultiLevelCheckbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/build/inputs/MultiLevelCheckbox/types.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const NodeType = 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.array
+  }))
+});
+function findChildValues(node) {
+  const result = [];
+  function traverse(node) {
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      node.children.forEach(child => {
+        result.push(child.value);
+        traverse(child);
+      });
+    }
+  }
+  traverse(node);
+  return result;
+}
+
+export { NodeType, findChildValues };
+//# sourceMappingURL=types.js.map

package/build/inputs/MultiLevelCheckbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/types.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// Define NodeType without self-reference to avoid circular dependency\nexport const NodeType = PropTypes.shape({\n  label: PropTypes.string.isRequired,\n  value: PropTypes.any.isRequired,\n  children: PropTypes.arrayOf(PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    value: PropTypes.any.isRequired,\n    children: PropTypes.array\n  }))\n});\n\nexport function findChildValues(node) {\n  const result = [];\n  \n  function traverse(node) {\n    if (Array.isArray(node.children) && node.children.length > 0) {\n      node.children.forEach(child => {\n        result.push(child.value);\n        traverse(child);\n      });\n    }\n  }\n  \n  traverse(node);\n  return result;\n}\n"],"names":["NodeType","PropTypes","shape","label","string","isRequired","value","any","children","arrayOf","array","findChildValues","node","result","traverse","Array","isArray","length","forEach","child","push"],"mappings":";;MAGaA,QAAQ,GAAGC,SAAS,CAACC,KAAK,CAAC;AACtCC,EAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCC,EAAAA,KAAK,EAAEL,SAAS,CAACM,GAAG,CAACF,UAAU;EAC/BG,QAAQ,EAAEP,SAAS,CAACQ,OAAO,CAACR,SAAS,CAACC,KAAK,CAAC;AAC1CC,IAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCC,IAAAA,KAAK,EAAEL,SAAS,CAACM,GAAG,CAACF,UAAU;IAC/BG,QAAQ,EAAEP,SAAS,CAACS,KAAAA;AACtB,GAAC,CAAC,CAAA;AACJ,CAAC,EAAC;AAEK,SAASC,eAAeA,CAACC,IAAI,EAAE;EACpC,MAAMC,MAAM,GAAG,EAAE,CAAA;EAEjB,SAASC,QAAQA,CAACF,IAAI,EAAE;AACtB,IAAA,IAAIG,KAAK,CAACC,OAAO,CAACJ,IAAI,CAACJ,QAAQ,CAAC,IAAII,IAAI,CAACJ,QAAQ,CAACS,MAAM,GAAG,CAAC,EAAE;AAC5DL,MAAAA,IAAI,CAACJ,QAAQ,CAACU,OAAO,CAACC,KAAK,IAAI;AAC7BN,QAAAA,MAAM,CAACO,IAAI,CAACD,KAAK,CAACb,KAAK,CAAC,CAAA;QACxBQ,QAAQ,CAACK,KAAK,CAAC,CAAA;AACjB,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;EAEAL,QAAQ,CAACF,IAAI,CAAC,CAAA;AACd,EAAA,OAAOC,MAAM,CAAA;AACf;;;;"}

package/{esm/components → build}/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js

@@ -1,42 +1,46 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { MultiLevelCheckboxSelect as MultiLevelCheckboxSelect$2, PopoverContainer, PopoverHeader, SearchContainer, OptionsContainer, MultiLevelCheckboxSelectInput, Label, Placeholder, Item, ItemLabel, ItemRemoveButton } from './MultiLevelCheckboxSelect.styled.js';
-import { ReactComponent as SvgSearch } from '../../../icons/search.svg.js';
-import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
-import MultiLevelCheckbox, { NodeType, findChildValues } from '../MultiLevelCheckbox/MultiLevelCheckbox.js';
-import { useEventListener } from '../../../hooks/useEventListner.js';
-import { useOnClickOutside } from '../../../hooks/useOnClickOutside.js';
-import useUpdateEffect from '../../../node_modules/@restart/hooks/esm/useUpdateEffect.js';
-import { isFunction } from 'lodash';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { MultiLevelCheckboxSelect as MultiLevelCheckboxSelect$1, PopoverContainer, PopoverHeader, SearchContainer, OptionsContainer, MultiLevelCheckboxSelectInput, Label, Placeholder, Item, ItemLabel, ItemRemoveButton } from './MultiLevelCheckboxSelect.styled.js';
+import '../../data/Alert/Alert.js';
+import '../../data/Badge/Badge.js';
 import Popover from '../../data/Popover/Popover.js';
+import '../../data/Tab/Tab.js';
+import '../../data/Tabs/Tabs.js';
+import '../../data/Tooltip/Tooltip.js';
+import '../../data/VerificationStatusIcon/VerificationStatusIcon.js';
+import MultiLevelCheckbox from '../MultiLevelCheckbox/MultiLevelCheckbox.js';
+import { NodeType, findChildValues } from '../MultiLevelCheckbox/types.js';
 import TextInput from '../TextInput/TextInput.js';
+import '../../layout/InputGroup/InputGroup.js';
 import SectionSeparator from '../../layout/SectionSeparator/SectionSeparator.js';
-import { r as react } from '../../../_virtual/index.js';
+import { ReactComponent as SvgSearch } from '../../icons/search.svg.js';
+import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
+import { useEventListener } from '../../hooks/useEventListner.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+import useUpdateEffect from '@restart/hooks/useUpdateEffect';
+import { isFunction } from 'lodash';
 
-const _excluded = ["label", "options", "checked", "placeholder", "noResultsText", "onChange", "onParentChange"];
-const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(_ref, forwardedRef) {
-  let {
-      label,
-      options,
-      checked: checkedProp,
-      placeholder,
-      noResultsText,
-      onChange,
-      onParentChange
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const inputRef = react.exports.useRef(null);
-  const popoverContentRef = react.exports.useRef(null);
-  const searchInputRef = react.exports.useRef(null);
-  const [searchString, setSearchString] = react.exports.useState('');
-  const [open, setOpen] = react.exports.useState(false);
-  const handleClickInside = react.exports.useCallback(() => {
-    var _searchInputRef$curre;
+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$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+    searchInputRef.current?.focus();
   }, []);
-  const handleKeyDown = react.exports.useCallback(event => {
+  const handleKeyDown = useCallback(event => {
     if (!open) return;
     if (event.key === 'Escape') {
       setOpen(false);
@@ -46,14 +50,13 @@ const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSel
   useEventListener('mousedown', handleClickInside, inputRef);
   useEventListener('keydown', handleKeyDown);
   const 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)) {
+    if (popoverContentRef?.current === event.target || popoverContentRef?.current?.contains(event.target)) {
       return;
     }
     setOpen(false);
   };
   useOnClickOutside(inputRef, handleClickOutside);
-  const checked = react.exports.useMemo(() => {
+  const checked = useMemo(() => {
     const checkedParents = [];
     function iterate(nodes) {
       nodes.forEach(node => {
@@ -68,7 +71,7 @@ const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSel
     iterate(options);
     return checkedParents.sort();
   }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
-  const getLabelByValue = react.exports.useCallback((targetValue, nodes = options) => {
+  const getLabelByValue = useCallback((targetValue, nodes = options) => {
     for (const node of nodes) {
       if (node.value === targetValue) {
         return node.label;
@@ -82,7 +85,7 @@ const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSel
     }
     return null;
   }, [options]);
-  const removeItem = react.exports.useCallback(value => {
+  const removeItem = useCallback(value => {
     let node = null;
     function findNodeByValue(options, value) {
       for (let i = 0; i < options.length; i++) {
@@ -107,9 +110,9 @@ const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSel
       onParentChange(checked);
     }
   }, [checked]);
-  return React.createElement(MultiLevelCheckboxSelect$2, _extends({
+  return React__default.createElement(MultiLevelCheckboxSelect$1, _extends({
     ref: forwardedRef
-  }, props), React.createElement(Popover, {
+  }, props), React__default.createElement(Popover, {
     visible: open,
     arrow: false,
     placement: 'bottom',
@@ -130,35 +133,35 @@ const MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSel
         state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
       }
     }],
-    content: React.createElement(PopoverContainer, {
+    content: React__default.createElement(PopoverContainer, {
       ref: popoverContentRef
-    }, React.createElement(PopoverHeader, null, React.createElement(SearchContainer, null, React.createElement(TextInput, {
+    }, 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.createElement(SvgSearch, null),
+      icon: React__default.createElement(SvgSearch, null),
       value: searchString,
       onChange: e => setSearchString(e.target.value)
-    })), React.createElement(SectionSeparator, null)), React.createElement(OptionsContainer, null, React.createElement(MultiLevelCheckbox, {
+    })), 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.createElement(MultiLevelCheckboxSelectInput, {
+  }, React__default.createElement(MultiLevelCheckboxSelectInput, {
     tabIndex: "0",
     ref: inputRef
-  }, label && React.createElement(Label, null, label), checked.length === 0 && React.createElement(Placeholder, null, placeholder), checked.map(option => React.createElement(Item, {
+  }, 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.createElement(ItemLabel, null, getLabelByValue(option)), React.createElement(ItemRemoveButton, {
+  }, React__default.createElement(ItemLabel, null, getLabelByValue(option)), React__default.createElement(ItemRemoveButton, {
     onClick: () => {
       removeItem(option);
     }
-  }, React.createElement(SvgClose, null)))))));
+  }, React__default.createElement(SvgClose, null)))))));
 });
 MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
@@ -176,6 +179,6 @@ MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
 MultiLevelCheckboxSelect.defaultProps = {
   checked: []
 };
-var MultiLevelCheckboxSelect$1 = MultiLevelCheckboxSelect;
 
-export { MultiLevelCheckboxSelect$1 as default };
+export { MultiLevelCheckboxSelect as default };
+//# sourceMappingURL=MultiLevelCheckboxSelect.js.map

package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './MultiLevelCheckboxSelect.styled';\nimport { Popover } from '../../data';\nimport MultiLevelCheckbox from '../MultiLevelCheckbox';\nimport TextInput from '../TextInput';\nimport { SectionSeparator } from '../../layout';\nimport { ReactComponent as SearchIcon } from '../../../icons/search.svg';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { findChildValues, NodeType } from '../MultiLevelCheckbox';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\n\n/**\n * MultiLevelCheckboxSelect allow the user to select one or more items from a nested set into a MultiSelect-styled input.\n *\n * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop. On any selection or deselection onChange will be called with an updated `checked`-list.\n *\n * ### Import\n *\n * ```js\n * import { MultiLevelCheckboxSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckboxSelect from '@ntbjs/react-components/inputs/MultiLevelCheckboxSelect'\n * ```\n */\nconst MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(\n  {\n    label,\n    options,\n    checked: checkedProp,\n    placeholder,\n    noResultsText,\n    onChange,\n    onParentChange,\n    ...props\n  },\n  forwardedRef\n) {\n  const inputRef = useRef(null);\n  const popoverContentRef = useRef(null);\n  const searchInputRef = useRef(null);\n  // const [internalChecked, setInternalChecked] = useState([]);\n  const [searchString, setSearchString] = useState('');\n  const [open, setOpen] = useState(false);\n\n  const handleClickInside = useCallback(() => {\n    setOpen(true);\n    searchInputRef.current?.focus();\n  }, []);\n\n  const handleKeyDown = useCallback(\n    event => {\n      if (!open) return;\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    },\n    [open]\n  );\n\n  useEventListener('focus', handleClickInside, inputRef);\n  useEventListener('mousedown', handleClickInside, inputRef);\n  useEventListener('keydown', handleKeyDown);\n\n  const handleClickOutside = event => {\n    if (\n      popoverContentRef?.current === event.target ||\n      popoverContentRef?.current?.contains(event.target)\n    ) {\n      return;\n    }\n    setOpen(false);\n  };\n\n  useOnClickOutside(inputRef, handleClickOutside);\n\n  const checked = useMemo(() => {\n    const checkedParents = [];\n\n    function iterate(nodes) {\n      nodes.forEach(node => {\n        if (checkedProp.includes(node.value)) {\n          return checkedParents.push(node.value);\n        }\n\n        if (node.children) {\n          iterate(node.children);\n        }\n      });\n    }\n\n    iterate(options);\n    return checkedParents.sort();\n  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);\n\n  const getLabelByValue = useCallback(\n    (targetValue, nodes = options) => {\n      for (const node of nodes) {\n        if (node.value === targetValue) {\n          return node.label;\n        }\n\n        if (node.children) {\n          const result = getLabelByValue(targetValue, node.children);\n          if (result) {\n            return result;\n          }\n        }\n      }\n\n      return null; // Return null if the value is not found in the array\n    },\n    [options]\n  );\n\n  const removeItem = useCallback(\n    value => {\n      let node = null;\n\n      function findNodeByValue(options, value) {\n        for (let i = 0; i < options.length; i++) {\n          if (options[i].value === value) {\n            node = options[i];\n            break; // This will exit the loop when the condition is met\n          }\n\n          if (options[i].children) {\n            findNodeByValue(options[i].children, value);\n          }\n        }\n      }\n\n      findNodeByValue(options, value);\n\n      if (node) {\n        const childValues = findChildValues(node);\n        const valuesToRemove = [value, ...childValues];\n        onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));\n      }\n    },\n    [options, checkedProp]\n  );\n\n  useUpdateEffect(() => {\n    if (isFunction(onParentChange)) {\n      onParentChange(checked);\n    }\n  }, [checked]);\n\n  return (\n    <S.MultiLevelCheckboxSelect ref={forwardedRef} {...props}>\n      <Popover\n        visible={open}\n        arrow={false}\n        placement={'bottom'}\n        offset={[0, 6]}\n        modifiers={[\n          {\n            name: 'sameWidth',\n            enabled: true,\n            phase: 'beforeWrite',\n            requires: ['computeStyles'],\n            fn: ({ state }) => {\n              state.styles.popper.width = `${state.rects.reference.width}px`;\n            },\n            effect: ({ state }) => {\n              state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;\n            }\n          }\n        ]}\n        content={\n          <S.PopoverContainer ref={popoverContentRef}>\n            <S.PopoverHeader>\n              <S.SearchContainer>\n                <TextInput\n                  ref={searchInputRef}\n                  onBlur={e => {\n                    if (open) {\n                      e.target.focus();\n                    }\n                  }}\n                  icon={<SearchIcon />}\n                  value={searchString}\n                  onChange={e => setSearchString(e.target.value)}\n                />\n              </S.SearchContainer>\n              <SectionSeparator />\n            </S.PopoverHeader>\n            <S.OptionsContainer>\n              <MultiLevelCheckbox\n                options={options}\n                checked={checkedProp}\n                search={searchString}\n                noResultsText={noResultsText}\n                onChange={onChange}\n              />\n            </S.OptionsContainer>\n          </S.PopoverContainer>\n        }\n      >\n        <S.MultiLevelCheckboxSelectInput tabIndex=\"0\" ref={inputRef}>\n          {label && <S.Label>{label}</S.Label>}\n          {checked.length === 0 && <S.Placeholder>{placeholder}</S.Placeholder>}\n          {checked.map(option => (\n            <S.Item key={option}>\n              <S.ItemLabel>{getLabelByValue(option)}</S.ItemLabel>\n              <S.ItemRemoveButton\n                onClick={() => {\n                  removeItem(option);\n                }}\n              >\n                <CloseIcon />\n              </S.ItemRemoveButton>\n            </S.Item>\n          ))}\n        </S.MultiLevelCheckboxSelectInput>\n      </Popover>\n    </S.MultiLevelCheckboxSelect>\n  );\n});\n\nMultiLevelCheckboxSelect.propTypes = {\n  /**\n   * Label text for the MultiLevelCheckbox\n   */\n  label: PropTypes.string,\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Select categories...\"\n   */\n  placeholder: PropTypes.string,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      value: PropTypes.any.isRequired,\n      children: PropTypes.arrayOf(NodeType)\n    })\n  ).isRequired,\n\n  /**\n   * Array of checked option values\n   */\n  checked: PropTypes.array.isRequired,\n\n  /**\n   * Optional text to display when no results are found while searching.`\n   */\n  noResultsText: PropTypes.string,\n\n  /**\n   *  Callback function for the `onChange` event\n   */\n  onChange: PropTypes.func.isRequired,\n\n  /**\n   *  Callback function for the `onChange` event – returns only the checked parents\n   */\n  onParentChange: PropTypes.func\n};\n\nMultiLevelCheckboxSelect.defaultProps = {\n  checked: []\n};\n\nexport default MultiLevelCheckboxSelect;\n"],"names":["MultiLevelCheckboxSelect","React","forwardRef","label","options","checked","checkedProp","placeholder","noResultsText","onChange","onParentChange","props","forwardedRef","inputRef","useRef","popoverContentRef","searchInputRef","searchString","setSearchString","useState","open","setOpen","handleClickInside","useCallback","current","focus","handleKeyDown","event","key","useEventListener","handleClickOutside","target","contains","useOnClickOutside","useMemo","checkedParents","iterate","nodes","forEach","node","includes","value","push","children","sort","JSON","stringify","getLabelByValue","targetValue","result","removeItem","findNodeByValue","i","length","childValues","findChildValues","valuesToRemove","filter","useUpdateEffect","isFunction","createElement","S","_extends","ref","Popover","visible","arrow","placement","offset","modifiers","name","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","content","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","shape","isRequired","any","NodeType","array","func","defaultProps"],"mappings":"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"}

package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const MultiLevelCheckboxSelect = 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;
+`;
+
+export { Item, ItemLabel, ItemRemoveButton, Label, MultiLevelCheckboxSelect, MultiLevelCheckboxSelectInput, OptionsContainer, Placeholder, PopoverContainer, PopoverHeader, SearchContainer };
+//# sourceMappingURL=MultiLevelCheckboxSelect.styled.js.map

package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLevelCheckboxSelect.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const MultiLevelCheckboxSelect = styled.div.attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\nexport const MultiLevelCheckboxSelectInput = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\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    ${props =>\n      props.theme.themeProp(\n        'border-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-600'),\n        1\n      )}\n  }\n`;\nexport const Item = styled.div.attrs(applyDefaultTheme)`\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`;\n\nexport const ItemLabel = styled.div.attrs(applyDefaultTheme)`\n  padding: 0 5px 0 8px;\n`;\nexport const ItemRemoveButton = styled.button.attrs(applyDefaultTheme)`\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: ${props => props.theme.getColor('red-500')};\n  }\n\n  & > svg {\n    width: 8px;\n    display: block;\n  }\n`;\n\nexport const Label = styled.div.attrs(applyDefaultTheme)`\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  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`,\n      `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`\n    )}\n`;\n\nexport const Placeholder = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  line-height: 26px;\n  padding-left: 4px;\n  opacity: 0.4;\n`;\n\nexport const PopoverContainer = styled.div.attrs(applyDefaultTheme)`\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const PopoverHeader = styled.div.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-700'),\n      props.theme.getColor('white')\n    )}\n`;\nexport const SearchContainer = styled.div.attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n`;\n\nexport const OptionsContainer = styled.div.attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n`;\n"],"names":["MultiLevelCheckboxSelect","styled","div","attrs","applyDefaultTheme","props","theme","primaryFontFamily","MultiLevelCheckboxSelectInput","themeProp","getColor","Item","ItemLabel","ItemRemoveButton","button","Label","Placeholder","PopoverContainer","PopoverHeader","SearchContainer","OptionsContainer"],"mappings":"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"}

package/build/inputs/MultiLevelCheckboxSelect/index.js

@@ -0,0 +1,2 @@
+export { default } from './MultiLevelCheckboxSelect.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/MultiLevelCheckboxSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}