Skip to content

Commit d2281de

Browse files
amanabiyamanabiy
authored
Merge branch 'main' into dev-v3-amanabiy-inline-isFragment
2 parents 2324656 + ed20611 commit d2281de

File tree

29 files changed

+805
-114
lines changed

29 files changed

+805
-114
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@
163163
"stylelint --fix"
164164
],
165165
"package-lock.json": [
166-
"node ./scripts/unlock-package-lock.js"
166+
"prepare-package-lock"
167167
]
168168
},
169169
"size-limit": [

‎pages/autosuggest/custom-render-option.page.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef, useState } from 'react';
4+
5+
import { Autosuggest, AutosuggestProps, Toggle } from '~components';
6+
7+
import AppContext, { AppContextType } from '../app/app-context';
8+
import { SimplePage } from '../app/templates';
9+
10+
const empty = <span>Nothing found</span>;
11+
const options = [
12+
{ value: 'Option 0', tags: ['tag1', 'tag2'], filteringTags: ['bla', 'opt', 'blauer'], description: 'description1' },
13+
{ value: 'Option 1', labelTag: 'This is a label tag' },
14+
{ value: 'Option 2' },
15+
{
16+
value: 'Option Group',
17+
description: 'description2',
18+
options: [
19+
{
20+
value: 'value1',
21+
label: 'label1',
22+
},
23+
{
24+
value: 'value1repeated',
25+
label: 'label1repeated',
26+
},
27+
],
28+
},
29+
];
30+
type PageContext = React.Context<
31+
AppContextType<{
32+
virtualScroll?: boolean;
33+
}>
34+
>;
35+
36+
export default function AutosuggestPage() {
37+
const [value, setValue] = useState('');
38+
const ref = useRef<AutosuggestProps.Ref>(null);
39+
40+
const renderOption: AutosuggestProps.ItemRenderer = ({ item }) => {
41+
if (item.type === 'entered-text') {
42+
return <div>Entereted Text: {item.option.value}</div>;
43+
} else if (item.type === 'group') {
44+
return <div>Group: {item.option.value}</div>;
45+
} else if (item.type === 'item') {
46+
return <div>Item: {item.option.value}</div>;
47+
}
48+
return null;
49+
};
50+
const { urlParams, setUrlParams } = React.useContext(AppContext as PageContext);
51+
const virtualScroll = urlParams.virtualScroll ?? false;
52+
53+
return (
54+
<SimplePage
55+
title="Autosuggest with custom item renderer"
56+
settings={
57+
<Toggle
58+
checked={!!urlParams.virtualScroll}
59+
onChange={({ detail }) => setUrlParams({ virtualScroll: detail.checked })}
60+
>
61+
Virtual Scroll
62+
</Toggle>
63+
}
64+
screenshotArea={{
65+
style: {
66+
padding: 10,
67+
},
68+
}}
69+
>
70+
<div style={{ maxInlineSize: '400px', blockSize: '650px' }}>
71+
<Autosuggest
72+
virtualScroll={virtualScroll}
73+
renderOption={renderOption}
74+
ref={ref}
75+
value={value}
76+
options={options}
77+
onChange={event => setValue(event.detail.value)}
78+
placeholder={`Type... ${virtualScroll ? '(virtual)' : ''}`}
79+
ariaLabel={'simple autosuggest'}
80+
selectedAriaLabel="Selected"
81+
empty={empty}
82+
/>
83+
</div>
84+
</SimplePage>
85+
);
86+
}

