npm - @ntbjs/react-components - Versions diffs - 3.0.0-rc.1 → 3.0.0-rc.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/build/inputs/MultiLevelCheckbox/MultiLevelCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiLevelCheckbox.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport * as S from './MultiLevelCheckbox.styled';\n\nconst EMPTY_ARRAY = [];\nimport Checkbox from '../Checkbox';\nimport { isArray, isEmpty, isEqual, uniq } from 'lodash';\nimport { findChildValues } from './types';\nimport type { MultiLevelCheckboxNode, MultiLevelCheckboxNodeValue } from './types';\n\nfunction hasChildrenSelected(node, targetValue, checkedValues) {\n if (!isArray(node.children) \|\| node.children.length === 0) {\n return false;\n }\n\n // Check if any direct children are selected\n if (node.children.some(childNode => checkedValues.includes(childNode.value))) {\n return true;\n }\n\n // Check recursively for selected children in each child node\n return node.children.some(childNode =>\n hasChildrenSelected(childNode, childNode.value, checkedValues)\n );\n}\n\nfunction hasAllChildrenSelected(node, targetValue, checkedValues) {\n if (!node.children \|\| node.children.length === 0) {\n return checkedValues.includes(node.value);\n }\n\n // Check if any direct children are not selected\n if (node.children.some(childNode => !checkedValues.includes(childNode.value))) {\n return false;\n }\n\n // Check recursively for selected children in each child node\n return node.children.every(childNode =>\n hasAllChildrenSelected(childNode, childNode.value, checkedValues)\n );\n}\n\nfunction getLabelByValue(targetValue, nodes) {\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\ntype MultiLevelCheckboxOwnProps = {\n /\n The codemod emitted `options?: NodeType[]` from `PropTypes.arrayOf(NodeType)`.\n * `NodeType` is a runtime `PropTypes.shape()` VALUE exported from `./types`, not a\n * type, so that was TS2749 \"refers to a value, but is being used as a type here\".\n * The right target is the hand-written recursive interface, which is also strictly\n * more accurate: `NodeType` validates exactly two levels and then gives up\n * (`children: PropTypes.array`), while `CheckboxTree`, `findChildValues`,\n * `hasChildrenSelected`, `hasAllChildrenSelected` and `getLabelByValue` all recurse\n * without a depth limit and the stories ship four-level trees.\n /\n options?: MultiLevelCheckboxNode[];\n /\n Array of checked option values\n /\n checked: any[];\n /\n Label text for the MultiLevelCheckbox\n /\n label?: string;\n /\n Optional search string\n /\n search?: string;\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\n/\n * NMB-3998 §C.2: `props` is spread onto `S.MultiLevelCheckbox`, 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 MultiLevelCheckboxOwnProps`);\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.MultiLevelCheckbox>,\n keyof MultiLevelCheckboxOwnProps\n> &\n MultiLevelCheckboxOwnProps;\n\n/\n MultiLevelCheckbox allow the user to select one or more items from a nested set.\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.\n * On any selection or deselection `onChange` will be called with an updated `checked`-list.\n \n ### Import\n \n ```js\n * import { MultiLevelCheckbox } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckbox from '@ntbjs/react-components/inputs/MultiLevelCheckbox'\n * ```\n /\nconst MultiLevelCheckbox = React.forwardRef<any, Props>(function MultiLevelCheckbox(\n {\n options = EMPTY_ARRAY,\n checked,\n search,\n label,\n noResultsText = 'No results.',\n onChange,\n ...props\n },\n forwardedRef\n) {\n const [internalChecked, setInternalChecked] = useState(includeAllChildren(checked, options));\n\n const anySearchResults = useMemo(() => {\n if (isEmpty(search)) {\n return true;\n }\n\n return options.some(node => {\n const childValues = findChildValues(node);\n return [node.value, ...childValues]\n .map(v => getLabelByValue(v, options))\n .some(v => v.match(new RegExp(search, 'i')));\n });\n }, [options, search]);\n\n function includeAllChildren(checked, nodes, honorParent = true) {\n let newChecked = [];\n\n function fillSiblings(nodes) {\n nodes.forEach(node => {\n if (hasAllChildrenSelected(node, node.value, checked)) {\n newChecked.push(node.value);\n }\n if (honorParent && checked.includes(node.value)) {\n const childValues = findChildValues(node);\n return (newChecked = newChecked.concat([node.value, ...childValues]));\n }\n\n if (node.children) {\n fillSiblings(node.children);\n }\n });\n }\n\n fillSiblings(nodes);\n\n return newChecked;\n }\n\n const onAdd = useCallback(\n values => {\n setInternalChecked(prevChecked =>\n uniq(includeAllChildren([...prevChecked, ...values], options))\n );\n },\n [options]\n );\n\n const onRemove = useCallback(\n values => {\n setInternalChecked(prevChecked =>\n includeAllChildren(\n prevChecked.filter(v => !values.includes(v)),\n options,\n false\n )\n );\n },\n [options]\n );\n\n // Call the onChange callback with the new internal value\n useEffect(() => {\n onChange([...internalChecked].sort());\n }, [internalChecked, onChange]);\n\n useEffect(() => {\n if (!isEqual([...checked].sort(), [...internalChecked].sort())) {\n setInternalChecked(includeAllChildren(checked, options));\n }\n }, [checked, options]);\n\n return (\n <S.MultiLevelCheckbox {...props} ref={forwardedRef}>\n {label && <S.MultiLevelCheckboxLegend>{label}</S.MultiLevelCheckboxLegend>}\n {options.map(node => (\n <CheckboxTree\n key={node.value}\n nodes={options}\n node={node}\n checked={checked.filter(c => [node.value, ...findChildValues(node)].includes(c))}\n onAdd={onAdd}\n onRemove={onRemove}\n search={search}\n />\n ))}\n\n {!anySearchResults && (\n <S.MultiLevelCheckboxNoResults>{noResultsText}</S.MultiLevelCheckboxNoResults>\n )}\n </S.MultiLevelCheckbox>\n );\n});\n\n/\n * HAND-WRITTEN, because `reactPropsPlugin` cannot reach this component. `CheckboxTree` is\n * a `React.memo(fn)` VARIABLE INITIALIZER, which is not one of the shapes\n * `isReactSfcArrowFunction` accepts (`forwardRef` is), so the plugin left its 6 props as\n * `{}` — 6 x TS2339 plus a TS2322 at each of the two call sites. The propTypes at the\n * bottom of the file are the source, with two corrections that are not cosmetic:\n \n - `node: NodeType` and `nodes: PropTypes.arrayOf(NodeType)` become\n * `MultiLevelCheckboxNode`, the genuinely recursive interface, for the reason given on\n * `MultiLevelCheckboxOwnProps.options`: `NodeType` truncates at two levels and this\n * component RECURSES INTO ITSELF at ~line 321 with `node.children.map`.\n * - `checked: PropTypes.array.isRequired` becomes\n * `MultiLevelCheckboxNodeValue[]`, not `any[]`. It is `.filter`ed and `.includes`d\n * against `node.value` throughout, so `any[]` was permission for a comparison that\n * silently never matches.\n /\ntype CheckboxTreeProps = {\n node: MultiLevelCheckboxNode;\n nodes?: MultiLevelCheckboxNode[];\n checked: MultiLevelCheckboxNodeValue[];\n search?: string;\n onAdd: (values: MultiLevelCheckboxNodeValue[]) => void;\n onRemove: (values: MultiLevelCheckboxNodeValue[]) => void;\n};\n\nconst CheckboxTree = React.memo(function CheckboxTree({\n node,\n nodes,\n checked,\n onAdd,\n onRemove,\n search = ''\n}: CheckboxTreeProps) {\n const [expanded, setExpanded] = useState(false);\n const [expandedBySearch, setExpandedBySearch] = useState(false);\n\n const onChange = useCallback(\n event => {\n if (event.target.checked) {\n onAdd([event.target.value, ...findChildValues(node)]);\n } else {\n onRemove([event.target.value, ...findChildValues(node)]);\n }\n },\n [node, onAdd, onRemove]\n );\n\n const onChildrenAdd = useCallback(\n newValues => {\n if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {\n return onAdd([node.value, ...newValues]);\n }\n\n onAdd(newValues);\n },\n [node, checked, onAdd]\n );\n\n const hideOption = useMemo(() => {\n if (isEmpty(search)) {\n return;\n }\n\n const childValues = findChildValues(node);\n return ![node.value, ...childValues]\n .map(v => getLabelByValue(v, nodes))\n .some(v => v.match(new RegExp(search, 'i')));\n }, [node, nodes, search]);\n\n useEffect(() => {\n const childValues = findChildValues(node);\n const expandBySearch =\n !isEmpty(search) &&\n [node.value, ...childValues]\n .map(v => getLabelByValue(v, nodes))\n .some(v => v.match(new RegExp(search, 'i')));\n setExpandedBySearch(expandBySearch);\n }, [search, nodes, node]);\n\n if (hideOption) {\n return null;\n }\n\n return (\n <S.CheckboxTree>\n <S.CheckboxTreeCheckboxContainer>\n {isArray(node.children) && node.children.length > 0 && (\n <S.ExpandTreeButton\n $expanded={expanded \|\| expandedBySearch}\n type=\"button\"\n onClick={() => {\n setExpandedBySearch(current => {\n if (current) {\n setExpanded(false);\n } else {\n setExpanded(v => !v);\n }\n return false;\n });\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 7.4\">\n <path\n fill=\"currentColor\"\n d=\"m6,7.4L0,1.4,1.4,0l4.6,4.6L10.6,0l1.4,1.4-6,6Z\"\n strokeWidth=\"0\"\n />\n </svg>\n </S.ExpandTreeButton>\n )}\n\n <Checkbox\n style={{ paddingLeft: 24 }}\n muted={!checked.includes(node.value)}\n label={node.label}\n indeterminate={\n (checked.includes(node.value) && !hasAllChildrenSelected(node, node.value, checked)) \|\|\n (hasChildrenSelected(node, node.value, checked) &&\n !hasAllChildrenSelected(node, node.value, checked))\n }\n checked={hasChildrenSelected(node, node.value, checked) \|\| checked.includes(node.value)}\n value={node.value}\n onChange={onChange}\n />\n </S.CheckboxTreeCheckboxContainer>\n\n {node.children && (\n <S.CheckboxTreeChildren $expanded={expanded \|\| expandedBySearch}>\n <div>\n {node.children.map(childNode => (\n <CheckboxTree\n key={childNode.value}\n checked={checked.filter(c =>\n [childNode.value, ...findChildValues(childNode)].includes(c)\n )}\n onAdd={onChildrenAdd}\n onRemove={onRemove}\n node={childNode}\n nodes={nodes}\n search={search}\n />\n ))}\n </div>\n </S.CheckboxTreeChildren>\n )}\n </S.CheckboxTree>\n );\n}, isEqual);\n\n/\n * `CheckboxTree.propTypes` DELETED HERE, and this one is FORCED rather than chosen.\n * `CheckboxTree` is a `React.memo(...)` value, and assigning `.propTypes` to one is a hard\n * type error under @types/react 19:\n * TS2339 Property 'propTypes' does not exist on type 'NamedExoticComponent<…>'.\n * `types.ts`'s own LEGACY RUNTIME block predicted exactly this (\"CheckboxTree forces the\n * issue on its own\").\n \n The React 16 cost is real but contained: propTypes are evaluated on every render on\n * React 16, so removing them removes dev-time warnings. `CheckboxTree` is INTERNAL — it is\n * not exported from this file or from the barrel — so the only callers are the two in this\n * module, and both are now checked by `CheckboxTreeProps` at compile time instead, more\n * strictly than the propTypes managed (`node` recursive rather than truncated at two\n * levels, `checked` a value array rather than `PropTypes.array`).\n \n `NodeType` STAYS EXPORTED from `./types`. It is re-exported by\n * `MultiLevelCheckbox/index.ts`, which `./inputs/` publishes, so deleting it is an API\n break and not this phase's call. See the report in the commit message.\n */\nexport default MultiLevelCheckbox;\n"],"names":["EMPTY_ARRAY","hasChildrenSelected","node","targetValue","checkedValues","isArray","children","length","some","childNode","includes","value","hasAllChildrenSelected","every","getLabelByValue","nodes","label","result","MultiLevelCheckbox","React","forwardRef","options","checked","search","noResultsText","onChange","props","forwardedRef","internalChecked","setInternalChecked","useState","includeAllChildren","anySearchResults","useMemo","isEmpty","childValues","findChildValues","map","v","match","RegExp","honorParent","newChecked","fillSiblings","forEach","push","concat","onAdd","useCallback","values","prevChecked","uniq","onRemove","filter","useEffect","sort","isEqual","_jsxs","S","ref","_jsx","CheckboxTree","c","memo","expanded","setExpanded","expandedBySearch","setExpandedBySearch","event","target","onChildrenAdd","newValues","hideOption","expandBySearch","$expanded","type","onClick","current","xmlns","viewBox","fill","d","strokeWidth","Checkbox","style","paddingLeft","muted","indeterminate"],"mappings":"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"}
1	+ {"version":3,"file":"MultiLevelCheckbox.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport * as S from './MultiLevelCheckbox.styled';\n\nconst EMPTY_ARRAY = [];\nimport Checkbox from '../Checkbox';\nimport { isArray, isEmpty, isEqual, uniq } from 'lodash';\nimport { findChildValues } from './types';\nimport type { MultiLevelCheckboxNode, MultiLevelCheckboxNodeValue } from './types';\n\nfunction hasChildrenSelected(node, targetValue, checkedValues) {\n if (!isArray(node.children) \|\| node.children.length === 0) {\n return false;\n }\n\n // Check if any direct children are selected\n if (node.children.some(childNode => checkedValues.includes(childNode.value))) {\n return true;\n }\n\n // Check recursively for selected children in each child node\n return node.children.some(childNode =>\n hasChildrenSelected(childNode, childNode.value, checkedValues)\n );\n}\n\nfunction hasAllChildrenSelected(node, targetValue, checkedValues) {\n if (!node.children \|\| node.children.length === 0) {\n return checkedValues.includes(node.value);\n }\n\n // Check if any direct children are not selected\n if (node.children.some(childNode => !checkedValues.includes(childNode.value))) {\n return false;\n }\n\n // Check recursively for selected children in each child node\n return node.children.every(childNode =>\n hasAllChildrenSelected(childNode, childNode.value, checkedValues)\n );\n}\n\nfunction getLabelByValue(targetValue, nodes) {\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\ntype MultiLevelCheckboxOwnProps = {\n // Use MultiLevelCheckboxNode (genuinely recursive) not NodeType (truncates at two levels).\n options?: MultiLevelCheckboxNode[];\n /*\n Array of checked option values\n /\n checked: any[];\n /\n Label text for the MultiLevelCheckbox\n /\n label?: string;\n /\n Optional search string\n /\n search?: string;\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\n// Props base: styled component's props, with declared members overriding (Omit<Base, keyof Own> & Own).\ntype Props = Omit<\n React.ComponentPropsWithoutRef<typeof S.MultiLevelCheckbox>,\n keyof MultiLevelCheckboxOwnProps\n> &\n MultiLevelCheckboxOwnProps;\n\n/\n MultiLevelCheckbox allow the user to select one or more items from a nested set.\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.\n * On any selection or deselection `onChange` will be called with an updated `checked`-list.\n \n ### Import\n \n ```js\n * import { MultiLevelCheckbox } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckbox from '@ntbjs/react-components/inputs/MultiLevelCheckbox'\n * ```\n */\nconst MultiLevelCheckbox = React.forwardRef<any, Props>(function MultiLevelCheckbox(\n {\n options = EMPTY_ARRAY,\n checked,\n search,\n label,\n noResultsText = 'No results.',\n onChange,\n ...props\n },\n forwardedRef\n) {\n const [internalChecked, setInternalChecked] = useState(includeAllChildren(checked, options));\n\n const anySearchResults = useMemo(() => {\n if (isEmpty(search)) {\n return true;\n }\n\n return options.some(node => {\n const childValues = findChildValues(node);\n return [node.value, ...childValues]\n .map(v => getLabelByValue(v, options))\n .some(v => v.match(new RegExp(search, 'i')));\n });\n }, [options, search]);\n\n function includeAllChildren(checked, nodes, honorParent = true) {\n let newChecked = [];\n\n function fillSiblings(nodes) {\n nodes.forEach(node => {\n if (hasAllChildrenSelected(node, node.value, checked)) {\n newChecked.push(node.value);\n }\n if (honorParent && checked.includes(node.value)) {\n const childValues = findChildValues(node);\n return (newChecked = newChecked.concat([node.value, ...childValues]));\n }\n\n if (node.children) {\n fillSiblings(node.children);\n }\n });\n }\n\n fillSiblings(nodes);\n\n return newChecked;\n }\n\n const onAdd = useCallback(\n values => {\n setInternalChecked(prevChecked =>\n uniq(includeAllChildren([...prevChecked, ...values], options))\n );\n },\n [options]\n );\n\n const onRemove = useCallback(\n values => {\n setInternalChecked(prevChecked =>\n includeAllChildren(\n prevChecked.filter(v => !values.includes(v)),\n options,\n false\n )\n );\n },\n [options]\n );\n\n // Call the onChange callback with the new internal value\n useEffect(() => {\n onChange([...internalChecked].sort());\n }, [internalChecked, onChange]);\n\n useEffect(() => {\n if (!isEqual([...checked].sort(), [...internalChecked].sort())) {\n setInternalChecked(includeAllChildren(checked, options));\n }\n }, [checked, options]);\n\n return (\n <S.MultiLevelCheckbox {...props} ref={forwardedRef}>\n {label && <S.MultiLevelCheckboxLegend>{label}</S.MultiLevelCheckboxLegend>}\n {options.map(node => (\n <CheckboxTree\n key={node.value}\n nodes={options}\n node={node}\n checked={checked.filter(c => [node.value, ...findChildValues(node)].includes(c))}\n onAdd={onAdd}\n onRemove={onRemove}\n search={search}\n />\n ))}\n\n {!anySearchResults && (\n <S.MultiLevelCheckboxNoResults>{noResultsText}</S.MultiLevelCheckboxNoResults>\n )}\n </S.MultiLevelCheckbox>\n );\n});\n\n// Hand-written because React.memo(fn) isn't recognized by reactPropsPlugin.\n// `node`/`nodes` use MultiLevelCheckboxNode (recursive) not NodeType; `checked` is strongly typed.\ntype CheckboxTreeProps = {\n node: MultiLevelCheckboxNode;\n nodes?: MultiLevelCheckboxNode[];\n checked: MultiLevelCheckboxNodeValue[];\n search?: string;\n onAdd: (values: MultiLevelCheckboxNodeValue[]) => void;\n onRemove: (values: MultiLevelCheckboxNodeValue[]) => void;\n};\n\nconst CheckboxTree = React.memo(function CheckboxTree({\n node,\n nodes,\n checked,\n onAdd,\n onRemove,\n search = ''\n}: CheckboxTreeProps) {\n const [expanded, setExpanded] = useState(false);\n const [expandedBySearch, setExpandedBySearch] = useState(false);\n\n const onChange = useCallback(\n event => {\n if (event.target.checked) {\n onAdd([event.target.value, ...findChildValues(node)]);\n } else {\n onRemove([event.target.value, ...findChildValues(node)]);\n }\n },\n [node, onAdd, onRemove]\n );\n\n const onChildrenAdd = useCallback(\n newValues => {\n if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {\n return onAdd([node.value, ...newValues]);\n }\n\n onAdd(newValues);\n },\n [node, checked, onAdd]\n );\n\n const hideOption = useMemo(() => {\n if (isEmpty(search)) {\n return;\n }\n\n const childValues = findChildValues(node);\n return ![node.value, ...childValues]\n .map(v => getLabelByValue(v, nodes))\n .some(v => v.match(new RegExp(search, 'i')));\n }, [node, nodes, search]);\n\n useEffect(() => {\n const childValues = findChildValues(node);\n const expandBySearch =\n !isEmpty(search) &&\n [node.value, ...childValues]\n .map(v => getLabelByValue(v, nodes))\n .some(v => v.match(new RegExp(search, 'i')));\n setExpandedBySearch(expandBySearch);\n }, [search, nodes, node]);\n\n if (hideOption) {\n return null;\n }\n\n return (\n <S.CheckboxTree>\n <S.CheckboxTreeCheckboxContainer>\n {isArray(node.children) && node.children.length > 0 && (\n <S.ExpandTreeButton\n $expanded={expanded \|\| expandedBySearch}\n type=\"button\"\n onClick={() => {\n setExpandedBySearch(current => {\n if (current) {\n setExpanded(false);\n } else {\n setExpanded(v => !v);\n }\n return false;\n });\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 7.4\">\n <path\n fill=\"currentColor\"\n d=\"m6,7.4L0,1.4,1.4,0l4.6,4.6L10.6,0l1.4,1.4-6,6Z\"\n strokeWidth=\"0\"\n />\n </svg>\n </S.ExpandTreeButton>\n )}\n\n <Checkbox\n style={{ paddingLeft: 24 }}\n muted={!checked.includes(node.value)}\n label={node.label}\n indeterminate={\n (checked.includes(node.value) && !hasAllChildrenSelected(node, node.value, checked)) \|\|\n (hasChildrenSelected(node, node.value, checked) &&\n !hasAllChildrenSelected(node, node.value, checked))\n }\n checked={hasChildrenSelected(node, node.value, checked) \|\| checked.includes(node.value)}\n value={node.value}\n onChange={onChange}\n />\n </S.CheckboxTreeCheckboxContainer>\n\n {node.children && (\n <S.CheckboxTreeChildren $expanded={expanded \|\| expandedBySearch}>\n <div>\n {node.children.map(childNode => (\n <CheckboxTree\n key={childNode.value}\n checked={checked.filter(c =>\n [childNode.value, ...findChildValues(childNode)].includes(c)\n )}\n onAdd={onChildrenAdd}\n onRemove={onRemove}\n node={childNode}\n nodes={nodes}\n search={search}\n />\n ))}\n </div>\n </S.CheckboxTreeChildren>\n )}\n </S.CheckboxTree>\n );\n}, isEqual);\n\n// CheckboxTree.propTypes deleted: React.memo(fn) can't have propTypes assigned under @types/react 19 (TS2339).\n// Internal usage is now checked by CheckboxTreeProps instead.\nexport default MultiLevelCheckbox;\n"],"names":["EMPTY_ARRAY","hasChildrenSelected","node","targetValue","checkedValues","isArray","children","length","some","childNode","includes","value","hasAllChildrenSelected","every","getLabelByValue","nodes","label","result","MultiLevelCheckbox","React","forwardRef","options","checked","search","noResultsText","onChange","props","forwardedRef","internalChecked","setInternalChecked","useState","includeAllChildren","anySearchResults","useMemo","isEmpty","childValues","findChildValues","map","v","match","RegExp","honorParent","newChecked","fillSiblings","forEach","push","concat","onAdd","useCallback","values","prevChecked","uniq","onRemove","filter","useEffect","sort","isEqual","_jsxs","S","ref","_jsx","CheckboxTree","c","memo","expanded","setExpanded","expandedBySearch","setExpandedBySearch","event","target","onChildrenAdd","newValues","hideOption","expandBySearch","$expanded","type","onClick","current","xmlns","viewBox","fill","d","strokeWidth","Checkbox","style","paddingLeft","muted","indeterminate"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiLevelCheckbox.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.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 The simple case in this batch: one transient prop, two hosts, no shared `css` helper~~.\n~~ * ~~Both~~ ~~reads of `$expanded` live in the components~~' ~~OWN templates — the one in\n * `ExpandTreeButton` is inside a nested `& > svg { … }` SELECTOR, which is not a nested\n * `css` block and does not~~ shadow `props~~`, so the outer `.attrs<P>()` reaches it and no\n * second generic slot is involved. Contrast `CompactTextInput`'s `themeProp()` arguments,\n * which are real nested `css` blocks. §J.7~~.\~~n /\~~nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n~~/\n~~ ~~Props~~ of ~~the~~ two components ~~that~~ ~~take the expand/collapse state across the\n * `shouldForwardProp` boundary.\n \n `MultiLevelCheckbox.tsx` passes `$expanded={expanded \|\| expandedBySearch}` at both\n * sites~~ (~~lines 263 and 302) — two `useState<boolean>` values OR'd together, hence\n * `boolean`. Optional, per §J.5: nothing supplies a default and the~~ templates ~~are\n~~ * written for its absence ~~(`props.$expanded && css`…``~~)~~.\n~~ /\ninterface ExpandedStyleProps {\n /* `expanded \|\| expandedBySearch` — opens the `grid-template-rows` / rotates the caret. /\n $expanded?: boolean;\n}\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. ~~§J.4.~~ `prop` needs the annotation\n * ~~because~~ `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const MultiLevelCheckbox = styled.fieldset\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding: 0;\n border: 0;\n margin: 0;\n`;\n\nexport const MultiLevelCheckboxLegend = styled.legend\n .withConfig({\n shouldForwardProp\n })\n .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\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n text-align: center;\n opacity: 0.7;\n font-size: 0.875rem;\n`;\n\nexport const CheckboxTreeChildren = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<ExpandedStyleProps>(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\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n width: fit-content;\n`;\n\nexport const CheckboxTreeCheckboxContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n margin-top: 4px;\n`;\n\nexport const ExpandTreeButton = styled.button\n .withConfig({\n shouldForwardProp\n })\n .attrs<ExpandedStyleProps>(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":["shouldForwardProp","prop","startsWith","MultiLevelCheckbox","styled","fieldset","withConfig","attrs","applyDefaultTheme","displayName","componentId","MultiLevelCheckboxLegend","legend","props","theme","themeProp","getColor","MultiLevelCheckboxNoResults","div","CheckboxTreeChildren","$expanded","css","CheckboxTree","CheckboxTreeCheckboxContainer","ExpandTreeButton","button"],"mappings":";;;~~AAkCA~~,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,QAAQ,CAC9CC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8BAAA,CAAA;AAMpB,MAAMC,wBAAwB,GAAGP,MAAM,CAACQ,MAAM,CAClDN,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0EAAA,EAAA,EAAA,CAAA,EAKvBG,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;AAGE,MAAMC,2BAA2B,GAAGb,MAAM,CAACc,GAAG,CAClDZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,uDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mDAAA,CAAA;AAMpB,MAAMS,oBAAoB,GAAGf,MAAM,CAACc,GAAG,CAC3CZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,GAAA,CAAA,EAU3CG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,6BAEF;AAIE,MAAMC,YAAY,GAAGlB,MAAM,CAACc,GAAG,CACnCZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA;AAIpB,MAAMa,6BAA6B,GAAGnB,MAAM,CAACc,GAAG,CACpDZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,yDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,CAAA;AAKpB,MAAMc,gBAAgB,GAAGpB,MAAM,CAACqB,MAAM,CAC1CnB,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2MAAA,EAAA,IAAA,CAAA,EAezCG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,6BAEF;;;;"}
1	+ {"version":3,"file":"MultiLevelCheckbox.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.ts"],"sourcesContent":["// One transient prop $expanded, two hosts, no shared css helper; nested selectors don't shadow props.\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/** Transient prop for two styled components; optional (templates handle absence). /\ninterface ExpandedStyleProps {\n /* `expanded \|\| expandedBySearch` — opens the grid-template-rows / rotates the caret. /\n $expanded?: boolean;\n}\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. `prop` needs the annotation because\n * `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const MultiLevelCheckbox = styled.fieldset\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding: 0;\n border: 0;\n margin: 0;\n`;\n\nexport const MultiLevelCheckboxLegend = styled.legend\n .withConfig({\n shouldForwardProp\n })\n .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\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n text-align: center;\n opacity: 0.7;\n font-size: 0.875rem;\n`;\n\nexport const CheckboxTreeChildren = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<ExpandedStyleProps>(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\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n width: fit-content;\n`;\n\nexport const CheckboxTreeCheckboxContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n margin-top: 4px;\n`;\n\nexport const ExpandTreeButton = styled.button\n .withConfig({\n shouldForwardProp\n })\n .attrs<ExpandedStyleProps>(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":["shouldForwardProp","prop","startsWith","MultiLevelCheckbox","styled","fieldset","withConfig","attrs","applyDefaultTheme","displayName","componentId","MultiLevelCheckboxLegend","legend","props","theme","themeProp","getColor","MultiLevelCheckboxNoResults","div","CheckboxTreeChildren","$expanded","css","CheckboxTree","CheckboxTreeCheckboxContainer","ExpandTreeButton","button"],"mappings":";;;AAeA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,QAAQ,CAC9CC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8BAAA,CAAA;AAMpB,MAAMC,wBAAwB,GAAGP,MAAM,CAACQ,MAAM,CAClDN,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0EAAA,EAAA,EAAA,CAAA,EAKvBG,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;AAGE,MAAMC,2BAA2B,GAAGb,MAAM,CAACc,GAAG,CAClDZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,uDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mDAAA,CAAA;AAMpB,MAAMS,oBAAoB,GAAGf,MAAM,CAACc,GAAG,CAC3CZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,GAAA,CAAA,EAU3CG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,6BAEF;AAIE,MAAMC,YAAY,GAAGlB,MAAM,CAACc,GAAG,CACnCZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA;AAIpB,MAAMa,6BAA6B,GAAGnB,MAAM,CAACc,GAAG,CACpDZ,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,yDAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,CAAA;AAKpB,MAAMc,gBAAgB,GAAGpB,MAAM,CAACqB,MAAM,CAC1CnB,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAqBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2MAAA,EAAA,IAAA,CAAA,EAezCG,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,6BAEF;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n~~/*\n~~ ~~The~~ ~~option~~ ~~tree~~ ~~`MultiLevelCheckbox`~~ and ~~`MultiLevelCheckboxSelect` render.\n \n TWO THINGS IN HERE, DESPITE THE FILE NAME:~~ the ~~types, and `~~findChildValues` ~~—\n * a~~ runtime helper ~~both components call. The helper~~ predates the ~~file's~~ ~~name;\n~~ * moving it is a separate ~~commit~~.\n /\n\n~~/\n~~ ~~A node's~~ identity~~.\n \n `string \| number` RATHER THAN THE `PropTypes.any` IT REPLACES, because three\n * runtime uses constrain it and none of them accepts an arbitrary value~~: ~~it is\n * the~~ React `key` of ~~every rendered `CheckboxTree`, it is the `~~value` ~~of the\n * underlying `<input type=\"checkbox\">`,~~ and it is ~~compared~~ ~~with~~ ~~`===`~~ ~~and\n * `Array~~.~~prototype.includes`~~ against the `checked` array the consumer owns.\n * An object here already renders as `[object Object]` and breaks reconciliation,\n * so `any` was permission for a bug rather than a description of the API.\n \n Every value in the stories is a string.\n /\nexport type MultiLevelCheckboxNodeValue = string \| number;\n\n/\n One option, with any number of levels of children under it.\n \n ~~GENUINELY~~ ~~RECURSIVE,~~ ~~WHICH THE~~ propTypes AT ~~THE~~ ~~BOTTOM ARE NOT — and the\n * recursion is the accurate description, not an improvement invented here:\n \n - `NodeType` validates exactly~~ two levels ~~and then gives up (`children:\n * PropTypes.array`~~), ~~because~~ a ~~self-referential `PropTypes.shape` is not\n * expressible~~ without ~~a lazy indirection. Its own comment says so.\n * - `findChildValues` below, `hasChildrenSelected`, `hasAllChildrenSelected`,\n * `getLabelByValue` and `CheckboxTree` itself all recurse without a~~ depth\n * limit~~, and the stories ship four-level trees\n * (`sport → idrettsgren → golf → minigolf`)~~.\n \n So the propTypes silently accepted anything below level two while the\n * components happily walked it. This interface is what the code has always\n * meant.\n /\nexport interface MultiLevelCheckboxNode {\n /* Shown next to the checkbox, and what the `search` prop matches against. /\n label: string;\n value: MultiLevelCheckboxNodeValue;\n /\n Child options. A node with a non-empty `children` array gets an expander\n * arrow; checking it checks the whole subtree.\n /\n children?: MultiLevelCheckboxNode[];\n}\n\n~~/\n~~ Every descendant value under `node`, depth-first, excluding `node` itself~~.\n~~ \n Callers pass `[node.value, ...findChildValues(~~node)]`~~ ~~when~~ ~~they want the~~ node\n * included, which is why it is excluded here.\n \n Guards on `Array.isArray(node.children)~~`, so a node whose `children` is\n * `undefined` — or something the type says it cannot be — yields `[]` rather\n * than throwing~~. ~~There is no cycle protection: a node reachable from its own\n * subtree recurses until the stack runs out. That is pre-existing, and the tree\n * comes from the consumer.\n~~ /\nexport function findChildValues(node: MultiLevelCheckboxNode): MultiLevelCheckboxNodeValue[] {\n const result: MultiLevelCheckboxNodeValue[] = [];\n\n function traverse(currentNode: MultiLevelCheckboxNode): void {\n if (Array.isArray(currentNode.children) && currentNode.children.length > 0) {\n currentNode.children.forEach(child => {\n result.push(child.value);\n traverse(child);\n });\n }\n }\n\n traverse(node);\n return result;\n}\n\n/ ============================================================================\n * LEGACY ~~RUNTIME~~ ~~propType~~ ~~— scheduled~~ for deletion. Do not extend it; extend\n * `MultiLevelCheckboxNode` above.\n \n WHY IT IS STILL HERE: `MultiLevelCheckbox.tsx` uses it in two places\n * (`MultiLevelCheckbox.propTypes.options` and `CheckboxTree.propTypes.node` /\n * `.nodes`), and on React 16 ~~— which this library still supports, see \"The\n * React 16 promise\" in scripts/VERIFY.md —~~ propTypes ~~are~~ evaluated on every\n * render. ~~Deleting~~ it ~~here would be a runtime behaviour change, not a type\n * change.\n \n DELETE WHEN: the~~ library-wide ~~propTypes-~~removal phase runs (playbook §A.2,\n * C14–C18). `CheckboxTree` forces the issue on its own — it is a\n * `React.memo(...)` value, and assigning `.propTypes` to one is a hard type\n * error under @types/react 19 (TS2339 on `NamedExoticComponent<object>`), which\n * is one of the 19 errors `MultiLevelCheckbox.tsx` still reports.\n \n ~~WHAT~~ ~~IT DOES NOT VALIDATE, RECORDED SO NOBODY TRUSTS IT:~~ level ~~three~~ ~~and\n~~ * below. `children: PropTypes.array` accepts an array of anything, so a\n * malformed grandchild is only ~~discovered~~ ~~when~~ ~~`CheckboxTree`~~ ~~renders it~~.\n * ========================================================================== */\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(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.any.isRequired,\n children: PropTypes.array\n })\n )\n});\n"],"names":["findChildValues","node","result","traverse","currentNode","Array","isArray","children","length","forEach","child","push","value","NodeType","PropTypes","shape","label","string","isRequired","any","arrayOf","array"],"mappings":";;~~AAkEO~~,SAASA,eAAeA,CAACC,IAA4B,EAAiC;EAC3F,MAAMC,MAAqC,GAAG,EAAE;EAEhD,SAASC,QAAQA,CAACC,WAAmC,EAAQ;AAC3D,IAAA,IAAIC,KAAK,CAACC,OAAO,CAACF,WAAW,CAACG,QAAQ,CAAC,IAAIH,WAAW,CAACG,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;AAC1EJ,MAAAA,WAAW,CAACG,QAAQ,CAACE,OAAO,CAACC,KAAK,IAAI;AACpCR,QAAAA,MAAM,CAACS,IAAI,CAACD,KAAK,CAACE,KAAK,CAAC;QACxBT,QAAQ,CAACO,KAAK,CAAC;AACjB,MAAA,CAAC,CAAC;AACJ,IAAA;AACF,EAAA;EAEAP,QAAQ,CAACF,IAAI,CAAC;AACd,EAAA,OAAOC,MAAM;AACf;~~MAyBaW~~,QAAQ,GAAGC,SAAS,CAACC,KAAK,CAAC;AACtCC,EAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCN,EAAAA,KAAK,EAAEE,SAAS,CAACK,GAAG,CAACD,UAAU;EAC/BX,QAAQ,EAAEO,SAAS,CAACM,OAAO,CACzBN,SAAS,CAACC,KAAK,CAAC;AACdC,IAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCN,IAAAA,KAAK,EAAEE,SAAS,CAACK,GAAG,CAACD,UAAU;IAC/BX,QAAQ,EAAEO,SAAS,CAACO;AACtB,GAAC,CACH;AACF,CAAC;;;;"}
1	+ {"version":3,"file":"types.js","sources":["../../../src/components/inputs/MultiLevelCheckbox/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\n// File holds both types and the findChildValues runtime helper (predates the filename; move is separate).\n\n/** Node identity: React key, checkbox value, and included() target; objects would break reconciliation. /\nexport type MultiLevelCheckboxNodeValue = string \| number;\n\n/\n One option, with any number of levels of children under it.\n \n Genuinely recursive (propTypes truncate at two levels); code recurses without depth limit.\n /\nexport interface MultiLevelCheckboxNode {\n /* Shown next to the checkbox, and what the `search` prop matches against. /\n label: string;\n value: MultiLevelCheckboxNodeValue;\n /\n Child options. A node with a non-empty `children` array gets an expander\n * arrow; checking it checks the whole subtree.\n /\n children?: MultiLevelCheckboxNode[];\n}\n\n/* Every descendant value under node, depth-first, excluding node itself (callers add node back). */\nexport function findChildValues(node: MultiLevelCheckboxNode): MultiLevelCheckboxNodeValue[] {\n const result: MultiLevelCheckboxNodeValue[] = [];\n\n function traverse(currentNode: MultiLevelCheckboxNode): void {\n if (Array.isArray(currentNode.children) && currentNode.children.length > 0) {\n currentNode.children.forEach(child => {\n result.push(child.value);\n traverse(child);\n });\n }\n }\n\n traverse(node);\n return result;\n}\n\n// LEGACY: Still needed for React 16 (propTypes evaluated every render); delete during library-wide removal.\n// Does not validate level 3+; grandchildren only caught at render time.\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(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.any.isRequired,\n children: PropTypes.array\n })\n )\n});\n"],"names":["findChildValues","node","result","traverse","currentNode","Array","isArray","children","length","forEach","child","push","value","NodeType","PropTypes","shape","label","string","isRequired","any","arrayOf","array"],"mappings":";;AAwBO,SAASA,eAAeA,CAACC,IAA4B,EAAiC;EAC3F,MAAMC,MAAqC,GAAG,EAAE;EAEhD,SAASC,QAAQA,CAACC,WAAmC,EAAQ;AAC3D,IAAA,IAAIC,KAAK,CAACC,OAAO,CAACF,WAAW,CAACG,QAAQ,CAAC,IAAIH,WAAW,CAACG,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;AAC1EJ,MAAAA,WAAW,CAACG,QAAQ,CAACE,OAAO,CAACC,KAAK,IAAI;AACpCR,QAAAA,MAAM,CAACS,IAAI,CAACD,KAAK,CAACE,KAAK,CAAC;QACxBT,QAAQ,CAACO,KAAK,CAAC;AACjB,MAAA,CAAC,CAAC;AACJ,IAAA;AACF,EAAA;EAEAP,QAAQ,CAACF,IAAI,CAAC;AACd,EAAA,OAAOC,MAAM;AACf;MAMaW,QAAQ,GAAGC,SAAS,CAACC,KAAK,CAAC;AACtCC,EAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCN,EAAAA,KAAK,EAAEE,SAAS,CAACK,GAAG,CAACD,UAAU;EAC/BX,QAAQ,EAAEO,SAAS,CAACM,OAAO,CACzBN,SAAS,CAACC,KAAK,CAAC;AACdC,IAAAA,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;AAClCN,IAAAA,KAAK,EAAEE,SAAS,CAACK,GAAG,CAACD,UAAU;IAC/BX,QAAQ,EAAEO,SAAS,CAACO;AACtB,GAAC,CACH;AACF,CAAC;;;;"}

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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 Keeps the dropdown exactly as wide as the input it hangs under, replacing Popper's\n * hand-written `sameWidth` modifier. Without it the dropdown shrinks to fit — a regression\n * no visual gate catches, since the only story renders this select closed.\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 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// Omit before & — a bare intersection would narrow colliding props instead of overriding them.\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 <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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":";;;~~AAuBA~~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"}
1	+ {"version":3,"file":"MultiLevelCheckboxSelect.styled.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.styled.ts"],"sourcesContent":["// No transient props here; only shouldForwardProp needs type annotation for prop parameter.\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Single-argument: peer floor v5.1.0, and v5/v6 disagree on second parameter; one arg works both ways.\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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"}

package/build/inputs/MultiSelect/MultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport { colors } from '../../../styles/utils/colors-export';\nimport * as S from './MultiSelect.styled';\n\n/*\n Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n \n The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n \n \n * <br />### Import\n \n ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n \n <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n \n ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n \n The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n \n \n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n \n The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n \n <br />#### `action`\n * A `string` indicating what kind of update was made.\n \n The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n \n <br />#### `updatedOption`\n * Option `object`of the updated option:\n \n In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n \n \n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n \n It will be passed two arguments:\n \n * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n \n The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n \n The `Promise` should return an `object` with the following keys:\n \n ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n \n `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n \n Example:\n \n ``` js\n \n const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n \n const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n \n const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n \n let filteredOptions;\n \n if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n \n const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n \n return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n \n const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n \n While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n \n <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n \n \n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n \n By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n \n Note:\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n \n <br />\n /\n\nconst showMoreHeight = 114;\n\nconst defaultNoOptionsMessage = inputValue =>\n inputValue ? `No matches for \"${inputValue}\"` : 'No available options';\n\n/\n MultiSelect's OWN props — the 19 members that were the entirety of this component's\n * declared surface until NMB-3998, unchanged. They stay authoritative: `MultiSelectProps`\n * below `Omit`s these keys out of the base before intersecting, so nothing here is\n * narrowed by a colliding member of react-select's props.\n /\nexport type MultiSelectOwnProps = {\n /\n \n * The label of the input field â€“ leave `undefined` to hide the label\n /\n label?: string;\n /\n `Array` of `objects` containing the default options. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n \n Note:\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n /\n availableOptions?: any[];\n /\n `Array` of `objects` containing the selected options.\n /\n selectedOptions?: any[];\n /\n Function with a `Promise` returning filtered options.\n \n See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n \n Note:\n * <br />This will override the `availableOptions` prop if both props are set.\n /\n loadOptions?: (...args: any[]) => any;\n /\n Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n /\n loadingMessageFunc?: (...args: any[]) => any;\n /\n Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n /\n onUpdateCallback?: (...args: any[]) => any;\n /\n Text to be displayed on the input element when the component\n * is enabled and not focused â€“ e.g. \"Add a keyword...\"\n /\n editText: string;\n /\n Whether the user can create new options.\n /\n creatable?: boolean;\n /\n Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n /\n createNewOptionMessageFunc?: (...args: any[]) => any;\n /\n If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n /\n noOptionsMessageFunc?: (...args: any[]) => any;\n /\n Optional callback function to be trigger when clicking a selected option's label â€“ e.g. opening\n * a search filtered on the given multi-value's `label`.\n \n The callback function will be passed the option `object` as an argument.\n /\n onMultiValueClick?: (...args: any[]) => any;\n /\n Display an overlay which the user needs to click in order to\n * show the selected options list in its entirety and edit it.\n /\n showMore?: boolean;\n /\n Text displayed on the \"Show more\" overlay.\n /\n showMoreText?: string;\n /\n Whether to display the total number of selected options after the show more text.\n /\n displayTotalOnShowMore?: boolean;\n /\n Whether the multi-select should be displayed in read-only mode.\n * The user can still click the selected options to trigger their on-click effect.\n /\n readOnly?: boolean;\n /\n Whether the component is hidden or visible.\n /\n hidden?: boolean;\n /\n Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n /\n disabled?: boolean;\n /\n Set to `true` to display a red border indicating an error.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n error?: boolean \| string;\n /\n Set to `true` to display an orange border.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n warning?: boolean \| string;\n};\n\n/\n THE PUBLISHED PROPS TYPE. It has a base, and that is playbook §C.2, not a convenience.\n \n This component destructures `...rest` (below) and spreads it into react-select —\n * `sharedSelectProps = { ...rest, … }`, handed to `<SelectComponent {...sharedSelectProps} />`.\n * A closed 19-member type therefore REJECTED props that this component forwards and that\n * work at runtime: measured against mb-main-client, `className`, `name`, `onBlur` and\n * `required` are all real react-select props being passed today and all four were a hard\n * TS2322 the moment the library started shipping `.d.ts`. That is the library lying about\n * its own contract, which is the exact class §C.2 exists to prevent — and it is NOT the\n * same finding as the other 22 rejected consumer attributes, which are props no component\n * here spreads anywhere and which stay rejected on purpose.\n \n THE BASE IS READ OFF WHAT `rest` IS ACTUALLY SPREAD ONTO, never assumed. That target is\n * one of the four `styled(<react-select …>)` wrappers, chosen at runtime by `loadOptions`\n * and `creatable`. `S.MultiSelect` — `styled(Select)` — is the deliberate choice among the\n * four: `CreatableSelect`/`AsyncPaginate` add props on top of the plain select's surface,\n * so plain `Select` is the set that is valid in ALL FOUR configurations. Basing this on the\n * async-creatable wrapper instead would admit `debounceTimeout` and friends in the default\n * configuration, where they do nothing — the same mistake in the other direction.\n \n `Omit<Base, keyof Own> & Own`, NOT `Base & Own`. An intersection intersects a colliding\n * MEMBER rather than replacing it; measured on `TextArea`, `rows?: number \| string` met\n * `styled.textarea`'s `rows?: number` and `rows=\"4\"` became an error — half a published\n * prop silently deleted by the pass meant to widen it. Disjoint pairs collapse to `never`.\n \n `ComponentPropsWithoutRef`, NOT `…WithRef`. `React.forwardRef` below supplies `ref`\n * itself; `WithRef` was measured to let `<MultiSelect ref={…} />` compile with the ref\n * silently dropped.\n \n BOTH ALIASES ARE `export`ed AND THE `const` BELOW IS ANNOTATED, for declaration emit\n * only — same mechanism and same audit as `CompactAutocompleteSelect` (577fc8d, §G.4.1).\n * tsc prints an exported alias from its source text and EXPANDS an unexported one, and the\n * expansion here reaches react-select's `PublicBaseSelectProps` /\n * `StateManagerAdditionalProps`, which `react-select`'s `exports` map does not serve:\n * TS2883, and with `noEmitOnError: false` that means the `.d.ts` is silently not written.\n * The annotation on the `const` is needed for the same reason — `forwardRef` infers\n * `ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<any>>` and tsc computes\n * `PropsWithoutRef<P>` eagerly, which re-expands what the exported alias just avoided.\n \n THE SWALLOW THIS PARAGRAPH USED TO RECORD AS OPEN IS FIXED. `sharedSelectProps` still\n * lists 14 keys after `...rest` and they still win — deliberately, and the reasoning is\n * written out at the literal itself — but `onFocus`, `onBlur` and `onChange` are no longer\n * among them: they now run the component's own logic and then call the caller's handler.\n * So `onBlur`, the one a consumer passes today, is both admitted by this type and actually\n * forwarded. Do not narrow this type to \"reflect\" the remaining 14: they are the runtime\n * form of props this component already declares (`selectedOptions`, `availableOptions`,\n * `disabled`/`readOnly`, `loadOptions`) plus its own rendering and CSS contract, and\n * `Omit`ting them would only stop react-select's own names from being accepted while\n * changing nothing about which value wins.\n /\nexport type MultiSelectProps = Omit<\n React.ComponentPropsWithoutRef<typeof S.MultiSelect>,\n keyof MultiSelectOwnProps\n> &\n MultiSelectOwnProps;\n\nconst MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<any>> =\n React.forwardRef<any, MultiSelectProps>((props, forwardedRef) => {\n const {\n label,\n selectedOptions = [],\n availableOptions,\n loadOptions,\n onUpdateCallback,\n editText,\n /\n * DEAD PUBLIC PROP, and this is the narrow directive that records it rather than the\n * file-scope `eslint-disable no-unused-vars` block comment that used to hide it, on\n * line 2, above the imports.\n \n `noOptionsMessageFunc` is documented, defaulted, destructured — and then never read.\n * It is NOT the same thing as the `noOptionsMessage` key at ~line 467, which is a\n * react-select STYLE function, not this callback. Compare\n * `CompactAutocompleteSelect`, which has the same prop and genuinely wires it into\n * react-select's `noOptionsMessage`. So this component silently ignores it.\n \n Deleting it is an API break and needs its own decision; wiring it up is a behaviour\n * change that the visual gate would have to re-record. Recorded here so that the next\n * reader sees a known finding instead of an unexplained suppression.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n noOptionsMessageFunc = defaultNoOptionsMessage,\n creatable = false,\n readOnly = false,\n disabled = false,\n error = false,\n warning = false,\n onMultiValueClick,\n showMore = false,\n showMoreText = 'Show more',\n displayTotalOnShowMore = true,\n hidden = false,\n ...rest\n } = props;\n\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOptions);\n const [cacheUnique, setCacheUnique] = useState(0);\n const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);\n const [focused, setFocused] = useState(false);\n\n // Track theme changes by checking the DOM\n const [isDarkMode, setIsDarkMode] = useState(() =>\n document.body.classList.contains('dark-theme')\n );\n\n useEffect(() => setSelected(selectedOptions), [selectedOptions]);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDarkMode(document.body.classList.contains('dark-theme'));\n });\n\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class']\n });\n\n return () => observer.disconnect();\n }, []);\n\n /\n Custom styles for react-select components using the Styles API.\n \n Note: We use inline styles via the `styles` prop instead of styled-components\n * because styled-components clash with the latest react-select version.\n * See: https://react-select.com/styles\n \n Theme handling:\n * - Colors are imported from colors-export.js (single source of truth)\n * - Theme detection uses MutationObserver to watch body class changes\n * - Supports both explicit themes (dark-theme/light-theme classes) and\n * system preference (prefers-color-scheme media query)\n \n The getThemeColor helper function returns actual hex color values based on\n * the current theme mode (dark/light), ensuring proper theme switching without\n * requiring a styled-components ThemeProvider context.\n /\n\n const selectStyles = useMemo(() => {\n const getThemeColor = (darkKey, lightKey) => {\n const prefersDark =\n !document.body.classList.contains('light-theme') &&\n !document.body.classList.contains('dark-theme') &&\n window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n const key = isDarkMode \|\| prefersDark ? darkKey : lightKey;\n return colors[key] \|\| colors['gray-500']; // Return actual hex color\n };\n\n const errorColor = colors['red-500'];\n const warningColor = colors['orange-500'];\n\n const menuBg = getThemeColor('gray-600', 'white');\n const textColor = getThemeColor('gray-100', 'gray-900');\n const placeholderColor = getThemeColor('gray-400', 'gray-500');\n const multiValueBg = getThemeColor('gray-600', 'gray-800');\n\n return {\n control: base => ({\n ...base,\n alignItems: 'center',\n background: 'transparent',\n border: error\n ? `1px solid ${errorColor}`\n : warning\n ? `1px solid ${warningColor}`\n : 'none',\n borderRadius: '3px',\n boxShadow: 'none',\n minHeight: '38px',\n opacity: disabled ? 0.5 : 1,\n pointerEvents: 'auto',\n '&:hover': {\n border: error\n ? `1px solid ${errorColor}`\n : warning\n ? `1px solid ${warningColor}`\n : 'none'\n }\n }),\n valueContainer: base => ({\n ...base,\n alignItems: 'center',\n gap: '8px',\n padding: '0 8px',\n maxHeight: displayShowMore\n ? error \|\| warning\n ? '100%'\n : `${showMoreHeight + 16}px`\n : '100%',\n overflow: 'hidden'\n }),\n multiValue: base => ({\n ...base,\n backgroundColor: multiValueBg,\n borderRadius: '3px',\n margin: '0',\n display: 'flex',\n alignItems: 'stretch',\n minHeight: '26px',\n overflow: 'hidden',\n opacity: disabled ? 0.7 : 1\n }),\n multiValueLabel: base => ({\n ...base,\n color: colors['white'],\n fontSize: '12px',\n padding: disabled \|\| readOnly ? '0 8px' : '0 3px 0 8px',\n display: 'flex',\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'\n }),\n multiValueRemove: base => ({\n ...base,\n color: 'white',\n padding: '0 8px 0 5px',\n display: disabled \|\| readOnly ? 'none' : 'flex',\n alignItems: 'center',\n alignSelf: 'stretch',\n borderRadius: '0',\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: errorColor,\n color: 'white'\n }\n }),\n menu: base => ({\n ...base,\n backgroundColor: menuBg,\n boxShadow: '0 4px 12px rgba(0,0,0,0.5)',\n zIndex: 999,\n marginTop: '4px',\n border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`\n }),\n menuList: base => ({\n ...base,\n backgroundColor: 'transparent',\n padding: 0\n }),\n option: (base, state) => ({\n ...base,\n backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',\n color: textColor,\n cursor: 'pointer',\n fontSize: '14px',\n padding: '8px 12px',\n ':active': {\n backgroundColor: getThemeColor('gray-400', 'gray-200')\n }\n }),\n input: (base, state) => ({\n ...base,\n display: 'inline-grid',\n whiteSpace: 'nowrap',\n color: textColor,\n margin: 0,\n padding: 0,\n ':before':\n !focused && editText && !state.value\n ? {\n content: `\"${editText}\"`,\n color: placeholderColor,\n marginRight: '8px',\n lineHeight: '26px',\n gridArea: '1 / 1'\n }\n : {}\n }),\n noOptionsMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n loadingMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n placeholder: () => ({ display: 'none' }),\n indicatorsContainer: () => ({ display: 'none' })\n };\n }, [\n error,\n warning,\n displayShowMore,\n disabled,\n readOnly,\n editText,\n focused,\n isDarkMode,\n onMultiValueClick\n ]);\n\n const innerComponents = {\n Option: optProps => (\n <components.Option {...optProps}>\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n alignItems: 'center'\n }}\n >\n <span>{optProps.label}</span>\n {optProps.isSelected && <S.DropdownOptionDeleteIcon />}\n </div>\n </components.Option>\n ),\n MultiValue: mvProps => (\n <S.MultiValueWrapper\n onMouseDown={e => {\n if (\n onMultiValueClick &&\n !readOnly &&\n !disabled &&\n /\n * NMB-3998: `e.target` is `EventTarget`, which has no `closest` — TS2339. In a\n * DOM mouse event the target is always an Element, so the narrowing is a fact\n * about the event, not a guess. Type-only assertion; erases to the same call.\n /\n !(e.target as Element).closest('.multi-select__multi-value__remove')\n ) {\n e.stopPropagation();\n onMultiValueClick(mvProps.data);\n }\n }}\n >\n <components.MultiValue {...mvProps} />\n </S.MultiValueWrapper>\n )\n };\n\n /\n * `...rest` IS SPREAD FIRST, SO EVERY KEY BELOW IT WINS OVER THE CALLER. That was a\n * silent swallow for `onFocus`/`onBlur`/`onChange` until NMB-3998, and the three\n * groups below are ordered deliberately. Do not flatten this back into one list.\n \n GROUP 1 — COMPOSED. The component has internal behaviour on all three (focus state,\n * selection state), so it can neither defer to the caller nor drop them: each key\n * runs the component's own logic and THEN calls the caller's handler, with the\n * arguments react-select passed. Measured on the pre-fix literal with a TS AST walk,\n * not eyeballed: `...rest` was element 1 of 18 and `onBlur` element 16, so\n * `mb-main-client/src/components/misc_settings/search_settings.tsx:86` — an `onBlur`\n * out of a react-hook-form `Controller` render prop — had never fired, which\n * silently disabled `mode: 'onBlur'` validation and `touched` at that call site.\n * The handlers are read off `rest` rather than destructured so that the props type\n * keeps describing them as forwarded, which they now genuinely are.\n \n GROUP 2 — COMPONENT-OWNED, AND THEY MUST STAY LAST. A caller value for any of\n * these breaks the component's own rendering or its CSS contract, so being overwritten\n * is the correct behaviour and NOT the bug that was fixed here:\n * ref/id `id` is a `nanoid()` and `S.Label`'s `htmlFor` points at it\n * classNamePrefix 'multi-select' is what `MultiSelect.styled.ts`'s selectors and\n * `MultiValueWrapper`'s `.multi-select__multi-value__remove` test target\n * styles the whole themed Styles API object built above\n * components `innerComponents`, which is what wires `onMultiValueClick`\n * isMulti the component IS the multi variant; `false` would strip the chips\n * value/options/isDisabled/cacheUniqs and the three menu booleans are derived from\n * the declared props above (`selectedOptions`, `availableOptions`,\n * `disabled \|\| readOnly`, `loadOptions`) and are named differently\n * from them, so a caller CAN put them in `rest` — verified, they are\n * not destructured — and the component still has to win: they are\n * the runtime form of props it already declares. Only `loadOptions`\n * is structurally safe here, because it is destructured by that name.\n /\n const sharedSelectProps = {\n ...rest,\n\n / Group 1 — composed: component first, then the caller's handler. /\n onFocus: event => {\n setFocused(true);\n rest.onFocus?.(event);\n },\n onBlur: event => {\n setFocused(false);\n rest.onBlur?.(event);\n },\n onChange: (newValue, actionMeta) => {\n setSelected(newValue);\n if (onUpdateCallback) {\n const item = actionMeta.option \|\| actionMeta.removedValue;\n onUpdateCallback(actionMeta.action, item);\n }\n if (actionMeta.action === 'create-option' && loadOptions) {\n setCacheUnique(c => c + 1);\n }\n rest.onChange?.(newValue, actionMeta);\n },\n\n / Group 2 — component-owned. Keep last; see the comment above. */\n ref: forwardedRef,\n id: uniqueId,\n classNamePrefix: 'multi-select',\n styles: selectStyles,\n components: innerComponents,\n value: selected,\n options: loadOptions ? undefined : availableOptions,\n loadOptions,\n isMulti: true,\n isDisabled: disabled \|\| readOnly,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n openMenuOnClick: true,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined\n };\n\n const SelectComponent = useMemo(() => {\n if (loadOptions) return creatable ? S.AsyncCreatableMultiSelect : S.AsyncMultiSelect;\n return creatable ? S.CreatableMultiSelect : S.MultiSelect;\n }, [loadOptions, creatable]);\n\n if (hidden) return null;\n\n return (\n <S.MultiSelectWrapper>\n {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n <S.InnerWrapper>\n <SelectComponent {...sharedSelectProps} />\n </S.InnerWrapper>\n {displayShowMore && (\n <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n <S.ShowMoreOverlay />\n <S.ShowMoreText>\n {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n </S.ShowMoreText>\n </S.ShowMoreWrapper>\n )}\n {(error \|\| warning) && (\n <S.ErrorMessage $error={!!error} $warning={!!warning}>\n {error \|\| warning}\n </S.ErrorMessage>\n )}\n </S.MultiSelectWrapper>\n );\n });\n\nMultiSelect.displayName = 'MultiSelect';\n\nexport default MultiSelect;\n"],"names":["showMoreHeight","defaultNoOptionsMessage","inputValue","MultiSelect","React","forwardRef","props","forwardedRef","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","noOptionsMessageFunc","creatable","readOnly","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","hidden","rest","uniqueId","useState","nanoid","selected","setSelected","cacheUnique","setCacheUnique","displayShowMore","setDisplayShowMore","focused","setFocused","isDarkMode","setIsDarkMode","document","body","classList","contains","useEffect","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","selectStyles","useMemo","getThemeColor","darkKey","lightKey","prefersDark","window","matchMedia","matches","key","colors","errorColor","warningColor","menuBg","textColor","placeholderColor","multiValueBg","control","base","alignItems","background","border","borderRadius","boxShadow","minHeight","opacity","pointerEvents","valueContainer","gap","padding","maxHeight","overflow","multiValue","backgroundColor","margin","display","multiValueLabel","color","fontSize","cursor","multiValueRemove","alignSelf","menu","zIndex","marginTop","menuList","option","state","isFocused","input","whiteSpace","value","content","marginRight","lineHeight","gridArea","noOptionsMessage","loadingMessage","placeholder","indicatorsContainer","innerComponents","Option","optProps","_jsx","components","children","_jsxs","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","onFocus","event","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport { colors } from '../../../styles/utils/colors-export';\nimport * as S from './MultiSelect.styled';\n\n/*\n Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n \n The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n \n \n * <br />### Import\n \n ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n \n <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n \n ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n \n The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n \n \n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n \n The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n \n <br />#### `action`\n * A `string` indicating what kind of update was made.\n \n The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n \n <br />#### `updatedOption`\n * Option `object`of the updated option:\n \n In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n \n \n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n \n It will be passed two arguments:\n \n * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n \n The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n \n The `Promise` should return an `object` with the following keys:\n \n ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n \n `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n \n Example:\n \n ``` js\n \n const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n \n const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n \n const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n \n let filteredOptions;\n \n if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n \n const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n \n return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n \n const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n \n While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n \n <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n \n \n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n \n By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n \n Note:\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n \n <br />\n /\n\nconst showMoreHeight = 114;\n\nconst defaultNoOptionsMessage = inputValue =>\n inputValue ? `No matches for \"${inputValue}\"` : 'No available options';\n\nexport type MultiSelectOwnProps = {\n /\n \n * The label of the input field â€“ leave `undefined` to hide the label\n /\n label?: string;\n /\n `Array` of `objects` containing the default options. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n \n Note:\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n /\n availableOptions?: any[];\n /\n `Array` of `objects` containing the selected options.\n /\n selectedOptions?: any[];\n /\n Function with a `Promise` returning filtered options.\n \n See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n \n Note:\n * <br />This will override the `availableOptions` prop if both props are set.\n /\n loadOptions?: (...args: any[]) => any;\n /\n Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n /\n loadingMessageFunc?: (...args: any[]) => any;\n /\n Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n /\n onUpdateCallback?: (...args: any[]) => any;\n /\n Text to be displayed on the input element when the component\n * is enabled and not focused â€“ e.g. \"Add a keyword...\"\n /\n editText: string;\n /\n Whether the user can create new options.\n /\n creatable?: boolean;\n /\n Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n /\n createNewOptionMessageFunc?: (...args: any[]) => any;\n /\n If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n /\n noOptionsMessageFunc?: (...args: any[]) => any;\n /\n Optional callback function to be trigger when clicking a selected option's label â€“ e.g. opening\n * a search filtered on the given multi-value's `label`.\n \n The callback function will be passed the option `object` as an argument.\n /\n onMultiValueClick?: (...args: any[]) => any;\n /\n Display an overlay which the user needs to click in order to\n * show the selected options list in its entirety and edit it.\n /\n showMore?: boolean;\n /\n Text displayed on the \"Show more\" overlay.\n /\n showMoreText?: string;\n /\n Whether to display the total number of selected options after the show more text.\n /\n displayTotalOnShowMore?: boolean;\n /\n Whether the multi-select should be displayed in read-only mode.\n * The user can still click the selected options to trigger their on-click effect.\n /\n readOnly?: boolean;\n /\n Whether the component is hidden or visible.\n /\n hidden?: boolean;\n /\n Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n /\n disabled?: boolean;\n /\n Set to `true` to display a red border indicating an error.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n error?: boolean \| string;\n /\n Set to `true` to display an orange border.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n warning?: boolean \| string;\n};\n\nexport type MultiSelectProps = Omit<\n React.ComponentPropsWithoutRef<typeof S.MultiSelect>,\n keyof MultiSelectOwnProps\n> &\n MultiSelectOwnProps;\n\nconst MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<any>> =\n React.forwardRef<any, MultiSelectProps>((props, forwardedRef) => {\n const {\n label,\n selectedOptions = [],\n availableOptions,\n loadOptions,\n onUpdateCallback,\n editText,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n noOptionsMessageFunc = defaultNoOptionsMessage, // Public prop never wired to react-select's noOptionsMessage; dropping it would break the API.\n creatable = false,\n readOnly = false,\n disabled = false,\n error = false,\n warning = false,\n onMultiValueClick,\n showMore = false,\n showMoreText = 'Show more',\n displayTotalOnShowMore = true,\n hidden = false,\n ...rest\n } = props;\n\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOptions);\n const [cacheUnique, setCacheUnique] = useState(0);\n const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);\n const [focused, setFocused] = useState(false);\n\n // Track theme changes by checking the DOM\n const [isDarkMode, setIsDarkMode] = useState(() =>\n document.body.classList.contains('dark-theme')\n );\n\n useEffect(() => setSelected(selectedOptions), [selectedOptions]);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDarkMode(document.body.classList.contains('dark-theme'));\n });\n\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class']\n });\n\n return () => observer.disconnect();\n }, []);\n\n /\n Custom styles for react-select components using the Styles API.\n \n Note: We use inline styles via the `styles` prop instead of styled-components\n * because styled-components clash with the latest react-select version.\n * See: https://react-select.com/styles\n \n Theme handling:\n * - Colors are imported from colors-export.js (single source of truth)\n * - Theme detection uses MutationObserver to watch body class changes\n * - Supports both explicit themes (dark-theme/light-theme classes) and\n * system preference (prefers-color-scheme media query)\n \n The getThemeColor helper function returns actual hex color values based on\n * the current theme mode (dark/light), ensuring proper theme switching without\n * requiring a styled-components ThemeProvider context.\n */\n\n const selectStyles = useMemo(() => {\n const getThemeColor = (darkKey, lightKey) => {\n const prefersDark =\n !document.body.classList.contains('light-theme') &&\n !document.body.classList.contains('dark-theme') &&\n window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n const key = isDarkMode \|\| prefersDark ? darkKey : lightKey;\n return colors[key] \|\| colors['gray-500']; // Return actual hex color\n };\n\n const errorColor = colors['red-500'];\n const warningColor = colors['orange-500'];\n\n const menuBg = getThemeColor('gray-600', 'white');\n const textColor = getThemeColor('gray-100', 'gray-900');\n const placeholderColor = getThemeColor('gray-400', 'gray-500');\n const multiValueBg = getThemeColor('gray-600', 'gray-800');\n\n return {\n control: base => ({\n ...base,\n alignItems: 'center',\n background: 'transparent',\n border: error\n ? `1px solid ${errorColor}`\n : warning\n ? `1px solid ${warningColor}`\n : 'none',\n borderRadius: '3px',\n boxShadow: 'none',\n minHeight: '38px',\n opacity: disabled ? 0.5 : 1,\n pointerEvents: 'auto',\n '&:hover': {\n border: error\n ? `1px solid ${errorColor}`\n : warning\n ? `1px solid ${warningColor}`\n : 'none'\n }\n }),\n valueContainer: base => ({\n ...base,\n alignItems: 'center',\n gap: '8px',\n padding: '0 8px',\n maxHeight: displayShowMore\n ? error \|\| warning\n ? '100%'\n : `${showMoreHeight + 16}px`\n : '100%',\n overflow: 'hidden'\n }),\n multiValue: base => ({\n ...base,\n backgroundColor: multiValueBg,\n borderRadius: '3px',\n margin: '0',\n display: 'flex',\n alignItems: 'stretch',\n minHeight: '26px',\n overflow: 'hidden',\n opacity: disabled ? 0.7 : 1\n }),\n multiValueLabel: base => ({\n ...base,\n color: colors['white'],\n fontSize: '12px',\n padding: disabled \|\| readOnly ? '0 8px' : '0 3px 0 8px',\n display: 'flex',\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'\n }),\n multiValueRemove: base => ({\n ...base,\n color: 'white',\n padding: '0 8px 0 5px',\n display: disabled \|\| readOnly ? 'none' : 'flex',\n alignItems: 'center',\n alignSelf: 'stretch',\n borderRadius: '0',\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: errorColor,\n color: 'white'\n }\n }),\n menu: base => ({\n ...base,\n backgroundColor: menuBg,\n boxShadow: '0 4px 12px rgba(0,0,0,0.5)',\n zIndex: 999,\n marginTop: '4px',\n border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`\n }),\n menuList: base => ({\n ...base,\n backgroundColor: 'transparent',\n padding: 0\n }),\n option: (base, state) => ({\n ...base,\n backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',\n color: textColor,\n cursor: 'pointer',\n fontSize: '14px',\n padding: '8px 12px',\n ':active': {\n backgroundColor: getThemeColor('gray-400', 'gray-200')\n }\n }),\n input: (base, state) => ({\n ...base,\n display: 'inline-grid',\n whiteSpace: 'nowrap',\n color: textColor,\n margin: 0,\n padding: 0,\n ':before':\n !focused && editText && !state.value\n ? {\n content: `\"${editText}\"`,\n color: placeholderColor,\n marginRight: '8px',\n lineHeight: '26px',\n gridArea: '1 / 1'\n }\n : {}\n }),\n noOptionsMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n loadingMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n placeholder: () => ({ display: 'none' }),\n indicatorsContainer: () => ({ display: 'none' })\n };\n }, [\n error,\n warning,\n displayShowMore,\n disabled,\n readOnly,\n editText,\n focused,\n isDarkMode,\n onMultiValueClick\n ]);\n\n const innerComponents = {\n Option: optProps => (\n <components.Option {...optProps}>\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n alignItems: 'center'\n }}\n >\n <span>{optProps.label}</span>\n {optProps.isSelected && <S.DropdownOptionDeleteIcon />}\n </div>\n </components.Option>\n ),\n MultiValue: mvProps => (\n <S.MultiValueWrapper\n onMouseDown={e => {\n if (\n onMultiValueClick &&\n !readOnly &&\n !disabled &&\n !(e.target as Element).closest('.multi-select__multi-value__remove')\n ) {\n e.stopPropagation();\n onMultiValueClick(mvProps.data);\n }\n }}\n >\n <components.MultiValue {...mvProps} />\n </S.MultiValueWrapper>\n )\n };\n\n const sharedSelectProps = {\n ...rest,\n\n onFocus: event => {\n setFocused(true);\n rest.onFocus?.(event);\n },\n onBlur: event => {\n setFocused(false);\n rest.onBlur?.(event);\n },\n onChange: (newValue, actionMeta) => {\n setSelected(newValue);\n if (onUpdateCallback) {\n const item = actionMeta.option \|\| actionMeta.removedValue;\n onUpdateCallback(actionMeta.action, item);\n }\n if (actionMeta.action === 'create-option' && loadOptions) {\n setCacheUnique(c => c + 1);\n }\n rest.onChange?.(newValue, actionMeta);\n },\n\n ref: forwardedRef,\n id: uniqueId,\n classNamePrefix: 'multi-select',\n styles: selectStyles,\n components: innerComponents,\n value: selected,\n options: loadOptions ? undefined : availableOptions,\n loadOptions,\n isMulti: true,\n isDisabled: disabled \|\| readOnly,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n openMenuOnClick: true,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined\n };\n\n const SelectComponent = useMemo(() => {\n if (loadOptions) return creatable ? S.AsyncCreatableMultiSelect : S.AsyncMultiSelect;\n return creatable ? S.CreatableMultiSelect : S.MultiSelect;\n }, [loadOptions, creatable]);\n\n if (hidden) return null;\n\n return (\n <S.MultiSelectWrapper>\n {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n <S.InnerWrapper>\n <SelectComponent {...sharedSelectProps} />\n </S.InnerWrapper>\n {displayShowMore && (\n <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n <S.ShowMoreOverlay />\n <S.ShowMoreText>\n {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n </S.ShowMoreText>\n </S.ShowMoreWrapper>\n )}\n {(error \|\| warning) && (\n <S.ErrorMessage $error={!!error} $warning={!!warning}>\n {error \|\| warning}\n </S.ErrorMessage>\n )}\n </S.MultiSelectWrapper>\n );\n });\n\nMultiSelect.displayName = 'MultiSelect';\n\nexport default MultiSelect;\n"],"names":["showMoreHeight","defaultNoOptionsMessage","inputValue","MultiSelect","React","forwardRef","props","forwardedRef","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","noOptionsMessageFunc","creatable","readOnly","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","hidden","rest","uniqueId","useState","nanoid","selected","setSelected","cacheUnique","setCacheUnique","displayShowMore","setDisplayShowMore","focused","setFocused","isDarkMode","setIsDarkMode","document","body","classList","contains","useEffect","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","selectStyles","useMemo","getThemeColor","darkKey","lightKey","prefersDark","window","matchMedia","matches","key","colors","errorColor","warningColor","menuBg","textColor","placeholderColor","multiValueBg","control","base","alignItems","background","border","borderRadius","boxShadow","minHeight","opacity","pointerEvents","valueContainer","gap","padding","maxHeight","overflow","multiValue","backgroundColor","margin","display","multiValueLabel","color","fontSize","cursor","multiValueRemove","alignSelf","menu","zIndex","marginTop","menuList","option","state","isFocused","input","whiteSpace","value","content","marginRight","lineHeight","gridArea","noOptionsMessage","loadingMessage","placeholder","indicatorsContainer","innerComponents","Option","optProps","_jsx","components","children","_jsxs","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","onFocus","event","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName"],"mappings":"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"}

package/build/inputs/MultiSelect/MultiSelect.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.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 THE DISTINCTIVE CASE HERE IS `styled(<third-party component that has its own `theme`\n * prop>)`. Four of this file's six errors are TS2345 on `.attrs(applyDefaultTheme)` and\n * none of them is about a transient prop — see `SelectThemeProp` below. §J.3 measured\n * that introducing a `P` adds no `.attrs()` assignability errors; this file is the\n * converse, where the `.attrs()` error is already there and a `P` is what REMOVES it.\n \n THE SECOND DISTINCTIVE CASE, and it only appears under `--declaration`: an INFERRED\n * `styled(<react-select component>)` type is unprintable, so this file's `.d.ts` was\n * silently skipped. See `SelectWrapper` below. §G.4.\n /\nimport type React from 'react';\nimport styled, { css } from 'styled-components';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport type { PartialNtbTheme } from '../../../utils/defaultTheme';\n\n/\n The `theme` prop of the four react-select wrappers below, restated as OUR theme.\n \n WHY THIS EXISTS. `theme` is the one prop name that both styled-components and\n * react-select claim. react-select declares it `ThemeConfig = Theme \| ((t: Theme) => Theme)`\n * and its `Theme` requires `borderRadius`, which `NtbTheme` does not have — so\n * `.attrs(applyDefaultTheme)`, whose return type is `{ theme: NtbTheme }`, was\n * unassignable to `Attrs<SelectProps>` and each wrapper reported:\n \n TS2345 … Types of property 'theme' are incompatible.\n * Type 'NtbTheme' is not assignable to type 'ThemeConfig'.\n * Property 'borderRadius' is missing in type 'NtbTheme' but required in type 'Theme'.\n \n `.attrs<{ theme?: PartialNtbTheme }>` fixes it because `attrs`' generic is applied as\n * `Substitute<OuterProps, P> = FastOmit<OuterProps, keyof P> & P` — i.e. declaring\n * `theme` REPLACES react-select's declaration of it rather than intersecting with it.\n \n AND THAT IS THE TRUTH ABOUT THIS BOUNDARY, not a workaround. At runtime `.attrs()`\n * hands react-select the merged `NtbTheme`, and react-select's `getTheme()` does\n * `{ ...its defaultTheme, ...this.props.theme }`: our `colors` and `spacing` win — which\n * is why `ThemeColors`/`ThemeSpacing` in `utils/defaultTheme.ts` carry react-select's\n * member names and not design-token names — and `borderRadius` falls through to\n * react-select's own `4`. `NtbTheme` is deliberately a PARTIAL override of react-select's\n * theme, so `ThemeConfig` was never the right type for this prop here.\n \n `PartialNtbTheme` and not `NtbTheme` because this is the INPUT side: a caller may pass\n * any subset and `applyDefaultTheme` fills the rest in, exactly as `ThemedProps` states\n * for every other file. Do NOT \"fix\" this by adding `borderRadius` to `NtbTheme`: that\n * would hand react-select a border radius it does not get today and is a render change.\n /\ninterface SelectThemeProp {\n /* A partial override merged over `defaultTheme` by `applyDefaultTheme`. /\n theme?: PartialNtbTheme;\n}\n\n/\n The WRITTEN type of the four `styled(<react-select component>)` exports below, and the\n * reason they are annotated at all when nothing else in this repo is.\n \n `styled(Select).attrs<SelectThemeProp>(…)` INFERS a correct type. It is not a\n * WRITEABLE one: `tsc --declaration` has to print it into `MultiSelect.styled.d.ts`, the\n * printed form expands to react-select's `PublicBaseSelectProps` and\n * `StateManagerAdditionalProps`, and neither is re-exported from `react-select`'s public\n * entry — react-select has an `exports` map with no wildcard, so\n * `react-select/dist/declarations/src/Select` does not resolve for a consumer at all.\n * The result was 11 x TS2883 in this file, and the consequence was worse than the\n * message: `noEmitOnError` is false, so the build \"succeeded\" while this file's `.d.ts`\n * was SILENTLY NOT WRITTEN.\n \n A generic alias fixes it because tsc prints an alias APPLICATION by reference —\n * `SelectWrapper<typeof Select>` — instead of expanding it, and `typeof Select` is\n * `typeof import('react-select').default`, which is nameable. Nothing here is widened or\n * narrowed for the sake of the declaration: `Omit<ComponentProps<C>, keyof P> & P` is\n * exactly styled-components' own `Substitute<OuterProps, P>`, which is the rule\n * `SelectThemeProp` above relies on.\n \n What IS given up is the styled-components-specific surface of these four bindings —\n * `.withConfig()`, `.attrs()` and re-wrapping with `styled(S.MultiSelect)`. Audited:\n * nothing in this repo does any of the three to them. Adding one means annotating with\n * `IStyledComponent` instead, which puts the same non-portable expansion back.\n /\ntype SelectWrapper<C extends React.ComponentType<any>> = React.ComponentType<\n Omit<React.ComponentProps<C>, keyof SelectThemeProp> & SelectThemeProp\n>;\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. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n /\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 12px;\n position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n`;\n\nexport const InnerWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const Label = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n color: ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n font-size: 0.875rem;\n margin-bottom: 4px;\n display: block;\n`;\n\n/\n * All four carry `SelectThemeProp` for the reason documented at that interface. They have\n * no `withConfig`/`shouldForwardProp` — react-select is a component, not a DOM element, so\n * there is nothing to filter — and no transient prop of their own.\n /\nexport const MultiSelect: SelectWrapper<typeof Select> = styled(Select).attrs<SelectThemeProp>(\n applyDefaultTheme\n)`\n ${sharedStyle}\n`;\nexport const CreatableMultiSelect: SelectWrapper<typeof CreatableSelect> = styled(\n CreatableSelect\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\nexport const AsyncMultiSelect: SelectWrapper<typeof AsyncPaginate> = styled(\n AsyncPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect: SelectWrapper<typeof AsyncCreatableSelectPaginate> = styled(\n AsyncCreatableSelectPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\n\nexport const MultiValueWrapper = styled.div`\n border-radius: 3px;\n display: flex;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon)\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n width: 10px;\n stroke: ${props =>\n props.theme.themeProp(\n 'stroke',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )};\n`;\n\nexport const ShowMoreWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('emerald-500')\n )}\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n`;\n\nexport const ShowMoreOverlay = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: end;\n display: block;\n height: 100%;\n left: 0;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'background',\n 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n )}\n`;\n\nexport const ShowMoreText = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: 0.875rem;\n width: 100%;\n ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\n/\n `MultiSelect.tsx` renders `<S.ErrorMessage $error={!!error} $warning={!!warning}>`\n * (line 461), so both are `boolean` — the `!!` is in the JSX, not here. Optional per\n * §J.5; the template's own ternary chain already ends in `'inherit'` for the\n * neither-set case.\n /\ninterface ErrorMessageStyleProps {\n /* `!!error` — red. Wins over `$warning` when both are set. /\n $error?: boolean;\n /* `!!warning` — orange. */\n $warning?: boolean;\n}\n\nexport const ErrorMessage = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<ErrorMessageStyleProps>(applyDefaultTheme)`\n color: ${props =>\n props.$error\n ? props.theme.getColor('red-500')\n : props.$warning\n ? props.theme.getColor('orange-500')\n : 'inherit'};\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","InnerWrapper","Label","label","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","MultiValueWrapper","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","$error","$warning"],"mappings":"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"}
1	+ {"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.ts"],"sourcesContent":["import type React from 'react';\nimport styled, { css } from 'styled-components';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport type { PartialNtbTheme } from '../../../utils/defaultTheme';\n\ninterface SelectThemeProp {\n theme?: PartialNtbTheme;\n}\n\ntype SelectWrapper<C extends React.ComponentType<any>> = React.ComponentType<\n Omit<React.ComponentProps<C>, keyof SelectThemeProp> & SelectThemeProp\n>;\n\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 12px;\n position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n`;\n\nexport const InnerWrapper = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const Label = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n color: ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n font-size: 0.875rem;\n margin-bottom: 4px;\n display: block;\n`;\n\nexport const MultiSelect: SelectWrapper<typeof Select> = styled(Select).attrs<SelectThemeProp>(\n applyDefaultTheme\n)`\n ${sharedStyle}\n`;\nexport const CreatableMultiSelect: SelectWrapper<typeof CreatableSelect> = styled(\n CreatableSelect\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\nexport const AsyncMultiSelect: SelectWrapper<typeof AsyncPaginate> = styled(\n AsyncPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect: SelectWrapper<typeof AsyncCreatableSelectPaginate> = styled(\n AsyncCreatableSelectPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n ${sharedStyle}\n`;\n\nexport const MultiValueWrapper = styled.div`\n border-radius: 3px;\n display: flex;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon)\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n width: 10px;\n stroke: ${props =>\n props.theme.themeProp(\n 'stroke',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )};\n`;\n\nexport const ShowMoreWrapper = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('emerald-500')\n )}\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n`;\n\nexport const ShowMoreOverlay = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: end;\n display: block;\n height: 100%;\n left: 0;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'background',\n 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n )}\n`;\n\nexport const ShowMoreText = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: 0.875rem;\n width: 100%;\n ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\ninterface ErrorMessageStyleProps {\n $error?: boolean;\n $warning?: boolean;\n}\n\nexport const ErrorMessage = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs<ErrorMessageStyleProps>(applyDefaultTheme)`\n color: ${props =>\n props.$error\n ? props.theme.getColor('red-500')\n : props.$warning\n ? props.theme.getColor('orange-500')\n : 'inherit'};\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","InnerWrapper","Label","label","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","MultiValueWrapper","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","$error","$warning"],"mappings":"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"}

