@ntbjs/react-components 2.0.13 → 3.0.0-rc.1

package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js

@@ -1,7 +1,5 @@
-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 { MultiLevelCheckboxSelect as MultiLevelCheckboxSelect$1, MultiLevelCheckboxSelectInput, Label, Placeholder, Item, ItemLabel, ItemRemoveButton, PopoverContainer, PopoverHeader, SearchContainer, OptionsContainer } from './MultiLevelCheckboxSelect.styled.js';
 import '../../data/Alert/Alert.js';
 import '../../data/Badge/Badge.js';
 import Popover from '../../data/Popover/Popover.js';
@@ -11,7 +9,7 @@ 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 { findChildValues } from '../MultiLevelCheckbox/types.js';
 import TextInput from '../TextInput/TextInput.js';
 import '../../layout/InputGroup/InputGroup.js';
 import SectionSeparator from '../../layout/SectionSeparator/SectionSeparator.js';
@@ -21,11 +19,22 @@ import { useEventListener } from '../../hooks/useEventListner.js';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
 import useUpdateEffect from '@restart/hooks/useUpdateEffect';
 import { isFunction } from 'lodash';
+import { size } from '@floating-ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+const EMPTY_ARRAY = [];
+const SAME_WIDTH_AS_REFERENCE = [size({
+  apply({
+    rects,
+    elements
+  }) {
+    elements.floating.style.width = `${rects.reference.width}px`;
+  }
+})];
 const MultiLevelCheckboxSelect = React__default.forwardRef(function MultiLevelCheckboxSelect({
   label,
   options,
-  checked: checkedProp,
+  checked: checkedProp = EMPTY_ARRAY,
   placeholder,
   noResultsText,
   onChange,
@@ -111,75 +120,62 @@ const MultiLevelCheckboxSelect = React__default.forwardRef(function MultiLevelCh
       onParentChange(checked);
     }
   }, [checked]);
-  return React__default.createElement(MultiLevelCheckboxSelect$1, _extends({
-    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)))))));
+  return jsx(MultiLevelCheckboxSelect$1, {
+    ref: forwardedRef,
+    ...props,
+    children: jsx(Popover, {
+      visible: open,
+      arrow: false,
+      placement: 'bottom',
+      offset: [0, 6],
+      middleware: SAME_WIDTH_AS_REFERENCE,
+      content: jsxs(PopoverContainer, {
+        ref: popoverContentRef,
+        children: [jsxs(PopoverHeader, {
+          children: [jsx(SearchContainer, {
+            children: jsx(TextInput, {
+              ref: searchInputRef,
+              onBlur: e => {
+                if (open) {
+                  e.target.focus();
+                }
+              },
+              icon: jsx(SvgSearch, {}),
+              value: searchString,
+              onChange: e => setSearchString(e.target.value)
+            })
+          }), jsx(SectionSeparator, {})]
+        }), jsx(OptionsContainer, {
+          children: jsx(MultiLevelCheckbox, {
+            options: options,
+            checked: checkedProp,
+            search: searchString,
+            noResultsText: noResultsText,
+            onChange: onChange
+          })
+        })]
+      }),
+      children: jsxs(MultiLevelCheckboxSelectInput, {
+        tabIndex: 0,
+        ref: inputRef,
+        children: [label && jsx(Label, {
+          children: label
+        }), checked.length === 0 && jsx(Placeholder, {
+          children: placeholder
+        }), checked.map(option => jsxs(Item, {
+          children: [jsx(ItemLabel, {
+            children: getLabelByValue(option)
+          }), jsx(ItemRemoveButton, {
+            onClick: () => {
+              removeItem(option);
+            },
+            children: jsx(SvgClose, {})
+          })]
+        }, option))]
+      })
+    })
+  });
 });
-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 { MultiLevelCheckboxSelect as default };
 //# sourceMappingURL=MultiLevelCheckboxSelect.js.map

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

