@magiclabs/ui-components 1.24.0 → 1.24.1
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),
|
|
1
|
+
"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),m=require("@styled/jsx");require("../feedback/progress-bar.js");var C=require("@styled/tokens"),L=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var U=require("../feedback/tooltip.js"),w=require("react-aria");const E={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},A=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),P=({value:i,label:a,size:d="lg",isFocused:y})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(A),s=h?.value===i,o=E[d],k=r.useCallback(()=>{p({value:i,label:a})},[p,i,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:s?"brand.base":y?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:o.width,paddingRight:o.width},children:[t.jsx(m.Box,{style:{minWidth:o.width},children:s&&t.jsx(M.default,{width:o.check,height:o.check,color:C.token("colors.text.quaternary")})}),t.jsx(j.default,{size:d,fontWeight:"medium",fontColor:s?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},R=({children:i,onSelect:a,label:d,placeholder:y="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:o,viewMax:k=5,...W})=>{const[b,v]=r.useState(!1),[l,f]=r.useState(null),x=r.useRef(null),q=r.useRef(null),u=E[p],F=k*u.mult+1,H=r.useCallback(()=>{v(e=>!e),b||(f(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[b]),N=r.useCallback(e=>{a(e.value),v(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(i).find(n=>n.props.value===h);return e?e.props.label:y},[h,i]),{buttonProps:B}=w.useButton({...W,isDisabled:o,onPress:H},x),{focusProps:_,isFocusVisible:I}=w.useFocusRing(),{keyboardProps:K}=w.useKeyboard({onKeyDown:e=>{var n,c;if(!b)return;let g=l;const D=r.Children.toArray(i);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(i)-1):(g=l>0?l-1:r.Children.count(i)-1,f(g));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(g=l<r.Children.count(i)-1?l+1:0,f(g));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":v(!1),(c=x.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(n.target)||v(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(A.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:N},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(m.HStack,{gap:2,opacity:o?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",fontWeight:"medium",children:d}),s&&t.jsx(U.default,{isDisabled:o,content:s,children:t.jsx(T.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(B,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{truncate:!0,size:p,fontColor:h?"text.primary":"text.tertiary",children:S}),b?t.jsx(V.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")}):t.jsx(L.default,{width:u.caret,height:u.caret,color:C.token("colors.brand.base")})]}),b&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(i,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};P.displayName="DropdownOption",R.displayName="DropdownSelector",exports.DropdownOption=P,exports.DropdownSelector=R;
|
|
2
2
|
//# sourceMappingURL=dropdown-selector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as
|
|
1
|
+
import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as W}from"@styled/css";import{HStack as C,Box as A,VStack as $}from"@styled/jsx";import"../feedback/progress-bar.js";import{token as S}from"@styled/tokens";import U from"../icons/ico-caret-down.js";import Y from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import D from"./text.js";import"./portal.js";import{createContext as Q,useContext as X,useCallback as O,useState as N,useRef as B,useMemo as Z,Children as m,useEffect as ee,cloneElement as te}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import re from"../feedback/tooltip.js";import{useButton as oe,useFocusRing as le,useKeyboard as ne,mergeProps as ie}from"react-aria";const F={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},R=Q({selectedOption:null,setSelectedOption:()=>{}}),_=({value:r,label:s,size:u="lg",isFocused:y})=>{const{selectedOption:d,setSelectedOption:p}=X(R),i=d?.value===r,l=F[u],x=O(()=>{p({value:r,label:s})},[p,r,s]);return b(C,{py:1.5,gap:2,bg:i?"brand.base":y?"brand.lightest":"",_hover:i?{}:{bg:"brand.lightest"},onClick:x,style:{paddingLeft:l.width,paddingRight:l.width},children:[o(A,{style:{minWidth:l.width},children:i&&o(G,{width:l.check,height:l.check,color:S("colors.text.quaternary")})}),o(D,{size:u,fontWeight:"medium",fontColor:i?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:s})]})},j=({children:r,onSelect:s,label:u,placeholder:y="Select one",selectedValue:d,size:p="lg",tooltipContent:i,disabled:l,viewMax:x=5,...q})=>{const[h,g]=N(!1),[t,f]=N(null),v=B(null),k=B(null),a=F[p],H=x*a.mult+1,I=O(()=>{g(e=>!e),h||(f(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[h]),K=O(e=>{s(e.value),g(!1)},[s]),z=Z(()=>{const e=m.toArray(r).find(n=>n.props.value===d);return e?e.props.label:y},[d,r]),{buttonProps:L}=oe({...q,isDisabled:l,onPress:I},v),{focusProps:V,isFocusVisible:M}=le(),{keyboardProps:T}=ne({onKeyDown:e=>{var n,c;if(!h)return;let w=t;const E=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?f(m.count(r)-1):(w=t>0?t-1:m.count(r)-1,f(w));break;case"ArrowDown":e.preventDefault(),t===null?f(0):(w=t<m.count(r)-1?t+1:0,f(w));break;case"Enter":if(e.preventDefault(),(n=v.current)===null||n===void 0||n.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&s(P.props.value)}break;case"Escape":g(!1),(c=v.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=n=>{var c;!((c=k.current)===null||c===void 0)&&c.contains(n.target)||g(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(R.Provider,{value:{selectedOption:{value:d??"",label:z},setSelectedOption:K},children:b($,{gap:2,w:"full",alignItems:"flex-start",children:[(u||i)&&b(C,{gap:2,opacity:l?.3:"",transition:"all linear 120ms",children:[u&&o(D,{size:"sm",fontWeight:"medium",children:u}),i&&o(re,{isDisabled:l,content:i,children:o(J,{className:W({w:4,h:4,color:"neutral.primary"})})})]}),b("button",{className:W({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:M?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:v,...ie(L,V,T),children:[b(C,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(D,{truncate:!0,size:p,fontColor:d?"text.primary":"text.tertiary",children:z}),h?o(Y,{width:a.caret,height:a.caret,color:S("colors.brand.base")}):o(U,{width:a.caret,height:a.caret,color:S("colors.brand.base")})]}),h&&o(A,{ref:k,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,n)=>te(e,{isFocused:n===t,size:p}))})]})]})})};_.displayName="DropdownOption",j.displayName="DropdownSelector";export{_ as DropdownOption,j as DropdownSelector};
|
|
2
2
|
//# sourceMappingURL=dropdown-selector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' | 'md' | 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData | null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label || tooltipContent) && (\n <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"47BAkDA,MAAMA,EAAQ,CACZ,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,WAAY,IAAK,GAAI,MAAO,UAAW,KAAM,IAAM,EACvF,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,YAAa,IAAK,GAAI,MAAO,UAAW,KAAM,IAAM,EACxF,GAAI,CAAE,MAAO,GAAI,MAAO,GAAI,OAAQ,OAAQ,IAAK,GAAI,MAAO,OAAQ,KAAM,GAAK,GAG3EC,EAAkBC,EAAmC,CACzD,eAAgB,KAChB,kBAAmB,IAAK,CACzB,CAAA,CAAA,EAEYC,EAAiB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,KAAM,UAAAC,CAAS,IAA2B,CAC9F,KAAM,CAAE,eAAAC,EAAgB,kBAAAC,CAAiB,EAAKC,EAAWT,CAAe,EAClEU,EAAaH,GAAgB,QAAUJ,EACvCQ,EAAYZ,EAAMM,CAAI,EAEtBO,EAAqBC,EAAY,IAAK,CAC1CL,EAAkB,CAAE,MAAAL,EAAO,MAAAC,CAAK,CAAE,CACpC,EAAG,CAACI,EAAmBL,EAAOC,CAAK,CAAC,EAEpC,OACEU,EAACC,EAAM,CACL,GAAI,IACJ,IAAK,EACL,GAAIL,EAAa,aAAeJ,EAAY,iBAAmB,GAC/D,OAASI,EAAwC,CAAA,EAA3B,CAAE,GAAI,gBAAgB,EAC5C,QAASE,EACT,MAAO,CAAE,YAAaD,EAAU,MAAO,aAAcA,EAAU,KAAO,EAAA,SAAA,CAEtEK,EAACC,EAAG,CAAC,MAAO,CAAE,SAAUN,EAAU,KAAK,EACpC,SAAAD,GACCM,EAACE,GAAa,MAAOP,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,EAAM,wBAAwB,GACrG,CAAA,EAEHH,EAACI,EAAI,CACH,KAAMf,EACN,WAAW,SACX,UAAWK,EAAa,kBAAoB,eAC5C,OAAQ,CAAE,UAAW,QAEpB,SAAAN,CACI,CAAA,CAAA,CAAA,CAAA,CAGb,EAEaiB,EAAmB,CAAC,CAC/B,SAAAC,EACA,SAAAC,EACA,MAAAnB,EACA,YAAAoB,EAAc,aACd,cAAAC,EACA,KAAApB,EAAO,KACP,eAAAqB,EACA,SAAAC,EACA,QAAAC,EAAU,EACV,GAAGC,CAAK,IACkB,CAC1B,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CAACC,EAAcC,CAAe,EAAIF,EAAwB,IAAI,EAC9DG,EAAYC,EAA0B,IAAI,EAC1CC,EAAcD,EAAuB,IAAI,EACzCzB,EAAYZ,EAAMM,CAAI,EACtBiC,EAAYV,EAAUjB,EAAU,KAAO,EAEvC4B,EAAiB1B,EAAY,IAAK,CACtCkB,EAAUS,GAAQ,CAACA,CAAI,EAClBV,IACHI,EAAgB,IAAI,EACpB,WAAW,IAAK,CAAA,IAAAO,EAAC,OAAAA,EAAAJ,EAAY,qCAAS,OAAO,CAAA,EAEjD,EAAG,CAACP,CAAM,CAAC,EAELY,EAAe7B,EAClB8B,GAAsB,CACrBpB,EAASoB,EAAO,KAAK,EACrBZ,EAAU,EAAK,CACjB,EACA,CAACR,CAAQ,CAAC,EAGNqB,EAAgBC,EAAQ,IAAK,CAEjC,MAAMC,EADgBC,EAAS,QAAQzB,CAAQ,EACZ,KAAK0B,GAASA,EAAM,MAAM,QAAUvB,CAAa,EACpF,OAAOqB,EAAeA,EAAa,MAAM,MAAQtB,CACnD,EAAG,CAACC,EAAeH,CAAQ,CAAC,EAEtB,CAAE,YAAA2B,CAAa,EAAGC,GACtB,CACE,GAAGrB,EACH,WAAYF,EACZ,QAASY,GAEXJ,CAAS,EAGL,CAAE,WAAAgB,EAAY,eAAAC,GAAmBC,KAEjC,CAAE,cAAAC,CAAe,EAAGC,GAAY,CACpC,UAAWC,GAAQ,SACjB,GAAI,CAAC1B,EAAQ,OAEb,IAAI2B,EAAkBxB,EACtB,MAAMyB,EAAaX,EAAS,QAAQzB,CAAQ,EAE5C,OAAQkC,EAAM,IACZ,CAAA,IAAK,UACHA,EAAM,iBACFvB,IAAiB,KACnBC,EAAgBa,EAAS,MAAMzB,CAAQ,EAAI,CAAC,GAE5CmC,EAAkBxB,EAAe,EAAIA,EAAe,EAAIc,EAAS,MAAMzB,CAAQ,EAAI,EACnFY,EAAgBuB,CAAe,GAEjC,MACF,IAAK,YACHD,EAAM,eAAc,EAChBvB,IAAiB,KACnBC,EAAgB,CAAC,GAEjBuB,EAAkBxB,EAAec,EAAS,MAAMzB,CAAQ,EAAI,EAAIW,EAAe,EAAI,EACnFC,EAAgBuB,CAAe,GAEjC,MACF,IAAK,QAGH,GAFAD,EAAM,kBACNf,EAAAN,EAAU,WAAS,MAAAM,IAAA,QAAAA,EAAA,MAAA,EACfR,IAAiB,KAAM,OAC3B,GAAIA,GAAgB,GAAKA,EAAeyB,EAAW,OAAQ,CACzD,MAAMC,EAAgBD,EAAWzB,CAAY,EACzC0B,GACFpC,EAASoC,EAAc,MAAM,KAAK,CAEtC,CACA,MACF,IAAK,SACH5B,EAAU,EAAK,GACf6B,EAAAzB,EAAU,WAAS,MAAAyB,IAAA,QAAAA,EAAA,MACnB,EAAA,KAGJ,CACF,CACD,CAAA,EAED,OAAAC,GAAU,IAAK,CACb,MAAMC,EAAeN,GAAqB,OACnC,GAAAf,EAAAJ,EAAY,WAAO,MAAAI,IAAA,SAAAA,EAAE,SAASe,EAAM,MAAc,GACrDzB,EAAU,EAAK,CAEnB,EAEA,OAAA,SAAS,iBAAiB,YAAa+B,CAAW,EAE3C,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAW,CACvD,CACF,EAAG,EAAE,EAGH9C,EAAChB,EAAgB,SACf,CAAA,MAAO,CAAE,eAAgB,CAAE,MAAOyB,GAAiB,GAAI,MAAOmB,CAAe,EAAE,kBAAmBF,CAAY,WAE9G5B,EAACiD,EAAO,CAAA,IAAK,EAAG,EAAE,OAAO,WAAW,aAAY,SAAA,EAC5C3D,GAASsB,IACTZ,EAACC,EAAO,CAAA,IAAK,EAAG,QAASY,EAAW,GAAM,GAAI,WAAY,6BACvDvB,GACCY,EAACI,EAAI,CAAC,KAAK,KAAK,WAAW,SACxB,SAAAhB,CACI,CAAA,EAGRsB,GACCV,EAACgD,GAAO,CAAC,WAAYrC,EAAU,QAASD,EACtC,SAAAV,EAACiD,EAAqB,CAAC,UAAWC,EAAI,CAAE,EAAG,EAAG,EAAG,EAAG,MAAO,iBAAmB,CAAA,GACtE,CAAA,CACX,CACM,CAAA,EAGXpD,EAAA,SAAA,CACE,UAAWoD,EAAI,CACb,EAAG,OACH,EAAG,cACH,GAAI,kBACJ,YAAa,OACb,YAAa,oBACb,QAAS,KACT,WAAY,mBACZ,SAAU,WACV,OAAQ,UACR,aAAc,aACd,aAAcd,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,OAAQ,CAAE,YAAa,iBAAmB,EAC1C,UAAW,CAAE,QAAS,GAAK,cAAe,MAAQ,EACnD,EACD,IAAKjB,KACDgC,GAAWlB,EAAaE,EAAYG,CAAa,YAErDxC,EAACC,GAAO,EAAE,OAAO,EAAG,EAAG,eAAe,gBAAgB,MAAO,CAAE,OAAQJ,EAAU,MAAQ,EAAA,SAAA,CACvFK,EAACI,EAAI,CAAC,SAAS,GAAA,KAAMf,EAAM,UAAWoB,EAAgB,eAAiB,gBAAe,SACnFmB,CAAa,CAAA,EAEfd,EACCd,EAACoD,EAAU,CAAC,MAAOzD,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,EAAM,mBAAmB,CAAK,CAAA,EAElGH,EAACqD,EAAa,CAAA,MAAO1D,EAAU,MAAO,OAAQA,EAAU,MAAO,MAAOQ,EAAM,mBAAmB,CAAC,CAAA,CACjG,CACM,CAAA,EAERW,GACCd,EAACC,EACC,CAAA,IAAKoB,EACL,SAAU,GACV,GAAI,EACJ,GAAG,kBACH,SAAS,WACT,EAAE,OACF,QAAQ,QACR,UAAU,uCACV,MAAO,CAAE,UAAW,GAAGC,CAAS,MAAO,IAAK3B,EAAU,GAAK,EAC3D,UAAU,OACV,QAAQ,OACR,OAAO,MAEN,SAAAoC,EAAS,IAAIzB,EAAU,CAAC0B,EAAOsB,IAC9BC,GAAavB,EAA4C,CACvD,UAAWsB,IAAUrC,EACrB,KAAA5B,CACD,CAAA,CAAC,CAEA,CAAA,CACP,GACM,CACF,CAAA,CAAA,CAAA,CAGf,EAEAH,EAAe,YAAc,iBAC7BmB,EAAiB,YAAc"}
|