diff --git a/package-lock.json b/package-lock.json index 66823ea2d9..d663110273 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "@cloudscape-design/components", "version": "3.0.0", - "hasInstallScript": true, "dependencies": { "@cloudscape-design/collection-hooks": "^1.0.0", "@cloudscape-design/component-toolkit": "^1.0.0-beta", diff --git a/pages/multiselect/screenshot.page.tsx b/pages/multiselect/screenshot.page.tsx index c4171230a9..a1fee6a6e9 100644 --- a/pages/multiselect/screenshot.page.tsx +++ b/pages/multiselect/screenshot.page.tsx @@ -1,73 +1,213 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; +import Box from '~components/box'; +import { OptionGroup } from '~components/internal/components/option/interfaces'; import Multiselect, { MultiselectProps } from '~components/multiselect'; +import SpaceBetween from '~components/space-between'; +import AppContext, { AppContextType } from '../app/app-context'; import ScreenshotArea from '../utils/screenshot-area'; -import { deselectAriaLabel, i18nStrings } from './constants'; +import { deselectAriaLabel, getInlineAriaLabel, groupedOptions, i18nStrings } from './constants'; -const options: MultiselectProps.Options = [ - { value: 'first', label: 'Simple' }, - { - value: 'second', - label: 'With small icon', - iconSvg: ( - - - - - ), - }, - { value: 'third', label: 'With big icon icon', description: 'Very big option', iconName: 'heart' }, - { - label: 'Option group', - options: [{ value: 'forth', label: 'Nested option' }], - }, +type DemoContext = React.Context< + AppContextType<{ + // Props passed to the component + enableSelectAll?: MultiselectProps['enableSelectAll']; + expandToViewport?: MultiselectProps['expandToViewport']; + filteringType?: MultiselectProps['filteringType']; + inlineTokens?: MultiselectProps['inlineTokens']; + keepOpen?: MultiselectProps['keepOpen']; + statusType?: MultiselectProps['statusType']; + virtualScroll?: MultiselectProps['virtualScroll']; + // Content controls + withDisabledOptions?: boolean; + withGroups?: boolean; + manyOptions?: boolean; + }> +>; + +// Mix of grouped and top-level options +const groupedOptionsWithDisabledOptions: MultiselectProps.Options = [ + ...groupedOptions.slice(0, 2), // First 2 groups + ...groupedOptions[2].options, // children of the 2rd group ]; -export default function () { - const [selected, setSelected] = useState(options.slice(0, 3)); - const [virtualScroll, setVirtualScroll] = useState(false); - const [showError, setShowError] = useState(false); +const initialSelectedOptions = [ + (groupedOptionsWithDisabledOptions[0] as OptionGroup).options[2], + (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[0], + (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[1], +]; - return ( - <> -

Multiselect for screenshot

+export default function MultiselectPage() { + const { urlParams, setUrlParams } = useContext(AppContext as DemoContext); + const [selectedOptions, setSelectedOptions] = useState(initialSelectedOptions); - + const groupedOptions: MultiselectProps.Options = urlParams.withDisabledOptions + ? groupedOptionsWithDisabledOptions + : groupedOptionsWithDisabledOptions.map(option => ({ + ...option, + disabled: false, + options: + 'options' in option && option.options.length + ? option.options.map(childOption => ({ ...childOption, disabled: false })) + : undefined, + })); - + const baseOptions: MultiselectProps.Options = urlParams.withGroups + ? groupedOptions + : groupedOptions.reduce( + (previousValue: MultiselectProps.Options, currentValue: MultiselectProps.Option) => + 'options' in currentValue && (currentValue as OptionGroup).options?.length + ? [...previousValue, ...(currentValue as OptionGroup).options] + : [...previousValue, currentValue], + [] + ); + + const options = urlParams.manyOptions + ? [ + ...baseOptions, + ...Array(100) + .fill(undefined) + .map((_, index) => ({ + value: `option${index + baseOptions.length + 1}`, + label: `option${index + baseOptions.length + 1}`, + description: `option${index + baseOptions.length + 1}`, + tags: ['2-CPU', '2Gb RAM'], + })), + ] + : baseOptions; + + return ( +
+

Multiselect for screenshot

+ + + + + + + + + + + + + + - - {}} - statusType={showError ? 'error' : 'finished'} - onChange={event => setSelected(event.detail.selectedOptions)} - i18nStrings={i18nStrings} - tokenLimit={2} - deselectAriaLabel={deselectAriaLabel} - virtualScroll={virtualScroll} - ariaLabel="multiselect demo" - data-testid="multiselect-demo" - /> - - + + {}} + options={options} + selectedOptions={selectedOptions} + statusType={urlParams.statusType} + virtualScroll={urlParams.virtualScroll} + onChange={event => setSelectedOptions(event.detail.selectedOptions)} + placeholder={'Choose options'} + deselectAriaLabel={deselectAriaLabel} + i18nStrings={{ ...i18nStrings, selectAllText: 'Select all' }} + recoveryText="Retry" + finishedText="End of all results" + errorText="verylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspacesverylongtextwithoutspaces" + /> + + + +
); } diff --git a/pages/multiselect/select-all.page.tsx b/pages/multiselect/select-all.page.tsx deleted file mode 100644 index bb9618bd26..0000000000 --- a/pages/multiselect/select-all.page.tsx +++ /dev/null @@ -1,173 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useState } from 'react'; - -import Box from '~components/box'; -import { OptionGroup } from '~components/internal/components/option/interfaces'; -import Multiselect, { MultiselectProps } from '~components/multiselect'; -import SpaceBetween from '~components/space-between'; - -import AppContext, { AppContextType } from '../app/app-context'; -import ScreenshotArea from '../utils/screenshot-area'; -import { deselectAriaLabel, getInlineAriaLabel, groupedOptions, i18nStrings } from './constants'; - -type DemoContext = React.Context< - AppContextType<{ - closeAfter?: boolean; - expandToViewport?: boolean; - inlineTokens?: boolean; - manyOptions?: boolean; - virtualScroll?: boolean; - withDisabledOptions?: boolean; - withFiltering?: boolean; - withGroups?: boolean; - }> ->; - -// Mix of grouped and top-level options -const groupedOptionsWithDisabledOptions: MultiselectProps.Options = [ - ...groupedOptions.slice(0, 2), // First 2 groups - ...groupedOptions[2].options, // children of the 2rd group -]; - -const initialSelectedOptions = [ - (groupedOptionsWithDisabledOptions[0] as OptionGroup).options[2], - (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[0], - (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[1], -]; - -export default function MultiselectPage() { - const { urlParams, setUrlParams } = useContext(AppContext as DemoContext); - const [selectedOptions, setSelectedOptions] = useState(initialSelectedOptions); - - const groupedOptions: MultiselectProps.Options = urlParams.withDisabledOptions - ? groupedOptionsWithDisabledOptions - : groupedOptionsWithDisabledOptions.map(option => ({ - ...option, - disabled: false, - options: - 'options' in option && option.options.length - ? option.options.map(childOption => ({ ...childOption, disabled: false })) - : undefined, - })); - - const baseOptions: MultiselectProps.Options = urlParams.withGroups - ? groupedOptions - : groupedOptions.reduce( - (previousValue: MultiselectProps.Options, currentValue: MultiselectProps.Option) => - 'options' in currentValue && (currentValue as OptionGroup).options?.length - ? [...previousValue, ...(currentValue as OptionGroup).options] - : [...previousValue, currentValue], - [] - ); - - const options = urlParams.manyOptions - ? [ - ...baseOptions, - ...Array(100) - .fill(undefined) - .map((_, index) => ({ - value: `option${index + baseOptions.length + 1}`, - label: `option${index + baseOptions.length + 1}`, - description: `option${index + baseOptions.length + 1}`, - tags: ['2-CPU', '2Gb RAM'], - })), - ] - : baseOptions; - - return ( -
-