‎scripts/unlock-package-lock.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/__integ__/__snapshots__/themes.test.ts.snap‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
123123
"color-background-notification-yellow": "#ffe347",
124124
"color-background-popover": "#ffffff",
125125
"color-background-progress-bar-default": "#eaeded",
126-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
127126
"color-background-progress-bar-value-default": "#0073bb",
128-
"color-background-progress-bar-value-in-flash": "rgba(255, 255, 255, 0.7)",
129127
"color-background-segment-active": "#0073bb",
130128
"color-background-segment-default": "#ffffff",
131129
"color-background-segment-disabled": "#ffffff",
@@ -889,9 +887,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
889887
"color-background-notification-yellow": "#ffe347",
890888
"color-background-popover": "#21252c",
891889
"color-background-progress-bar-default": "#414750",
892-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
893890
"color-background-progress-bar-value-default": "#00a1c9",
894-
"color-background-progress-bar-value-in-flash": "#fafafa",
895891
"color-background-segment-active": "#00a1c9",
896892
"color-background-segment-default": "#2a2e33",
897893
"color-background-segment-disabled": "#2a2e33",
@@ -1655,9 +1651,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
16551651
"color-background-notification-yellow": "#ffe347",
16561652
"color-background-popover": "#ffffff",
16571653
"color-background-progress-bar-default": "#eaeded",
1658-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
16591654
"color-background-progress-bar-value-default": "#0073bb",
1660-
"color-background-progress-bar-value-in-flash": "rgba(255, 255, 255, 0.7)",
16611655
"color-background-segment-active": "#0073bb",
16621656
"color-background-segment-default": "#ffffff",
16631657
"color-background-segment-disabled": "#ffffff",
@@ -2421,9 +2415,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
24212415
"color-background-notification-yellow": "#ffe347",
24222416
"color-background-popover": "#ffffff",
24232417
"color-background-progress-bar-default": "#eaeded",
2424-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
24252418
"color-background-progress-bar-value-default": "#0073bb",
2426-
"color-background-progress-bar-value-in-flash": "rgba(255, 255, 255, 0.7)",
24272419
"color-background-segment-active": "#0073bb",
24282420
"color-background-segment-default": "#ffffff",
24292421
"color-background-segment-disabled": "#ffffff",
@@ -3187,9 +3179,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
31873179
"color-background-notification-yellow": "#ffe347",
31883180
"color-background-popover": "#ffffff",
31893181
"color-background-progress-bar-default": "#ebebf0",
3190-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
31913182
"color-background-progress-bar-value-default": "#006ce0",
3192-
"color-background-progress-bar-value-in-flash": "#ffffff",
31933183
"color-background-segment-active": "#006ce0",
31943184
"color-background-segment-default": "#ffffff",
31953185
"color-background-segment-disabled": "#ffffff",
@@ -3953,9 +3943,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
39533943
"color-background-notification-yellow": "#ffe347",
39543944
"color-background-popover": "#ffffff",
39553945
"color-background-progress-bar-default": "#ebebf0",
3956-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
39573946
"color-background-progress-bar-value-default": "#006ce0",
3958-
"color-background-progress-bar-value-in-flash": "#ffffff",
39593947
"color-background-segment-active": "#006ce0",
39603948
"color-background-segment-default": "#ffffff",
39613949
"color-background-segment-disabled": "#ffffff",
@@ -4719,9 +4707,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
47194707
"color-background-notification-yellow": "#ffe347",
47204708
"color-background-popover": "#1b232d",
47214709
"color-background-progress-bar-default": "#333843",
4722-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
47234710
"color-background-progress-bar-value-default": "#42b4ff",
4724-
"color-background-progress-bar-value-in-flash": "#ffffff",
47254711
"color-background-segment-active": "#42b4ff",
47264712
"color-background-segment-default": "#0f141a",
47274713
"color-background-segment-disabled": "#0f141a",
@@ -5485,9 +5471,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
54855471
"color-background-notification-yellow": "#ffe347",
54865472
"color-background-popover": "#1b232d",
54875473
"color-background-progress-bar-default": "#333843",
5488-
"color-background-progress-bar-in-flash": "rgba(255, 255, 255, 0.25)",
54895474
"color-background-progress-bar-value-default": "#42b4ff",
5490-
"color-background-progress-bar-value-in-flash": "#ffffff",
54915475
"color-background-segment-active": "#42b4ff",
54925476
"color-background-segment-default": "#161d26",
54935477
"color-background-segment-disabled": "#161d26",

