diff --git a/.changeset/pretty-zebras-complain.md b/.changeset/pretty-zebras-complain.md new file mode 100644 index 00000000000..90d6693d2b8 --- /dev/null +++ b/.changeset/pretty-zebras-complain.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': patch +'polaris.shopify.com': patch +--- + +Fixed react hook errors across examples diff --git a/polaris-react/src/components/AccountConnection/README.md b/polaris-react/src/components/AccountConnection/README.md index efb841054a5..378262a9805 100644 --- a/polaris-react/src/components/AccountConnection/README.md +++ b/polaris-react/src/components/AccountConnection/README.md @@ -107,7 +107,7 @@ function AccountConnectionExample() { const handleAction = useCallback(() => { setConnected((connected) => !connected); - }, [connected]); + }, []); const buttonText = connected ? 'Disconnect' : 'Connect'; const details = connected ? 'Account connected' : 'No account connected'; diff --git a/polaris-react/src/components/Autocomplete/README.md b/polaris-react/src/components/Autocomplete/README.md index 99a84c809f6..6a6b7b140b6 100644 --- a/polaris-react/src/components/Autocomplete/README.md +++ b/polaris-react/src/components/Autocomplete/README.md @@ -40,13 +40,16 @@ Use to help merchants complete text input quickly from a list of options. ```jsx function AutocompleteExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -113,13 +116,16 @@ Use to help merchants select multiple options from a list curated by the text in ```jsx function MultiAutocompleteExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState(['rustic']); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -146,10 +152,13 @@ function MultiAutocompleteExample() { [deselectedOptions], ); - const handleSelect = useCallback((selected) => { - setSelectedOptions(selected); - updateText(''); - }, []); + const handleSelect = useCallback( + (selected) => { + setSelectedOptions(selected); + updateText(''); + }, + [updateText], + ); const removeTag = useCallback( (tag) => (event) => { @@ -320,13 +329,16 @@ Use to indicate loading state to merchants while option data is processing. ```jsx function AutocompleteExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -354,7 +366,7 @@ function AutocompleteExample() { setLoading(false); }, 300); }, - [deselectedOptions, options, loading], + [deselectedOptions, loading], ); const updateSelection = useCallback( @@ -464,7 +476,7 @@ function AutoCompleteLazyLoadExample() { setOptions(resultOptions); setInputValue; }, - [deselectedOptions, options], + [deselectedOptions], ); const textField = ( @@ -530,13 +542,16 @@ Use to indicate there are no search results. ```jsx function AutocompleteExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -564,7 +579,7 @@ function AutocompleteExample() { setLoading(false); }, 300); }, - [deselectedOptions, loading, options], + [deselectedOptions, loading], ); const updateSelection = useCallback( @@ -621,13 +636,16 @@ Use to help merchants complete an action quickly. ```jsx function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -714,13 +732,16 @@ Use to help merchants complete an action quickly with wrapping lines of text. ```jsx function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); @@ -809,13 +830,16 @@ Use to help merchants complete a destructive action quickly. ```jsx function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - {value: 'rustic', label: 'Rustic'}, - {value: 'antique', label: 'Antique'}, - {value: 'vinyl', label: 'Vinyl'}, - {value: 'vintage', label: 'Vintage'}, - {value: 'refurbished', label: 'Refurbished'}, - ]; + const deselectedOptions = useMemo( + () => [ + {value: 'rustic', label: 'Rustic'}, + {value: 'antique', label: 'Antique'}, + {value: 'vinyl', label: 'Vinyl'}, + {value: 'vintage', label: 'Vintage'}, + {value: 'refurbished', label: 'Refurbished'}, + ], + [], + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(''); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris-react/src/components/Combobox/README.md b/polaris-react/src/components/Combobox/README.md index ad4ca38d640..8aefa90a307 100644 --- a/polaris-react/src/components/Combobox/README.md +++ b/polaris-react/src/components/Combobox/README.md @@ -317,7 +317,7 @@ function MultiAutoComboboxExample() { updateText(''); }, - [options, selectedOptions], + [options, selectedOptions, updateText], ); const removeTag = useCallback( @@ -435,7 +435,7 @@ function MultiManualComboboxExample() { updateText(''); }, - [options, selectedOptions], + [options, selectedOptions, updateText], ); const removeTag = useCallback( diff --git a/polaris-react/src/components/TextField/README.md b/polaris-react/src/components/TextField/README.md index 0a33d69b168..ffbe7485752 100644 --- a/polaris-react/src/components/TextField/README.md +++ b/polaris-react/src/components/TextField/README.md @@ -681,80 +681,86 @@ Use to provide an autocomplete suggestion inline with the input value. See the c ```jsx function TextFieldWithSuggestionExample() { - const suggestions = [ - 'Alabama', - 'Alaska', - 'American Samoa', - 'Arizona', - 'Arkansas', - 'California', - 'Colorado', - 'Connecticut', - 'Delaware', - 'District of Columbia', - 'Florida', - 'Georgia', - 'Guam', - 'Hawaii', - 'Idaho', - 'Illinois', - 'Indiana', - 'Iowa', - 'Kansas', - 'Kentucky', - 'Louisiana', - 'Maine', - 'Maryland', - 'Massachusetts', - 'Michigan', - 'Minnesota', - 'Minor Outlying Islands', - 'Mississippi', - 'Missouri', - 'Montana', - 'Nebraska', - 'Nevada', - 'New Hampshire', - 'New Jersey', - 'New Mexico', - 'New York', - 'North Carolina', - 'North Dakota', - 'Northern Mariana Islands', - 'Ohio', - 'Oklahoma', - 'Oregon', - 'Pennsylvania', - 'Puerto Rico', - 'Rhode Island', - 'South Carolina', - 'South Dakota', - 'Tennessee', - 'Texas', - 'U.S. Virgin Islands', - 'Utah', - 'Vermont', - 'Virginia', - 'Washington', - 'West Virginia', - 'Wisconsin', - 'Wyoming', - ]; + const suggestions = useMemo( + () => [ + 'Alabama', + 'Alaska', + 'American Samoa', + 'Arizona', + 'Arkansas', + 'California', + 'Colorado', + 'Connecticut', + 'Delaware', + 'District of Columbia', + 'Florida', + 'Georgia', + 'Guam', + 'Hawaii', + 'Idaho', + 'Illinois', + 'Indiana', + 'Iowa', + 'Kansas', + 'Kentucky', + 'Louisiana', + 'Maine', + 'Maryland', + 'Massachusetts', + 'Michigan', + 'Minnesota', + 'Minor Outlying Islands', + 'Mississippi', + 'Missouri', + 'Montana', + 'Nebraska', + 'Nevada', + 'New Hampshire', + 'New Jersey', + 'New Mexico', + 'New York', + 'North Carolina', + 'North Dakota', + 'Northern Mariana Islands', + 'Ohio', + 'Oklahoma', + 'Oregon', + 'Pennsylvania', + 'Puerto Rico', + 'Rhode Island', + 'South Carolina', + 'South Dakota', + 'Tennessee', + 'Texas', + 'U.S. Virgin Islands', + 'Utah', + 'Vermont', + 'Virginia', + 'Washington', + 'West Virginia', + 'Wisconsin', + 'Wyoming', + ], + [], + ); const [value, setValue] = useState(''); const [suggestion, setSuggestion] = useState(''); - const handleSuggestion = useCallback((nextValue) => { - const nextSuggestion = suggestions.find((suggestion) => - suggestion.toLowerCase().startsWith(nextValue.toLowerCase()), - ); + const handleSuggestion = useCallback( + (nextValue) => { + const nextSuggestion = suggestions.find((suggestion) => + suggestion.toLowerCase().startsWith(nextValue.toLowerCase()), + ); - if (nextSuggestion) setSuggestion(nextSuggestion); - }, []); + if (nextSuggestion) setSuggestion(nextSuggestion); + }, + [suggestions], + ); useEffect(() => { if (value !== suggestion) handleSuggestion(value); - }, [value]); + }, [handleSuggestion, suggestion, value]); const handleChange = useCallback((value) => { setValue(value); diff --git a/polaris.shopify.com/src/pages/examples/account-connection-default.tsx b/polaris.shopify.com/src/pages/examples/account-connection-default.tsx index adc2e4faf84..e167c376505 100644 --- a/polaris.shopify.com/src/pages/examples/account-connection-default.tsx +++ b/polaris.shopify.com/src/pages/examples/account-connection-default.tsx @@ -8,7 +8,7 @@ function AccountConnectionExample() { const handleAction = useCallback(() => { setConnected((connected) => !connected); - }, [connected]); + }, []); const buttonText = connected ? "Disconnect" : "Connect"; const details = connected ? "Account connected" : "No account connected"; diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-default.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-default.tsx index a1ce0ba418c..4c674f773a9 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-default.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-default.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon } from "@shopify/polaris"; import { SearchMinor } from "@shopify/polaris-icons"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-action.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-action.tsx index ee2eddded5a..f551bbb1bbb 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-action.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-action.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon } from "@shopify/polaris"; import { SearchMinor, CirclePlusMinor } from "@shopify/polaris-icons"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-destructive-action.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-destructive-action.tsx index e5bd2aef2eb..add95ec2048 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-destructive-action.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-destructive-action.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon } from "@shopify/polaris"; import { SearchMinor, DeleteMinor } from "@shopify/polaris-icons"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-empty-state.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-empty-state.tsx index 8c692838cc0..5f453d21fd8 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-empty-state.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-empty-state.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon, TextContainer } from "@shopify/polaris"; import { SearchMinor } from "@shopify/polaris-icons"; -import React, { useState, useCallback } from "react"; +import React, { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); @@ -38,7 +41,7 @@ function AutocompleteExample() { setLoading(false); }, 300); }, - [deselectedOptions, loading, options] + [deselectedOptions, loading] ); const updateSelection = useCallback( diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-lazy-loading.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-lazy-loading.tsx index 1d99016d448..ffb6c10a3be 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-lazy-loading.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-lazy-loading.tsx @@ -68,7 +68,7 @@ function AutoCompleteLazyLoadExample() { setOptions(resultOptions); setInputValue; }, - [deselectedOptions, options] + [deselectedOptions] ); const textField = ( diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-loading.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-loading.tsx index 6931cac0c7f..981ebe64ba2 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-loading.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-loading.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon } from "@shopify/polaris"; import { SearchMinor } from "@shopify/polaris-icons"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); @@ -38,7 +41,7 @@ function AutocompleteExample() { setLoading(false); }, 300); }, - [deselectedOptions, options, loading] + [deselectedOptions, loading] ); const updateSelection = useCallback( diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-multiple-tags.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-multiple-tags.tsx index 85fb1355386..26c0c51f64a 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-multiple-tags.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-multiple-tags.tsx @@ -1,15 +1,18 @@ import { Stack, Tag, Autocomplete } from "@shopify/polaris"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function MultiAutocompleteExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState(["rustic"]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris.shopify.com/src/pages/examples/autocomplete-with-wrapping-action.tsx b/polaris.shopify.com/src/pages/examples/autocomplete-with-wrapping-action.tsx index be40eb9d206..620829f456d 100644 --- a/polaris.shopify.com/src/pages/examples/autocomplete-with-wrapping-action.tsx +++ b/polaris.shopify.com/src/pages/examples/autocomplete-with-wrapping-action.tsx @@ -1,16 +1,19 @@ import { Autocomplete, Icon } from "@shopify/polaris"; import { SearchMinor, CirclePlusMinor } from "@shopify/polaris-icons"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function AutocompleteActionBeforeExample() { - const deselectedOptions = [ - { value: "rustic", label: "Rustic" }, - { value: "antique", label: "Antique" }, - { value: "vinyl", label: "Vinyl" }, - { value: "vintage", label: "Vintage" }, - { value: "refurbished", label: "Refurbished" }, - ]; + const deselectedOptions = useMemo( + () => [ + { value: "rustic", label: "Rustic" }, + { value: "antique", label: "Antique" }, + { value: "vinyl", label: "Vinyl" }, + { value: "vintage", label: "Vintage" }, + { value: "refurbished", label: "Refurbished" }, + ], + [] + ); const [selectedOptions, setSelectedOptions] = useState([]); const [inputValue, setInputValue] = useState(""); const [options, setOptions] = useState(deselectedOptions); diff --git a/polaris.shopify.com/src/pages/examples/combobox-with-manual-selection.tsx b/polaris.shopify.com/src/pages/examples/combobox-with-manual-selection.tsx index bb8e1b52850..fe2d369b611 100644 --- a/polaris.shopify.com/src/pages/examples/combobox-with-manual-selection.tsx +++ b/polaris.shopify.com/src/pages/examples/combobox-with-manual-selection.tsx @@ -60,7 +60,7 @@ function MultiComboboxExample() { updateText(""); }, - [options, selectedOptions] + [options, selectedOptions, updateText] ); const removeTag = useCallback( diff --git a/polaris.shopify.com/src/pages/examples/combobox-with-multi-select-and-manual-selection.tsx b/polaris.shopify.com/src/pages/examples/combobox-with-multi-select-and-manual-selection.tsx index 7d1cae70fb0..98fef0dc2ec 100644 --- a/polaris.shopify.com/src/pages/examples/combobox-with-multi-select-and-manual-selection.tsx +++ b/polaris.shopify.com/src/pages/examples/combobox-with-multi-select-and-manual-selection.tsx @@ -60,7 +60,7 @@ function MultiManualComboboxExample() { updateText(""); }, - [options, selectedOptions] + [options, selectedOptions, updateText] ); const removeTag = useCallback( diff --git a/polaris.shopify.com/src/pages/examples/combobox-with-multi-select.tsx b/polaris.shopify.com/src/pages/examples/combobox-with-multi-select.tsx index 002ff6b991b..f22d51da153 100644 --- a/polaris.shopify.com/src/pages/examples/combobox-with-multi-select.tsx +++ b/polaris.shopify.com/src/pages/examples/combobox-with-multi-select.tsx @@ -63,7 +63,7 @@ function MultiAutoComboboxExample() { updateText(""); }, - [options, selectedOptions] + [options, selectedOptions, updateText] ); const removeTag = useCallback( diff --git a/polaris.shopify.com/src/pages/examples/text-field-with-inline-suggestion.tsx b/polaris.shopify.com/src/pages/examples/text-field-with-inline-suggestion.tsx index ac4e368b981..909eaa91b4a 100644 --- a/polaris.shopify.com/src/pages/examples/text-field-with-inline-suggestion.tsx +++ b/polaris.shopify.com/src/pages/examples/text-field-with-inline-suggestion.tsx @@ -1,82 +1,88 @@ import { TextField } from "@shopify/polaris"; -import { useState, useEffect, useCallback } from "react"; +import { useState, useEffect, useCallback, useMemo } from "react"; import { withPolarisExample } from "../../components/PolarisExamplePage"; function TextFieldWithSuggestionExample() { - const suggestions = [ - "Alabama", - "Alaska", - "American Samoa", - "Arizona", - "Arkansas", - "California", - "Colorado", - "Connecticut", - "Delaware", - "District of Columbia", - "Florida", - "Georgia", - "Guam", - "Hawaii", - "Idaho", - "Illinois", - "Indiana", - "Iowa", - "Kansas", - "Kentucky", - "Louisiana", - "Maine", - "Maryland", - "Massachusetts", - "Michigan", - "Minnesota", - "Minor Outlying Islands", - "Mississippi", - "Missouri", - "Montana", - "Nebraska", - "Nevada", - "New Hampshire", - "New Jersey", - "New Mexico", - "New York", - "North Carolina", - "North Dakota", - "Northern Mariana Islands", - "Ohio", - "Oklahoma", - "Oregon", - "Pennsylvania", - "Puerto Rico", - "Rhode Island", - "South Carolina", - "South Dakota", - "Tennessee", - "Texas", - "U.S. Virgin Islands", - "Utah", - "Vermont", - "Virginia", - "Washington", - "West Virginia", - "Wisconsin", - "Wyoming", - ]; + const suggestions = useMemo( + () => [ + "Alabama", + "Alaska", + "American Samoa", + "Arizona", + "Arkansas", + "California", + "Colorado", + "Connecticut", + "Delaware", + "District of Columbia", + "Florida", + "Georgia", + "Guam", + "Hawaii", + "Idaho", + "Illinois", + "Indiana", + "Iowa", + "Kansas", + "Kentucky", + "Louisiana", + "Maine", + "Maryland", + "Massachusetts", + "Michigan", + "Minnesota", + "Minor Outlying Islands", + "Mississippi", + "Missouri", + "Montana", + "Nebraska", + "Nevada", + "New Hampshire", + "New Jersey", + "New Mexico", + "New York", + "North Carolina", + "North Dakota", + "Northern Mariana Islands", + "Ohio", + "Oklahoma", + "Oregon", + "Pennsylvania", + "Puerto Rico", + "Rhode Island", + "South Carolina", + "South Dakota", + "Tennessee", + "Texas", + "U.S. Virgin Islands", + "Utah", + "Vermont", + "Virginia", + "Washington", + "West Virginia", + "Wisconsin", + "Wyoming", + ], + [] + ); const [value, setValue] = useState(""); const [suggestion, setSuggestion] = useState(""); - const handleSuggestion = useCallback((nextValue) => { - const nextSuggestion = suggestions.find((suggestion) => - suggestion.toLowerCase().startsWith(nextValue.toLowerCase()) - ); + const handleSuggestion = useCallback( + (nextValue) => { + const nextSuggestion = suggestions.find((suggestion) => + suggestion.toLowerCase().startsWith(nextValue.toLowerCase()) + ); - if (nextSuggestion) setSuggestion(nextSuggestion); - }, []); + if (nextSuggestion) setSuggestion(nextSuggestion); + }, + [suggestions] + ); useEffect(() => { if (value !== suggestion) handleSuggestion(value); - }, [value]); + }, [handleSuggestion, suggestion, value]); const handleChange = useCallback((value) => { setValue(value);