Multiselect with "Select all"

- - - - - - - - - - - - - - - { - setSelectedOptions(event.detail.selectedOptions); - }} - ariaLabel={urlParams.inlineTokens ? getInlineAriaLabel(selectedOptions) : undefined} - inlineTokens={urlParams.inlineTokens} - expandToViewport={urlParams.expandToViewport} - keepOpen={!urlParams.closeAfter} - virtualScroll={urlParams.virtualScroll} - /> - - - -
- ); -} diff --git a/src/multiselect/__integ__/select-all.test.ts b/src/multiselect/__integ__/select-all.test.ts index 13d7421789..f38bce85fc 100644 --- a/src/multiselect/__integ__/select-all.test.ts +++ b/src/multiselect/__integ__/select-all.test.ts @@ -22,8 +22,8 @@ function setup( return useBrowser(async browser => { const page = new BasePageObject(browser); await page.setWindowSize({ width: 950, height: 300 }); - const params = new URLSearchParams({ visualRefresh: String(visualRefresh) }).toString(); - await browser.url(`/#/light/multiselect/select-all?${params}`); + const params = new URLSearchParams({ visualRefresh: String(visualRefresh), enableSelectAll: 'true' }).toString(); + await browser.url(`/#/light/multiselect/screenshot?${params}`); await page.click(multiselect.findTrigger().toSelector()); await testFn(page); });