@@ -1 +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 [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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"}
+{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport * as S from './MultiLevelCheckboxSelect.styled';\n\nconst EMPTY_ARRAY = [];\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 } from '../MultiLevelCheckbox';\nimport type { MultiLevelCheckboxNode } from '../MultiLevelCheckbox/types';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\nimport { size } from '@floating-ui/react';\n\nimport type { Middleware } from '@floating-ui/react';\n\n/**\n * The dropdown is exactly as wide as the input it hangs under.\n *\n * NMB-3998: THIS IS THE ONE PLACE THE tippy → Floating UI MIGRATION COULD NOT SIMPLY IGNORE\n * `modifiers`. Plan C6 settles `Popover`'s `modifiers` prop as accepted-and-ignored, on the\n * measured grounds that no CONSUMER passes it — and that measurement is right, but this\n * INTERNAL caller did, with a hand-written Popper modifier:\n *\n * ```js\n * modifiers={[{ name: 'sameWidth', enabled: true, phase: 'beforeWrite',\n *               requires: ['computeStyles'],\n *               fn: ({ state }) => { state.styles.popper.width =\n *                     `${state.rects.reference.width}px`; },\n *               effect: ({ state }) => { state.elements.popper.style.width =\n *                     `${state.elements.reference.offsetWidth}px`; } }]}\n * ```\n *\n * Accepting-and-ignoring that would have left the dropdown shrink-to-fit — a silent\n * regression, and one NO GATE WOULD HAVE CAUGHT: the render gate sees no open popover, and\n * the only story renders the select CLOSED, so all 592 screenshots would have stayed green.\n *\n * `size()` is the direct translation. Popper's `beforeWrite` write to `state.styles.popper`\n * and Floating UI's `apply` both land on the POSITIONER, which is the element `Popover`\n * gives to `refs.setFloating`, so the width goes to the same node as before. Module-level\n * `const` because `Popover` passes the array into `useFloatingPopover`'s middleware memo — a\n * fresh array on every render would rebuild the middleware chain on every render.\n */\nconst SAME_WIDTH_AS_REFERENCE: Middleware[] = [\n  size({\n    apply({ rects, elements }) {\n      elements.floating.style.width = `${rects.reference.width}px`;\n    }\n  })\n];\n\ntype MultiLevelCheckboxSelectOwnProps = {\n  /**\n   * Label text for the MultiLevelCheckbox\n   */\n  label?: 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?: string;\n  /*\n   * SAME DEFECT AS `MultiLevelCheckbox.options`, and one level worse. The codemod\n   * emitted the shape literally as `{ label; value; children?: NodeType[] }[]` — which\n   * (a) references `NodeType`, a runtime `PropTypes.shape()` VALUE, as a type (TS2749)\n   * and (b) reproduces the propTypes' two-level truncation exactly, which is the thing\n   * playbook §B.3 predicted a codemod cannot avoid. The value goes straight to\n   * `<MultiLevelCheckbox options={options} />`, so it must be the same type, and that\n   * type is genuinely recursive.\n   */\n  options: MultiLevelCheckboxNode[];\n  /**\n   * Array of checked option values\n   */\n  checked: any[];\n  /**\n   * Optional text to display when no results are found while searching.`\n   */\n  noResultsText?: string;\n  /**\n   *  Callback function for the `onChange` event\n   */\n  onChange: (...args: any[]) => any;\n  /**\n   *  Callback function for the `onChange` event – returns only the checked parents\n   */\n  onParentChange?: (...args: any[]) => any;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.MultiLevelCheckboxSelect`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof MultiLevelCheckboxSelectOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.MultiLevelCheckboxSelect>,\n  keyof MultiLevelCheckboxSelectOwnProps\n> &\n  MultiLevelCheckboxSelectOwnProps;\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<any, Props>(function MultiLevelCheckboxSelect(\n  {\n    label,\n    options,\n    checked: checkedProp = EMPTY_ARRAY,\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 [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        middleware={SAME_WIDTH_AS_REFERENCE}\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        {/*\n         * NMB-3998: `tabIndex={0}`, was `tabIndex=\"0\"` — TS2769, `string` where React types\n         * `tabIndex` as `number`. Identical DOM: React stringifies numeric attribute values,\n         * so both render `tabindex=\"0\"`.\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\nexport default MultiLevelCheckboxSelect;\n"],"names":["EMPTY_ARRAY","SAME_WIDTH_AS_REFERENCE","size","apply","rects","elements","floating","style","width","reference","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","_jsx","S","ref","Popover","visible","arrow","placement","offset","middleware","content","_jsxs","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon"],"mappings":"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"}

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

@@ -6,113 +6,70 @@ const shouldForwardProp = prop => {
 };
 const MultiLevelCheckboxSelect = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__MultiLevelCheckboxSelect",
