) will\n * break the sibling CSS selector and prevent error styles from being applied.\n *\n * Forcing error styles with utility classes like `v-input-error` on a\n * parent will cause non-listbox text content (e.g., a
subtitle inside a\n * ListboxItem) to also turn red, which may not be the desired behavior.\n *\n * Keep the Label and InputContainer as direct children of DropdownContainer to ensure\n * error states render correctly.\n */\nexport const ErrorCombobox = () => {\n const id = useId();\n const [errorState, setErrorState] = useState(false);\n\n const {\n getInputProps,\n getItemProps,\n getLabelProps,\n getMenuProps,\n getToggleButtonProps,\n selectItem,\n highlightedIndex,\n inputValue,\n isOpen,\n selectedItem,\n } = useCombobox({\n id,\n items,\n itemToString,\n stateReducer,\n });\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n
\n \n \n Label (required) \n \n 0,\n 'aria-owns': listboxId,\n onChange: () => selectItem(null),\n })}\n />\n \n {isOpen ? \n {errorState && !isOpen && (\n \n \n )}\n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n \n \n \n \n (!inputValue && !selectedItem ? setErrorState(true) : setErrorState(false))}>\n Submit\n \n {\n setErrorState(false);\n selectItem(null);\n }}\n >\n Reset\n \n \n \n );\n};\n"
},
"name": "Combobox with error"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Default Comboboxes",
"url": {
"iframe": "components/combobox/read-only-combobox",
"github": "apps/workshop/src/examples/components/combobox/read-only-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny } from '@visa/nova-icons-react';\nimport { Button, Combobox, DropdownContainer, Input, InputContainer, Label, Listbox, ListboxContainer, ListboxItem, Radio, UtilityFragment } from '@visa/nova-react';\nimport { useCombobox } from 'downshift';\nimport { useId } from 'react';\n\ntype Item = { value: string };\n\nconst items: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const ReadOnlyCombobox = () => {\n const id = useId();\n const { getInputProps, getLabelProps, getMenuProps, getItemProps, getToggleButtonProps, inputValue } = useCombobox({\n id,\n items: items,\n itemToString,\n initialInputValue: 'Option A',\n });\n\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n
\n \n \n Label \n \n \n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n \n \n \n );\n};\n"
},
"name": "Read-only combobox"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Default Comboboxes",
"url": {
"iframe": "components/combobox/disabled-combobox",
"github": "apps/workshop/src/examples/components/combobox/disabled-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox } from 'downshift';\nimport { useId } from 'react';\n\ntype Item = { value: string };\n\nconst items: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const DisabledCombobox = () => {\n const id = useId();\n const { getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, inputValue, isOpen } =\n useCombobox({\n id,\n items: items,\n itemToString,\n initialInputValue: 'Option A',\n });\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n
\n \n \n Label \n \n \n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n \n \n \n );\n};\n"
},
"name": "Disabled combobox"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Default Comboboxes",
"url": {
"iframe": "components/combobox/item-disabled-combobox",
"github": "apps/workshop/src/examples/components/combobox/item-disabled-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useId } from 'react';\n\ntype Item = { value: string };\n\nconst items: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const stateReducer =
(\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) =>\n // this prevents on mouse hover, the item in the list is automatic selected\n type === useCombobox.stateChangeTypes.ItemMouseMove || type === useCombobox.stateChangeTypes.MenuMouseLeave\n ? {\n ...changes, // default Downshift new state changes on item selection.\n highlightedIndex: state.highlightedIndex,\n }\n : changes;\n\nexport const ItemDisabledCombobox = () => {\n const id = useId();\n const {\n getInputProps,\n getItemProps,\n getLabelProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n inputValue,\n isOpen,\n } = useCombobox({\n id,\n items: items,\n itemToString,\n stateReducer,\n isItemDisabled: item => item.value === 'Option C', // This is just to mock the third option to be disabled\n });\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n \n \n \n Label \n \n \n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n \n \n \n );\n};\n"
},
"name": "Combobox with disabled option"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Default Comboboxes",
"url": {
"iframe": "components/combobox/no-icon-combobox",
"github": "apps/workshop/src/examples/components/combobox/no-icon-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useId } from 'react';\n\ntype Item = { value: string };\n\nconst items: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const stateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) =>\n // this prevents on mouse hover, the item in the list is automatic selected\n type === useCombobox.stateChangeTypes.ItemMouseMove || type === useCombobox.stateChangeTypes.MenuMouseLeave\n ? {\n ...changes, // default Downshift new state changes on item selection.\n highlightedIndex: state.highlightedIndex,\n }\n : changes;\n\nexport const NoIconCombobox = () => {\n const id = useId();\n const { getInputProps, getItemProps, getLabelProps, getMenuProps, highlightedIndex, inputValue, isOpen } =\n useCombobox({\n id,\n items: items,\n itemToString,\n stateReducer,\n });\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n \n \n \n Label \n \n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n \n \n \n );\n};\n"
},
"name": "Combobox without dropdown chevron"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Combobox behaviors",
"url": {
"iframe": "components/combobox/autocomplete-with-manual-selection-combobox",
"github": "apps/workshop/src/examples/components/combobox/autocomplete-with-manual-selection-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useId, useState } from 'react';\n\ntype Item = { value: string };\n\nconst defaultItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const filter = (item: Item, inputValue: string = '') =>\n item.value.toLowerCase().includes(inputValue!.toLowerCase());\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const stateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) =>\n // this prevents on mouse hover, the item in the list is automatic selected\n type === useCombobox.stateChangeTypes.ItemMouseMove || type === useCombobox.stateChangeTypes.MenuMouseLeave\n ? {\n ...changes, // default Downshift new state changes on item selection.\n highlightedIndex: state.highlightedIndex,\n }\n : changes;\n\nexport const AutocompleteWithManualSelectionCombobox = () => {\n const id = useId();\n const [items, setItems] = useState(defaultItems);\n const {\n getInputProps,\n getItemProps,\n getLabelProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n inputValue,\n isOpen,\n } = useCombobox({\n id,\n items,\n itemToString,\n onInputValueChange: ({ inputValue }) => {\n setItems(defaultItems.filter(item => filter(item, inputValue)));\n },\n stateReducer,\n });\n\n const { id: listboxId, ...listboxProps } = getMenuProps();\n const resultsFound = items.length > 0;\n\n return (\n \n \n \n Label \n \n \n \n {isOpen ? \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n {item.value}\n \n ))}\n {!resultsFound && (\n \n No results found. \n \n )}\n \n \n \n );\n};\n"
},
"name": "Combobox with filterable menu and manual selection"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Combobox behaviors",
"url": {
"iframe": "components/combobox/autocomplete-with-automatic-selection-combobox",
"github": "apps/workshop/src/examples/components/combobox/autocomplete-with-automatic-selection-combobox.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useId, useState } from 'react';\n\ntype Item = { value: string };\n\nconst defaultItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const filter = (item: Item, inputValue: string = '') =>\n item.value.toLowerCase().includes(inputValue.toLowerCase());\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const stateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) =>\n // this prevents on mouse hover, the item in the list is automatic selected\n type === useCombobox.stateChangeTypes.ItemMouseMove || type === useCombobox.stateChangeTypes.MenuMouseLeave\n ? {\n ...changes, // default Downshift new state changes on item selection.\n highlightedIndex: state.highlightedIndex,\n }\n : changes;\n\nexport const AutocompleteWithAutomaticSelectionCombobox = () => {\n const id = useId();\n const [items, setItems] = useState(defaultItems);\n const {\n isOpen,\n getToggleButtonProps,\n getLabelProps,\n getInputProps,\n getMenuProps,\n getItemProps,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items: items,\n itemToString,\n onInputValueChange: ({ inputValue }) => {\n setItems(defaultItems.filter(item => filter(item, inputValue)));\n if (inputValue) setHighlightedIndex(0);\n },\n stateReducer,\n });\n\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n return (\n \n \n \n Label \n \n \n \n {isOpen ? \n \n \n \n \n \n {items.length > 0 ? (\n items.map((item, index) => (\n \n \n \n {item.value}\n \n ))\n ) : (\n \n No results found. \n \n )}\n \n \n \n );\n};\n"
},
"name": "Combobox with filterable menu and automatic selection"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Custom comboboxes",
"url": {
"iframe": "components/combobox/reusable",
"github": "apps/workshop/src/examples/components/combobox/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import {\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaClearAltTiny,\n VisaErrorTiny,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { type UseComboboxState, type UseComboboxStateChangeOptions, useCombobox } from 'downshift';\nimport { type FocusEvent, type ReactNode, useId, useMemo, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\n\n// Types\nexport interface ComboboxOption {\n disabled?: boolean;\n label: string;\n value: T;\n}\n\n// Nova Combobox Component Props\nexport interface NovaComboboxProps {\n autoSelect?: boolean;\n clearable?: boolean;\n description?: string;\n disabled?: boolean;\n filterable?: boolean;\n hideToggleButton?: boolean;\n id?: string;\n invalid?: boolean;\n label?: string;\n leadingIcon?: ReactNode;\n message?: string;\n onChange?: (value: T | null) => void;\n options?: ComboboxOption[];\n readonly?: boolean;\n required?: boolean;\n value?: T | null;\n}\n\n// Item to string converter\nconst itemToString = (item: ComboboxOption | null) => (item ? item.label : '');\n\n// State reducer to prevent mouse hover selection\nconst stateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) =>\n type === useCombobox.stateChangeTypes.ItemMouseMove || type === useCombobox.stateChangeTypes.MenuMouseLeave\n ? {\n ...changes,\n highlightedIndex: state.highlightedIndex,\n }\n : changes;\n\n// Main Nova Combobox Component\nexport const NovaCombobox = ({\n autoSelect = false,\n clearable = false,\n description,\n disabled = false,\n filterable = false,\n hideToggleButton = false,\n id: idProp,\n invalid = false,\n label = '',\n leadingIcon,\n message,\n onChange,\n options = [],\n readonly = false,\n required = false,\n value: valueProp,\n ...remainingProps\n}: NovaComboboxProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n const [focused, setFocused] = useState(false);\n const [items, setItems] = useState(options);\n\n // Find initial item from value prop\n const initialItem = useMemo(\n () => (valueProp !== null && valueProp !== undefined ? options.find(opt => opt.value === valueProp) || null : null),\n [valueProp, options]\n );\n\n const {\n getInputProps,\n getItemProps,\n getLabelProps,\n getMenuProps,\n getToggleButtonProps,\n highlightedIndex,\n inputValue,\n isOpen,\n selectItem,\n selectedItem,\n setHighlightedIndex,\n } = useCombobox({\n id: `${id}-combobox`,\n items,\n itemToString,\n ...(initialItem && { initialSelectedItem: initialItem }),\n stateReducer,\n isItemDisabled: item => item.disabled || false,\n onInputValueChange: ({ inputValue: newInputValue }) => {\n if (filterable && newInputValue !== undefined) {\n const filtered = options.filter(item => item.label.toLowerCase().includes(newInputValue.toLowerCase()));\n setItems(filtered);\n if (autoSelect && newInputValue) {\n setHighlightedIndex(0);\n }\n }\n },\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n onChange?.(newSelectedItem?.value ?? null);\n },\n });\n\n const { id: listboxId, ...listboxProps } = getMenuProps();\n\n const handleBlur = (event: FocusEvent) => {\n if (!event.currentTarget.contains(event.relatedTarget)) {\n setFocused(false);\n }\n };\n\n const onClear = () => {\n selectItem(null);\n onChange?.(null);\n };\n\n const showClearButton = clearable && inputValue.length > 0 && focused && !readonly && !disabled;\n const resultsFound = items.length > 0;\n const showInlineMessage = description && !isOpen && !invalid;\n const showErrorMessage = invalid && message && !isOpen;\n\n // Calculate aria-describedby\n const inputDescribedBy = useMemo(() => {\n const ids: string[] = [];\n if (description) ids.push(`${id}-description`);\n if (message) ids.push(`${id}-message`);\n return ids.length > 0 ? ids.join(' ') : undefined;\n }, [id, description, message]);\n\n return (\n \n \n \n \n {label}\n {required ? ' (required)' : ''}\n \n \n {\n setFocused(true);\n }}\n >\n {leadingIcon}\n \n \n {isOpen ? \n {showInlineMessage && {description} }\n {showErrorMessage && (\n \n \n )}\n \n \n \n \n {resultsFound ? (\n items.map((item, index) => (\n \n \n \n {item.label}\n \n ))\n ) : (\n \n \n No results found. \n \n \n )}\n \n \n \n );\n};\n\n// export default NovaCombobox;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n autoSelect: boolean;\n clearable: boolean;\n description: string;\n disabled: boolean;\n filterable: boolean;\n hideToggleButton: boolean;\n invalid: boolean;\n label: string;\n leadingIcon: boolean;\n message: string;\n options: string;\n readonly: boolean;\n required: boolean;\n}\n\nconst demoOptions: ComboboxOption[] = [\n { label: 'Option A', value: 'option-a' },\n { label: 'Option B', value: 'option-b' },\n { label: 'Option C', value: 'option-c', disabled: true },\n { label: 'Option D', value: 'option-d' },\n { label: 'Option E', value: 'option-e' },\n];\n\n// Demo Component\nexport const NovaComboboxDemo = () => {\n const defaultCustomizations: DemoCustomizations = {\n autoSelect: false,\n clearable: false,\n description: 'This is optional text that describes the label in more detail.',\n disabled: false,\n filterable: false,\n hideToggleButton: false,\n invalid: false,\n label: 'Label',\n leadingIcon: false,\n message: 'This is required text that describes the error in more detail.',\n options: JSON.stringify(demoOptions, null, 2),\n readonly: false,\n required: false,\n };\n\n const [customizations, setCustomizations] = useState<\n Omit & { options: ComboboxOption[] }\n >({\n ...defaultCustomizations,\n options: demoOptions,\n });\n\n const [formValues, setFormValues] = useState(defaultCustomizations);\n const [selectedValue, setSelectedValue] = useState(null);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n try {\n const parsedOptions = JSON.parse(formValues.options || '[]') as ComboboxOption[];\n setCustomizations({\n ...formValues,\n options: parsedOptions,\n });\n } catch (error) {\n console.error('Invalid JSON:', error);\n }\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations({\n ...defaultCustomizations,\n options: demoOptions,\n });\n setSelectedValue(null);\n };\n\n return (\n \n
: undefined}\n message={customizations.invalid ? customizations.message : undefined}\n onChange={setSelectedValue}\n options={customizations.options}\n readonly={customizations.readonly}\n required={customizations.required}\n value={selectedValue}\n />\n\n
\n \n Selected value: {selectedValue || 'None'}\n \n
\n\n
\n \n \n \n
\n
\n Headline \n Subtitle \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n Primary action \n \n \n \n );\n};\n"
},
"name": "Default content card"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/with-buttons-content-card",
"github": "apps/workshop/src/examples/components/content-card/with-buttons-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny, VisaFileUploadTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n ContentCard,\n ContentCardBody,\n ContentCardSubtitle,\n ContentCardTitle,\n Link,\n Typography,\n Utility,\n} from '@visa/nova-react';\n\nexport const WithButtonsContentCard = () => {\n return (\n \n \n Headline \n \n \n \n Subtitle \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n Primary action \n \n \n \n );\n};\n"
},
"name": "Content card with UI buttons"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/clickable-content-card",
"github": "apps/workshop/src/examples/components/content-card/clickable-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport {\n ContentCard,\n ContentCardBody,\n ContentCardSubtitle,\n ContentCardTitle,\n Typography,\n Utility,\n} from '@visa/nova-react';\n\nexport const ClickableContentCard = () => {\n return (\n \n \n Headline\n \n \n Subtitle\n \n \n );\n};\n"
},
"name": "Clickable content card"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/clickable-disabled-content-card",
"github": "apps/workshop/src/examples/components/content-card/clickable-disabled-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaSecurityLockTiny } from '@visa/nova-icons-react';\nimport {\n ContentCard,\n ContentCardBody,\n ContentCardSubtitle,\n ContentCardTitle,\n Typography,\n Utility,\n} from '@visa/nova-react';\n\nexport const ClickableDisabledContentCard = () => {\n return (\n \n \n \n Headline\n \n \n \n Subtitle\n \n \n This is optional text that describes the headline in more detail.\n \n \n \n );\n};\n"
},
"name": "Disabled clickable content card"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/compact-content-card",
"github": "apps/workshop/src/examples/components/content-card/compact-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { ContentCard, ContentCardBody, ContentCardSubtitle, ContentCardTitle, Link, Utility } from '@visa/nova-react';\n\nexport const CompactContentCard = () => {\n return (\n \n Headline \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n \n \n \n );\n};\n"
},
"name": "Compact content card"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/category-content-card",
"github": "apps/workshop/src/examples/components/content-card/category-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountLow, VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n ContentCard,\n ContentCardBody,\n ContentCardSubtitle,\n ContentCardTitle,\n Link,\n Typography,\n Utility,\n} from '@visa/nova-react';\n\nexport const CategoryContentCard = () => {\n return (\n \n \n \n Category\n \n \n \n Headline\n \n \n Subtitle\n \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n Primary action \n \n \n \n );\n};\n"
},
"name": "Content card with category"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/icon-content-card",
"github": "apps/workshop/src/examples/components/content-card/icon-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny, VisaSecurityLockHigh } from '@visa/nova-icons-react';\nimport { ContentCard, ContentCardBody, ContentCardTitle, Divider, Link, Typography, Utility } from '@visa/nova-react';\n\nexport const IconContentCard = () => {\n return (\n \n Headline \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n \n \n \n );\n};\n"
},
"name": "Content card with icon"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Default content cards",
"url": {
"iframe": "components/content-card/image-header-content-card",
"github": "apps/workshop/src/examples/components/content-card/image-header-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n ContentCard,\n ContentCardBody,\n ContentCardImage,\n ContentCardSubtitle,\n ContentCardTitle,\n Link,\n Typography,\n Utility,\n} from '@visa/nova-react';\n\n/// This is the base url for where your site is deployed. `import.meta.env.BASE_URL` is the environment variable used to import the base url for Vite. Change this import to match your build tool's base url.\nconst BASE_URL = import.meta.env.BASE_URL;\n\nexport const ImageHeaderContentCard = () => {\n return (\n \n \n // If your image is NOT decorative, be sure to write alt text describing the image\n alt=\"\"\n // Make sure the src path is correct for your image\n src={BASE_URL + '/content-card-image.png'}\n style={{ blockSize: 'auto', inlineSize: '100%', objectFit: 'contain', overflow: 'hidden' }}\n tag=\"img\"\n />\n Headline \n Subtitle \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n Primary action \n \n \n \n );\n};\n"
},
"name": "Content card with image"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Dashboard content cards",
"url": {
"iframe": "components/content-card/compact-dashboard-content-card",
"github": "apps/workshop/src/examples/components/content-card/compact-dashboard-content-card.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaArrowUpTiny } from '@visa/nova-icons-react';\nimport { ContentCard, ContentCardBody, ContentCardTitle, Typography, Utility } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'compact-dashboard-content-card';\n\nexport const CompactDashboardContentCard = () => {\n return (\n \n \n Headline \n \n \n This is optional text that describes the headline and subtitle in more detail.\n \n \n \n 0,000\n \n \n \n Label\n \n \n \n \n \n );\n};\n"
},
"name": "Compact dashboard content card"
}
],
"propertySections": [
{
"order": 1,
"name": "Contentcard",
"selector": "\n Label (required) \n \n \n \n );\n};\n"
},
"name": "Default date selector"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Date selectors",
"url": {
"iframe": "components/date-and-time-selectors/read-only-date-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/read-only-date-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'read-only-date-selector';\n\nexport const ReadOnlyDateSelector = () => {\n return (\n \n Label (required) \n \n \n \n );\n};"
},
"name": "Read-only date selector"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Date selectors",
"url": {
"iframe": "components/date-and-time-selectors/disabled-date-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/disabled-date-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-date-selector';\n\nexport const DisabledDateSelector = () => {\n return (\n \n Label (required) \n \n \n \n );\n};"
},
"name": "Disabled date selector"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Date selectors",
"url": {
"iframe": "components/date-and-time-selectors/date-selector-with-error",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/date-selector-with-error.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { useState } from 'react';\nimport { Button, Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'date-selector-with-error';\n\nexport const DateSelectorWithError = () => {\n const [errorState, setErrorState] = useState(false);\n\n return (\n <>\n \n Label (required) \n \n \n {errorState && (\n \n \n )}\n \n \n setErrorState(true)}>\n Submit\n \n setErrorState(false)}>\n Reset\n \n \n \n );\n};\n"
},
"name": "Date selector with error"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Date selectors",
"url": {
"iframe": "components/date-and-time-selectors/min-max-date-input",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/min-max-date-input.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'min-max-date';\n\nexport const MinMaxDateInput = () => {\n return (\n \n Label (required) \n \n \n \n );\n};\n"
},
"name": "Date selector with disabled dates"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Date Range Selectors",
"url": {
"iframe": "components/date-and-time-selectors/default-date-range-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/default-date-range-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState, type FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-date-range-selector';\n\nexport const DefaultDateRangeSelector = () => {\n const [endDate, setEndDate] = useState('');\n const [startDate, setStartDate] = useState('');\n\n const onDateChange = (event: FormEvent, isStartDate: boolean) => {\n const { value } = event.currentTarget;\n isStartDate ? setStartDate(value) : setEndDate(value);\n };\n\n return (\n \n \n Start Date Label (required) \n \n onDateChange(event, true)}\n required\n type=\"date\"\n />\n \n \n \n End Date Label (required) \n \n onDateChange(event, false)}\n required\n type=\"date\"\n />\n \n \n \n );\n};\n"
},
"name": "Default date range selector"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Date Range Selectors",
"url": {
"iframe": "components/date-and-time-selectors/stacked-date-range-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/stacked-date-range-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState, type FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'stacked-date-range-selector';\n\nexport const StackedDateRangeSelector = () => {\n const [endDate, setEndDate] = useState('');\n const [startDate, setStartDate] = useState('');\n\n const onDateChange = (event: FormEvent, isStartDate: boolean) => {\n const { value } = event.currentTarget;\n isStartDate ? setStartDate(value) : setEndDate(value);\n };\n\n return (\n \n \n Start Date Label (required) \n \n onDateChange(event, true)}\n required\n type=\"date\"\n />\n \n \n \n End Date Label (required) \n \n onDateChange(event, false)}\n required\n type=\"date\"\n />\n \n \n \n );\n};"
},
"name": "Stacked date range selector"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Time selectors",
"url": {
"iframe": "components/date-and-time-selectors/default-time-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/default-time-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-time-selector';\n\nexport const DefaultTimeSelector = () => {\n return (\n \n Label (required) \n \n \n \n );\n};\n"
},
"name": "Default time selector"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Time selectors",
"url": {
"iframe": "components/date-and-time-selectors/read-only-time-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/read-only-time-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'read-only-time-selector';\n\nexport const ReadOnlyTimeSelector = () => {\n return (\n \n Label (required) \n \n \n \n );\n};\n"
},
"name": "Read-only time selector"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Time selectors",
"url": {
"iframe": "components/date-and-time-selectors/disabled-time-selector",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/disabled-time-selector.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-time-selector';\n\nexport const DisabledTimeSelector = () => {\n return (\n \n Label (required) \n \n \n \n );\n};\n"
},
"name": "Disabled time selector"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Time selectors",
"url": {
"iframe": "components/date-and-time-selectors/time-selector-with-error",
"github": "apps/workshop/src/examples/components/date-and-time-selectors/time-selector-with-error.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { useState } from 'react';\nimport { Button, Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'time-selector-with-error';\n\nexport const TimeSelectorWithError = () => {\n const [errorState, setErrorState] = useState(false);\n\n return (\n <>\n \n Label (required) \n \n \n {errorState && (\n \n \n )}\n \n \n setErrorState(true)}>\n Submit\n \n setErrorState(false)}>\n Reset\n \n \n \n );\n};\n"
},
"name": "Time selector with error"
}
],
"propertySections": [
{
"order": 1,
"name": "input",
"type": "related",
"selector": " ref.current?.showModal()}>Open default dialog \n onKeyNavigation(e, ref.current?.open)}\n >\n \n Default title \n \n This is required text that describes the dialog title in more detail.\n \n \n Primary action \n Secondary action \n \n \n ref.current?.close()}>\n \n \n \n );\n};\n"
},
"name": "Default dialog"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default Dialogs",
"url": {
"iframe": "components/dialog/error-dialog",
"github": "apps/workshop/src/examples/components/dialog/error-dialog.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n Typography,\n useFocusTrap,\n Utility,\n} from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'error-dialog';\n\nexport const ErrorDialog = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n <>\n ref.current?.showModal()}>Open error dialog \n onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n >\n \n \n \n \n This is required text that describes the dialog title in more detail.\n \n \n Primary action \n \n \n ref.current?.close()}>\n \n \n \n );\n};\n"
},
"name": "Error dialog"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default Dialogs",
"url": {
"iframe": "components/dialog/success-dialog",
"github": "apps/workshop/src/examples/components/dialog/success-dialog.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n Typography,\n useFocusTrap,\n Utility,\n} from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'success-dialog';\n\nexport const SuccessDialog = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n <>\n ref.current?.showModal()}>Open success dialog \n onKeyNavigation(e, ref.current?.open)}\n >\n \n \n \n \n This is required text that describes the dialog title in more detail.\n \n \n Primary action \n \n \n ref.current?.close()}>\n \n \n \n );\n};\n"
},
"name": "Success dialog"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Default Dialogs",
"url": {
"iframe": "components/dialog/warning-dialog",
"github": "apps/workshop/src/examples/components/dialog/warning-dialog.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n Typography,\n useFocusTrap,\n Utility,\n} from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'warning-dialog';\n\nexport const WarningDialog = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n <>\n ref.current?.showModal()}>Open warning dialog \n onKeyNavigation(e, ref.current?.open)}\n >\n \n \n \n \n This is required text that describes the dialog title in more detail.\n \n \n Primary action \n \n \n ref.current?.close()}>\n \n \n \n );\n};\n"
},
"name": "Warning dialog"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Default Dialogs",
"url": {
"iframe": "components/dialog/close-button-dialog",
"github": "apps/workshop/src/examples/components/dialog/close-button-dialog.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { MessageIcon } from '@visa/nova-icons-react';\nimport { Button, Dialog, DialogContent, DialogHeader, Typography, useFocusTrap, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'no-close-dialog';\n\nexport const CloseButtonDialog = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n <>\n ref.current?.showModal()}>Open dialog without close icon \n onKeyNavigation(e, ref.current?.open)}\n >\n \n \n \n \n This is required text that describes the dialog title in more detail.\n \n \n ref.current?.close()}>Close \n \n \n \n \n );\n};\n"
},
"name": "Dialog without close icon button"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Default Dialogs",
"url": {
"iframe": "components/dialog/touring-tips-dialog",
"github": "apps/workshop/src/examples/components/dialog/touring-tips-dialog.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n Typography,\n useFocusTrap,\n Utility,\n} from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'touring-tips-dialog';\n\nexport const TouringTipsDialog = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n const onCloseDialog = () => ref.current?.close();\n\n return (\n <>\n ref.current?.showModal()}>Open touring tips dialog \n onKeyNavigation(e, ref.current?.open)}\n >\n \n Touring tips title \n \n \n \n Touring tips instructions \n \n \n This is required text that describes the dialog title in more detail.\n \n \n 2 of 4 \n \n \n Previous\n \n Next \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Touring tips dialog"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Custom dialog",
"url": {
"iframe": "components/dialog/reusable",
"github": "apps/workshop/src/examples/components/dialog/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n type DialogProperties,\n type MessageType,\n Typography,\n Utility,\n} from '@visa/nova-react';\nimport { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\nimport { NovaSelect } from '../select/reusable';\n\n// Nova Dialog Component Props\nexport type NovaDialogProps = DialogProperties & {\n actions?: ReactNode;\n description?: string;\n dismissible?: boolean;\n onOpenChange?: (open: boolean) => void;\n onPrimaryButtonClick?: (event: React.MouseEvent) => void;\n onSecondaryButtonClick?: (event: React.MouseEvent) => void;\n open?: boolean;\n primaryButtonLabel?: string;\n secondaryButtonLabel?: string;\n showIcon?: boolean;\n title?: string;\n titleContent?: ReactNode;\n};\n\n// Main Nova Dialog Component\nexport const NovaDialog = ({\n actions,\n children,\n description,\n dismissible = false,\n id: idProp,\n messageType,\n onOpenChange,\n onPrimaryButtonClick,\n onSecondaryButtonClick,\n open = false,\n primaryButtonLabel,\n secondaryButtonLabel,\n showIcon = false,\n title,\n titleContent,\n ...remainingProps\n}: NovaDialogProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const dialogRef = useRef(null);\n\n // Handle open/close state changes\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n const dialogOpen = dialog.open;\n if ((open && dialogOpen) || (!open && !dialogOpen)) return; // no change needed\n if (open) {\n dialog.showModal();\n } else {\n dialog.close();\n }\n }, [open]);\n\n // Handle close\n const handleClose = () => {\n onOpenChange?.(false);\n };\n\n // Handle escape key\n const handleEscapeKey = (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || dismissible) return;\n event.preventDefault();\n handleClose();\n };\n\n return (\n \n \n \n {showIcon && [0]['messageType']} />}\n {title}\n {titleContent}\n \n {description && {description} }\n {children}\n \n {primaryButtonLabel && (\n \n {primaryButtonLabel}\n \n )}\n {secondaryButtonLabel && (\n \n {secondaryButtonLabel}\n \n )}\n {actions}\n \n \n\n {dismissible && (\n \n \n )}\n \n );\n};\n\n// export default NovaDialog;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n description: string;\n dismissible: boolean;\n messageType: MessageType;\n primaryButtonLabel: string;\n secondaryButtonLabel: string;\n showIcon: boolean;\n title: string;\n}\n\n// Demo Component\nexport const NovaDialogDemo = () => {\n const [dialogOpen, setDialogOpen] = useState(false);\n\n const messageTypes: { label: string; value: MessageType }[] = [\n { label: 'Information', value: 'information' },\n { label: 'Success', value: 'success' },\n { label: 'Warning', value: 'warning' },\n { label: 'Error', value: 'error' },\n { label: 'Subtle', value: 'subtle' },\n ];\n\n const defaultCustomizations: DemoCustomizations = {\n description: 'This is required text that describes the dialog title in more detail.',\n dismissible: true,\n messageType: 'information',\n primaryButtonLabel: 'Primary action',\n secondaryButtonLabel: 'Secondary action',\n showIcon: true,\n title: 'Nova title',\n };\n\n const [customizations, setCustomizations] = useState(defaultCustomizations);\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n setCustomizations(formValues);\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations(defaultCustomizations);\n };\n\n const handlePrimaryClick = () => {\n console.log('Dialog primary button clicked');\n };\n\n const handleSecondaryClick = () => {\n console.log('Dialog secondary button clicked');\n };\n\n return (\n \n
setDialogOpen(true)}>Open reusable dialog \n\n
\n\n
\n \n \n \n
\n
\n \n Action\n {open ? \n \n \n \n \n \n Label 1\n \n \n \n \n \n \n Label 3\n \n \n \n \n \n \n Label 3\n \n \n \n \n \n \n Label 4\n \n \n \n \n \n \n )}\n
\n );\n};\n"
},
"name": "Default text button dropdown menu"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Icon button dropdown menus",
"url": {
"iframe": "components/dropdown-menu/icon-dropdown-menu",
"github": "apps/workshop/src/examples/components/dropdown-menu/icon-dropdown-menu.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { useClick, useFloating, useInteractions } from '@floating-ui/react';\nimport { VisaOptionHorizontalHigh } from '@visa/nova-icons-react';\nimport { useState } from 'react';\nimport { Button, DropdownButton, DropdownMenu, Listbox, UtilityFragment } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'dropdown-menu-icon';\n\nexport const IconDropdownMenu = () => {\n const [open, setOpen] = useState(false);\n\n const { context, floatingStyles, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: 'bottom-start',\n });\n\n const onClick = useClick(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([onClick]);\n\n return (\n // This div is not required, it's used to show the whole dropdown menu in the example\n \n \n \n \n \n \n \n \n Label 1\n \n \n \n \n \n \n Label 2\n \n \n \n \n \n \n Label 2\n \n \n \n \n \n \n Label 4\n \n \n \n \n \n \n )}\n
\n );\n};\n"
},
"name": "Default icon button dropdown menu"
},
{
"description": "Custom dropdown menu with tabs.",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Custom dropdown menus",
"url": {
"iframe": "components/dropdown-menu/dropdown-menu-with-tabs",
"github": "apps/workshop/src/examples/components/dropdown-menu/dropdown-menu-with-tabs.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { useClick, useFloating, useInteractions } from '@floating-ui/react';\nimport { VisaOptionHorizontalHigh } from '@visa/nova-icons-react';\nimport { Button, DropdownButton, DropdownMenu, Tab, Tabs, UtilityFragment } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'dropdown-menu-with-tabs';\n\nexport const DropdownMenuWithTabs = () => {\n const [open, setOpen] = useState(false);\n\n const { context, floatingStyles, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: 'bottom-start',\n });\n\n const onClick = useClick(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([onClick]);\n\n return (\n // This div is not required, it's used to show the whole dropdown menu in the example\n \n \n \n \n \n \n \n Label 1\n \n \n \n \n Label 2\n \n \n \n \n Label 3\n \n \n \n \n Label 4\n \n \n \n \n \n )}\n
\n );\n};\n"
},
"name": "Dropdown menu with tabs"
},
{
"description": "Custom dropdown menu with leading icons and destructive action.",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Custom dropdown menus",
"url": {
"iframe": "components/dropdown-menu/dropdown-menu-with-leading-icons",
"github": "apps/workshop/src/examples/components/dropdown-menu/dropdown-menu-with-leading-icons.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { useClick, useFloating, useInteractions } from '@floating-ui/react';\nimport {\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaDeleteTiny,\n VisaExportTiny,\n VisaFileDownloadTiny,\n} from '@visa/nova-icons-react';\nimport { Button, DropdownButton, DropdownMenu, Listbox, UtilityFragment } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'dropdown-menu-with-leading-icons';\n\nexport const DropdownMenuWithLeadingIcons = () => {\n const [open, setOpen] = useState(false);\n\n const { context, floatingStyles, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: 'bottom-start',\n });\n\n const onClick = useClick(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([onClick]);\n\n return (\n // This div is not required, it's used to show the whole dropdown menu in the example\n \n \n Action\n {open ? \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n );\n};\n"
},
"name": "Dropdown menu with leading icons and destructive action"
},
{
"description": "A reusable dropdown menu component that can be easily customized and integrated into various parts of your application.",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Custom dropdown menus",
"url": {
"iframe": "components/dropdown-menu/reusable",
"github": "apps/workshop/src/examples/components/dropdown-menu/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { offset, useClick, useDismiss, useFloating, useInteractions, type Placement } from '@floating-ui/react';\nimport {\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaDeleteTiny,\n VisaExportTiny,\n VisaFileDownloadTiny,\n VisaFileUploadTiny,\n VisaOptionHorizontalHigh,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n DropdownButton,\n DropdownMenu,\n Listbox,\n Tab,\n Tabs,\n useModel,\n Utility,\n UtilityFragment,\n type ButtonProperties,\n type UtilityFragmentProperties,\n} from '@visa/nova-react';\nimport {\n cloneElement,\n isValidElement,\n useId,\n useState,\n type FormEvent,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\nimport { NovaSelect } from '../select/reusable';\n\n// Props passed to the trigger element\nexport type DropdownTriggerProps = {\n ref: (node: HTMLElement | null) => void;\n} & Record;\n\nexport type NovaDropdownMenuOption = Omit & {\n label?: ReactNode;\n render?: (item: Omit) => ReactNode;\n prefix?: ReactNode;\n selected?: boolean;\n suffix?: ReactNode;\n vJustifyContent?: UtilityFragmentProperties['vJustifyContent'];\n};\n\n// Nova DropdownMenu Component Props\nexport type NovaDropdownMenuProps = ButtonProperties & {\n element?: ReactElement | ((props: DropdownTriggerProps) => ReactNode);\n maxWidth?: CSSStyleDeclaration['maxInlineSize'];\n offset?: number;\n onOpenChange?: (open: boolean) => void;\n open?: boolean;\n options?: NovaDropdownMenuOption[];\n optionRender?: NovaDropdownMenuOption['render'];\n placement?: Placement;\n showToggleIcon?: boolean;\n};\n\n// Main Nova DropdownMenu Component\nexport const NovaDropdownMenu = ({\n children,\n element,\n id: idProp,\n maxWidth = 'unset',\n offset: offsetValue = 0,\n onOpenChange,\n open: openProp,\n options = [],\n optionRender,\n placement = 'bottom-start',\n showToggleIcon = true,\n ...remainingProps\n}: NovaDropdownMenuProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [open, setOpen] = useModel(openProp, onOpenChange, false);\n\n const { context, floatingStyles, refs } = useFloating({\n middleware: [offset(offsetValue)],\n open,\n onOpenChange: setOpen,\n placement,\n });\n\n const onClick = useClick(context);\n const onDismiss = useDismiss(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([onClick, onDismiss]);\n\n // Props to pass to the trigger element\n const triggerProps: DropdownTriggerProps = {\n ref: refs.setReference,\n ...getReferenceProps(),\n };\n\n const hasSelectedOption = options.some(option => option.selected);\n\n const optionsRendered = options.map((option, index) => {\n const {\n label,\n onClick: onItemClick,\n prefix,\n render,\n selected,\n suffix,\n vJustifyContent,\n ...remainingButtonProps\n } = option;\n const onClick = (e: MouseEvent) => {\n onItemClick?.(e);\n setOpen(false);\n };\n const buttonProps = {\n ...remainingButtonProps,\n 'aria-selected': selected && hasSelectedOption ? 'true' : undefined,\n className: 'v-listbox-item',\n onClick: onClick,\n role: 'tab',\n };\n const renderedProps = { ...buttonProps, ...option } as NovaDropdownMenuOption;\n delete renderedProps.render; // Remove render from props passed to optionRender\n return (\n \n \n {optionRender ? (\n optionRender(renderedProps)\n ) : render ? (\n render(renderedProps)\n ) : (\n \n \n {prefix}\n {label}\n {suffix}\n \n \n )}\n \n \n );\n });\n\n return (\n <>\n {element && (\n <>\n {typeof element === 'function' && element(triggerProps)}\n {isValidElement(element) && cloneElement(element, triggerProps)}\n \n )}\n\n {!element && (\n \n {children}\n {showToggleIcon && (open ? \n \n {hasSelectedOption ? (\n \n {optionsRendered}\n \n ) : (\n {optionsRendered} \n )}\n \n \n )}\n \n );\n};\n\n// export default NovaDropdownMenu;\n\n/** !!! DELETE ME START !!! */\n\nconst demoOptions: NovaDropdownMenuOption[] = [\n { disabled: true, label: 'Label 1' },\n { label: 'Label 2', selected: true },\n { label: 'Label 3' },\n { label: 'Label 4' },\n];\n\n// These are separate from the main options because these can't be customized inside of a textarea input.\nconst demoOptionsIcons: ReactNode[] = [\n // eslint-disable-next-line react/jsx-key\n & { options: NovaDropdownMenuOption[] }\n >({\n ...defaultCustomizations,\n options: demoOptions,\n });\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: FormEvent) => {\n e.preventDefault();\n try {\n const parsedOptions = JSON.parse(formValues.options || '[]') as NovaDropdownMenuOption[];\n setCustomizations({\n ...formValues,\n options: parsedOptions,\n });\n } catch (error) {\n console.error('Invalid JSON for options:', error);\n }\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations({\n ...defaultCustomizations,\n options: demoOptions,\n });\n };\n const handleClick = () => {\n console.log('DropdownMenu button clicked');\n };\n\n const optionsWithCustomizations = customizations.options.map((option, index) => {\n const prefix = customizations.showPrefixIcons ? demoOptionsIcons[index % demoOptionsIcons.length] : undefined;\n const suffix = customizations.showSuffixIcons ? demoOptionsIcons[index % demoOptionsIcons.length] : undefined;\n const vJustifyContent = customizations.showSuffixIcons ? 'between' : undefined;\n const style = customizations.showSuffixIcons ? { minWidth: '150px' } : undefined;\n return { ...option, prefix, suffix, vJustifyContent, style } as NovaDropdownMenuOption;\n });\n\n return (\n \n
\n {customizations.iconButton ? \n \n \n \n
\n \n \n information This is required text that describes the flag in more detail.\n \n \n \n \n );\n};\n"
},
"name": "Default informational flag"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Informational flags",
"url": {
"iframe": "components/flag/title-information-flag",
"github": "apps/workshop/src/examples/components/flag/title-information-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const TitleInformationFlag = () => {\n return (\n \n \n information \n Informational title \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Informational flag with title"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Informational flags",
"url": {
"iframe": "components/flag/link-information-flag",
"github": "apps/workshop/src/examples/components/flag/link-information-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, Link, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const LinkInformationFlag = () => {\n return (\n \n \n information \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Informational flag with link"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Informational flags",
"url": {
"iframe": "components/flag/button-information-flag",
"github": "apps/workshop/src/examples/components/flag/button-information-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Button, Flag, FlagCloseButton, FlagContent, Typography, ScreenReader } from '@visa/nova-react';\n\nexport const ButtonInformationFlag = () => {\n return (\n \n \n information \n This is required text that describes the flag in more detail. \n Primary action \n \n \n \n \n );\n};\n"
},
"name": "Informational flag with button"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Informational flags",
"url": {
"iframe": "components/flag/persistent-information-flag",
"github": "apps/workshop/src/examples/components/flag/persistent-information-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon } from '@visa/nova-icons-react';\nimport { Flag, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const PersistentInformationFlag = () => {\n return (\n \n \n information \n This is required text that describes the flag in more detail. \n \n \n );\n};\n"
},
"name": "Informational flag without close icon button"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Success flags",
"url": {
"iframe": "components/flag/empty-success-flag",
"github": "apps/workshop/src/examples/components/flag/empty-success-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Flag } from '@visa/nova-react';\n\nexport const EmptySuccessFlag = () => {\n return \n \n success This is required text that describes the flag in more detail.\n \n \n \n \n );\n};\n"
},
"name": "Default success flag"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Success flags",
"url": {
"iframe": "components/flag/title-success-flag",
"github": "apps/workshop/src/examples/components/flag/title-success-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const TitleSuccessFlag = () => {\n return (\n \n \n success \n Success title \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Success flag with title"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Success flags",
"url": {
"iframe": "components/flag/link-success-flag",
"github": "apps/workshop/src/examples/components/flag/link-success-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, Link, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const LinkSuccessFlag = () => {\n return (\n \n \n success \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Success flag with link"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Success flags",
"url": {
"iframe": "components/flag/button-success-flag",
"github": "apps/workshop/src/examples/components/flag/button-success-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Button, Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const ButtonSuccessFlag = () => {\n return (\n \n \n success \n This is required text that describes the flag in more detail. \n Primary action \n \n \n \n \n );\n};\n"
},
"name": "Success flag with button"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Success flags",
"url": {
"iframe": "components/flag/persistent-success-flag",
"github": "apps/workshop/src/examples/components/flag/persistent-success-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon } from '@visa/nova-icons-react';\nimport { Flag, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const PersistentSuccessFlag = () => {\n return (\n \n \n success \n This is required text that describes the flag in more detail. \n \n \n );\n};\n"
},
"name": "Success flag without close icon button"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Warning flags",
"url": {
"iframe": "components/flag/empty-warning-flag",
"github": "apps/workshop/src/examples/components/flag/empty-warning-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Flag } from '@visa/nova-react';\n\nexport const EmptyWarningFlag = () => {\n return \n \n warning This is required text that describes the flag in more detail.\n \n \n \n \n );\n};\n"
},
"name": "Default warning flag"
},
{
"description": "",
"order": 15,
"libraryId": null,
"componentId": null,
"section": "Warning flags",
"url": {
"iframe": "components/flag/title-warning-flag",
"github": "apps/workshop/src/examples/components/flag/title-warning-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const TitleWarningFlag = () => {\n return (\n \n \n warning \n Warning title \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Warning flag with title"
},
{
"description": "",
"order": 16,
"libraryId": null,
"componentId": null,
"section": "Warning flags",
"url": {
"iframe": "components/flag/link-warning-flag",
"github": "apps/workshop/src/examples/components/flag/link-warning-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, Link, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const LinkWarningFlag = () => {\n return (\n \n \n warning \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Warning flag with link"
},
{
"description": "",
"order": 17,
"libraryId": null,
"componentId": null,
"section": "Warning flags",
"url": {
"iframe": "components/flag/button-warning-flag",
"github": "apps/workshop/src/examples/components/flag/button-warning-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Button, Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const ButtonWarningFlag = () => {\n return (\n \n \n warning \n This is required text that describes the flag in more detail. \n Primary action \n \n \n \n \n );\n};\n"
},
"name": "Warning flag with button"
},
{
"description": "",
"order": 18,
"libraryId": null,
"componentId": null,
"section": "Warning flags",
"url": {
"iframe": "components/flag/persistent-warning-flag",
"github": "apps/workshop/src/examples/components/flag/persistent-warning-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon } from '@visa/nova-icons-react';\nimport { Flag, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const PersistentWarningFlag = () => {\n return (\n \n \n warning \n This is required text that describes the flag in more detail. \n \n \n );\n};\n"
},
"name": "Warning flag without close icon button"
},
{
"description": "",
"order": 19,
"libraryId": null,
"componentId": null,
"section": "Error flags",
"url": {
"iframe": "components/flag/empty-error-flag",
"github": "apps/workshop/src/examples/components/flag/empty-error-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Flag } from '@visa/nova-react';\n\nexport const EmptyErrorFlag = () => {\n return \n \n error \n This is required text that describes the flag in more detail.\n \n \n \n \n );\n};\n"
},
"name": "Default error flag"
},
{
"description": "",
"order": 21,
"libraryId": null,
"componentId": null,
"section": "Error flags",
"url": {
"iframe": "components/flag/title-error-flag",
"github": "apps/workshop/src/examples/components/flag/title-error-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const TitleErrorFlag = () => {\n return (\n \n \n error \n Error title \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Error flag with title"
},
{
"description": "",
"order": 22,
"libraryId": null,
"componentId": null,
"section": "Error flags",
"url": {
"iframe": "components/flag/link-error-flag",
"github": "apps/workshop/src/examples/components/flag/link-error-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Flag, FlagCloseButton, FlagContent, Link, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const LinkErrorFlag = () => {\n return (\n \n \n error \n This is required text that describes the flag in more detail. \n \n \n \n \n );\n};\n"
},
"name": "Error flag with link"
},
{
"description": "",
"order": 23,
"libraryId": null,
"componentId": null,
"section": "Error flags",
"url": {
"iframe": "components/flag/button-error-flag",
"github": "apps/workshop/src/examples/components/flag/button-error-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport { Button, Flag, FlagCloseButton, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const ButtonErrorFlag = () => {\n return (\n \n \n error \n This is required text that describes the flag in more detail. \n Primary action \n \n \n \n \n );\n};\n"
},
"name": "Error flag with button"
},
{
"description": "",
"order": 24,
"libraryId": null,
"componentId": null,
"section": "Error flags",
"url": {
"iframe": "components/flag/persistent-error-flag",
"github": "apps/workshop/src/examples/components/flag/persistent-error-flag.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { MessageIcon } from '@visa/nova-icons-react';\nimport { Flag, FlagContent, ScreenReader, Typography } from '@visa/nova-react';\n\nexport const PersistentErrorFlag = () => {\n return (\n \n \n error \n This is required text that describes the flag in more detail. \n \n \n );\n};\n"
},
"name": "Error flag without close icon button"
},
{
"description": "",
"order": 25,
"libraryId": null,
"componentId": null,
"section": "Custom flag",
"url": {
"iframe": "components/flag/reusable",
"github": "apps/workshop/src/examples/components/flag/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { MessageIcon, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Flag,\n FlagCloseButton,\n FlagContent,\n type FlagProperties,\n Link,\n type MessageType,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { type ReactNode, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\nimport { NovaSelect } from '../select/reusable';\n\n// Nova Flag Component Props\nexport type NovaFlagProps = FlagProperties & {\n buttonLabel?: string;\n description?: string;\n dismissible?: boolean;\n href?: string;\n icon?: ReactNode;\n linkLabel?: string;\n onButtonClick?: (event: React.MouseEvent) => void;\n onClose?: () => void;\n showIcon?: boolean;\n title?: string;\n titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\n\n// Main Nova Flag Component\nexport const NovaFlag = ({\n buttonLabel,\n children,\n description,\n dismissible = false,\n href,\n icon,\n linkLabel,\n messageType,\n onButtonClick,\n onClose,\n showIcon = false,\n title,\n titleTag: Title = 'h4',\n ...remainingProps\n}: NovaFlagProps) => {\n return (\n \n {showIcon && [0]['messageType']} />}\n {icon}\n\n \n \n {title && {title} }\n {description && {description}
}\n {buttonLabel && (\n \n \n {buttonLabel}\n \n \n )}\n {linkLabel && \n \n\n {dismissible && (\n \n \n )}\n \n );\n};\n\n// export default NovaFlag;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n buttonLabel: string;\n description: string;\n dismissible: boolean;\n href: string;\n linkLabel: string;\n messageType: MessageType;\n showIcon: boolean;\n title: string;\n titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\n// Demo Component\nexport const NovaFlagDemo = () => {\n const messageTypes: { label: string; value: MessageType }[] = [\n { label: 'Success', value: 'success' },\n { label: 'Information', value: 'information' },\n { label: 'Warning', value: 'warning' },\n { label: 'Error', value: 'error' },\n { label: 'Subtle', value: 'subtle' },\n ];\n\n const titleTags: { label: string; value: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' }[] = [\n { label: '1', value: 'h1' },\n { label: '2', value: 'h2' },\n { label: '3', value: 'h3' },\n { label: '4', value: 'h4' },\n { label: '5', value: 'h5' },\n { label: '6', value: 'h6' },\n ];\n\n const defaultCustomizations: DemoCustomizations = {\n buttonLabel: '',\n description: 'This is required text that describes the flag in more detail.',\n dismissible: true,\n href: 'www.visa.com',\n linkLabel: '',\n messageType: 'success',\n showIcon: true,\n title: 'Success title',\n titleTag: 'h4',\n };\n\n const [customizations, setCustomizations] = useState(defaultCustomizations);\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n setCustomizations(formValues);\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations(defaultCustomizations);\n };\n\n const handleClose = () => {\n console.log('Section message closed');\n };\n\n const handleClick = () => {\n console.log('Section message button clicked');\n };\n\n return (\n \n );\n};\nexport default NovaFlagDemo;\n/** !!! DELETE ME END !!! */\n"
},
"name": "Reusable flag"
}
],
"propertySections": [
{
"order": 1,
"name": "Flag",
"selector": "\n \n \n \n {`Copyright © ${new Date().getFullYear()} Visa Inc. All Rights Reserved`}\n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Default footer"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Examples",
"url": {
"iframe": "components/footer/navigational-footer",
"github": "apps/workshop/src/examples/components/footer/navigational-footer.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "// If you are using Vite to run your application, please follow the instruction on the top of the page.\nimport { Footer, Link, Typography, Utility, UtilityFragment, VisaLogo } from '@visa/nova-react';\n\nexport const NavigationalFooter = () => {\n return (\n \n \n \n );\n};\n"
},
"name": "Navigational footer"
}
],
"propertySections": [
{
"order": 1,
"name": "Footer",
"selector": "",
"libraryId": null,
"componentId": null,
"type": "components",
"description": "Content anchored at the bottom of a page to provide important information or links."
}
],
"properties": [
{
"name": "tag",
"section": "Footer",
"data": {
"name": "tag",
"type": "ElementType",
"default": "footer",
"required": "false",
"description": "Tag of Component"
}
}
]
},
{
"name": "horizontal-navigation",
"version": "0.0.1",
"description": "Menu or panel at the top of page content that links to important pages or features.",
"libraryId": null,
"category": "components",
"exampleSections": [
{
"name": "Default horizontal navigations",
"description": "",
"order": 1
},
{
"name": "Horizontal navigations with persistent search",
"description": "",
"order": 2
}
],
"examples": [
{
"description": "",
"order": 1,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/default-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/default-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n offset,\n FloatingFocusManager,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const DefaultHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n \n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(8)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n \n L1 label 3\n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Default horizontal navigation"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/active-element-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/active-element-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'active-element-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const ActiveElementHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n \n L1 label 3\n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Horizontal navigation with active element"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/horizontal-with-icons",
"github": "apps/workshop/src/examples/components/horizontal-navigation/horizontal-with-icons.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\n\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n VisaSecurityTiny,\n VisaSettingsTiny,\n VisaStatisticsTiny,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const DefaultHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n { \n \n { \n \n \n \n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Horizontal navigation with icons"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/alternate-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/alternate-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const AlternateHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n \n L1 label 3\n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Alternate horizontal navigation"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/alternate-active-element-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/alternate-active-element-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-active-element-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const AlternateActiveElementHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n \n L1 label 3\n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Alternate horizontal navigation with active element"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/alternate-horizontal-with-icons",
"github": "apps/workshop/src/examples/components/horizontal-navigation/alternate-horizontal-with-icons.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\n\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n VisaSecurityTiny,\n VisaSettingsTiny,\n VisaStatisticsTiny,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-horizontal-nav-with-icons';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const AlternateHorizontalNavWithIcons = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n { \n \n { \n \n \n \n \n \n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Alternate horizontal navigation with icons"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Default horizontal navigations",
"url": {
"iframe": "components/horizontal-navigation/stacked-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/stacked-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseLow,\n VisaCloseTiny,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'stacked-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const StackedHorizontalNav = () => {\n const searchInputRef = useRef(null);\n const searchButtonRef = useRef(null);\n\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [expandSearch, setExpandSearch] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const searchInitiallyActivated = useRef(false);\n\n useEffect(() => {\n if (expandSearch && searchInitiallyActivated.current) {\n searchInputRef.current?.focus();\n }\n if (!expandSearch && searchInitiallyActivated.current) {\n searchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n { setExpandSearch(true); searchInitiallyActivated.current = true; }}\n >\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n L1 label 3}\n />\n \n \n \n \n \n
\n );\n};\n"
},
"name": "Stacked horizontal navigation"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Horizontal navigations with persistent search",
"url": {
"iframe": "components/horizontal-navigation/search-persistent-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/search-persistent-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseTiny,\n VisaCloseLow,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useEffect, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'search-persistent-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nconst label3SubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-label-3-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-label-3-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const SearchPersistentHorizontalNav = () => {\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileLabel3MenuOpen, setMobileLabel3MenuOpen] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [label3Open, setLabel3Open] = useState(false);\n\n const mobileSearchInputRef = useRef(null);\n const mobileSearchButtonRef = useRef(null);\n\n const [expandSearch, setExpandSearch] = useState(false);\n\n useEffect(() => {\n if (expandSearch) {\n mobileSearchInputRef.current?.focus();\n }\n if (!expandSearch) {\n mobileSearchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n // floating-ui setup for the label3 tab dropdown\n const {\n context: label3FloatingContext,\n floatingStyles: label3FloatingStyles,\n refs: label3FloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: label3Open,\n onOpenChange: setLabel3Open,\n placement: 'bottom-start',\n whileElementsMounted: autoUpdate,\n });\n const clickLabel3Ref = useClick(label3FloatingContext);\n const dismissLabel3Menu = useDismiss(label3FloatingContext);\n const { getReferenceProps: getLabel3ReferenceProps, getFloatingProps: getLabel3FloatingProps } = useInteractions([\n clickLabel3Ref,\n dismissLabel3Menu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n \n L1 label 3\n \n \n \n \n \n \n \n \n \n \n \n {\n setExpandSearch(true);\n }}\n >\n \n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n \n \n
\n );\n};\n"
},
"name": "Default horizontal navigation with persistent search"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Horizontal navigations with persistent search",
"url": {
"iframe": "components/horizontal-navigation/stacked-search-persistent-horizontal-nav",
"github": "apps/workshop/src/examples/components/horizontal-navigation/stacked-search-persistent-horizontal-nav.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import {\n autoUpdate,\n FloatingFocusManager,\n offset,\n useClick,\n useFloating,\n useInteractions,\n useDismiss,\n} from '@floating-ui/react';\nimport {\n VisaAccountLow,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseTiny,\n VisaCloseLow,\n VisaMenuLow,\n VisaNotificationsLow,\n VisaSearchLow,\n} from '@visa/nova-icons-react';\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n DropdownButton,\n DropdownMenu,\n Input,\n InputContainer,\n Link,\n Listbox,\n ListboxItem,\n Nav,\n NavAppName,\n Surface,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useEffect, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'stacked-search-persistent-horizontal-nav';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './horizontal-navigation',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './horizontal-navigation',\n },\n];\n\nexport const StackedSearchPersistentHorizontalNav = () => {\n const [accountMenuOpen, setAccountMenuOpen] = useState(false);\n const [mobileAccountMenuOpen, setMobileAccountMenuOpen] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n const mobileSearchInputRef = useRef(null);\n const mobileSearchButtonRef = useRef(null);\n\n const [expandSearch, setExpandSearch] = useState(false);\n\n useEffect(() => {\n if (expandSearch) {\n mobileSearchInputRef.current?.focus();\n }\n if (!expandSearch) {\n mobileSearchButtonRef.current?.focus();\n }\n }, [expandSearch]);\n\n // For dropdown menus in the horizontal nav, we use floating UI for\n // -opening\n // -positioning\n // -dismissing\n\n // floating-ui setup for the account dropdown\n const {\n context: accountFloatingContext,\n floatingStyles: accountFloatingStyles,\n refs: accountFloatingRefs,\n } = useFloating({\n middleware: [offset(2)],\n open: accountMenuOpen,\n onOpenChange: setAccountMenuOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n const clickAccountRef = useClick(accountFloatingContext);\n const dismissAccountMenu = useDismiss(accountFloatingContext);\n const { getReferenceProps: getAccountReferenceProps, getFloatingProps: getAccountFloatingProps } = useInteractions([\n clickAccountRef,\n dismissAccountMenu,\n ]);\n\n const onToggleMobileMenu = () => {\n setMobileMenuOpen(!mobileMenuOpen);\n };\n\n return (\n \n \n \n {!expandSearch ? (\n <>\n \n \n \n \n \n Application Name}\n />\n \n \n \n \n \n \n \n \n \n {\n setExpandSearch(true);\n }}\n >\n \n \n \n \n 3\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n setExpandSearch(false)}\n >\n \n )}\n \n \n\n \n \n \n L1 label 1}\n />\n \n \n L1 label 2}\n />\n \n \n L1 label 3}\n />\n \n \n \n \n \n
\n );\n};\n"
},
"name": "Stacked horizontal navigation with persistent search"
}
],
"propertySections": [
{
"order": 1,
"name": "Nav",
"selector": "\n Label (required) \n \n \n \n );\n};\n"
},
"name": "Default input"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/initial-value-input",
"github": "apps/workshop/src/examples/components/input/initial-value-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-initial-value';\n\nexport const InitialValueInput = () => {\n return (\n \n Label (required) \n \n \n \n );\n};\n"
},
"name": "Input with initial value"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/inline-message-input",
"github": "apps/workshop/src/examples/components/input/inline-message-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-inline-message';\n\nexport const InlineMessageInput = () => {\n return (\n \n Label (required) \n \n \n This is optional text that describes the label in more detail. \n \n );\n};\n"
},
"name": "Input with inline message"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/clear-button-input",
"github": "apps/workshop/src/examples/components/input/clear-button-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaClearAltTiny } from '@visa/nova-icons-react';\nimport { Button, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useEffect, useRef, useState, type FocusEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-clear-button';\n\nexport const ClearButtonInput = () => {\n const [showClearButton, setShowClearButton] = useState(false);\n const [inputValue, setInputValue] = useState('');\n\n const inputRef = useRef(null);\n\n const handleBlur = (event: FocusEvent) => {\n if (!event.currentTarget.contains(event.relatedTarget)) {\n setShowClearButton(false);\n }\n };\n\n const handleClear = () => {\n setInputValue('');\n // Put focus back into the input\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n useEffect(() => {\n if (inputValue !== '') setShowClearButton(true);\n else setShowClearButton(false);\n }, [inputValue]);\n\n return (\n \n Label (required) \n handleBlur(e)}\n onFocus={() => {\n if (inputValue !== '') setShowClearButton(true);\n }}\n >\n setInputValue(e.currentTarget.value)}\n type=\"text\"\n value={inputValue}\n />\n {showClearButton && (\n \n \n )}\n \n \n );\n};\n"
},
"name": "Input with clear text button"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/read-only-input",
"github": "apps/workshop/src/examples/components/input/read-only-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Checkbox, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-readonly';\n\nexport const ReadOnlyInput = () => {\n const [readonly, setReadonly] = useState(true);\n\n return (\n <>\n \n Label (required) \n \n \n \n \n setReadonly(!readonly)} />\n Mark input as read-only \n \n \n );\n};\n"
},
"name": "Read-only input"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/disabled-input",
"github": "apps/workshop/src/examples/components/input/disabled-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Checkbox, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-input';\n\nexport const DisabledInput = () => {\n const [disabled, setDisabled] = useState(true);\n\n return (\n <>\n \n Label (required) \n \n \n \n \n setDisabled(!disabled)} />\n Mark input as disabled \n \n \n );\n};\n"
},
"name": "Disabled input"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/error-input",
"github": "apps/workshop/src/examples/components/input/error-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { useRef, useState, type ChangeEvent } from 'react';\nimport { Button, Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-error';\n\nconst DEFAULT_INPUT_STATE = {\n value: '',\n error: false,\n};\n\nexport const ErrorInput = () => {\n const [inputState, setInputState] = useState(DEFAULT_INPUT_STATE);\n\n const inputRef = useRef(null);\n\n const handleSubmit = () => {\n // Customize this for your own validation needs\n setInputState(prevInputState => ({\n ...prevInputState,\n error: true,\n }));\n\n // Focus on the input with error\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const handleReset = () => {\n setInputState(DEFAULT_INPUT_STATE);\n };\n const handleInputChange = (e: ChangeEvent) => {\n setInputState({\n value: e.target.value,\n error: false,\n });\n };\n\n return (\n <>\n \n Label (required) \n \n \n {inputState.error && (\n \n \n )}\n \n \n \n Submit\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Input with error"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/prefix-input",
"github": "apps/workshop/src/examples/components/input/prefix-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Typography, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-prefix';\n\nexport const PrefixInput = () => {\n return (\n \n Label (required) \n \n \n $\n \n \n \n );\n};\n"
},
"name": "Input with prefix"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/suffix-input",
"github": "apps/workshop/src/examples/components/input/suffix-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Typography, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-suffix';\n\nexport const SuffixInput = () => {\n return (\n \n Label (required) \n \n \n %\n \n \n \n );\n};\n"
},
"name": "Input with suffix"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/action-button-input",
"github": "apps/workshop/src/examples/components/input/action-button-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaPasswordHideTiny, VisaPasswordShowTiny } from '@visa/nova-icons-react';\nimport { Button, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-action-button';\n\nexport const ActionButtonInput = () => {\n const [showPassword, setShowPassword] = useState(true);\n\n return (\n \n Label (required) \n \n setShowPassword(!showPassword)}\n >\n {showPassword ? \n \n );\n};\n"
},
"name": "Input with action button"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/mask-button-input",
"github": "apps/workshop/src/examples/components/input/mask-button-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaPasswordHideTiny, VisaPasswordShowTiny } from '@visa/nova-icons-react';\nimport { Button, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-mask-button';\n\nexport const MaskButtonInput = () => {\n const [showPassword, setShowPassword] = useState(false);\n\n return (\n \n Label (required) \n \n setShowPassword(!showPassword)}\n >\n {showPassword ? \n \n );\n};\n"
},
"name": "Input with masked field"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/leading-icon-input",
"github": "apps/workshop/src/examples/components/input/leading-icon-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaAccountLow } from '@visa/nova-icons-react';\nimport { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-leading-icon';\n\nexport const LeadingIconInput = () => {\n return (\n \n Label (required) \n \n \n \n \n \n );\n};\n"
},
"name": "Input with leading icon"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Single-line inputs",
"url": {
"iframe": "components/input/one-time-passcode-input",
"github": "apps/workshop/src/examples/components/input/one-time-passcode-input.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Input, InputContainer, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-otp';\n\nexport const OneTimePasscodeInput = () => {\n return (\n \n Label \n \n \n \n );\n};\n"
},
"name": "One-time passcode input"
},
{
"description": "",
"order": 14,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/native-resize-textarea",
"github": "apps/workshop/src/examples/components/input/native-resize-textarea.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { InputContainer, Label, Textarea, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'native-text-area-resize';\n\nexport const NativeResizeTextarea = () => {\n return (\n \n Label (required) \n \n \n \n \n );\n};\n"
},
"name": "Native textarea with resize property"
},
{
"description": "",
"order": 15,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/native-no-resize-textarea",
"github": "apps/workshop/src/examples/components/input/native-no-resize-textarea.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { InputContainer, Label, Textarea, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'text-area-no-resize';\n\nexport const NativeNoResizeTextarea = () => {\n return (\n \n Label (required) \n \n \n \n \n );\n};\n"
},
"name": "Native textarea without resize property"
},
{
"description": "",
"order": 16,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/fixed-height-textarea",
"github": "apps/workshop/src/examples/components/input/fixed-height-textarea.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { InputContainer, Label, Textarea, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'text-area-fixed-height';\n\nexport const FixedHeightTextarea = () => {\n return (\n \n Label (required) \n \n \n \n \n );\n};\n"
},
"name": "Textarea with fixed height"
},
{
"description": "",
"order": 17,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/resize-textarea",
"github": "apps/workshop/src/examples/components/input/resize-textarea.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { InputContainer, Label, Textarea, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'text-area-resize-height';\n\nexport const ResizeTextarea = () => {\n return (\n \n Label (required) \n \n \n \n \n );\n};\n"
},
"name": "Textarea with fixed height and resize property"
},
{
"description": "",
"order": 18,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/text-count-textarea",
"github": "apps/workshop/src/examples/components/input/text-count-textarea.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { Button, InputContainer, InputMessage, Label, Textarea, Utility, UtilityFragment } from '@visa/nova-react';\nimport { useState, type ChangeEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'text-count-textarea';\nconst maxCharacters = 400;\n\nconst getMessage = ({\n characterCount,\n characterCountInvalid,\n invalid,\n}: {\n characterCount: number;\n characterCountInvalid: boolean;\n invalid: boolean;\n}) => {\n if (invalid) return 'This is a required field';\n if (characterCountInvalid)\n return `${characterCount - maxCharacters} character${characterCount - maxCharacters !== 1 ? 's' : ''} over limit`;\n return `${maxCharacters - characterCount} character${maxCharacters - characterCount !== 1 ? 's' : ''} remaining`;\n};\n\nexport const TextCountTextarea = () => {\n const [invalid, setInvalid] = useState(false);\n const [text, setText] = useState('');\n\n const characterCount = text.length;\n const characterCountInvalid = characterCount > maxCharacters;\n const messageIsError = characterCountInvalid || invalid;\n\n const message = getMessage({ characterCount, characterCountInvalid, invalid });\n\n const onReset = (e: React.FormEvent) => {\n e.preventDefault();\n setInvalid(false);\n setText('');\n };\n const onSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setInvalid(characterCount === 0);\n };\n const onTextChange = (e: ChangeEvent) => {\n setInvalid(false);\n setText(e.target.value);\n };\n\n return (\n \n );\n};\n"
},
"name": "Textarea with fixed height and character counter"
},
{
"description": "",
"order": 19,
"libraryId": null,
"componentId": null,
"section": "Multi-line inputs",
"url": {
"iframe": "components/input/native-row-textarea",
"github": "apps/workshop/src/examples/components/input/native-row-textarea.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { InputContainer, Label, Textarea, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'text-area-native-row';\n\nexport const NativeRowTextarea = () => {\n return (\n \n Label (required) \n \n \n \n \n );\n};\n"
},
"name": "Textarea with native rows attribute"
},
{
"description": "",
"order": 20,
"libraryId": null,
"componentId": null,
"section": "Custom inputs",
"url": {
"iframe": "components/input/custom-inline-label-input",
"github": "apps/workshop/src/examples/components/input/custom-inline-label-input.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import { Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-custom-inline-label';\n\nexport const CustomInlineLabelInput = () => {\n return (\n \n \n Label (required)\n \n \n \n \n This is optional text that describes the label in more detail. \n \n \n );\n};\n"
},
"name": "Input with inline label and message"
},
{
"description": "",
"order": 21,
"libraryId": null,
"componentId": null,
"section": "Custom inputs",
"url": {
"iframe": "components/input/custom-form-input",
"github": "apps/workshop/src/examples/components/input/custom-form-input.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import { Button, Input, InputContainer, Label, Utility } from '@visa/nova-react';\nimport type { FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'input-form-control';\n\nexport const CustomFormInput = () => {\n const onSubmit = (event: FormEvent) => {\n event.preventDefault();\n const formData = new FormData(event.currentTarget);\n const query = formData.get(id);\n alert(`${query} submitted!`);\n };\n return (\n \n );\n};\n"
},
"name": "Input with form control"
},
{
"description": "",
"order": 22,
"libraryId": null,
"componentId": null,
"section": "Custom inputs",
"url": {
"iframe": "components/input/cvv-input",
"github": "apps/workshop/src/examples/components/input/cvv-input.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { Button, Input, InputContainer, InputMessage, Label, Utility } from '@visa/nova-react';\nimport { useState, type FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'cvv-input';\n\nconst cvvLength = 3;\n\nexport const CVVInput = () => {\n const [invalid, setInvalid] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const onReset = () => {\n setInvalid(false);\n };\n const onSubmit = (event: FormEvent) => {\n event.preventDefault();\n const isValid = event.currentTarget.checkValidity();\n const formData = new FormData(event.currentTarget);\n const formDataObject = Object.fromEntries(formData.entries());\n\n // If valid, alert with CVV\n if (isValid) alert(`Success!\\nCVV: ${formDataObject['cvv-input']}`);\n // If invalid, focus on invalid element\n else (event.currentTarget.querySelector(':invalid') as HTMLInputElement)?.focus();\n\n setInvalid(!isValid);\n };\n\n return (\n noValidate onReset={onReset} onSubmit={onSubmit} tag=\"form\" vFlex vFlexCol vGap={4}>\n Security code \n \n setFocused(false)}\n onFocus={() => setFocused(true)}\n pattern={`[0-9]{${cvvLength}}`}\n required\n type={focused ? 'text' : 'password'}\n />\n \n {invalid && (\n \n \n )}\n \n Submit \n \n Reset\n \n \n \n );\n};\n"
},
"name": "CVV input"
},
{
"description": "",
"order": 23,
"libraryId": null,
"componentId": null,
"section": "Custom inputs",
"url": {
"iframe": "components/input/reusable",
"github": "apps/workshop/src/examples/components/input/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import {\n VisaAccountLow,\n VisaCheckmarkLow,\n VisaClearAltTiny,\n VisaErrorTiny,\n VisaPasswordHideTiny,\n VisaPasswordShowTiny,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Input,\n InputContainer,\n InputMessage,\n type InputProperties,\n Label,\n Textarea,\n type TextAreaProperties,\n Typography,\n Utility,\n} from '@visa/nova-react';\nimport {\n type ChangeEvent,\n type ComponentPropsWithRef,\n type ElementType,\n type FocusEvent,\n type ReactNode,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\n\ntype InheritedProps = ET extends 'input'\n ? InputProperties<'input'>\n : ET extends 'textarea'\n ? TextAreaProperties<'textarea'>\n : ComponentPropsWithRef;\n\n// Nova Input Component Props\nexport type NovaInputProps = InheritedProps & {\n blockSize?: string;\n clearable?: boolean;\n inline?: boolean;\n invalid?: boolean;\n label?: string;\n maskable?: boolean;\n message?: string;\n otp?: boolean;\n prefix?: string;\n prefixIcon?: ReactNode;\n readonly?: boolean;\n required?: boolean;\n resizable?: boolean;\n step?: number;\n suffix?: string;\n suffixIcon?: ReactNode;\n textarea?: boolean;\n};\n\n// Main Nova Input Component\nexport const NovaInput = ({\n blockSize = 'var(--v-input-container-block-size)',\n clearable = false,\n disabled = false,\n id: idProp,\n inline = false,\n invalid = false,\n label = '',\n maskable = false,\n message,\n otp = false,\n placeholder,\n prefix,\n prefixIcon,\n readonly = false,\n required = false,\n resizable = true,\n step,\n suffix,\n suffixIcon,\n textarea = false,\n type: typeProp,\n value: controlledValue,\n onChange,\n ...remainingInputProps\n}: NovaInputProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n const [internalValue, setInternalValue] = useState('');\n const [inFocus, setInFocus] = useState(false);\n const [masked, setMasked] = useState(true);\n\n const inputRef = useRef(null);\n const textareaRef = useRef(null);\n const buttonRef = useRef(null);\n\n // Use controlled value if provided, otherwise use internal state\n const value = controlledValue !== undefined ? controlledValue : internalValue;\n\n // Determine the input type\n const inputType = useMemo(() => {\n if (typeProp) return typeProp;\n if (!maskable) return 'text';\n return masked ? 'password' : 'text';\n }, [typeProp, maskable, masked]);\n\n // Calculate aria-describedby\n const inputDescribedBy = useMemo(() => {\n const ids: string[] = [];\n if (message) ids.push(`${id}-message`);\n if (prefix) ids.push(`${id}-prefix`);\n if (suffix) ids.push(`${id}-suffix`);\n return ids.length > 0 ? ids.join(' ') : undefined;\n }, [message, prefix, suffix, id]);\n\n const handleInputChange = (event: ChangeEvent) => {\n const newValue = event.target.value;\n if (controlledValue === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(event as ChangeEvent);\n };\n\n const handleBlur = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (\n relatedTarget !== buttonRef.current &&\n relatedTarget !== inputRef.current &&\n relatedTarget !== textareaRef.current &&\n !event.currentTarget.contains(relatedTarget)\n ) {\n setInFocus(false);\n }\n };\n\n const handleClear = () => {\n handleInputChange({ target: { value: '' } } as ChangeEvent);\n if (textarea) {\n textareaRef.current?.focus();\n } else {\n inputRef.current?.focus();\n }\n };\n\n const handleToggleMask = () => {\n setMasked(prev => !prev);\n };\n\n const showClearButton = value && value.length > 0 && inFocus && clearable;\n\n return (\n \n \n {label} {required ? ' (required)' : ''}\n \n \n setInFocus(true)}\n style={otp ? { inlineSize: '160px' } : undefined}\n >\n {prefixIcon}\n {prefix && (\n \n {prefix}\n \n )}\n\n {textarea ? (\n \n \n {suffix}\n \n )}\n\n {maskable && (\n \n {masked ? \n {invalid && \n )}\n \n \n );\n};\n\n// export default NovaInput;\n\n/* !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n clearable: boolean;\n disabled: boolean;\n errorMessage: string;\n inline: boolean;\n invalid: boolean;\n label: string;\n maskable: boolean;\n message: string;\n otp: boolean;\n placeholder: string;\n readonly: boolean;\n required: boolean;\n showLeadingIcon: boolean;\n showPrefix: boolean;\n showTrailingIcon: boolean;\n showSuffix: boolean;\n}\n\n// Demo Component\nexport const NovaInputDemo = () => {\n const defaultCustomizations: DemoCustomizations = {\n clearable: false,\n disabled: false,\n errorMessage: 'This is required text that describes the error in more detail.',\n inline: false,\n invalid: false,\n label: 'Label',\n maskable: false,\n message: 'This is optional text that describes the label in more detail.',\n otp: false,\n placeholder: '',\n readonly: false,\n required: false,\n showLeadingIcon: false,\n showPrefix: false,\n showTrailingIcon: false,\n showSuffix: false,\n };\n\n const [customizations, setCustomizations] = useState(defaultCustomizations);\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n setCustomizations(formValues);\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations(defaultCustomizations);\n };\n\n return (\n \n
: undefined}\n readonly={customizations.readonly}\n required={customizations.required}\n suffix={customizations.showSuffix ? ' %' : ''}\n suffixIcon={customizations.showTrailingIcon ?
: undefined}\n />\n\n
\n \n \n \n
\n
\n Destination label\n \n This is a sentence with an inline \n );\n};\n"
},
"name": "Inline link"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Inline links",
"url": {
"iframe": "components/link/without-underline-link",
"github": "apps/workshop/src/examples/components/link/without-underline-link.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMaximizeTiny } from '@visa/nova-icons-react';\nimport { Link, Typography } from '@visa/nova-react';\n\nexport const WithoutUnderlineLink = () => {\n return (\n \n This is a sentence with an inline{' '}\n \n );\n};\n"
},
"name": "Inline link with trailing icon"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Links coded as buttons",
"url": {
"iframe": "components/link/custom-tag-link",
"github": "apps/workshop/src/examples/components/link/custom-tag-link.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaDevicePrinterTiny } from '@visa/nova-icons-react';\nimport { Link } from '@visa/nova-react';\n\nexport const CustomTagLink = () => {\n return (\n link} /> goes to this current page.\n \n );\n};\n"
},
"name": "Link uses React Router DOM"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Custom examples",
"url": {
"iframe": "components/link/custom-typography-link",
"github": "apps/workshop/src/examples/components/link/custom-typography-link.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Link, Typography } from '@visa/nova-react';\n\nexport const CustomTypographyLink = () => {\n return (\n \n Destination label (headline 3) \n \n );\n};\n"
},
"name": "Link with custom typography"
}
],
"propertySections": [
{
"order": 1,
"name": "Link",
"selector": "\n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "One-line list item"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/one-line-two-column-list-item",
"github": "apps/workshop/src/examples/components/list-item/one-line-two-column-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const OneLineTwoColumnListItem = () => {\n return (\n \n \n \n \n Item label 1\n \n \n Item label 2\n \n \n \n \n );\n};\n"
},
"name": "One-line, two-column list item"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/two-line-list-item",
"github": "apps/workshop/src/examples/components/list-item/two-line-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const TwoLineListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n Secondary text\n \n \n \n \n );\n};\n"
},
"name": "Two-line list item"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/three-line-list-item",
"github": "apps/workshop/src/examples/components/list-item/three-line-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const ThreeLineListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n Secondary text\n \n \n Tertiary text\n \n \n \n \n );\n};\n"
},
"name": "Three-line list item"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/leading-icon-list-item",
"github": "apps/workshop/src/examples/components/list-item/leading-icon-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { GenericInformationLow } from '@visa/nova-icons-react';\nimport type { CSSProperties } from 'react';\nimport { Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const LeadingIconListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Leading icon list item"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/leading-icon-with-background-list-item",
"github": "apps/workshop/src/examples/components/list-item/leading-icon-with-background-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountLow } from '@visa/nova-icons-react';\nimport type { CSSProperties } from 'react';\nimport { Typography, Utility, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const LeadingIconWithBackgroundListItem = () => {\n return (\n \n \n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Leading icon with background list item"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/leading-image-list-item",
"github": "apps/workshop/src/examples/components/list-item/leading-image-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Avatar, Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\n/// This is the base url for where your site is deployed. `import.meta.env.BASE_URL` is the environment variable used to import the base url for Vite. Change this import to match your build tool's base url.\nconst BASE_URL = import.meta.env.BASE_URL;\nconst user = 'Alex Miller';\n\nexport const LeadingImageListItem = () => {\n return (\n \n \n \n alt={user} tag=\"img\" src={BASE_URL + '/alex-miller-stock.png'} />\n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Leading image list item"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/leading-card-art-list-item",
"github": "apps/workshop/src/examples/components/list-item/leading-card-art-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, VisaLogo, Utility } from '@visa/nova-react';\n\nexport const LeadingCardArtListItem = () => {\n return (\n \n \n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Leading card art list item"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/indicator-line-list-item",
"github": "apps/workshop/src/examples/components/list-item/indicator-line-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, Utility, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const IndicatorLineListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Indicator line list item"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/trailing-icon-list-item",
"github": "apps/workshop/src/examples/components/list-item/trailing-icon-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { GenericInformationLow } from '@visa/nova-icons-react';\nimport type { CSSProperties } from 'react';\nimport { Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\nexport const TrailingIconListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n \n \n );\n};\n"
},
"name": "Trailing icon list item"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/trailing-icon-with-background-list-item",
"github": "apps/workshop/src/examples/components/list-item/trailing-icon-with-background-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountLow } from '@visa/nova-icons-react';\nimport type { CSSProperties } from 'react';\nimport { Typography, UtilityFragment, Surface, Utility } from '@visa/nova-react';\n\nexport const TrailingIconWithBackgroundListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Trailing icon with background list item"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/trailing-image-list-item",
"github": "apps/workshop/src/examples/components/list-item/trailing-image-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Avatar, Typography, UtilityFragment, Surface } from '@visa/nova-react';\n\n/// This is the base url for where your site is deployed. `import.meta.env.BASE_URL` is the environment variable used to import the base url for Vite. Change this import to match your build tool's base url.\nconst BASE_URL = import.meta.env.BASE_URL;\nconst user = 'Alex Miller';\n\nexport const TrailingImageListItem = () => {\n return (\n \n \n \n \n Item label\n \n alt={user} tag=\"img\" src={BASE_URL + '/alex-miller-stock.png'} />\n \n \n \n );\n};\n"
},
"name": "Trailing image list item"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Static list items",
"url": {
"iframe": "components/list-item/trailing-card-art-list-item",
"github": "apps/workshop/src/examples/components/list-item/trailing-card-art-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, Utility, VisaLogo } from '@visa/nova-react';\n\nexport const TrailingCardArtListItem = () => {\n return (\n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Trailing card art list item"
},
{
"description": "",
"order": 14,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/default-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/default-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Surface, Button } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nexport const DefaultClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Default clickthrough list item"
},
{
"description": "",
"order": 15,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/disabled-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Surface, Button } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nexport const DisabledClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Disabled clickthrough list item"
},
{
"description": "",
"order": 16,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/disabled-leading-image-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-leading-image-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Avatar, Typography, Utility, UtilityFragment, Surface, Button } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n/// This is the base url for where your site is deployed. `import.meta.env.BASE_URL` is the environment variable used to import the base url for Vite. Change this import to match your build tool's base url.\nconst BASE_URL = import.meta.env.BASE_URL;\nconst user = 'Alex Miller';\n\nexport const DisabledLeadingImageClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n \n alt={user}\n tag=\"img\"\n src={BASE_URL + '/alex-miller-stock.png'}\n style={{ '--v-avatar-size': '48px' } as CSSProperties}\n />\n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled leading image clickthrough list item"
},
{
"description": "",
"order": 17,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/disabled-leading-icon-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-leading-icon-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { GenericSecurityProtectionLow, VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, Utility, UtilityFragment, Surface, Button } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nexport const DisabledLeadingIconClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled leading icon clickthrough list item"
},
{
"description": "",
"order": 18,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/disabled-card-art-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-card-art-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, Utility, UtilityFragment, Surface, Button, VisaLogo } from '@visa/nova-react';\n\nexport const DisabledCardArtClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled card art clickthrough list item"
},
{
"description": "",
"order": 19,
"libraryId": null,
"componentId": null,
"section": "Clickthrough list items",
"url": {
"iframe": "components/list-item/disabled-card-art-with-number-clickthrough-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-card-art-with-number-clickthrough-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, Utility, UtilityFragment, Surface, Button, VisaLogo } from '@visa/nova-react';\n\nexport const DisabledCardArtWithNumberClickthroughListItem = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n •••• 1234\n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled card art with number clickthrough list item"
},
{
"description": "",
"order": 20,
"libraryId": null,
"componentId": null,
"section": "Switch list items",
"url": {
"iframe": "components/list-item/default-switch-list-item",
"github": "apps/workshop/src/examples/components/list-item/default-switch-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { UtilityFragment, Typography, Surface, Switch, SwitchLabel } from '@visa/nova-react';\n\nconst id = 'default-switch-list-item';\n\nexport const DefaultSwitchListItem = () => {\n return (\n \n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Default switch list item"
},
{
"description": "",
"order": 21,
"libraryId": null,
"componentId": null,
"section": "Switch list items",
"url": {
"iframe": "components/list-item/disabled-switch-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-switch-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { UtilityFragment, Typography, Surface, Switch, SwitchLabel } from '@visa/nova-react';\n\nconst id = 'disabled-switch-list-item';\n\nexport const DisabledSwitchListItem = () => {\n return (\n \n \n \n \n \n Item label\n \n \n \n \n \n );\n};\n"
},
"name": "Disabled switch list item"
},
{
"description": "",
"order": 22,
"libraryId": null,
"componentId": null,
"section": "Checkbox list items",
"url": {
"iframe": "components/list-item/default-checkbox-list-item",
"github": "apps/workshop/src/examples/components/list-item/default-checkbox-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, Label, Checkbox } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-checkbox-list-item';\n\nexport const DefaultCheckboxListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Default checkbox list item"
},
{
"description": "",
"order": 23,
"libraryId": null,
"componentId": null,
"section": "Checkbox list items",
"url": {
"iframe": "components/list-item/disabled-checkbox-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-checkbox-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, Label, Checkbox } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-checkbox-list-item';\n\nexport const DisabledCheckboxListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled checkbox list item"
},
{
"description": "",
"order": 24,
"libraryId": null,
"componentId": null,
"section": "Radio list items",
"url": {
"iframe": "components/list-item/default-radio-list-item",
"github": "apps/workshop/src/examples/components/list-item/default-radio-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, Label, Radio } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-radio-list-item';\n\nexport const DefaultRadioListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Default radio list item"
},
{
"description": "",
"order": 25,
"libraryId": null,
"componentId": null,
"section": "Radio list items",
"url": {
"iframe": "components/list-item/disabled-radio-list-item",
"github": "apps/workshop/src/examples/components/list-item/disabled-radio-list-item.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, Label, Radio } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-radio-list-item';\n\nexport const DisabledRadioListItem = () => {\n return (\n \n \n \n \n \n \n Item label\n \n \n \n \n \n \n );\n};\n"
},
"name": "Disabled radio list item"
},
{
"description": "",
"order": 26,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/default-list",
"github": "apps/workshop/src/examples/components/list-item/default-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, ContentCard } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', label1: 'Item A label 1', label2: 'Item A label 2' },\n { id: 'item-2', label1: 'Item B label 1', label2: 'Item B label 2' },\n { id: 'item-3', label1: 'Item C label 1', label2: 'Item C label 2' },\n { id: 'item-4', label1: 'Item D label 1', label2: 'Item D label 2' },\n];\n\nexport const DefaultList = () => {\n return (\n \n \n {items.map(item => (\n \n \n \n {item.label1}\n \n \n {item.label2}\n \n \n \n ))}\n \n \n );\n};\n"
},
"name": "Default list"
},
{
"description": "",
"order": 27,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/default-list-with-dividers",
"github": "apps/workshop/src/examples/components/list-item/default-list-with-dividers.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, UtilityFragment, Surface, ContentCard, Divider } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', label1: 'Item A label 1', label2: 'Item A label 2' },\n { id: 'item-2', label1: 'Item B label 1', label2: 'Item B label 2' },\n { id: 'item-3', label1: 'Item C label 1', label2: 'Item C label 2' },\n { id: 'item-4', label1: 'Item D label 1', label2: 'Item D label 2' },\n];\n\nexport const DefaultListWithDividers = () => {\n return (\n \n \n {items.map((item, index) => (\n \n \n \n \n {item.label1}\n \n \n {item.label2}\n \n \n \n {index < items.length - 1 && \n \n \n List title\n \n \n \n \n {items.map(item => (\n \n \n \n {item.label1}\n \n \n {item.label2}\n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Default list with title"
},
{
"description": "",
"order": 29,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/default-list-with-section-title-and-hyperlink",
"github": "apps/workshop/src/examples/components/list-item/default-list-with-section-title-and-hyperlink.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Utility, Link, Surface, ContentCard } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', label1: 'Item A label 1', label2: 'Item A label 2' },\n { id: 'item-2', label1: 'Item B label 1', label2: 'Item B label 2' },\n { id: 'item-3', label1: 'Item C label 1', label2: 'Item C label 2' },\n { id: 'item-4', label1: 'Item D label 1', label2: 'Item D label 2' },\n];\n\nexport const DefaultListWithSectionTitleAndHyperlink = () => {\n return (\n \n \n \n Section title\n \n \n Hyperlink\n \n \n \n \n {items.map(item => (\n \n \n \n {item.label1}\n \n \n {item.label2}\n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Default list with section title and hyperlink"
},
{
"description": "",
"order": 30,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/clickthrough-list",
"github": "apps/workshop/src/examples/components/list-item/clickthrough-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Surface, ContentCard, Button } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', text: 'Item A label', href: './list-item' },\n { id: 'item-2', text: 'Item B label', href: './list-item' },\n { id: 'item-3', text: 'Item C label', href: './list-item' },\n { id: 'item-4', text: 'Item D label', href: './list-item' },\n];\n\nexport const ClickthroughList = () => {\n return (\n \n \n {items.map(item => (\n \n \n \n \n \n {item.text}\n \n \n \n \n ))}\n \n \n );\n};\n"
},
"name": "Clickthrough list"
},
{
"description": "",
"order": 31,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/radio-list",
"github": "apps/workshop/src/examples/components/list-item/radio-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, Utility, UtilityFragment, Surface, Label, ContentCard, Radio } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'radio-list';\n\nconst options = [\n { id: `${id}-1`, label1: 'Item A label 1', label2: 'Item A label 2' },\n { id: `${id}-2`, label1: 'Item B label 1', label2: 'Item B label 2' },\n { id: `${id}-3`, label1: 'Item C label 1', label2: 'Item C label 2' },\n { id: `${id}-4`, label1: 'Item D label 1', label2: 'Item D label 2' },\n];\n\nexport const RadioList = () => {\n return (\n \n \n \n Section title\n \n \n \n \n {options.map(option => (\n \n \n \n \n \n \n {option.label1}\n \n \n {option.label2} \n \n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Radio list"
},
{
"description": "",
"order": 32,
"libraryId": null,
"componentId": null,
"section": "Lists",
"url": {
"iframe": "components/list-item/checkbox-list",
"github": "apps/workshop/src/examples/components/list-item/checkbox-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Typography, Utility, UtilityFragment, Surface, Label, ContentCard, Checkbox } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'checkbox-list';\n\nconst options = [\n { id: `${id}-1`, label1: 'Item A label 1', label2: 'Item A label 2' },\n { id: `${id}-2`, label1: 'Item B label 1', label2: 'Item B label 2' },\n { id: `${id}-3`, label1: 'Item C label 1', label2: 'Item C label 2' },\n { id: `${id}-4`, label1: 'Item D label 1', label2: 'Item D label 2' },\n];\n\nexport const CheckboxList = () => {\n return (\n \n \n \n Section title\n \n \n \n \n {options.map(option => (\n \n \n \n \n \n \n {option.label1}\n \n \n {option.label2} \n \n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Checkbox list"
},
{
"description": "",
"order": 33,
"libraryId": null,
"componentId": null,
"section": "Custom lists",
"url": {
"iframe": "components/list-item/account-clickthrough-list",
"github": "apps/workshop/src/examples/components/list-item/account-clickthrough-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Surface, ContentCard, Button, Utility, VisaLogo } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', overline: '•••• 1111', href: './list-item', color: '#18385C' },\n { id: 'item-2', overline: '•••• 2222', href: './list-item', color: '#308342' },\n { id: 'item-3', overline: '•••• 3333', href: './list-item', color: '#A6304B' },\n { id: 'item-4', overline: '•••• 4444', href: './list-item', color: '#1569CF' },\n];\n\nexport const AccountClickthroughList = () => {\n return (\n \n \n \n Accounts\n \n \n \n \n {items.map(item => (\n \n \n \n \n \n \n \n \n \n {item.overline} \n Digital Bank card \n \n \n \n \n \n $1,234.56\n \n \n \n }\n />\n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Account clickthrough list"
},
{
"description": "",
"order": 34,
"libraryId": null,
"componentId": null,
"section": "Custom lists",
"url": {
"iframe": "components/list-item/transactions-list",
"github": "apps/workshop/src/examples/components/list-item/transactions-list.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Typography, UtilityFragment, Utility, Link, Surface, ContentCard, Avatar } from '@visa/nova-react';\nimport type { CSSProperties } from 'react';\n\nconst items = [\n { id: 'item-1', merchantName: 'Merchant name' },\n { id: 'item-2', merchantName: 'Merchant name' },\n { id: 'item-3', merchantName: 'Merchant name' },\n { id: 'item-4', merchantName: 'Merchant name' },\n];\n\nexport const TransactionsList = () => {\n return (\n \n \n \n Transactions\n \n \n See more\n \n \n \n \n {items.map(item => (\n \n \n \n \n MN\n \n \n {item.merchantName}\n \n \n \n \n - $14.57\n \n \n $1,234.56\n \n \n \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Transactions list"
}
],
"propertySections": [
{
"order": 1,
"name": "button",
"type": "related",
"selector": "\n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Default single-select listbox"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/inline-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/inline-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { InputMessage, Label, Listbox, ListboxContainer, ListboxItem, Radio } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'inline-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const InlineSingleListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n This is optional text that describes the label in more detail. \n \n );\n};\n"
},
"name": "Single-select listbox with inline message"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/selected-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/selected-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, Radio } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'selected-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const SelectedSingleListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Single-select listbox with selected item"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/resize-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/resize-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, Radio } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'resize-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ResizeSingleListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Single-select listbox with resize property"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/error-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/error-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { Button, InputMessage, Label, Listbox, ListboxContainer, ListboxItem, Radio, Utility } from '@visa/nova-react';\nimport { useState, type FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'error-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ErrorSingleListbox = () => {\n const [selectedIndex, setSelectedIndex] = useState(-1);\n const [invalid, setInvalid] = useState(false);\n\n const onReset = (event: FormEvent) => {\n event.preventDefault();\n setInvalid(false);\n setSelectedIndex(-1);\n };\n\n const onSubmit = (event: FormEvent) => {\n event.preventDefault();\n setInvalid(selectedIndex === -1);\n };\n\n return (\n \n );\n};\n"
},
"name": "Single-select listbox with error"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/disabled-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/disabled-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, Radio } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const DisabledSingleListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Disabled single-select listbox"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Single-select listboxes",
"url": {
"iframe": "components/listbox/item-disabled-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/item-disabled-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, Radio } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'item-disabled-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ItemDisabledSingleListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Single-select listbox with disabled item"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/default-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/default-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'default-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const DefaultMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Default multi-select listbox"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/inline-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/inline-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, InputMessage, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'inline-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const InlineMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n This is optional text that describes the label in more detail. \n \n );\n};\n"
},
"name": "Multi-select listbox with inline message"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/selected-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/selected-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'selected-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const SelectedMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Multi-select listbox with selected item"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/resize-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/resize-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'resize-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ResizeMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Multi-select listbox with resize property"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/error-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/error-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n} from '@visa/nova-react';\nimport { useState, type FormEvent } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'error-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ErrorMultiListbox = () => {\n const [selectedIndexes, setSelectedIndexes] = useState>({});\n const [invalid, setInvalid] = useState(false);\n\n const onSelectionChange = (e: FormEvent, index: number) => {\n const newSelectedIndexes = { ...selectedIndexes };\n newSelectedIndexes[index] = e.currentTarget.checked;\n setSelectedIndexes(newSelectedIndexes);\n };\n\n const onReset = (event: FormEvent) => {\n event.preventDefault();\n setInvalid(false);\n setSelectedIndexes({});\n };\n\n const onSubmit = (event: FormEvent) => {\n event.preventDefault();\n // If there isn't a card selected, set invalid to true\n const invalid = !Object.values(selectedIndexes).some(selectedCard => selectedCard);\n setInvalid(invalid);\n };\n\n return (\n \n );\n};\n"
},
"name": "Multi-select listbox with error"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/disabled-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/disabled-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'disabled-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const DisabledMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Disabled multi-select listbox"
},
{
"description": "",
"order": 14,
"libraryId": null,
"componentId": null,
"section": "Multi-select listboxes",
"url": {
"iframe": "components/listbox/item-disabled-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/item-disabled-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Checkbox, Label, Listbox, ListboxContainer, ListboxItem } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'item-disabled-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const ItemDisabledMultiListbox = () => {\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => (\n htmlFor={`${id}-option-${index}`} key={`${id}-option-${index}`} tag=\"label\">\n {option} \n \n ))}\n \n \n \n );\n};\n"
},
"name": "Multi-select listbox with disabled item"
},
{
"description": "",
"order": 15,
"libraryId": null,
"componentId": null,
"section": "Custom listboxes",
"url": {
"iframe": "components/listbox/option-single-listbox",
"github": "apps/workshop/src/examples/components/listbox/option-single-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, useListbox } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'option-single-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const OptionSingleListbox = () => {\n const {\n isIndexSelected,\n getTabIndex,\n onKeyNavigation,\n ref: listItemsRef,\n toggleIndexSelected,\n } = useListbox({ defaultSelected: 0 }); // Default to selected on first list item\n\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => {\n const disabled = index === 1;\n return (\n toggleIndexSelected(index)}\n ref={el => {\n listItemsRef.current[index] = el;\n }}\n role=\"option\"\n tabIndex={getTabIndex(index, disabled)}\n >\n \n \n \n );\n};\n"
},
"name": "Single-select listbox with custom hook"
},
{
"description": "",
"order": 16,
"libraryId": null,
"componentId": null,
"section": "Custom listboxes",
"url": {
"iframe": "components/listbox/option-multi-listbox",
"github": "apps/workshop/src/examples/components/listbox/option-multi-listbox.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { Label, Listbox, ListboxContainer, ListboxItem, useListbox } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'option-multi-select-listbox';\n\nconst options = ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G'];\n\nexport const OptionMultiListbox = () => {\n const {\n isIndexSelected,\n getTabIndex,\n onKeyNavigation,\n ref: listItemsRef,\n toggleIndexSelected,\n } = useListbox({ defaultSelected: [0, 3] }); // Default to active on first list item\n\n return (\n \n \n Label (required)\n \n \n \n {options.map((option, index) => {\n const disabled = index === 1;\n return (\n toggleIndexSelected(index)}\n ref={el => {\n listItemsRef.current[index] = el;\n }}\n role=\"option\"\n tabIndex={getTabIndex(index, disabled)}\n >\n \n \n \n );\n};\n"
},
"name": "Multi-select listbox with custom hook"
},
{
"description": "",
"order": 17,
"libraryId": null,
"componentId": null,
"section": "Custom listboxes",
"url": {
"iframe": "components/listbox/reusable",
"github": "apps/workshop/src/examples/components/listbox/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Radio,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\n\n// Types\nexport interface ListboxOption {\n disabled?: boolean;\n label: string;\n value: number | string;\n}\n\nexport type ListboxValue = number | string | (number | string)[];\n\n// Nova Listbox Component Props\nexport interface NovaListboxProps {\n autoSelect?: boolean;\n containHeight?: boolean;\n disabled?: boolean;\n id?: string;\n invalid?: boolean;\n label?: string;\n message?: string;\n multiselect?: boolean;\n onChange?: (value: ListboxValue) => void;\n options?: ListboxOption[];\n value?: ListboxValue;\n}\n\n// Main Nova Listbox Component\nexport const NovaListbox = ({\n autoSelect = false,\n containHeight = true,\n disabled = false,\n id: idProp,\n invalid = false,\n label = '',\n message,\n multiselect = false,\n onChange,\n options = [],\n value: valueProp,\n ...remainingProps\n}: NovaListboxProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n // Initialize state based on multiselect mode\n const [value, setValue] = useState(() => {\n if (valueProp !== undefined) {\n return valueProp;\n }\n return multiselect ? [] : '';\n });\n\n // Sync internal value with prop value\n useEffect(() => {\n if (valueProp !== undefined) {\n setValue(valueProp);\n }\n }, [valueProp]);\n\n // Adjust value type if multiselect mode changes\n useEffect(() => {\n const isArray = Array.isArray(value);\n if (multiselect && !isArray) {\n const newValue = value ? [value] : [];\n setValue(newValue);\n onChange?.(newValue);\n } else if (!multiselect && isArray) {\n const newValue = value[0] ?? '';\n setValue(newValue);\n onChange?.(newValue);\n }\n }, [multiselect, value, onChange]);\n\n // Auto-select first enabled option if autoSelect is true\n useEffect(() => {\n if (autoSelect && options.length > 0 && !value) {\n const firstEnabledOption = options.find(opt => !opt.disabled);\n if (firstEnabledOption) {\n const newValue = multiselect ? [firstEnabledOption.value] : firstEnabledOption.value;\n setValue(newValue);\n onChange?.(newValue);\n }\n }\n }, [autoSelect, options, multiselect, value, onChange]);\n\n // Calculate aria-describedby\n const listboxDescribedBy = useMemo(() => {\n const labelId = `${id}-label`;\n const messageId = message ? `${id}-message` : null;\n return [labelId, messageId].filter(Boolean).join(' ');\n }, [id, message]);\n\n const handleSingleSelect = (optionValue: number | string) => {\n if (disabled) return;\n setValue(optionValue);\n onChange?.(optionValue);\n };\n\n const handleMultiSelect = (optionValue: number | string, checked: boolean) => {\n if (disabled) return;\n const currentValues = Array.isArray(value) ? value : [];\n const newValue = checked ? [...currentValues, optionValue] : currentValues.filter(v => v !== optionValue);\n setValue(newValue);\n onChange?.(newValue);\n };\n\n const isSelected = (optionValue: number | string): boolean => {\n if (multiselect) {\n return Array.isArray(value) && value.includes(optionValue);\n }\n return value === optionValue;\n };\n\n return (\n \n \n {label}\n \n \n \n {options.map((option, index) => (\n \n key={`${id}-option-${option.value}`}\n htmlFor={`${id}-option-${index}`}\n tag=\"label\"\n aria-disabled={option.disabled}\n >\n {multiselect ? (\n handleMultiSelect(option.value, e.target.checked)}\n />\n ) : (\n handleSingleSelect(option.value)}\n />\n )}\n {option.label} \n \n ))}\n \n \n \n \n {invalid && message && \n \n );\n};\n\n// export default NovaListbox;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n autoSelect: boolean;\n containHeight: boolean;\n disabled: boolean;\n invalid: boolean;\n label: string;\n message: string;\n multiselect: boolean;\n options: string;\n}\n\nconst demoOptions: ListboxOption[] = Array.from({ length: 5 }, (_, i) => ({\n label: `Item ${String.fromCharCode('A'.charCodeAt(0) + i)}`,\n value: `option-${i + 1}`,\n}));\n\n// Demo Component\nexport const NovaListboxDemo = () => {\n const defaultCustomizations: DemoCustomizations = {\n autoSelect: false,\n containHeight: true,\n disabled: false,\n invalid: false,\n label: 'Label (required)',\n message: 'This is optional text that describes the label in more detail.',\n multiselect: false,\n options: JSON.stringify(demoOptions, null, 4),\n };\n\n const [customizations, setCustomizations] = useState<\n Omit & { options: ListboxOption[] }\n >({\n ...defaultCustomizations,\n options: demoOptions,\n });\n\n const [formValues, setFormValues] = useState(defaultCustomizations);\n const [selectedValue, setSelectedValue] = useState('');\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n try {\n const parsedOptions = JSON.parse(formValues.options || '[]') as ListboxOption[];\n setCustomizations({\n ...formValues,\n options: parsedOptions,\n });\n // Reset selected value when applying changes\n setSelectedValue(formValues.multiselect ? [] : '');\n } catch (error) {\n console.error('Invalid JSON:', error);\n }\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations({\n ...defaultCustomizations,\n options: demoOptions,\n });\n setSelectedValue('');\n };\n\n return (\n \n );\n};\nexport default NovaListboxDemo;\n/** !!! DELETE ME END !!! */\n"
},
"name": "Reusable listbox"
}
],
"propertySections": [
{
"order": 1,
"name": "Listbox",
"selector": "(\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const DefaultMultiselect = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Default multiselect"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-inline-message",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-inline-message.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-inline-message';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithInlineMessage = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n This is optional text that describes the label in more detail.\n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with inline message"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-error",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-error.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny, VisaErrorTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useRef, useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-error';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithError = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem, reset } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n if (type === useMultipleSelection.stateChangeTypes.FunctionReset) {\n setSelectedItems([]);\n setInputValue('');\n setHasError(false);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n const [hasError, setHasError] = useState(false);\n const dropdownRef = useRef(null);\n\n const handleSubmit = () => {\n // Customize this for your own validation needs\n if (!selectedItems.length) {\n setHasError(true);\n }\n\n // Focus on the field with the error\n if (dropdownRef.current) {\n dropdownRef.current.focus();\n }\n };\n const handleReset = () => {\n reset();\n };\n\n return (\n <>\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n setHasError(false);\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n {hasError && (\n \n \n )}\n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n setHasError(false);\n }\n },\n })}\n >\n \n \n \n \n \n \n Submit\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Multiselect with error"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-disabled-option",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-disabled-option.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string; disabled?: boolean };\n\nconst id = 'multiselect-with-disabled-option';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B', disabled: true },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithDisabledOption = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n isItemDisabled: item => !!item.disabled,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n 'aria-disabled': item.disabled,\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with disabled option"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/disabled-multiselect",
"github": "apps/workshop/src/examples/components/multiselect/disabled-multiselect.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'disabled-multiselect';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const DisabledMultiselect = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const [isDisabled, setIsDisabled] = useState(true);\n\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n <>\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n disabled={isDisabled}\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n \n setIsDisabled(currentValue => !currentValue)}\n checked={isDisabled}\n />\n Mark input as disabled \n \n \n );\n};\n"
},
"name": "Disabled multiselect"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/read-only-multiselect",
"github": "apps/workshop/src/examples/components/multiselect/read-only-multiselect.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'read-only-multiselect';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const ReadOnlyMultiselect = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const [isReadOnly, setIsReadOnly] = useState(true);\n\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n <>\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {isReadOnly ? (\n item.value\n ) : (\n <>\n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n \n setIsReadOnly(currentValue => !currentValue)}\n checked={isReadOnly}\n />\n Mark input as read-only \n \n \n );\n};\n"
},
"name": "Read-only multiselect"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-without-dropdown-chevron",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-without-dropdown-chevron.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-without-dropdown-chevron';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithoutDropdownChevron = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const { getLabelProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, isOpen, setHighlightedIndex } =\n useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect without dropdown chevron"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-multiple-selections-and-vertical-scroll",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-multiple-selections-and-vertical-scroll.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-multiple-selections-and-vertical-scroll';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n { value: 'Option F' },\n { value: 'Option G' },\n { value: 'Option H' },\n { value: 'Option I' },\n { value: 'Option J' },\n { value: 'Option K' },\n { value: 'Option L' },\n { value: 'Option M' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithMultipleSelectionsAndVerticalScroll = () => {\n const items = multiselectItems;\n const [inputValue, setInputValue] = useState('');\n\n // preselect the first 11 items to demonstrate a very full input field with scrollbar\n const [selectedItems, setSelectedItems] = useState(items.slice(0, 12));\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with multiple selections and vertical scroll"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-select-and-unselect-all-buttons",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-select-and-unselect-all-buttons.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n Divider,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-select-and-unselect-all-buttons';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n // if an item was selected/removed, keep the menu open and maintain the same highlightedIndex\n ...(changes.selectedItem && { isOpen: true, highlightedIndex: state.highlightedIndex }),\n };\n case useCombobox.stateChangeTypes.InputBlur: // Keep the menu open for focusing on the select/clear all buttons\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithSelectAndUnselectAllButtons = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n <>\n \n setSelectedItems(multiselectItems)}>\n Select All\n \n setSelectedItems([])}>\n Clear All\n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with select and unselect all buttons"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Default multiselects",
"url": {
"iframe": "components/multiselect/multiselect-with-scrollbar",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-scrollbar.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-scrollbar';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n { value: 'Option F' },\n { value: 'Option G' },\n { value: 'Option H' },\n { value: 'Option I' },\n { value: 'Option J' },\n { value: 'Option K' },\n { value: 'Option L' },\n { value: 'Option M' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n // don't update the highlighted index\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithScrollbar = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = multiselectItems;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with scrollbar"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Multiselect Behaviors",
"url": {
"iframe": "components/multiselect/multiselect-with-filterable-menu-and-manual-selection",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-filterable-menu-and-manual-selection.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useMemo, useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-filterable-menu-and-manual-selection';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithFilterableMenuAndManualSelection = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = useMemo(\n () => multiselectItems.filter(item => item.value.toLowerCase().includes(inputValue.toLowerCase())),\n [inputValue]\n );\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && !!selectedItem) {\n // make sure the highlighted index is on the item that was just clicked\n setHighlightedIndex(items.indexOf(selectedItem));\n }\n },\n });\n\n const resultsFound = items.length > 0;\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && resultsFound && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n No results found \n \n )}\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with filterable menu and manual selection"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Multiselect Behaviors",
"url": {
"iframe": "components/multiselect/multiselect-with-filterable-menu-and-automatic-selection",
"github": "apps/workshop/src/examples/components/multiselect/multiselect-with-filterable-menu-and-automatic-selection.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n DropdownContainer,\n Input,\n InputContainer,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useCombobox, useMultipleSelection, type UseComboboxState, type UseComboboxStateChangeOptions } from 'downshift';\nimport { useMemo, useState } from 'react';\n\ntype Item = { value: string };\n\nconst id = 'multiselect-with-filterable-menu-and-automatic-selection';\nconst multiselectItems: Item[] = [\n { value: 'Option A' },\n { value: 'Option B' },\n { value: 'Option C' },\n { value: 'Option D' },\n { value: 'Option E' },\n];\n\nexport const itemToString = (item: Item | null) => (item ? item.value : '');\n\nexport const comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n // don't open the menu just because the input was clicked\n // instead, wait for an keystroke or a toggle button click\n ...state,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n // don't change the focused item just because the mouse moved\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open on item select or Enter press\n // and if we're selecting an item, maintain the same highlightedIndex\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\nexport const MultiselectWithFilterableMenuAndAutomaticSelection = () => {\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState([]);\n const items = useMemo(\n () => multiselectItems.filter(item => item.value.toLowerCase().includes(inputValue.toLowerCase())),\n [inputValue]\n );\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n setSelectedItems(newSelectedItems!);\n }\n },\n });\n const { getToggleButtonProps, getLabelProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, isOpen } =\n useCombobox({\n id,\n items,\n itemToString,\n inputValue,\n defaultHighlightedIndex: 0, // after selection, highlight the first item.\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue!);\n }\n },\n });\n\n const resultsFound = items.length > 0;\n\n return (\n \n \n \n Label (required) \n \n \n \n {selectedItems.map((item, index) => {\n return (\n \n \n {item.value} \n removeSelectedItem(item)}\n subtle\n >\n \n \n );\n })}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && resultsFound && isOpen) {\n const selectedItem = items[highlightedIndex];\n if (selectedItems.includes(selectedItem)) {\n removeSelectedItem(selectedItem);\n } else {\n setSelectedItems([...selectedItems, selectedItem]);\n setInputValue('');\n }\n }\n }\n },\n })\n )}\n />\n \n \n \n {isOpen ? \n \n \n \n \n \n \n {items.map((item, index) => (\n \n key={`${id}-example-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => {\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n setSelectedItems([...selectedItems, item]);\n setInputValue('');\n }\n },\n })}\n >\n \n No results found \n \n )}\n \n \n \n \n );\n};\n"
},
"name": "Multiselect with filterable menu and automatic selection"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Custom multiselect",
"url": {
"iframe": "components/multiselect/reusable",
"github": "apps/workshop/src/examples/components/multiselect/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { VisaChevronDownTiny, VisaChevronUpTiny, VisaClearAltTiny, VisaErrorTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Checkbox,\n Chip,\n Combobox,\n Divider,\n DropdownContainer,\n Input,\n InputContainer,\n InputMessage,\n Label,\n Listbox,\n ListboxContainer,\n ListboxItem,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport {\n type UseComboboxState,\n type UseComboboxStateChangeOptions,\n useCombobox,\n useMultipleSelection,\n} from 'downshift';\nimport { useId, useMemo, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\n\n// Types\nexport interface MultiselectOption {\n disabled?: boolean;\n label: string;\n value: T;\n}\n\n// Nova Multiselect Component Props\nexport interface NovaMultiselectProps {\n autoFilter?: boolean;\n autoSelect?: boolean;\n description?: string;\n disabled?: boolean;\n hideDropdownButton?: boolean;\n hideSelectionButtons?: boolean;\n id?: string;\n inline?: boolean;\n invalid?: boolean;\n label?: string;\n message?: string;\n onChange?: (selectedValues: T[]) => void;\n options?: MultiselectOption[];\n readonly?: boolean;\n required?: boolean;\n value?: T[];\n}\n\n// Combobox state reducer\nconst comboboxStateReducer = (\n state: UseComboboxState,\n { type, changes }: UseComboboxStateChangeOptions\n) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputClick:\n return {\n ...state,\n };\n case useCombobox.stateChangeTypes.InputChange:\n return {\n ...changes,\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.ItemMouseMove:\n case useCombobox.stateChangeTypes.MenuMouseLeave:\n return {\n ...changes,\n highlightedIndex: state.highlightedIndex,\n };\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n ...(changes.selectedItem && { isOpen: true, highlightedIndex: state.highlightedIndex }),\n };\n case useCombobox.stateChangeTypes.InputBlur:\n return {\n ...changes,\n isOpen: true,\n ...(changes.selectedItem && { highlightedIndex: state.highlightedIndex }),\n };\n default:\n return changes;\n }\n};\n\n// Item to string converter\nconst itemToString = (item: MultiselectOption | null) => (item ? item.label : '');\n\n// Main Nova Multiselect Component\nexport const NovaMultiselect = ({\n autoFilter = true,\n autoSelect = false,\n description,\n disabled = false,\n hideDropdownButton = false,\n hideSelectionButtons = false,\n id: idProp,\n inline = false,\n invalid = false,\n label = '',\n message,\n onChange,\n options = [],\n readonly = false,\n required = false,\n value = [],\n ...remainingProps\n}: NovaMultiselectProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n const [inputValue, setInputValue] = useState('');\n const [selectedItems, setSelectedItems] = useState[]>(() =>\n options.filter(opt => value.includes(opt.value))\n );\n\n // Filter options based on input value\n const filteredItems = useMemo(() => {\n if (!autoFilter || !inputValue) return options;\n return options.filter(item => item.label.toLowerCase().includes(inputValue.toLowerCase()));\n }, [autoFilter, inputValue, options]);\n\n // Calculate aria-describedby\n const inputDescribedBy =\n message || description\n ? [message ? `${id}-message` : '', description ? `${id}-description` : ''].filter(Boolean).join(' ')\n : undefined;\n\n const { getDropdownProps, removeSelectedItem } = useMultipleSelection({\n selectedItems,\n onStateChange({ selectedItems: newSelectedItems, type }) {\n if (\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete ||\n type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem\n ) {\n const updatedItems = newSelectedItems || [];\n setSelectedItems(updatedItems);\n onChange?.(updatedItems.map(item => item.value));\n }\n },\n });\n\n const {\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n highlightedIndex,\n isOpen,\n setHighlightedIndex,\n } = useCombobox({\n id: `${id}-combobox`,\n items: filteredItems,\n itemToString,\n inputValue,\n defaultHighlightedIndex: 0,\n stateReducer: comboboxStateReducer,\n onStateChange({ inputValue: newInputValue, type, selectedItem }) {\n if (type === useCombobox.stateChangeTypes.InputChange) {\n setInputValue(newInputValue || '');\n\n // Auto-select if enabled and there's only one filtered result\n if (autoSelect && newInputValue) {\n const filtered = options.filter(item => item.label.toLowerCase().includes(newInputValue.toLowerCase()));\n if (filtered.length === 1 && !selectedItems.includes(filtered[0])) {\n const newSelectedItems = [...selectedItems, filtered[0]];\n setSelectedItems(newSelectedItems);\n onChange?.(newSelectedItems.map(item => item.value));\n setInputValue('');\n }\n }\n }\n if (type === useCombobox.stateChangeTypes.ItemClick && selectedItem) {\n setHighlightedIndex(filteredItems.indexOf(selectedItem));\n }\n },\n });\n\n const handleItemSelect = (item: MultiselectOption) => {\n if (item.disabled) return;\n\n if (selectedItems.includes(item)) {\n removeSelectedItem(item);\n } else {\n const newSelectedItems = [...selectedItems, item];\n setSelectedItems(newSelectedItems);\n onChange?.(newSelectedItems.map(i => i.value));\n setInputValue('');\n }\n };\n\n const handleSelectAll = () => {\n const enabledOptions = options.filter(opt => !opt.disabled);\n setSelectedItems(enabledOptions);\n onChange?.(enabledOptions.map(item => item.value));\n };\n\n const handleClearAll = () => {\n setSelectedItems([]);\n onChange?.([]);\n };\n\n const resultsFound = filteredItems.length > 0;\n\n return (\n \n \n \n \n \n {label}\n {required ? ' (required)' : ''}\n \n {description && (\n \n {description}\n \n )}\n \n \n \n \n {selectedItems.map((item, index) => (\n \n \n {readonly ? (\n item.label\n ) : (\n <>\n {item.label} \n removeSelectedItem(item)}\n subtle\n disabled={disabled}\n >\n \n \n ))}\n \n {\n if (e.key === 'Enter') {\n if (highlightedIndex !== -1 && resultsFound && isOpen) {\n const selectedItem = filteredItems[highlightedIndex];\n handleItemSelect(selectedItem);\n }\n }\n },\n })\n )}\n aria-describedby={inputDescribedBy}\n aria-invalid={invalid}\n aria-required={required ? true : undefined}\n disabled={disabled}\n id={`${id}-input`}\n name={`${id}-multiselect`}\n readOnly={readonly}\n {...remainingProps}\n />\n \n \n {!hideDropdownButton && (\n \n {isOpen ? \n \n \n \n\n \n \n {invalid && message && \n \n\n \n {!hideSelectionButtons && (\n <>\n \n \n Select All\n \n \n Clear All\n \n \n \n \n {filteredItems.map((item, index) => (\n \n key={`${id}-item-${index}`}\n className={highlightedIndex === index ? 'v-listbox-item-highlighted' : ''}\n {...getItemProps({\n item,\n index,\n 'aria-disabled': item.disabled || undefined,\n 'aria-selected': selectedItems.includes(item),\n onClick: () => handleItemSelect(item),\n })}\n >\n \n No results found \n \n )}\n \n \n \n \n );\n};\n// export default NovaMultiselect;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n autoFilter: boolean;\n autoSelect: boolean;\n description: string;\n disabled: boolean;\n hideDropdownButton: boolean;\n hideSelectionButtons: boolean;\n inline: boolean;\n invalid: boolean;\n label: string;\n message: string;\n options: string;\n readonly: boolean;\n required: boolean;\n}\n\nconst demoOptions: MultiselectOption[] = [\n { label: 'Option A', value: 'a' },\n { label: 'Option B', value: 'b' },\n { label: 'Option C', value: 'c', disabled: true },\n { label: 'Option D', value: 'd' },\n { label: 'Option E', value: 'e' },\n];\n\n// Demo Component\nexport const NovaMultiselectDemo = () => {\n const defaultCustomizations: DemoCustomizations = {\n autoFilter: true,\n autoSelect: false,\n description: 'This is optional text that describes the label in more detail.',\n disabled: false,\n hideDropdownButton: false,\n hideSelectionButtons: false,\n inline: false,\n invalid: false,\n label: 'Label',\n message: 'This is required text that describes the error in more detail.',\n options: JSON.stringify(demoOptions, null, 2),\n readonly: false,\n required: false,\n };\n\n const [customizations, setCustomizations] = useState<\n Omit & { options: MultiselectOption[] }\n >({\n ...defaultCustomizations,\n options: demoOptions,\n });\n\n const [formValues, setFormValues] = useState(defaultCustomizations);\n const [selectedValues, setSelectedValues] = useState([]);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n try {\n const parsedOptions = JSON.parse(formValues.options || '[]') as MultiselectOption[];\n setCustomizations({\n ...formValues,\n options: parsedOptions,\n });\n } catch (error) {\n console.error('Invalid JSON:', error);\n }\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations({\n ...defaultCustomizations,\n options: demoOptions,\n });\n setSelectedValues([]);\n };\n\n return (\n \n
\n\n
\n \n Selected values: {selectedValues.length > 0 ? selectedValues.join(', ') : 'None'}\n \n
\n\n
\n \n \n \n
\n
(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n {tabContent.tabLabel}} />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Default navigation drawer"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/navigation-drawer-with-active-element",
"github": "apps/workshop/src/examples/components/navigation-drawer/navigation-drawer-with-active-element.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'navigation-drawer-with-active-element';\nconst navElAriaLabel = 'Drawer with active element';\n\nconst tabsContent = [\n {\n tabLabel: 'L1 label 1',\n id: `${id}-tab-0`,\n href: './navigation-drawer',\n active: true,\n },\n {\n tabLabel: 'L1 label 2',\n id: `${id}-tab-1`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 3',\n id: `${id}-tab-2`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 4',\n id: `${id}-tab-3`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 5',\n id: `${id}-tab-4`,\n href: './navigation-drawer',\n },\n];\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const NavigationDrawerWithActiveElement = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n {tabContent.tabLabel}}\n />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Navigation drawer with active element"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/navigation-drawer-with-icons",
"github": "apps/workshop/src/examples/components/navigation-drawer/navigation-drawer-with-icons.tsx"
},
"tags": [],
"snippets": {
"tsx": "import {\n VisaAccountTiny,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseTiny,\n VisaStatisticsTiny,\n VisaSettingsTiny,\n VisaSecurityTiny,\n VisaNotesTiny,\n VisaSupportTicketTiny,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'navigation-drawer-with-icons';\nconst navElAriaLabel = 'Drawer with icons';\n\nconst tabsContent = [\n {\n tabLabel: 'L1 label 1',\n id: `${id}-tab-0`,\n href: './navigation-drawer',\n icon: (null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n id={id}\n ref={navDrawerRef}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n \n {tabContent.icon}\n {tabContent.tabLabel}\n \n }\n />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Navigation drawer with icons"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/navigation-drawer-with-nested-elements",
"github": "apps/workshop/src/examples/components/navigation-drawer/navigation-drawer-with-nested-elements.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'navigation-drawer-with-nested-elements';\nconst navElAriaLabel = 'Drawer with nested elements';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const NavigationDrawerWithNestedElements = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const [l1Label2Expanded, setL1Label2Expanded] = useState(false);\n const [l1Label4Expanded, setL1Label4Expanded] = useState(false);\n const [l2Label1Expanded, setL2Label1Expanded] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n \n \n L1 label 1} />\n \n \n \n \n setL1Label2Expanded(!l1Label2Expanded)}\n >\n L1 label 2\n \n \n \n \n \n \n \n L1 label 3} />\n \n \n \n \n setL1Label4Expanded(!l1Label4Expanded)}\n >\n L1 label 4\n \n \n \n \n \n \n \n L1 label 5} />\n \n \n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Navigation drawer with nested elements"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/navigation-drawer-with-section-titles",
"github": "apps/workshop/src/examples/components/navigation-drawer/navigation-drawer-with-section-titles.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'navigation-drawer-with-section-titles';\nconst navElAriaLabel = 'Drawer with section titles';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const NavigationDrawerWithSectionTitles = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n \n \n \n Section Title 1\n \n \n \n \n \n L1 label 1} />\n \n \n \n \n L1 label 2} />\n \n \n \n \n L1 label 3} />\n \n \n \n \n \n \n \n Section Title 2\n \n \n \n \n \n L1 label 4} />\n \n \n \n \n L1 label 5} />\n \n \n \n \n L1 label 6} />\n \n \n \n \n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Navigation drawer with section titles"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/navigation-drawer-with-nested-elements-and-section-titles",
"github": "apps/workshop/src/examples/components/navigation-drawer/navigation-drawer-with-nested-elements-and-section-titles.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'navigation-drawer-with-nested-elements-and-section-titles';\nconst navElAriaLabel = 'Drawer with nested elements and section titles';\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const NavigationDrawerWithNestedElementsAndSectionTitles = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const [l1Label2Expanded, setL1Label2Expanded] = useState(false);\n const [l2Label2Expanded, setL2Label2Expanded] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n \n \n \n L1 Section Title 1\n \n \n \n L1 label 1} />\n \n \n setL1Label2Expanded(!l1Label2Expanded)}\n >\n L1 label 2\n \n \n \n \n \n \n \n \n L1 Section Title 2\n \n \n \n L1 label 3} />\n \n \n L1 label 4} />\n \n \n \n \n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Navigation drawer with nested elements and section titles"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/alternate-navigation-drawer",
"github": "apps/workshop/src/examples/components/navigation-drawer/alternate-navigation-drawer.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-navigation-drawer';\nconst navElAriaLabel = 'Alternate drawer';\n\nconst tabsContent = [\n {\n tabLabel: 'L1 label 1',\n id: `${id}-tab-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 2',\n id: `${id}-tab-1`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 3',\n id: `${id}-tab-2`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 4',\n id: `${id}-tab-3`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 5',\n id: `${id}-tab-4`,\n href: './navigation-drawer',\n },\n];\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const AlternateNavigationDrawer = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n {tabContent.tabLabel}} />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Alternate navigation drawer"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/alternate-navigation-drawer-with-active-element",
"github": "apps/workshop/src/examples/components/navigation-drawer/alternate-navigation-drawer-with-active-element.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaAccountTiny, VisaChevronDownTiny, VisaChevronUpTiny, VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-navigation-drawer-with-active-element';\nconst navElAriaLabel = 'Alternate drawer with active element';\n\nconst tabsContent = [\n {\n tabLabel: 'L1 label 1',\n id: `${id}-tab-0`,\n href: './navigation-drawer',\n active: true,\n },\n {\n tabLabel: 'L1 label 2',\n id: `${id}-tab-1`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 3',\n id: `${id}-tab-2`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 4',\n id: `${id}-tab-3`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L1 label 5',\n id: `${id}-tab-4`,\n href: './navigation-drawer',\n },\n];\n\nconst accountSubItems = [\n {\n tabLabel: 'L2 label 1',\n id: `${id}-account-sub-item-0`,\n href: './navigation-drawer',\n },\n {\n tabLabel: 'L2 label 2',\n id: `${id}-account-sub-item-1`,\n href: './navigation-drawer',\n },\n];\n\nexport const AlternateNavigationDrawerWithActiveElement = () => {\n const [accountTabOpen, setAccountTabOpen] = useState(false);\n const navDrawerRef = useRef(null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n {tabContent.tabLabel}}\n />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Alternate navigation drawer with active element"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Default navigation drawers",
"url": {
"iframe": "components/navigation-drawer/alternate-navigation-drawer-with-icons",
"github": "apps/workshop/src/examples/components/navigation-drawer/alternate-navigation-drawer-with-icons.tsx"
},
"tags": [],
"snippets": {
"tsx": "import {\n VisaAccountTiny,\n VisaChevronDownTiny,\n VisaChevronUpTiny,\n VisaCloseTiny,\n VisaStatisticsTiny,\n VisaSettingsTiny,\n VisaSecurityTiny,\n VisaNotesTiny,\n VisaSupportTicketTiny,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n Link,\n Nav,\n NavAppName,\n Tab,\n TabSuffix,\n Tabs,\n Typography,\n Utility,\n UtilityFragment,\n VisaLogo,\n} from '@visa/nova-react';\nimport { useState, useRef, type CSSProperties } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'alternate-navigation-drawer-with-icons';\nconst navElAriaLabel = 'Alternate drawer with icons';\n\nconst tabsContent = [\n {\n tabLabel: 'L1 label 1',\n id: `${id}-tab-0`,\n href: './navigation-drawer',\n icon: (null);\n\n return (\n <>\n \n navDrawerRef.current?.showModal()}>Open drawer \n \n\n \n \n aria-modal=\"true\"\n ref={navDrawerRef}\n id={id}\n tag=\"dialog\"\n style={\n {\n '--v-panel-inline-size': 'initial',\n } as CSSProperties\n }\n >\n \n \n navDrawerRef.current?.close()}\n subtle\n >\n \n \n \n \n Application Name \n \n \n \n \n \n {tabsContent.map(tabContent => (\n \n \n \n {tabContent.icon}\n {tabContent.tabLabel}\n \n }\n />\n \n \n ))}\n \n \n \n \n setAccountTabOpen(!accountTabOpen)}\n >\n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Alternate navigation drawer with icons"
}
],
"propertySections": [
{
"order": 1,
"name": "Nav",
"selector": "\n \n \n \n \n \n \n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n 4\n \n \n \n \n 5\n \n \n \n \n 6\n \n \n \n \n 7\n \n \n \n \n \n \n 100\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Default pagination with first page selected"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default paginations",
"url": {
"iframe": "components/pagination/two-digit-pagination",
"github": "apps/workshop/src/examples/components/pagination/two-digit-pagination.tsx"
},
"tags": [],
"snippets": {
"tsx": "import {\n VisaArrowEndTiny,\n VisaArrowStartTiny,\n VisaChevronLeftTiny,\n VisaChevronRightTiny,\n VisaOptionHorizontalTiny,\n} from '@visa/nova-icons-react';\nimport { Button, Pagination, PaginationOverflow } from '@visa/nova-react';\n\nexport const TwoDigitPagination = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n 1\n \n \n \n \n \n \n 4\n \n \n \n \n 5\n \n \n \n \n 6\n \n \n \n \n \n \n 100\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Default pagination with middle page selected"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Default paginations",
"url": {
"iframe": "components/pagination/last-page-selected",
"github": "apps/workshop/src/examples/components/pagination/last-page-selected.tsx"
},
"tags": [],
"snippets": {
"tsx": "import {\n VisaArrowEndTiny,\n VisaArrowStartTiny,\n VisaChevronLeftTiny,\n VisaChevronRightTiny,\n VisaOptionHorizontalTiny,\n} from '@visa/nova-icons-react';\nimport { Button, Pagination, PaginationOverflow } from '@visa/nova-react';\n\nexport const LastPageSelected = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n 1\n \n \n \n \n \n \n 96\n \n \n \n \n 97\n \n \n \n \n 98\n \n \n \n \n 99\n \n \n \n \n 100\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Default pagination with last page selected"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Slim paginations",
"url": {
"iframe": "components/pagination/slim-pagination",
"github": "apps/workshop/src/examples/components/pagination/slim-pagination.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaChevronLeftTiny, VisaChevronRightTiny } from '@visa/nova-icons-react';\nimport { Button, Pagination, usePagination } from '@visa/nova-react';\n\nexport const SlimPagination = () => {\n const { pages, selectedPage, isFirstPage, isLastPage, onPageChange, onPreviousPage, onNextPage } = usePagination({\n totalPages: 10,\n compact: true,\n blockMaxLength: 5,\n });\n\n return (\n \n \n \n \n \n {pages.map(page => (\n \n onPageChange(+page)}\n >\n {page}\n \n \n ))}\n \n \n \n \n \n );\n};\n"
},
"name": "Default slim pagination"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Custom paginations",
"url": {
"iframe": "components/pagination/table-pagination",
"github": "apps/workshop/src/examples/components/pagination/table-pagination.tsx"
},
"tags": [],
"snippets": {
"tsx": "import {\n VisaArrowEndTiny,\n VisaArrowStartTiny,\n VisaChevronDownTiny,\n VisaChevronLeftTiny,\n VisaChevronRightTiny,\n VisaOptionHorizontalTiny,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n InputContainer,\n InputControl,\n InputMessage,\n Label,\n Pagination,\n PaginationOverflow,\n Select,\n Utility,\n UtilityFragment,\n calculatePagesFromTo,\n calculateTotalPages,\n usePagination,\n} from '@visa/nova-react';\nimport { useState, type CSSProperties, type FormEvent } from 'react';\n\nconst totalItems = 100;\n\nexport const TablePagination = () => {\n const [itemsPerPage, setItemsPerPage] = useState(10);\n\n const totalPages = calculateTotalPages(totalItems, itemsPerPage);\n const {\n isFirstPage,\n isLastPage,\n onFirstPage,\n onLastPage,\n onNextPage,\n onPageChange,\n onPreviousPage,\n pages,\n selectedPage,\n } = usePagination({ totalPages });\n\n const { from, to } = calculatePagesFromTo(totalItems, itemsPerPage, selectedPage);\n\n const onItemsPerPageChange = (event: FormEvent) => {\n onFirstPage();\n setItemsPerPage(+event.currentTarget.value);\n };\n\n return (\n \n \n \n Items Per Page \n \n \n \n 10 \n 20 \n 50 \n \n \n \n \n {`${from} - ${to} of ${totalItems}`} \n \n \n \n \n \n \n \n \n \n \n \n {pages.map((pageNumber, index) =>\n pageNumber === -1 ? (\n \n \n \n \n ) : (\n \n onPageChange(pageNumber as number)}\n >\n {pageNumber}\n \n \n )\n )}\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"
},
"name": "Pagination for tables"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Custom paginations",
"url": {
"iframe": "components/pagination/reusable",
"github": "apps/workshop/src/examples/components/pagination/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import {\n VisaArrowEndTiny,\n VisaArrowStartTiny,\n VisaChevronDownTiny,\n VisaChevronLeftTiny,\n VisaChevronRightTiny,\n VisaOptionHorizontalTiny,\n} from '@visa/nova-icons-react';\nimport {\n Button,\n calculatePagesFromTo,\n calculateTotalPages,\n InputContainer,\n InputControl,\n InputMessage,\n Label,\n Pagination,\n PaginationOverflow,\n Select,\n usePagination,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { type CSSProperties, type FormEvent, useEffect, useId, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\n\n// Nova Pagination Component Props\nexport interface NovaPaginationProps {\n 'aria-label'?: string;\n blockMaxLength?: number;\n compact?: boolean;\n disabled?: boolean;\n id?: string;\n inline?: boolean;\n itemsPerPage?: number;\n itemsPerPageOptions?: number[];\n onItemsPerPageChange?: (itemsPerPage: number) => void;\n onPageChange?: (page: number) => void;\n page?: number;\n selectLabel?: string;\n showItemsPerPage?: boolean;\n showPageRange?: boolean;\n totalItems?: number;\n}\n\n// Main Nova Pagination Component\nexport const NovaPagination = ({\n 'aria-label': ariaLabel = 'Pagination for table',\n blockMaxLength,\n compact = false,\n disabled = false,\n id: idProp,\n inline = true,\n itemsPerPage: itemsPerPageProp = 10,\n itemsPerPageOptions = [5, 10, 15, 20],\n onItemsPerPageChange: onItemsPerPageChangeProp,\n onPageChange: onPageChangeProp,\n page,\n selectLabel = 'Results per page',\n showItemsPerPage = true,\n showPageRange = true,\n totalItems = 1,\n ...remainingProps\n}: NovaPaginationProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const [itemsPerPageControlled, setItemsPerPageControlled] = useState(10);\n\n const itemsPerPage = itemsPerPageProp ?? itemsPerPageControlled;\n const setItemsPerPage = onItemsPerPageChangeProp ?? setItemsPerPageControlled;\n\n const totalPages = calculateTotalPages(totalItems, itemsPerPage);\n const {\n isFirstPage,\n isLastPage,\n onFirstPage,\n onLastPage,\n onNextPage,\n onPageChange,\n onPreviousPage,\n pages,\n selectedPage,\n } = usePagination({\n blockMaxLength,\n compact,\n setSelectedPage: onPageChangeProp,\n selectedPage: page,\n totalPages,\n });\n\n const { from, to } = calculatePagesFromTo(totalItems, itemsPerPage, selectedPage);\n\n const onItemsPerPageChange = (event: FormEvent) => {\n onFirstPage();\n setItemsPerPage(+event.currentTarget.value);\n };\n\n useEffect(() => {\n onFirstPage();\n }, [itemsPerPage, totalItems]);\n\n return (\n \n {(showItemsPerPage || showPageRange) && (\n \n {showItemsPerPage && (\n <>\n \n \n {selectLabel}\n \n \n \n \n {itemsPerPageOptions.map(option => (\n \n {option}\n \n ))}\n \n \n \n \n \n )}\n {showPageRange && (\n {`${from} - ${to} of ${totalItems}`}\n )}\n \n )}\n \n \n \n \n {!compact && (\n \n \n \n )}\n \n \n \n {pages.map((pageNumber, index) =>\n pageNumber === -1 ? (\n \n \n \n \n ) : (\n \n onPageChange(pageNumber as number)}\n >\n {pageNumber}\n \n \n )\n )}\n \n \n \n {!compact && (\n \n \n \n )}\n \n \n \n \n \n );\n};\n\n// export default NovaPagination;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n compact: boolean;\n disabled: boolean;\n inline: boolean;\n showItemsPerPage: boolean;\n showPageRange: boolean;\n totalItems: number;\n}\n\n// Demo Component\nexport const NovaPaginationDemo = () => {\n const defaultCustomizations: DemoCustomizations = {\n compact: false,\n disabled: false,\n inline: true,\n showItemsPerPage: true,\n showPageRange: true,\n totalItems: 100,\n };\n\n const [customizations, setCustomizations] = useState(defaultCustomizations);\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value: string | boolean | number) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n setCustomizations(formValues);\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations(defaultCustomizations);\n };\n\n return (\n \n );\n};\nexport default NovaPaginationDemo;\n/** !!! DELETE ME END !!! */\n"
},
"name": "Reusable pagination"
}
],
"propertySections": [
{
"order": 1,
"name": "Pagination",
"selector": " ref.current?.showModal()}>Open modal panel \n \n aria-describedby={`${id}-description`}\n aria-labelledby={`${id}-title`}\n aria-modal=\"true\"\n id={id}\n onKeyDown={e => onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n tag=\"dialog\"\n >\n \n \n Panel title\n \n ref.current?.close()}\n subtle\n >\n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n );\n};\n"
},
"name": "Modal panel"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Default panels",
"url": {
"iframe": "components/panel/default-panel",
"github": "apps/workshop/src/examples/components/panel/default-panel.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaCloseTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\n\nexport const DefaultPanel = () => {\n return (\n \n \n \n \n \n Panel title\n \n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n \n );\n};\n"
},
"name": "Default responsive panel"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Expandable panels",
"url": {
"iframe": "components/panel/expandable-panel",
"github": "apps/workshop/src/examples/components/panel/expandable-panel.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelToggle,\n Typography,\n useFocusTrap,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\n\nexport const ModalExpandablePanel = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n \n \n ref.current?.showModal()}\n >\n \n\n \n \n expandable\n onKeyDown={e => onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n style={{ height: 400 }}\n tag=\"dialog\"\n >\n ref.current?.close()}\n >\n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n \n );\n};\n"
},
"name": "Modal expandable panel"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Expandable panels",
"url": {
"iframe": "components/panel/expandable-responsive-panel",
"github": "apps/workshop/src/examples/components/panel/expandable-responsive-panel.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelToggle,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useState } from 'react';\n\nexport const ExpandableResponsivePanel = () => {\n const [open, setOpen] = useState(true);\n\n return (\n \n \n setOpen(open ? false : true)}\n >\n {open ? \n\n {open && (\n \n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n )}\n \n );\n};\n"
},
"name": "Responsive expanded panel"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Expandable panels",
"url": {
"iframe": "components/panel/expandable-panel-secondary",
"github": "apps/workshop/src/examples/components/panel/expandable-panel-secondary.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelToggle,\n Typography,\n useFocusTrap,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\n\nexport const SecondaryModalExpandablePanel = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n \n \n ref.current?.showModal()}\n >\n \n\n \n \n expandable\n onKeyDown={e => onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n style={{ height: 400 }}\n tag=\"dialog\"\n >\n ref.current?.close()}\n >\n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n \n );\n};\n"
},
"name": "Modal expandable panel with secondary button"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Expandable panels",
"url": {
"iframe": "components/panel/expandable-panel-skrim",
"github": "apps/workshop/src/examples/components/panel/expandable-panel-skrim.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelToggle,\n Typography,\n useFocusTrap,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\n\nexport const ModalExpandablePanelWithSkrim = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n\n return (\n \n \n ref.current?.showModal()}\n >\n \n\n \n \n expandable\n onKeyDown={e => onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n skrim\n style={{ height: 400 }}\n tag=\"dialog\"\n >\n ref.current?.close()}\n >\n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n \n );\n};\n"
},
"name": "Modal expandable panel with skrim"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Tabbed panels",
"url": {
"iframe": "components/panel/tabbed-expandable-panel",
"github": "apps/workshop/src/examples/components/panel/tabbed-expandable-panel.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelToggle,\n Typography,\n useFocusTrap,\n Utility,\n PanelTabs,\n Button,\n UtilityFragment,\n Tab,\n Divider,\n} from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'tabbed-expandable-panel-example';\n\nconst tabs = ['FAQ', 'Chat', 'Contact'];\n\nexport const TabbedModalExpandablePanel = () => {\n const { onKeyNavigation, ref } = useFocusTrap();\n const [selectedTabIndex, setSelectedTabIndex] = useState(0);\n\n return (\n \n \n ref.current?.showModal()}\n >\n \n\n \n \n expandable\n onKeyDown={e => onKeyNavigation(e, ref.current?.open)}\n ref={ref}\n style={{ height: 400 }}\n tag=\"dialog\"\n >\n ref.current?.close()}\n >\n \n \n {tabs.map((tab, index) => (\n \n setSelectedTabIndex(index)}\n role=\"tab\"\n >\n {tab}\n \n \n ))}\n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n \n \n );\n};\n"
},
"name": "Tabbed modal expandable panel"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Tabbed panels",
"url": {
"iframe": "components/panel/tabbed-expandable-responsive-panel",
"github": "apps/workshop/src/examples/components/panel/tabbed-expandable-responsive-panel.tsx"
},
"tags": [],
"snippets": {
"tsx": "import { VisaMediaFastForwardTiny, VisaMediaRewindTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n Divider,\n Panel,\n PanelBody,\n PanelContent,\n PanelHeader,\n PanelTabs,\n PanelToggle,\n Tab,\n Typography,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'tabbed-expandable-responsive-panel-example';\n\nconst tabs = ['FAQ', 'Chat', 'Contact'];\n\nexport const TabbedExpandableResponsivePanel = () => {\n const [open, setOpen] = useState(true);\n const [selectedTabIndex, setSelectedTabIndex] = useState(0);\n\n return (\n \n \n setOpen(open ? false : true)}\n >\n {open ? \n\n {open && (\n \n \n \n {tabs.map((tab, index) => (\n \n setSelectedTabIndex(index)}\n role=\"tab\"\n >\n {tab}\n \n \n ))}\n \n \n \n Panel title\n \n \n \n \n Panel subtitle\n \n \n This is required text that can be used to describe the panel title and subtitle in more detail.\n \n \n \n \n )}\n \n );\n};\n"
},
"name": "Tabbed responsive expanded panel"
}
],
"propertySections": [
{
"order": 1,
"name": "Panel",
"selector": "\n {initiated && (\n \n \n \n \n {loadingMsg} \n \n \n )}\n \n start()}>\n Start\n \n reset()}>\n Reset\n \n setPaused(!paused)}>\n {paused ? (\n <>\n \n \n \n );\n};\n"
},
"name": "Indeterminate linear progress indicator"
},
{
"description": "",
"order": 2,
"libraryId": null,
"componentId": null,
"section": "Linear progress indicators",
"url": {
"iframe": "components/progress/indeterminate-no-label-progress",
"github": "apps/workshop/src/examples/components/progress/indeterminate-no-label-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaMediaPauseAltTiny, VisaMediaPlayAltTiny } from '@visa/nova-icons-react';\nimport { Button, ProgressLinear, Utility, UtilityFragment } from '@visa/nova-react';\nimport { useState } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'no-label-indeterminate-linear-progress';\n\nexport const IndeterminateNoLabelProgress = () => {\n const [paused, setPaused] = useState(false);\n const [initiated, setInitiated] = useState(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n\nconst start = () => {\n setInitiated(true);\n setTimeout(() => {\n setLoadingMsg('Loading...');\n }, 500);\n}\n \nconst reset = () => {\n setInitiated(false);\n setLoadingMsg('');\n}\n\n return (\n \n {initiated && (\n \n \n \n \n {loadingMsg} \n \n \n )}\n \n start()}>\n Start\n \n reset()}>\n Reset\n \n setPaused(!paused)}>\n {paused ? (\n <>\n \n \n \n );\n};\n"
},
"name": "Indeterminate linear progress indicator without visible label"
},
{
"description": "",
"order": 3,
"libraryId": null,
"componentId": null,
"section": "Linear progress indicators",
"url": {
"iframe": "components/progress/determinate-progress",
"github": "apps/workshop/src/examples/components/progress/determinate-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Button, ProgressLabel, ProgressLinear, Utility, UtilityFragment } from '@visa/nova-react';\nimport { useCallback, useState, useRef } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'determinate-linear-progress';\n\nexport const DeterminateProgress = () => {\n const [value, setValue] = useState(0);\n const [loadingMsg, setLoadingMsg] = useState('');\n const countingRef = useRef(false);\n\n const startCountUp = useCallback(async () => {\n setValue(0);\n countingRef.current = true;\n setTimeout(() => setLoadingMsg('Loading...'), 500);\n for (let i = 0; i < 100; i++) {\n if (!countingRef.current) {\n resetCount();\n break;\n }\n await new Promise(resolve => setTimeout(resolve, 50)); // mock the time it takes to load\n setValue(prev => prev + 1); // increment the value by 1 percent\n }\n setLoadingMsg('Loading complete');\n countingRef.current = false;\n }, []);\n const resetCount = () => {\n countingRef.current = false;\n setValue(0);\n setLoadingMsg('');\n };\n return (\n <>\n \n \n \n \n Filename.jpg \n {value}% \n {loadingMsg} \n \n \n \n Start\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Determinate linear progress indicator"
},
{
"description": "",
"order": 4,
"libraryId": null,
"componentId": null,
"section": "Linear progress indicators",
"url": {
"iframe": "components/progress/determinate-no-label-progress",
"github": "apps/workshop/src/examples/components/progress/determinate-no-label-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Button, ProgressLabel, ProgressLinear, Utility, UtilityFragment } from '@visa/nova-react';\nimport { useCallback, useState, useRef } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'no-label-determinate-linear-progress';\n\nexport const DeterminateNoLabelProgress = () => {\n const [value, setValue] = useState(0);\n const [loadingMsg, setLoadingMsg] = useState('');\n const countingRef = useRef(false);\n\n const startCountUp = useCallback(async () => {\n setValue(0);\n countingRef.current = true;\n setTimeout(() => setLoadingMsg('Loading...'), 500);\n for (let i = 0; i < 100; i++) {\n if (!countingRef.current) {\n resetCount();\n break;\n }\n await new Promise(resolve => setTimeout(resolve, 50)); // mock the time it takes to load\n setValue(prev => prev + 1); // increment the value by 1 percent\n }\n setLoadingMsg('Loading complete');\n countingRef.current = false;\n }, []);\n const resetCount = () => {\n countingRef.current = false;\n setValue(0);\n setLoadingMsg('');\n };\n return (\n <>\n \n \n \n {value}% \n {loadingMsg} \n \n \n \n Start\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Determinate linear progress indicator without visible label"
},
{
"description": "",
"order": 5,
"libraryId": null,
"componentId": null,
"section": "Linear progress indicators",
"url": {
"iframe": "components/progress/complete-progress",
"github": "apps/workshop/src/examples/components/progress/complete-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaSuccessTiny } from '@visa/nova-icons-react';\nimport { ProgressLabel, ProgressLinear, Utility, UtilityFragment } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'complete-linear-progress';\n\nexport const CompleteProgress = () => {\n return (\n <>\n \n \n \n \n \n 100% \n \n \n );\n};\n"
},
"name": "Completed linear progress indicator"
},
{
"description": "",
"order": 6,
"libraryId": null,
"componentId": null,
"section": "Linear progress indicators",
"url": {
"iframe": "components/progress/error-progress",
"github": "apps/workshop/src/examples/components/progress/error-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { ProgressLinear, ProgressLabel, UtilityFragment, Utility } from '@visa/nova-react';\nimport { VisaErrorTiny } from '@visa/nova-icons-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'error-determinate-linear-progress';\n\nexport const ErrorProgress = () => {\n return (\n <>\n \n \n \n \n \n 0% \n \n \n );\n};\n"
},
"name": "Error linear progress indicator"
},
{
"description": "",
"order": 7,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/indeterminate-circular-small-progress",
"github": "apps/workshop/src/examples/components/progress/indeterminate-circular-small-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaMediaPauseAltTiny, VisaMediaPlayAltTiny } from '@visa/nova-icons-react';\nimport { Button, ProgressCircular, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\nexport const IndeterminateCircularSmallProgress = () => {\n const [paused, setPaused] = useState(false);\n const [initiated, setInitiated] = useState(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n\nconst start = () => {\n setInitiated(true);\n setTimeout(() => {\n setLoadingMsg('Loading...');\n }, 0);\n}\n \nconst reset = () => {\n setInitiated(false);\n setLoadingMsg('');\n}\n\n return (\n \n {initiated && (\n <>\n {loadingMsg} \n \n )}\n \n start()}>\n Start\n \n reset()}>\n Reset\n \n setPaused(!paused)}>\n {paused ? (\n <>\n \n \n \n );\n};\n"
},
"name": "Small indeterminate circular progress indicator"
},
{
"description": "",
"order": 8,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/indeterminate-circular-progress",
"github": "apps/workshop/src/examples/components/progress/indeterminate-circular-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaMediaPauseAltTiny, VisaMediaPlayAltTiny } from '@visa/nova-icons-react';\nimport { Button, ProgressCircular, Utility } from '@visa/nova-react';\nimport { useState } from 'react';\n\nexport const IndeterminateCircularProgress = () => {\n const [paused, setPaused] = useState(false);\n const [initiated, setInitiated] = useState(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n\nconst start = () => {\n setInitiated(true);\n setTimeout(() => {\n setLoadingMsg('Loading...');\n }, 0);\n}\n \nconst reset = () => {\n setInitiated(false);\n setLoadingMsg('');\n}\n\n return (\n \n {initiated && (\n \n {loadingMsg} \n \n )}\n \n start()}>\n Start\n \n reset()}>\n Reset\n \n setPaused(!paused)}>\n {paused ? (\n <>\n \n \n \n );\n};\n"
},
"name": "Large indeterminate circular progress indicator"
},
{
"description": "",
"order": 9,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/determinate-circular-small-progress",
"github": "apps/workshop/src/examples/components/progress/determinate-circular-small-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Button, ProgressCircular, Typography, Utility } from '@visa/nova-react';\nimport { useCallback, useState, useRef } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'small-determinate-circular-progress';\n\nexport const DeterminateCircularSmallProgress = () => {\n const [value, setValue] = useState(0);\n const countingRef = useRef(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n \n\n const startCountUp = useCallback(async () => {\n setValue(0);\n countingRef.current = true;\n setLoadingMsg('Loading...');\n for (let i = 0; i < 100; i++) {\n if (!countingRef.current) {\n resetCount();\n break;\n }\n await new Promise(resolve => setTimeout(resolve, 50)); // mock the time it takes to load\n setValue(prev => prev + 1); // increment the value by 1 percent\n }\n setLoadingMsg('Loading complete');\n countingRef.current = false;\n }, []);\n const resetCount = () => {\n countingRef.current = false;\n setValue(0);\n setLoadingMsg('');\n };\n return (\n <>\n \n {value}% \n \n {loadingMsg} \n \n \n Start\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Small determinate circular progress indicator"
},
{
"description": "",
"order": 10,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/determinate-circular-progress",
"github": "apps/workshop/src/examples/components/progress/determinate-circular-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { Button, ProgressCircular, ProgressLabel, Typography, Utility } from '@visa/nova-react';\nimport { useCallback, useState, useRef } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'large-determinate-circular-progress';\n\nexport const DeterminateCircularProgress = () => {\n const [value, setValue] = useState(0);\n const countingRef = useRef(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n const startCountUp = useCallback(async () => {\n setValue(0);\n countingRef.current = true;\n setLoadingMsg('Loading...');\n for (let i = 0; i < 100; i++) {\n if (!countingRef.current) {\n resetCount();\n break;\n }\n await new Promise(resolve => setTimeout(resolve, 50)); // mock the time it takes to load\n setValue(prev => prev + 1); // increment the value by 1 percent\n }\n setLoadingMsg('Loading complete');\n countingRef.current = false;\n }, []);\n const resetCount = () => {\n countingRef.current = false;\n setValue(0);\n setLoadingMsg('');\n };\n return (\n <>\n \n \n {value}% \n \n \n {loadingMsg} \n \n \n Start\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Large determinate circular progress indicator"
},
{
"description": "",
"order": 11,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/complete-circular-progress",
"github": "apps/workshop/src/examples/components/progress/complete-circular-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { ProgressCircular, Typography, Utility } from '@visa/nova-react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'large-complete-circular-progress';\nconst value = 100;\n\nexport const CompleteCircularProgress = () => {\n return (\n <>\n \n {value}% \n \n Loading complete. \n \n );\n};\n"
},
"name": "Completed determinate circular progress indicator"
},
{
"description": "",
"order": 12,
"libraryId": null,
"componentId": null,
"section": "Circular progress indicators",
"url": {
"iframe": "components/progress/error-circular-progress",
"github": "apps/workshop/src/examples/components/progress/error-circular-progress.tsx"
},
"tags": [
"docs"
],
"snippets": {
"tsx": "import { VisaErrorTiny } from '@visa/nova-icons-react';\nimport { InputMessage } from '@visa/nova-react';\n\nexport const ErrorCircularProgress = () => {\n return (\n \n \n );\n};\n"
},
"name": "Error determinate circular progress indicator"
},
{
"description": "",
"order": 13,
"libraryId": null,
"componentId": null,
"section": "Custom progress indicators",
"url": {
"iframe": "components/progress/circular-custom-size-progress",
"github": "apps/workshop/src/examples/components/progress/circular-custom-size-progress.tsx"
},
"tags": [
"custom"
],
"snippets": {
"tsx": "import { Button, ProgressCircular, ProgressLabel, Typography, Utility } from '@visa/nova-react';\nimport { useCallback, useState, useRef } from 'react';\n\n// TIP: Customize this ID, pass it as a prop, or auto-generate it with useId() from @react\nconst id = 'circular-custom-size-determinate-progress';\n\nexport const CircularCustomSizeProgress = () => {\n const [value, setValue] = useState(0);\n const countingRef = useRef(false);\n const [loadingMsg, setLoadingMsg] = useState('');\n const startCountUp = useCallback(async () => {\n setValue(0);\n countingRef.current = true;\n setLoadingMsg('Loading...');\n for (let i = 0; i < 100; i++) {\n if (!countingRef.current) {\n resetCount();\n break;\n }\n await new Promise(resolve => setTimeout(resolve, 50)); // mock the time it takes to load\n setValue(prev => prev + 1); // increment the value by 1 percent\n }\n setLoadingMsg('Loading complete');\n countingRef.current = false;\n }, []);\n const resetCount = () => {\n countingRef.current = false;\n setValue(0);\n setLoadingMsg('');\n };\n return (\n <>\n \n \n \n {value}%\n \n \n \n {loadingMsg} \n \n \n Start\n \n \n Reset\n \n \n \n );\n};\n"
},
"name": "Custom size determinate circular progress indicator"
},
{
"description": "",
"order": 14,
"libraryId": null,
"componentId": null,
"section": "Custom progress indicators",
"url": {
"iframe": "components/progress/reusable",
"github": "apps/workshop/src/examples/components/progress/reusable.tsx"
},
"tags": [
"custom",
"AI-first"
],
"snippets": {
"tsx": "import { VisaErrorTiny, VisaInformationTiny, VisaSuccessTiny, VisaWarningTiny } from '@visa/nova-icons-react';\nimport {\n Button,\n type MessageType,\n ProgressCircular,\n ProgressLabel,\n ProgressLinear,\n ScreenReader,\n Utility,\n UtilityFragment,\n} from '@visa/nova-react';\nimport clsx from 'clsx';\nimport { type CSSProperties, useId, useMemo, useState } from 'react';\nimport { NovaAccordion } from '../accordion/reusable';\nimport { NovaCheckbox } from '../checkbox/reusable';\nimport { NovaInput } from '../input/reusable';\nimport { NovaSelect } from '../select/reusable';\n\nconst ICON_MAP = {\n error: ;\n paused?: boolean;\n progress?: number;\n size?: 'small' | 'large' | number;\n speed?: number;\n type?: 'linear' | 'circular';\n};\n\n// Main Nova Progress Component\nexport const NovaProgress = ({\n completeStatusMessage = 'Loading complete',\n determinate = false,\n hideMessage = false,\n hideProgress = false,\n id: idProp,\n inline = false,\n loadingStatusMessage = 'Loading...',\n message,\n messageType = 'subtle',\n paused: pausedProp = false,\n progress: progressProp,\n size,\n speed,\n type = 'circular',\n ...remainingProps\n}: NovaProgressProps) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n\n const circularProgressVisible =\n determinate &&\n !hideProgress &&\n (size === undefined ||\n typeof size === 'string' ||\n (typeof size === 'number' && size >= MAX_CIRCULAR_PROGRESS_VISIBLE_SIZE));\n\n const paused = determinate ? false : pausedProp || messageType === 'error';\n // Normalize progress value\n const progressValue = normalizeProgressValue(progressProp);\n\n // Compute screen reader status message\n const srStatusMessage = useMemo(() => {\n if (!determinate || (progressValue || 0) < 100) return loadingStatusMessage;\n return completeStatusMessage;\n }, [determinate, progressValue, loadingStatusMessage, completeStatusMessage]);\n\n // Get icon based on message type\n const messageIcon = ICON_MAP[messageType];\n\n if (type === 'linear')\n return (\n <>\n \n \n \n {message && (\n \n {messageIcon}\n {message}\n \n )}\n {!hideProgress && determinate && {progressValue}% }\n\n \n {srStatusMessage}\n \n \n \n );\n\n // Circular progress\n return (\n \n \n \n \n {determinate && `${progressValue}%`}\n {!determinate && loadingStatusMessage}\n \n \n \n \n \n {messageIcon}\n {message}\n \n \n \n );\n};\n\n// export default NovaProgress;\n\n/** !!! DELETE ME START !!! */\n\n// Demo Component Types\ninterface DemoCustomizations {\n determinate: boolean;\n hideMessage: boolean;\n hideProgress: boolean;\n inline: boolean;\n message: string;\n messageType: Exclude;\n paused: boolean;\n progress: number;\n size?: string;\n speed?: number;\n type: 'linear' | 'circular';\n}\n\n// Demo Component\nexport const NovaProgressDemo = () => {\n const messageTypes: { label: string; value: Exclude }[] = [\n { label: 'Subtle', value: 'subtle' },\n { label: 'Information', value: 'information' },\n { label: 'Error', value: 'error' },\n { label: 'Success', value: 'success' },\n { label: 'Warning', value: 'warning' },\n ];\n\n const types: { label: string; value: 'linear' | 'circular' }[] = [\n { label: 'Circular', value: 'circular' },\n { label: 'Linear', value: 'linear' },\n ];\n\n const defaultCustomizations: DemoCustomizations = {\n determinate: true,\n hideMessage: false,\n hideProgress: false,\n inline: false,\n message: 'Filename.jpg',\n messageType: 'subtle',\n paused: false,\n progress: 70,\n size: undefined,\n speed: undefined,\n type: 'linear',\n };\n\n const [customizations, setCustomizations] = useState(defaultCustomizations);\n const [formValues, setFormValues] = useState(defaultCustomizations);\n\n const handleInputChange = (field: keyof DemoCustomizations, value?: string | boolean | number) => {\n setFormValues(prev => ({\n ...prev,\n [field]: value,\n }));\n };\n\n const handleApply = (e: React.FormEvent) => {\n e.preventDefault();\n setCustomizations(formValues);\n };\n\n const handleReset = () => {\n setFormValues(defaultCustomizations);\n setCustomizations(defaultCustomizations);\n };\n\n // Parse size value\n const parsedSize = useMemo(() => {\n const sizeValue = customizations.size;\n if (!sizeValue) return undefined;\n if (sizeValue === 'small' || sizeValue === 'large') return sizeValue;\n const numValue = Number(sizeValue);\n return isNaN(numValue) ? undefined : numValue;\n }, [customizations.size]);\n\n return (\n