@cloudscape-design/components 3.0.1345 → 3.0.1346

package/flashbar/styles.selectors.js

@@ -2,55 +2,55 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_1oohl_157",
-  "enter": "awsui_enter_1q84n_1oohl_157",
-  "flash-body": "awsui_flash-body_1q84n_1oohl_171",
-  "flash-message": "awsui_flash-message_1q84n_1oohl_171",
-  "flash-header": "awsui_flash-header_1q84n_1oohl_171",
-  "flash-content": "awsui_flash-content_1q84n_1oohl_172",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1oohl_173",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1oohl_174",
-  "flash-icon": "awsui_flash-icon_1q84n_1oohl_197",
-  "entering": "awsui_entering_1q84n_1oohl_210",
-  "entered": "awsui_entered_1q84n_1oohl_231",
-  "exiting": "awsui_exiting_1q84n_1oohl_336",
-  "stack": "awsui_stack_1q84n_1oohl_370",
-  "animation-running": "awsui_animation-running_1q84n_1oohl_370",
-  "item": "awsui_item_1q84n_1oohl_370",
-  "flash-list-item": "awsui_flash-list-item_1q84n_1oohl_371",
-  "notification-bar": "awsui_notification-bar_1q84n_1oohl_372",
-  "collapsed": "awsui_collapsed_1q84n_1oohl_392",
-  "animation-ready": "awsui_animation-ready_1q84n_1oohl_392",
-  "expanded-only": "awsui_expanded-only_1q84n_1oohl_392",
-  "expanded": "awsui_expanded_1q84n_1oohl_392",
-  "flash": "awsui_flash_1q84n_1oohl_157",
-  "collapsible": "awsui_collapsible_1q84n_1oohl_448",
-  "short-list": "awsui_short-list_1q84n_1oohl_454",
-  "visual-refresh": "awsui_visual-refresh_1q84n_1oohl_454",
-  "status": "awsui_status_1q84n_1oohl_601",
-  "header": "awsui_header_1q84n_1oohl_601",
-  "item-count": "awsui_item-count_1q84n_1oohl_602",
-  "button": "awsui_button_1q84n_1oohl_603",
-  "type-count": "awsui_type-count_1q84n_1oohl_636",
-  "count-number": "awsui_count-number_1q84n_1oohl_636",
-  "icon": "awsui_icon_1q84n_1oohl_674",
-  "floating": "awsui_floating_1q84n_1oohl_715",
-  "flashbar": "awsui_flashbar_1q84n_1oohl_719",
-  "initial-hidden": "awsui_initial-hidden_1q84n_1oohl_779",
-  "flash-list": "awsui_flash-list_1q84n_1oohl_371",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_1oohl_803",
-  "flash-text": "awsui_flash-text_1q84n_1oohl_833",
-  "hidden": "awsui_hidden_1q84n_1oohl_852",
-  "header-replacement": "awsui_header-replacement_1q84n_1oohl_857",
-  "content-replacement": "awsui_content-replacement_1q84n_1oohl_862",
-  "dismiss-button": "awsui_dismiss-button_1q84n_1oohl_174",
-  "action-wrapped": "awsui_action-wrapped_1q84n_1oohl_880",
-  "action-button": "awsui_action-button_1q84n_1oohl_173",
-  "action-slot": "awsui_action-slot_1q84n_1oohl_887",
-  "flash-type-success": "awsui_flash-type-success_1q84n_1oohl_891",
-  "flash-type-error": "awsui_flash-type-error_1q84n_1oohl_899",
-  "flash-type-info": "awsui_flash-type-info_1q84n_1oohl_907",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1oohl_908",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_1oohl_917"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_1ow9o_157",
+  "enter": "awsui_enter_1q84n_1ow9o_157",
+  "flash-body": "awsui_flash-body_1q84n_1ow9o_171",
+  "flash-message": "awsui_flash-message_1q84n_1ow9o_171",
+  "flash-header": "awsui_flash-header_1q84n_1ow9o_171",
+  "flash-content": "awsui_flash-content_1q84n_1ow9o_172",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1ow9o_173",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1ow9o_174",
+  "flash-icon": "awsui_flash-icon_1q84n_1ow9o_197",
+  "entering": "awsui_entering_1q84n_1ow9o_210",
+  "entered": "awsui_entered_1q84n_1ow9o_231",
+  "exiting": "awsui_exiting_1q84n_1ow9o_336",
+  "stack": "awsui_stack_1q84n_1ow9o_370",
+  "animation-running": "awsui_animation-running_1q84n_1ow9o_370",
+  "item": "awsui_item_1q84n_1ow9o_370",
+  "flash-list-item": "awsui_flash-list-item_1q84n_1ow9o_371",
+  "notification-bar": "awsui_notification-bar_1q84n_1ow9o_372",
+  "collapsed": "awsui_collapsed_1q84n_1ow9o_392",
+  "animation-ready": "awsui_animation-ready_1q84n_1ow9o_392",
+  "expanded-only": "awsui_expanded-only_1q84n_1ow9o_392",
+  "expanded": "awsui_expanded_1q84n_1ow9o_392",
+  "flash": "awsui_flash_1q84n_1ow9o_157",
+  "collapsible": "awsui_collapsible_1q84n_1ow9o_448",
+  "short-list": "awsui_short-list_1q84n_1ow9o_454",
+  "visual-refresh": "awsui_visual-refresh_1q84n_1ow9o_454",
+  "status": "awsui_status_1q84n_1ow9o_601",
+  "header": "awsui_header_1q84n_1ow9o_601",
+  "item-count": "awsui_item-count_1q84n_1ow9o_602",
+  "button": "awsui_button_1q84n_1ow9o_603",
+  "type-count": "awsui_type-count_1q84n_1ow9o_636",
+  "count-number": "awsui_count-number_1q84n_1ow9o_636",
+  "icon": "awsui_icon_1q84n_1ow9o_674",
+  "floating": "awsui_floating_1q84n_1ow9o_715",
+  "flashbar": "awsui_flashbar_1q84n_1ow9o_719",
+  "initial-hidden": "awsui_initial-hidden_1q84n_1ow9o_779",
+  "flash-list": "awsui_flash-list_1q84n_1ow9o_371",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_1ow9o_803",
+  "flash-text": "awsui_flash-text_1q84n_1ow9o_833",
+  "hidden": "awsui_hidden_1q84n_1ow9o_852",
+  "header-replacement": "awsui_header-replacement_1q84n_1ow9o_857",
+  "content-replacement": "awsui_content-replacement_1q84n_1ow9o_862",
+  "dismiss-button": "awsui_dismiss-button_1q84n_1ow9o_174",
+  "action-wrapped": "awsui_action-wrapped_1q84n_1ow9o_880",
+  "action-button": "awsui_action-button_1q84n_1ow9o_173",
+  "action-slot": "awsui_action-slot_1q84n_1ow9o_887",
+  "flash-type-success": "awsui_flash-type-success_1q84n_1ow9o_891",
+  "flash-type-error": "awsui_flash-type-error_1q84n_1ow9o_899",
+  "flash-type-info": "awsui_flash-type-info_1q84n_1ow9o_907",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1ow9o_908",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_1ow9o_917"
 };
   