package/build/inputs/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport * as S from './Radio.styled';\n\ntype RadioOwnProps = {\n /*\n Text displayed by the radio button\n /\n label?: any;\n /\n Name of the radio button (used when sending form data)\n /\n name: string;\n /\n Value to be sent when the given radio button is selected\n /\n value: any;\n /\n Whether the radio button is checked\n /\n checked?: boolean;\n /\n Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n /\n defaultChecked?: boolean;\n /\n Whether the radio button is disabled\n /\n disabled?: boolean;\n /\n Display the radio button as read-only\n /\n readOnly?: boolean;\n /\n Custom class names for the HTML element\n /\n className?: string;\n /\n Custom inline CSS styling\n /\n style?: any;\n /\n Optional callback function for the `onChange` event\n /\n onChange?: (...args: any[]) => any;\n /\n Optional callback function for the `onBlur` event\n /\n onBlur?: (...args: any[]) => any;\n};\n\n~~/\n~~ * ~~NMB-3998~~ ~~§C.2: `rest` is spread~~ onto `input`, 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 RadioOwnProps`);\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<React.ComponentPropsWithoutRef<'input'>, keyof RadioOwnProps> & RadioOwnProps;\n\n/\n Radio buttons allow the user to select one option from a set.\n \n Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n \n Radio buttons should have the most commonly used option selected by default.\n \n ### Import\n \n ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef<any, Props>(function Radio(\n {\n name,\n value,\n checked,\n defaultChecked,\n disabled = false,\n readOnly,\n label,\n className,\n style,\n onChange,\n onBlur,\n ...rest\n },\n forwardedRef\n) {\n const uniqueId = useMemo(() => nanoid(), []);\n\n const handleChange = e => {\n // Prevent onChange when readOnly\n if (readOnly) {\n e.preventDefault();\n return;\n }\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <S.Radio\n htmlFor={uniqueId}\n disabled={disabled}\n readOnly={readOnly}\n $isChecked={checked}\n className={className}\n style={style}\n >\n <input\n ref={forwardedRef}\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={uniqueId}\n onChange={handleChange}\n onBlur={onBlur}\n {...rest}\n />\n <S.RadioLabel>{label}</S.RadioLabel>\n </S.Radio>\n );\n});\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","_jsxs","S","htmlFor","$isChecked","children","_jsx","ref","type","id"],"mappings":";;;;;~~AA8EA~~,MAAMA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,KAAKA,CACvD;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;AACdC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE;AAClB,MAAA;AACF,IAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC;AACb,IAAA;EACF,CAAC;AAED,EAAA,OACEE,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAM;AAAAe,IAAAA,QAAA,GAEbC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,GAAG,EAAEb,YAAa;AAClBc,MAAAA,IAAI,EAAC,OAAO;AACZ1B,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,cAAc,EAAEA,cAAe;AAC/BC,MAAAA,QAAQ,EAAEA,QAAS;AACnBuB,MAAAA,EAAE,EAAEd,QAAS;AACbJ,MAAAA,QAAQ,EAAEO,YAAa;AACvBN,MAAAA,MAAM,EAAEA,MAAO;MAAA,GACXC;AAAI,KACT,CAAC,EACFa,GAAA,CAACJ,UAAY,EAAA;AAAAG,MAAAA,QAAA,EAAEjB;AAAK,KAAe,CAAC;AAAA,GAC7B,CAAC;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport * as S from './Radio.styled';\n\ntype RadioOwnProps = {\n /*\n Text displayed by the radio button\n /\n label?: any;\n /\n Name of the radio button (used when sending form data)\n /\n name: string;\n /\n Value to be sent when the given radio button is selected\n /\n value: any;\n /\n Whether the radio button is checked\n /\n checked?: boolean;\n /\n Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n /\n defaultChecked?: boolean;\n /\n Whether the radio button is disabled\n /\n disabled?: boolean;\n /\n Display the radio button as read-only\n /\n readOnly?: boolean;\n /\n Custom class names for the HTML element\n /\n className?: string;\n /\n Custom inline CSS styling\n /\n style?: any;\n /\n Optional callback function for the `onChange` event\n /\n onChange?: (...args: any[]) => any;\n /\n Optional callback function for the `onBlur` event\n /\n onBlur?: (...args: any[]) => any;\n};\n\n// Rest spreads onto input; use Omit+intersection to widen, not narrow, colliding props.\ntype Props = Omit<React.ComponentPropsWithoutRef<'input'>, keyof RadioOwnProps> & RadioOwnProps;\n\n/\n Radio buttons allow the user to select one option from a set.\n \n Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n \n Radio buttons should have the most commonly used option selected by default.\n \n ### Import\n \n ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef<any, Props>(function Radio(\n {\n name,\n value,\n checked,\n defaultChecked,\n disabled = false,\n readOnly,\n label,\n className,\n style,\n onChange,\n onBlur,\n ...rest\n },\n forwardedRef\n) {\n const uniqueId = useMemo(() => nanoid(), []);\n\n const handleChange = e => {\n // Prevent onChange when readOnly\n if (readOnly) {\n e.preventDefault();\n return;\n }\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <S.Radio\n htmlFor={uniqueId}\n disabled={disabled}\n readOnly={readOnly}\n $isChecked={checked}\n className={className}\n style={style}\n >\n <input\n ref={forwardedRef}\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={uniqueId}\n onChange={handleChange}\n onBlur={onBlur}\n {...rest}\n />\n <S.RadioLabel>{label}</S.RadioLabel>\n </S.Radio>\n );\n});\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","_jsxs","S","htmlFor","$isChecked","children","_jsx","ref","type","id"],"mappings":";;;;;AAwEA,MAAMA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,KAAKA,CACvD;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;AACdC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE;AAClB,MAAA;AACF,IAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC;AACb,IAAA;EACF,CAAC;AAED,EAAA,OACEE,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAM;AAAAe,IAAAA,QAAA,GAEbC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,GAAG,EAAEb,YAAa;AAClBc,MAAAA,IAAI,EAAC,OAAO;AACZ1B,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,cAAc,EAAEA,cAAe;AAC/BC,MAAAA,QAAQ,EAAEA,QAAS;AACnBuB,MAAAA,EAAE,EAAEd,QAAS;AACbJ,MAAAA,QAAQ,EAAEO,YAAa;AACvBN,MAAAA,MAAM,EAAEA,MAAO;MAAA,GACXC;AAAI,KACT,CAAC,EACFa,GAAA,CAACJ,UAAY,EAAA;AAAAG,MAAAA,QAAA,EAAEjB;AAAK,KAAe,CAAC;AAAA,GAC7B,CAAC;AAEd,CAAC;;;;"}