+  componentId: "sc-15at5os-0"
+})(["font-family:", ";"], props => props.theme.primaryFontFamily);
 const MultiLevelCheckboxSelectInput = styled.div.withConfig({
   shouldForwardProp
-}).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)}
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__MultiLevelCheckboxSelectInput",
+  componentId: "sc-15at5os-1"
+})(["position:relative;border:1px solid;", " 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-400')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1));
 const Item = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  background: #272727;
-  color: #f7f8f9;
-  font-size: 12px;
-  height: 26px;
-  border-radius: 3px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__Item",
+  componentId: "sc-15at5os-2"
+})(["display:flex;align-items:center;background:#272727;color:#f7f8f9;font-size:12px;height:26px;border-radius:3px;"]);
 const ItemLabel = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding: 0 5px 0 8px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__ItemLabel",
+  componentId: "sc-15at5os-3"
+})(["padding:0 5px 0 8px;"]);
 const ItemRemoveButton = styled.button.withConfig({
   shouldForwardProp
-}).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;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__ItemRemoveButton",
+  componentId: "sc-15at5os-4"
+})(["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:", ";}& > svg{width:8px;display:block;}"], props => props.theme.getColor('red-500'));
 const Label = styled.div.withConfig({
   shouldForwardProp
-}).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%)`)}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__Label",
+  componentId: "sc-15at5os-5"
+})(["position:absolute;top:-8px;left:7px;line-height:1.2;font-size:0.75rem;font-weight:400;padding:0 3px;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.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 0.875rem;
-  line-height: 26px;
-  padding-left: 4px;
-  opacity: 0.4;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__Placeholder",
+  componentId: "sc-15at5os-6"
+})(["font-size:0.875rem;line-height:26px;padding-left:4px;opacity:0.4;"]);
 const PopoverContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  max-height: inherit;
-  display: flex;
-  flex-direction: column;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__PopoverContainer",
+  componentId: "sc-15at5os-7"
+})(["max-height:inherit;display:flex;flex-direction:column;"]);
 const PopoverHeader = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__PopoverHeader",
+  componentId: "sc-15at5os-8"
+})(["", ""], props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
 const SearchContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding: 12px 8px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__SearchContainer",
+  componentId: "sc-15at5os-9"
+})(["padding:12px 8px;"]);
 const OptionsContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding: 12px 8px;
-  overflow: auto;
-  box-sizing: border-box;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiLevelCheckboxSelectstyled__OptionsContainer",
+  componentId: "sc-15at5os-10"
+})(["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

@@ -1 +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\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const MultiLevelCheckboxSelect = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\nexport const MultiLevelCheckboxSelectInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 0 5px 0 8px;\n`;\nexport const ItemRemoveButton = styled.button\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const PopoverHeader = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n`;\n\nexport const OptionsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","MultiLevelCheckboxSelect","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","MultiLevelCheckboxSelectInput","themeProp","getColor","Item","ItemLabel","ItemRemoveButton","button","Label","Placeholder","PopoverContainer","PopoverHeader","SearchContainer","OptionsContainer"],"mappings":"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"}
+{"version":3,"file":"MultiLevelCheckboxSelect.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * NO COMPONENT HERE HAS A TRANSIENT PROP, and none needs a generic. Every\n * interpolation in this file reads only `props.theme`, which is on `ExecutionContext`\n * via the `DefaultTheme` augmentation in `utils/defaultTheme.ts` — so this file was\n * already at 0 errors and adding a `<Props>` anywhere would declare a prop nothing\n * passes. `MultiLevelCheckboxSelect.tsx` passes no `$`-prefixed prop to any of these.\n *\n * The one thing it did need is the `shouldForwardProp` parameter annotation below:\n * `withConfig` takes the predicate BY REFERENCE, so `prop` was an implicit `any` and\n * `prop.startsWith` was unchecked. That is invisible while `noImplicitAny` is off.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter (v6 `elementToBeCreated`, v5.1\n * `defaultValidatorFn`). A one-parameter function is assignable to both. §J.4.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const MultiLevelCheckboxSelect = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\nexport const MultiLevelCheckboxSelectInput = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 0 5px 0 8px;\n`;\nexport const ItemRemoveButton = styled.button\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const PopoverHeader = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n`;\n\nexport const OptionsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","MultiLevelCheckboxSelect","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily","MultiLevelCheckboxSelectInput","themeProp","getColor","Item","ItemLabel","ItemRemoveButton","button","Label","Placeholder","PopoverContainer","PopoverHeader","SearchContainer","OptionsContainer"],"mappings":"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"}