package/internal/base-component/styles.scoped.css

@@ -317,7 +317,7 @@
     --color-background-item-selected-pyr5cw:var(--color-primary-50-1y05xv);
     --color-background-side-navigation-item-active-adfprg:transparent;
     --color-background-side-navigation-item-active-collapsed-jczh49:var(--color-background-control-checked-jwoxtj);
-    --color-background-side-navigation-item-icon-hover-c8r9nb:var(--color-primary-50-1y05xv);
+    --color-background-side-navigation-item-icon-hover-e5eh06:var(--color-background-item-selected-pyr5cw);
     --color-background-layout-main-7z8vaj:var(--color-white-p1zlvy);
     --color-background-layout-ai-drawer-b4mvv3:var(--color-neutral-850-3f0gro);
     --color-background-drawer-715dba:var(--color-background-layout-panel-content-89bszq);
@@ -456,6 +456,7 @@
     --color-border-layout-px1i24:var(--color-neutral-350-dq6kfr);
     --color-border-layout-side-navigation-mjh43q:var(--color-border-layout-px1i24);
     --color-border-notification-stack-bar-aszsse:var(--color-neutral-750-pi9qqd);
+    --color-border-notification-stack-bar-focused-mzvtw9:var(--color-neutral-100-gk3lvf);
     --color-border-panel-header-j4pvsn:var(--color-border-divider-default-0de9c8);
     --color-border-popover-5yl4uc:var(--color-border-dropdown-container-gb937i);
     --color-border-segment-active-trxbfe:var(--color-border-segment-default-8mo02x);