‎src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8640,15 +8640,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
86408640
"color-background-progress-bar-default": {
86418641
"$description": "The default background color of the progress bar.",
86428642
"$value": {
8643-
"dark": "#414750",
8644-
"light": "#eaeded",
8643+
"dark": "rgba(255, 255, 255, 0.25)",
8644+
"light": "rgba(255, 255, 255, 0.25)",
86458645
},
86468646
},
86478647
"color-background-progress-bar-value-default": {
86488648
"$description": "The default background color of the progress bar value.",
86498649
"$value": {
8650-
"dark": "#00a1c9",
8651-
"light": "#0073bb",
8650+
"dark": "#ffffff",
8651+
"light": "#ffffff",
86528652
},
86538653
},
86548654
"color-background-segment-active": {
@@ -11369,15 +11369,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1136911369
"color-background-progress-bar-default": {
1137011370
"$description": "The default background color of the progress bar.",
1137111371
"$value": {
11372-
"dark": "#414750",
11373-
"light": "#eaeded",
11372+
"dark": "rgba(0, 0, 0, 0.1)",
11373+
"light": "rgba(0, 0, 0, 0.1)",
1137411374
},
1137511375
},
1137611376
"color-background-progress-bar-value-default": {
1137711377
"$description": "The default background color of the progress bar value.",
1137811378
"$value": {
11379-
"dark": "#00a1c9",
11380-
"light": "#0073bb",
11379+
"dark": "#16191f",
11380+
"light": "#16191f",
1138111381
},
1138211382
},
1138311383
"color-background-segment-active": {
@@ -30477,15 +30477,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3047730477
"color-background-progress-bar-default": {
3047830478
"$description": "The default background color of the progress bar.",
3047930479
"$value": {
30480-
"dark": "#333843",
30481-
"light": "#ebebf0",
30480+
"dark": "rgba(255, 255, 255, 0.25)",
30481+
"light": "rgba(255, 255, 255, 0.25)",
3048230482
},
3048330483
},
3048430484
"color-background-progress-bar-value-default": {
3048530485
"$description": "The default background color of the progress bar value.",
3048630486
"$value": {
30487-
"dark": "#42b4ff",
30488-
"light": "#006ce0",
30487+
"dark": "#ffffff",
30488+
"light": "#ffffff",
3048930489
},
3049030490
},
3049130491
"color-background-segment-active": {
@@ -33206,15 +33206,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3320633206
"color-background-progress-bar-default": {
3320733207
"$description": "The default background color of the progress bar.",
3320833208
"$value": {
33209-
"dark": "#333843",
33210-
"light": "#ebebf0",
33209+
"dark": "rgba(0, 0, 0, 0.1)",
33210+
"light": "rgba(0, 0, 0, 0.1)",
3321133211
},
3321233212
},
3321333213
"color-background-progress-bar-value-default": {
3321433214
"$description": "The default background color of the progress bar value.",
3321533215
"$value": {
33216-
"dark": "#42b4ff",
33217-
"light": "#006ce0",
33216+
"dark": "#0f141a",
33217+
"light": "#0f141a",
3321833218
},
3321933219
},
3322033220
"color-background-segment-active": {

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3556,6 +3556,56 @@ For more information, see the
35563556
"optional": true,
35573557
"type": "AutosuggestProps.ContainingOptionAndGroupString",
35583558
},
3559+
{
3560+
"description": "Specifies a render function to render custom options in the dropdown menu.
3561+
3562+
The item inside the props has a different shape depending on its type:
3563+
3564+
3565+
### item
3566+
3567+
- \`type\` ('item') - The item type.
3568+
- \`index\` (number) - The item's absolute position in the dropdown.
3569+
- \`option\` (Option) - The original option configuration.
3570+
- \`disabled\` (boolean) - Whether the item is disabled.
3571+
- \`highlighted\` (boolean) - Whether the item is currently highlighted.
3572+
- \`selected\` (boolean) - Whether the item is selected.
3573+
- \`parent\` (OptionGroupRenderItem | null) - The parent group item, if any.
3574+
3575+
### group
3576+
3577+
- \`type\` ('group') - The item type.
3578+
- \`index\` (number) - The item's absolute position in the dropdown.
3579+
- \`option\` (OptionGroup) - The original option configuration.
3580+
- \`disabled\` (boolean) - Whether the item is disabled.
3581+
3582+
### entered-text
3583+
3584+
- \`type\` ('entered-text') - The item type.
3585+
- \`option\` (Option) - The entered-text option configuration.
3586+
3587+
When providing a custom \`renderOption\` implementation, it fully replaces the default visual rendering and content for that item.
3588+
The component still manages focus, keyboard interactions, and selection state, but it no longer applies its default item layout or typography.
3589+
3590+
When returning \`null\`, the default rendering will be applied for that item.",
3591+
"inlineType": {
3592+
"name": "AutosuggestProps.ItemRenderer",
3593+
"parameters": [
3594+
{
3595+
"name": "props",
3596+
"type": "{ item: AutosuggestProps.RenderItem; filterText?: string | undefined; }",
3597+
},
3598+
],
3599+
"returnType": "React.ReactNode",
3600+
"type": "function",
3601+
},
3602+
"name": "renderOption",
3603+
"optional": true,
3604+
"systemTags": [
3605+
"core",
3606+
],
3607+
"type": "AutosuggestProps.ItemRenderer",
3608+
},
35593609
{
35603610
"description": "Specifies the localized string that describes an option as being selected.
35613611
This is required to provide a good screen reader experience. For more information, see the
@@ -11482,6 +11532,13 @@ exports[`Components definition for error-boundary matches the snapshot: error-bo
1148211532
"functions": [],
1148311533
"name": "ErrorBoundary",
1148411534
"properties": [
11535+
{
11536+
"deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
11537+
"description": "Adds the specified classes to the root element of the component.",
11538+
"name": "className",
11539+
"optional": true,
11540+
"type": "string",
11541+
},
1148511542
{
1148611543
"description": "Optional identifier for the error boundary instance.
1148711544

@@ -11551,6 +11608,15 @@ attribute \`data-awsui-boundary-id={errorBoundaryId}\` to support debugging.",
1155111608
"optional": true,
1155211609
"type": "ErrorBoundaryProps.I18nStrings",
1155311610
},
11611+
{
11612+
"deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
11613+
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
11614+
use the \`id\` attribute, consider setting it on a parent element instead.",
11615+
"description": "Adds the specified ID to the root element of the component.",
11616+
"name": "id",
11617+
"optional": true,
11618+
"type": "string",
11619+
},
1155411620
{
1155511621
"description": "Callback invoked when an error is intercepted by the boundary.
1155611622
Use this function to record, log, or report errors (for example, to telemetry or monitoring systems).
@@ -19328,7 +19394,7 @@ Add a button using the \`action\` property of the flashbar item instead.",
1932819394
"defaultValue": "'standalone'",
1932919395
"description": "Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:
1933019396

19331-
- \`"flash"\` - Use this variatn when using the progress bar within a flash component.
19397+
- \`"flash"\` - Use this variant when using the progress bar within a flash component.
1933219398
Note that the result button isn't displayed when using this variant.
1933319399
Use the \`buttonText\` property and the \`onButtonClick\` event listener of the flashbar item instead of the result button provided by the progress bar.
1933419400
- \`"key-value"\` - Use this variant when using the progress bar within the key-value pairs pattern.

‎src/app-layout/__tests__/runtime-drawers.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,11 @@ describeEachAppLayout(({ size }) => {
7676
expect(wrapper.findDrawersTriggers()).toHaveLength(0);
7777
});
7878

79+
test('runtime drawer triggerless does not crash page', async () => {
80+
awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, trigger: undefined });
81+
await expect(renderComponent(<AppLayout />)).resolves.not.toThrow();
82+
});
83+
7984
test('runtime drawers integration can be dynamically enabled and disabled', async () => {
8085
awsuiPlugins.appLayout.registerDrawer(drawerDefaults);
8186
const { wrapper, rerender } = await renderComponent(<AppLayout />);

0 commit comments

Comments
 (0)