@@ -851,6 +852,12 @@
     --motion-duration-complex-tbdo30:var(--motion-duration-refresh-only-slow-ugjy90);
     --motion-duration-tooltip-enter-8e7aex:var(--motion-duration-refresh-only-fast-zfibh6);
     --motion-easing-tooltip-enter-i9exfu:var(--motion-easing-refresh-only-a-ccyqaz);
+    --motion-duration-expandable-content-enter-kqyuuj:var(--motion-duration-show-paced-otsjh8);
+    --motion-easing-expandable-content-enter-5fw5v8:var(--motion-easing-show-paced-ym6eyn);
+    --motion-duration-side-navigation-content-enter-fade-9is49e:0ms;
+    --motion-duration-side-navigation-content-exit-6sbfiy:0ms;
+    --motion-duration-side-navigation-content-exit-fade-ydl422:0ms;
+    --motion-easing-side-navigation-content-exit-v820ow:var(--motion-easing-show-quick-9hlj8q);
     --motion-keyframes-fade-in-0r842q:awsui-fade-in-35003c;
     --motion-keyframes-fade-out-g7fgdu:awsui-fade-out-35003c;
     --motion-keyframes-status-icon-error-wkou39:awsui-status-icon-error-35003c;
@@ -865,6 +872,8 @@
     --size-vertical-input-p1d7xx:32px;
     --size-vertical-panel-icon-offset-z959cw:15px;
     --size-side-navigation-item-height-lokap3:28px;
+    --size-side-navigation-item-collapsed-oesjea:30px;
+    --size-side-navigation-collapsed-width-3gq7nn:52px;
     --space-alert-action-left-4s8zo5:var(--space-s-tvghoh);
     --space-alert-horizontal-ul364s:var(--space-flashbar-horizontal-l63501);
     --space-alert-message-right-mrjbnn:var(--space-xxs-hwfkai);
@@ -1142,7 +1151,6 @@
       --color-background-input-default-bz9w07:var(--color-neutral-850-3f0gro);
       --color-background-input-disabled-cecgeg:var(--color-neutral-800-t7j5ap);
       --color-background-item-selected-pyr5cw:var(--color-primary-1000-7umopx);
-      --color-background-side-navigation-item-icon-hover-c8r9nb:var(--color-neutral-700-qw8ats);
       --color-background-layout-main-7z8vaj:var(--color-neutral-850-3f0gro);
       --color-background-layout-panel-hover-kg7nug:var(--color-neutral-700-qw8ats);
       --color-background-layout-toggle-selected-active-7ovd7l:var(--color-primary-400-n8h4bx);
@@ -1326,6 +1334,7 @@
     --size-vertical-input-p1d7xx:28px;
     --size-vertical-panel-icon-offset-z959cw:13px;
     --size-side-navigation-item-height-lokap3:24px;
+    --size-side-navigation-item-collapsed-oesjea:28px;
     --space-field-vertical-vm99qz:3px;
     --space-button-icon-only-horizontal-i85hxi:var(--space-xxs-hwfkai);
     --space-card-horizontal-embedded-sasxhu:10px;
@@ -1398,6 +1407,7 @@
     --motion-duration-expressive-cbdcwy:var(--motion-duration-refresh-only-medium-5rbn3k);
     --motion-duration-complex-tbdo30:var(--motion-duration-refresh-only-slow-ugjy90);
     --motion-duration-tooltip-enter-8e7aex:var(--motion-duration-refresh-only-fast-zfibh6);
+    --motion-duration-expandable-content-enter-kqyuuj:var(--motion-duration-show-paced-otsjh8);
   }
   .awsui-context-compact-table:not(#\9) {
     --size-vertical-input-p1d7xx:28px;
@@ -1465,7 +1475,6 @@
     --color-background-input-default-bz9w07:var(--color-neutral-850-3f0gro);
     --color-background-input-disabled-cecgeg:var(--color-neutral-800-t7j5ap);
     --color-background-item-selected-pyr5cw:var(--color-primary-1000-7umopx);
-    --color-background-side-navigation-item-icon-hover-c8r9nb:var(--color-neutral-700-qw8ats);
     --color-background-layout-main-7z8vaj:var(--color-neutral-850-3f0gro);
     --color-background-layout-panel-hover-kg7nug:var(--color-neutral-700-qw8ats);
     --color-background-layout-toggle-selected-active-7ovd7l:var(--color-primary-400-n8h4bx);
@@ -1641,6 +1650,7 @@
     --color-background-item-card-aw1yv6:var(--color-background-card-n4q1vl);
     --color-background-dropdown-item-selected-cnovvw:var(--color-background-item-selected-pyr5cw);
     --color-background-side-navigation-item-active-collapsed-jczh49:var(--color-background-control-checked-jwoxtj);
+    --color-background-side-navigation-item-icon-hover-e5eh06:var(--color-background-item-selected-pyr5cw);
     --color-background-drawer-715dba:var(--color-background-layout-panel-content-89bszq);
     --color-background-backdrop-czudyv:var(--color-grey-opaque-70-1cfyp2);
     --color-background-drawer-backdrop-l5bgyg:var(--color-background-backdrop-czudyv);
@@ -1790,7 +1800,6 @@
     --color-background-input-default-bz9w07:var(--color-neutral-950-lxybh8);
     --color-background-input-disabled-cecgeg:var(--color-neutral-800-t7j5ap);
     --color-background-item-selected-pyr5cw:var(--color-primary-1000-7umopx);
-    --color-background-side-navigation-item-icon-hover-c8r9nb:var(--color-neutral-700-qw8ats);
     --color-background-layout-main-7z8vaj:var(--color-neutral-950-lxybh8);
     --color-background-layout-panel-hover-kg7nug:var(--color-neutral-700-qw8ats);
     --color-background-layout-toggle-selected-active-7ovd7l:var(--color-primary-400-n8h4bx);
@@ -1979,6 +1988,7 @@
     --color-background-item-card-aw1yv6:var(--color-background-card-n4q1vl);
     --color-background-dropdown-item-selected-cnovvw:var(--color-background-item-selected-pyr5cw);
     --color-background-side-navigation-item-active-collapsed-jczh49:var(--color-background-control-checked-jwoxtj);
+    --color-background-side-navigation-item-icon-hover-e5eh06:var(--color-background-item-selected-pyr5cw);
     --color-background-drawer-715dba:var(--color-background-layout-panel-content-89bszq);
     --color-background-backdrop-czudyv:var(--color-grey-opaque-70-1cfyp2);
     --color-background-drawer-backdrop-l5bgyg:var(--color-background-backdrop-czudyv);
@@ -2330,7 +2340,6 @@
     --color-background-input-default-bz9w07:var(--color-neutral-850-3f0gro);
     --color-background-input-disabled-cecgeg:var(--color-neutral-800-t7j5ap);
     --color-background-item-selected-pyr5cw:var(--color-primary-1000-7umopx);
-    --color-background-side-navigation-item-icon-hover-c8r9nb:var(--color-neutral-700-qw8ats);
     --color-background-layout-main-7z8vaj:var(--color-neutral-850-3f0gro);
     --color-background-layout-panel-hover-kg7nug:var(--color-neutral-700-qw8ats);
     --color-background-layout-toggle-selected-active-7ovd7l:var(--color-primary-400-n8h4bx);
@@ -2509,6 +2518,7 @@
     --color-background-item-card-aw1yv6:var(--color-background-card-n4q1vl);
     --color-background-dropdown-item-selected-cnovvw:var(--color-background-item-selected-pyr5cw);
     --color-background-side-navigation-item-active-collapsed-jczh49:var(--color-background-control-checked-jwoxtj);
+    --color-background-side-navigation-item-icon-hover-e5eh06:var(--color-background-item-selected-pyr5cw);
     --color-background-drawer-715dba:var(--color-background-layout-panel-content-89bszq);
     --color-background-backdrop-czudyv:var(--color-grey-opaque-70-1cfyp2);
     --color-background-drawer-backdrop-l5bgyg:var(--color-background-backdrop-czudyv);
@@ -2687,5 +2697,5 @@
   }
 }
 :root {
-  --awsui-version-info-abe35802: true;
+  --awsui-version-info-7f29935f: true;
 }

package/internal/components/transition/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { MutableRefObject } from 'react';
 import { TransitionStatus as ReactTransitionGroupTransitionStatus } from 'react-transition-group';
 export type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';
-interface TransitionProps {
+interface TransitionProps<T extends HTMLElement> {
   in: boolean;
   exit?: boolean;
   disabled?: boolean;
-  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;
+  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<T | null>, motionDisabled: boolean) => React.ReactNode;
   onStatusChange?: (status: TransitionStatus) => void;
   transitionChangeDelay?: {
     entering?: number;
@@ -14,12 +14,12 @@ interface TransitionProps {
   exitTimeout?: number;
 }
 /**
- * This component is a wrapper around the CSSTransition component.
+ * This component wraps react-transition-group's Transition component.
  *
- * It provides a second parameter in its rendering function that must be
- * attached to the node that is transitioning.
+ * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,
+ * and whether motion is disabled by either user preference or the disabled prop.
  */
-export declare function Transition({
+export declare function Transition<T extends HTMLElement = any>({
   in: isIn,
   children,
   exit,
@@ -28,5 +28,5 @@ export declare function Transition({
   transitionChangeDelay,
   exitTimeout,
   ...rest
-}: TransitionProps): JSX.Element;
+}: TransitionProps<T>): JSX.Element;
 export {};

package/internal/components/transition/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,gBAAgB,IAAI,oCAAoC,EACzD,MAAM,wBAAwB,CAAC;AAIhC,MAAM,MAAM,gBAAgB,GAAG,oCAAoC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvF,UAAU,eAAe;IACvB,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,gBAAgB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAW,EACX,cAA6B,EAC7B,QAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,eAAe,eA8EjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,gBAAgB,IAAI,oCAAoC,EACzD,MAAM,wBAAwB,CAAC;AAIhC,MAAM,MAAM,gBAAgB,GAAG,oCAAoC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvF,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW;IAC7C,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,CACR,KAAK,EAAE,gBAAgB,EACvB,uBAAuB,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EACnD,cAAc,EAAE,OAAO,KACpB,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,EACtD,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAW,EACX,cAA6B,EAC7B,QAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,eAAe,CAAC,CAAC,CAAC,eA8EpB"}

package/internal/components/transition/index.js

@@ -5,10 +5,10 @@ import { useCallback, useRef } from 'react';
 import { Transition as ReactTransitionGroupTransition, } from 'react-transition-group';
 import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
 /**
- * This component is a wrapper around the CSSTransition component.
+ * This component wraps react-transition-group's Transition component.
  *
- * It provides a second parameter in its rendering function that must be
- * attached to the node that is transitioning.
+ * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,
+ * and whether motion is disabled by either user preference or the disabled prop.
  */
 export function Transition({ in: isIn, children, exit = true, onStatusChange = () => void 0, disabled = false, transitionChangeDelay, exitTimeout, ...rest }) {
     const transitionRootElement = useRef(null);
@@ -68,6 +68,6 @@ export function Transition({ in: isIn, children, exit = true, onStatusChange = (
         }, onExited: () => {
             setTransitionState('exited');
             onStatusChange('exited');
-        }, ...rest }, () => children(transitionState, transitionRootElement)));
+        }, ...rest }, () => children(transitionState, transitionRootElement, motionDisabled)));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\ninterface TransitionProps {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n  exitTimeout?: number;\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  exitTimeout,\n  ...rest\n}: TransitionProps) {\n  const transitionRootElement = useRef<HTMLElement>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const controller = new AbortController();\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        controller.abort();\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener, { signal: controller.signal });\n    node.addEventListener('animationend', listener, { signal: controller.signal });\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : exitTimeout}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\ninterface TransitionProps<T extends HTMLElement> {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (\n    state: TransitionStatus,\n    transitioningElementRef: MutableRefObject<T | null>,\n    motionDisabled: boolean\n  ) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n  exitTimeout?: number;\n}\n\n/**\n * This component wraps react-transition-group's Transition component.\n *\n * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,\n * and whether motion is disabled by either user preference or the disabled prop.\n */\nexport function Transition<T extends HTMLElement = any>({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  exitTimeout,\n  ...rest\n}: TransitionProps<T>) {\n  const transitionRootElement = useRef<T>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const controller = new AbortController();\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        controller.abort();\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener, { signal: controller.signal });\n    node.addEventListener('animationend', listener, { signal: controller.signal });\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : exitTimeout}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement, motionDisabled)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (abe35802)";
-export var GIT_SHA = "abe35802";
+export var PACKAGE_VERSION = "3.0.0 (7f29935f)";
+export var GIT_SHA = "7f29935f";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (abe35802)",
-  "GIT_SHA": "abe35802",
+  "PACKAGE_VERSION": "3.0.0 (7f29935f)",
+  "GIT_SHA": "7f29935f",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true,

package/internal/generated/styles/tokens.d.ts

@@ -577,6 +577,7 @@ export const colorBorderItemSelected: string;
 export const colorBorderLayout: string;
 export const colorBorderLayoutSideNavigation: string;
 export const colorBorderNotificationStackBar: string;
+export const colorBorderNotificationStackBarFocused: string;
 export const colorBorderPanelHeader: string;
 export const colorBorderPopover: string;
 export const colorBorderSegmentActive: string;
@@ -985,6 +986,12 @@ export const motionDurationExpressive: string;
 export const motionDurationComplex: string;
 export const motionDurationTooltipEnter: string;
 export const motionEasingTooltipEnter: string;
+export const motionDurationExpandableContentEnter: string;
+export const motionEasingExpandableContentEnter: string;
+export const motionDurationSideNavigationContentEnterFade: string;
+export const motionDurationSideNavigationContentExit: string;
+export const motionDurationSideNavigationContentExitFade: string;
+export const motionEasingSideNavigationContentExit: string;
 export const motionKeyframesFadeIn: string;
 export const motionKeyframesFadeOut: string;
 export const motionKeyframesStatusIconError: string;
@@ -999,6 +1006,8 @@ export const sizeTableSelectionHorizontal: string;
 export const sizeVerticalInput: string;
 export const sizeVerticalPanelIconOffset: string;
 export const sizeSideNavigationItemHeight: string;
+export const sizeSideNavigationItemCollapsed: string;
+export const sizeSideNavigationCollapsedWidth: string;
 export const spaceAlertActionLeft: string;
 export const spaceAlertHorizontal: string;
 export const spaceAlertMessageRight: string;

package/internal/generated/styles/tokens.js

@@ -437,7 +437,7 @@ export var colorBackgroundInputDisabled = "var(--color-background-input-disabled
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-pyr5cw, #f0fbff)";
 export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundSideNavigationItemActiveCollapsed = "var(--color-background-side-navigation-item-active-collapsed-jczh49, #006ce0)";
-export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-c8r9nb, #f0fbff)";
+export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-e5eh06, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-7z8vaj, #ffffff)";
 export var colorBackgroundLayoutAiDrawer = "var(--color-background-layout-ai-drawer-b4mvv3, #161d26)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-715dba, #ffffff)";
@@ -577,6 +577,7 @@ export var colorBorderItemSelected = "var(--color-border-item-selected-63a3p8, #
 export var colorBorderLayout = "var(--color-border-layout-px1i24, #c6c6cd)";
 export var colorBorderLayoutSideNavigation = "var(--color-border-layout-side-navigation-mjh43q, #c6c6cd)";
 export var colorBorderNotificationStackBar = "var(--color-border-notification-stack-bar-aszsse, #232b37)";
+export var colorBorderNotificationStackBarFocused = "var(--color-border-notification-stack-bar-focused-mzvtw9, #f9f9fa)";
 export var colorBorderPanelHeader = "var(--color-border-panel-header-j4pvsn, #c6c6cd)";
 export var colorBorderPopover = "var(--color-border-popover-5yl4uc, #b4b4bb)";
 export var colorBorderSegmentActive = "var(--color-border-segment-active-trxbfe, #424650)";
@@ -985,6 +986,12 @@ export var motionDurationExpressive = "var(--motion-duration-expressive-cbdcwy,
 export var motionDurationComplex = "var(--motion-duration-complex-tbdo30, 250ms)";
 export var motionDurationTooltipEnter = "var(--motion-duration-tooltip-enter-8e7aex, 115ms)";
 export var motionEasingTooltipEnter = "var(--motion-easing-tooltip-enter-i9exfu, cubic-bezier(0, 0, 0, 1))";
+export var motionDurationExpandableContentEnter = "var(--motion-duration-expandable-content-enter-kqyuuj, 180ms)";
+export var motionEasingExpandableContentEnter = "var(--motion-easing-expandable-content-enter-5fw5v8, ease-out)";
+export var motionDurationSideNavigationContentEnterFade = "var(--motion-duration-side-navigation-content-enter-fade-9is49e, 0ms)";
+export var motionDurationSideNavigationContentExit = "var(--motion-duration-side-navigation-content-exit-6sbfiy, 0ms)";
+export var motionDurationSideNavigationContentExitFade = "var(--motion-duration-side-navigation-content-exit-fade-ydl422, 0ms)";
+export var motionEasingSideNavigationContentExit = "var(--motion-easing-side-navigation-content-exit-v820ow, ease-out)";
 export var motionKeyframesFadeIn = "var(--motion-keyframes-fade-in-0r842q, awsui-fade-in-35003c)";
 export var motionKeyframesFadeOut = "var(--motion-keyframes-fade-out-g7fgdu, awsui-fade-out-35003c)";
 export var motionKeyframesStatusIconError = "var(--motion-keyframes-status-icon-error-wkou39, awsui-status-icon-error-35003c)";
@@ -999,6 +1006,8 @@ export var sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal
 export var sizeVerticalInput = "var(--size-vertical-input-p1d7xx, 32px)";
 export var sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset-z959cw, 15px)";
 export var sizeSideNavigationItemHeight = "var(--size-side-navigation-item-height-lokap3, 28px)";
+export var sizeSideNavigationItemCollapsed = "var(--size-side-navigation-item-collapsed-oesjea, 30px)";
+export var sizeSideNavigationCollapsedWidth = "var(--size-side-navigation-collapsed-width-3gq7nn, 52px)";
 export var spaceAlertActionLeft = "var(--space-alert-action-left-4s8zo5, 12px)";
 export var spaceAlertHorizontal = "var(--space-alert-horizontal-ul364s, 16px)";
 export var spaceAlertMessageRight = "var(--space-alert-message-right-mrjbnn, 4px)";