@cloudscape-design/components 3.0.278 → 3.0.280

package/collection-preferences/utils.js

@@ -6,15 +6,17 @@ import InternalCheckbox from '../checkbox/internal';
 import InternalColumnLayout from '../column-layout/internal';
 import InternalFormField from '../form-field/internal';
 import InternalRadioGroup from '../radio-group/internal';
+import InternalSpaceBetween from '../space-between/internal';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import styles from './styles.css.js';
-export const copyPreferences = ({ pageSize, wrapLines, stripedRows, contentDensity, visibleContent, contentDisplay, custom, }) => ({
+export const copyPreferences = ({ pageSize, wrapLines, stripedRows, contentDensity, visibleContent, contentDisplay, stickyColumns, custom, }) => ({
     pageSize,
     wrapLines,
     stripedRows,
     contentDensity,
     visibleContent,
     contentDisplay,
+    stickyColumns,
     custom,
 });
 export const mergePreferences = (newPref, oldPref) => {
@@ -27,6 +29,7 @@ export const mergePreferences = (newPref, oldPref) => {
         'visibleContent',
         'custom',
         'contentDisplay',
+        'stickyColumns',
     ];
     for (const prefName of prefNames) {
         if (newPref[prefName] !== undefined) {
@@ -55,6 +58,17 @@ export const PageSizePreference = ({ title, options, value, onChange }) => (Reac
 export const WrapLinesPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: ({ detail }) => onChange(detail.checked), className: styles['wrap-lines'] }, label));
 export const StripedRowsPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: ({ detail }) => onChange(detail.checked), className: styles['striped-rows'] }, label));
 export const ContentDensityPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: value === 'compact', description: description, onChange: ({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable'), className: styles['content-density'] }, label));
+const StickyPreference = ({ firstOrLast, preference, value, onChange }) => {
+    const { title, description, options } = preference;
+    return (React.createElement("div", { className: styles[`sticky-columns-${firstOrLast}`] },
+        React.createElement(InternalFormField, { className: styles['sticky-columns-form-field'], label: title, description: description },
+            React.createElement(InternalRadioGroup, { className: styles['sticky-columns-radio-group'], value: typeof value !== 'undefined' ? `${value}` : null, items: options.map(({ label, value }) => ({ label, value: `${value}` })), onChange: ({ detail }) => onChange(Number(detail.value)) }))));
+};
+export const StickyColumnsPreference = ({ firstColumns, lastColumns, onChange, value, }) => {
+    return (React.createElement(InternalSpaceBetween, { className: styles['sticky-columns'], size: "l" },
+        firstColumns && (React.createElement(StickyPreference, { firstOrLast: "first", preference: firstColumns, value: value === null || value === void 0 ? void 0 : value.first, onChange: newValue => onChange(Object.assign(Object.assign({}, value), { first: newValue })) })),
+        lastColumns && (React.createElement(StickyPreference, { firstOrLast: "last", preference: lastColumns, value: value === null || value === void 0 ? void 0 : value.last, onChange: newValue => onChange(Object.assign(Object.assign({}, value), { last: newValue })) }))));
+};
 export const CustomPreference = ({ value, customPreference, onChange }) => {
     const [customState, setCustomState] = useState(value);
     if (customPreference) {

package/collection-preferences/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["collection-preferences/utils.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 clsx from 'clsx';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  contentDisplay,\n  custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  contentDisplay,\n  custom,\n});\n\ntype CopyPreferenceName = keyof CollectionPreferencesProps.Preferences;\n\nexport const mergePreferences = (\n  newPref: CollectionPreferencesProps.Preferences,\n  oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => {\n  const newObj = { ...oldPref };\n  const prefNames: CopyPreferenceName[] = [\n    'pageSize',\n    'wrapLines',\n    'stripedRows',\n    'contentDensity',\n    'visibleContent',\n    'custom',\n    'contentDisplay',\n  ];\n  for (const prefName of prefNames) {\n    if (newPref[prefName] !== undefined) {\n      newObj[prefName] = newPref[prefName];\n    }\n  }\n  return newObj;\n};\n\ninterface ModalContentLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const smallContainer = breakpoint === 'default';\n\n  if (smallContainer) {\n    return (\n      <div ref={ref}>\n        {left && <div>{left}</div>}\n        {right && <div className={clsx(left && styles['second-column-small'])}>{right}</div>}\n      </div>\n    );\n  }\n\n  const columns = left && right ? 2 : 1;\n  return (\n    <div ref={ref}>\n      <InternalColumnLayout columns={columns} variant=\"text-grid\">\n        {left && <div>{left}</div>}\n        {right && <div>{right}</div>}\n      </InternalColumnLayout>\n    </div>\n  );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n  onChange: (value: number) => void;\n  value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n  <div className={styles['page-size']}>\n    <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n      <InternalRadioGroup\n        className={styles['page-size-radio-group']}\n        value={`${value}`}\n        items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n        onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n      />\n    </InternalFormField>\n  </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['wrap-lines']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const StripedRowsPreference = ({ label, description, value, onChange }: StripedRowsPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['striped-rows']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface ContentDensityPreferenceProps extends CollectionPreferencesProps.ContentDensityPreference {\n  onChange: (value: 'comfortable' | 'compact') => void;\n  value?: 'comfortable' | 'compact';\n}\n\nexport const ContentDensityPreference = ({ label, description, value, onChange }: ContentDensityPreferenceProps) => (\n  <InternalCheckbox\n    checked={value === 'compact'}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable')}\n    className={styles['content-density']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n  onChange: (value: T) => void;\n  value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n  const [customState, setCustomState] = useState(value);\n  if (customPreference) {\n    return (\n      <div className={styles.custom}>\n        {customPreference(customState, value => {\n          // prevent value to be treated as a functional callback\n          setCustomState(() => value);\n          onChange(value);\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["collection-preferences/utils.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 clsx from 'clsx';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  contentDisplay,\n  stickyColumns,\n  custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  contentDisplay,\n  stickyColumns,\n  custom,\n});\n\ntype CopyPreferenceName = keyof CollectionPreferencesProps.Preferences;\n\nexport const mergePreferences = (\n  newPref: CollectionPreferencesProps.Preferences,\n  oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => {\n  const newObj = { ...oldPref };\n  const prefNames: CopyPreferenceName[] = [\n    'pageSize',\n    'wrapLines',\n    'stripedRows',\n    'contentDensity',\n    'visibleContent',\n    'custom',\n    'contentDisplay',\n    'stickyColumns',\n  ];\n  for (const prefName of prefNames) {\n    if (newPref[prefName] !== undefined) {\n      newObj[prefName] = newPref[prefName];\n    }\n  }\n  return newObj;\n};\n\ninterface ModalContentLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const smallContainer = breakpoint === 'default';\n\n  if (smallContainer) {\n    return (\n      <div ref={ref}>\n        {left && <div>{left}</div>}\n        {right && <div className={clsx(left && styles['second-column-small'])}>{right}</div>}\n      </div>\n    );\n  }\n\n  const columns = left && right ? 2 : 1;\n  return (\n    <div ref={ref}>\n      <InternalColumnLayout columns={columns} variant=\"text-grid\">\n        {left && <div>{left}</div>}\n        {right && <div>{right}</div>}\n      </InternalColumnLayout>\n    </div>\n  );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n  onChange: (value: number) => void;\n  value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n  <div className={styles['page-size']}>\n    <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n      <InternalRadioGroup\n        className={styles['page-size-radio-group']}\n        value={`${value}`}\n        items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n        onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n      />\n    </InternalFormField>\n  </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['wrap-lines']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const StripedRowsPreference = ({ label, description, value, onChange }: StripedRowsPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['striped-rows']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface ContentDensityPreferenceProps extends CollectionPreferencesProps.ContentDensityPreference {\n  onChange: (value: 'comfortable' | 'compact') => void;\n  value?: 'comfortable' | 'compact';\n}\n\nexport const ContentDensityPreference = ({ label, description, value, onChange }: ContentDensityPreferenceProps) => (\n  <InternalCheckbox\n    checked={value === 'compact'}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable')}\n    className={styles['content-density']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface StickyColumnsPreferenceProps extends CollectionPreferencesProps.StickyColumnsPreference {\n  onChange: (value?: { first?: number; last?: number }) => void;\n  value?: { first?: number; last?: number };\n}\ninterface StickyPreference extends CollectionPreferencesProps.StickyColumnsPreference {\n  onChange: (value: number) => void;\n  preference: {\n    title: string;\n    description: string;\n    options: ReadonlyArray<{\n      label: string;\n      value: number;\n    }>;\n  };\n  value?: number;\n  firstOrLast: 'first' | 'last';\n}\n\nconst StickyPreference = ({ firstOrLast, preference, value, onChange }: StickyPreference) => {\n  const { title, description, options } = preference;\n  return (\n    <div className={styles[`sticky-columns-${firstOrLast}`]}>\n      <InternalFormField className={styles['sticky-columns-form-field']} label={title} description={description}>\n        <InternalRadioGroup\n          className={styles['sticky-columns-radio-group']}\n          value={typeof value !== 'undefined' ? `${value}` : null}\n          items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n          onChange={({ detail }) => onChange(Number(detail.value))}\n        />\n      </InternalFormField>\n    </div>\n  );\n};\n\nexport const StickyColumnsPreference = ({\n  firstColumns,\n  lastColumns,\n  onChange,\n  value,\n}: StickyColumnsPreferenceProps) => {\n  return (\n    <InternalSpaceBetween className={styles['sticky-columns']} size=\"l\">\n      {firstColumns && (\n        <StickyPreference\n          firstOrLast=\"first\"\n          preference={firstColumns}\n          value={value?.first}\n          onChange={newValue => onChange({ ...value, first: newValue })}\n        />\n      )}\n      {lastColumns && (\n        <StickyPreference\n          firstOrLast=\"last\"\n          preference={lastColumns}\n          value={value?.last}\n          onChange={newValue => onChange({ ...value, last: newValue })}\n        />\n      )}\n    </InternalSpaceBetween>\n  );\n};\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n  onChange: (value: T) => void;\n  value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n  const [customState, setCustomState] = useState(value);\n  if (customPreference) {\n    return (\n      <div className={styles.custom}>\n        {customPreference(customState, value => {\n          // prevent value to be treated as a functional callback\n          setCustomState(() => value);\n          onChange(value);\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n"]}

package/date-range-picker/styles.css.js

@@ -1,43 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "calendar": "awsui_calendar_mgja0_1qy5a_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1qy5a_1",
-  "root": "awsui_root_mgja0_1qy5a_120",
-  "focus-lock": "awsui_focus-lock_mgja0_1qy5a_134",
-  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1qy5a_138",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1qy5a_142",
-  "calendar-container": "awsui_calendar-container_mgja0_1qy5a_146",
-  "one-grid": "awsui_one-grid_mgja0_1qy5a_149",
-  "calendar-header": "awsui_calendar-header_mgja0_1qy5a_153",
-  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1qy5a_159",
-  "calendar-header-month": "awsui_calendar-header-month_mgja0_1qy5a_159",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1qy5a_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1qy5a_183",
-  "first-grid": "awsui_first-grid_mgja0_1qy5a_187",
-  "second-grid": "awsui_second-grid_mgja0_1qy5a_188",
-  "date-and-time-container": "awsui_date-and-time-container_mgja0_1qy5a_192",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1qy5a_198",
-  "footer": "awsui_footer_mgja0_1qy5a_205",
-  "has-clear-button": "awsui_has-clear-button_mgja0_1qy5a_212",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1qy5a_219",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_1qy5a_223",
-  "label": "awsui_label_mgja0_1qy5a_228",
-  "label-enabled": "awsui_label-enabled_mgja0_1qy5a_233",
-  "label-text": "awsui_label-text_mgja0_1qy5a_237",
-  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1qy5a_242",
-  "mode-switch": "awsui_mode-switch_mgja0_1qy5a_246",
-  "dropdown": "awsui_dropdown_mgja0_1qy5a_250",
-  "dropdown-content": "awsui_dropdown-content_mgja0_1qy5a_266",
-  "start-date-input": "awsui_start-date-input_mgja0_1qy5a_275",
-  "start-time-input": "awsui_start-time-input_mgja0_1qy5a_276",
-  "end-date-input": "awsui_end-date-input_mgja0_1qy5a_277",
-  "end-time-input": "awsui_end-time-input_mgja0_1qy5a_278",
-  "validation-section": "awsui_validation-section_mgja0_1qy5a_282",
-  "validation-error": "awsui_validation-error_mgja0_1qy5a_286",
-  "clear-button": "awsui_clear-button_mgja0_1qy5a_290",
-  "apply-button": "awsui_apply-button_mgja0_1qy5a_294",
-  "cancel-button": "awsui_cancel-button_mgja0_1qy5a_298",
-  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1qy5a_302"
+  "calendar": "awsui_calendar_mgja0_13nyf_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_13nyf_1",
+  "root": "awsui_root_mgja0_13nyf_120",
+  "focus-lock": "awsui_focus-lock_mgja0_13nyf_134",
+  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_13nyf_138",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_13nyf_142",
+  "calendar-container": "awsui_calendar-container_mgja0_13nyf_146",
+  "one-grid": "awsui_one-grid_mgja0_13nyf_149",
+  "calendar-header": "awsui_calendar-header_mgja0_13nyf_153",
+  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_13nyf_159",
+  "calendar-header-month": "awsui_calendar-header-month_mgja0_13nyf_159",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_13nyf_180",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_13nyf_183",
+  "first-grid": "awsui_first-grid_mgja0_13nyf_187",
+  "second-grid": "awsui_second-grid_mgja0_13nyf_188",
+  "date-and-time-container": "awsui_date-and-time-container_mgja0_13nyf_192",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_13nyf_198",
+  "footer": "awsui_footer_mgja0_13nyf_205",
+  "has-clear-button": "awsui_has-clear-button_mgja0_13nyf_212",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_13nyf_219",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_13nyf_226",
+  "label": "awsui_label_mgja0_13nyf_231",
+  "label-enabled": "awsui_label-enabled_mgja0_13nyf_236",
+  "label-text": "awsui_label-text_mgja0_13nyf_240",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_13nyf_245",
+  "mode-switch": "awsui_mode-switch_mgja0_13nyf_249",
+  "dropdown": "awsui_dropdown_mgja0_13nyf_253",
+  "dropdown-content": "awsui_dropdown-content_mgja0_13nyf_269",
+  "start-date-input": "awsui_start-date-input_mgja0_13nyf_278",
+  "start-time-input": "awsui_start-time-input_mgja0_13nyf_279",
+  "end-date-input": "awsui_end-date-input_mgja0_13nyf_280",
+  "end-time-input": "awsui_end-time-input_mgja0_13nyf_281",
+  "validation-section": "awsui_validation-section_mgja0_13nyf_285",
+  "validation-error": "awsui_validation-error_mgja0_13nyf_289",
+  "clear-button": "awsui_clear-button_mgja0_13nyf_293",
+  "apply-button": "awsui_apply-button_mgja0_13nyf_297",
+  "cancel-button": "awsui_cancel-button_mgja0_13nyf_301",
+  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_13nyf_305"
 };
   

package/date-range-picker/styles.scoped.css

@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_calendar_mgja0_1qy5a_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_mgja0_1qy5a_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
+.awsui_calendar_mgja0_13nyf_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_mgja0_13nyf_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_mgja0_1qy5a_1 {
+@keyframes awsui_awsui-motion-fade-in-0_mgja0_13nyf_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_mgja0_1qy5a_93:not(#\9) {
+  .awsui_calendar_mgja0_13nyf_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_mgja0_1qy5a_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_1qy5a_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_mgja0_13nyf_93:not(#\9), .awsui-mode-entering .awsui_calendar_mgja0_13nyf_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -117,7 +117,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_mgja0_1qy5a_120:not(#\9) {
+.awsui_root_mgja0_13nyf_120:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -157,32 +157,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-width: 32em;
 }
 
-.awsui_focus-lock_mgja0_1qy5a_134:not(#\9) {
+.awsui_focus-lock_mgja0_13nyf_134:not(#\9) {
   display: contents;
 }
 
-.awsui_trigger-wrapper_mgja0_1qy5a_138:not(#\9) {
+.awsui_trigger-wrapper_mgja0_13nyf_138:not(#\9) {
   min-width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_trigger-flexbox_mgja0_1qy5a_142:not(#\9) {
+.awsui_trigger-flexbox_mgja0_13nyf_142:not(#\9) {
   display: flex;
 }
 
-.awsui_calendar-container_mgja0_1qy5a_146:not(#\9) {
+.awsui_calendar-container_mgja0_13nyf_146:not(#\9) {
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px));
 }
-.awsui_calendar-container_mgja0_1qy5a_146.awsui_one-grid_mgja0_1qy5a_149:not(#\9) {
+.awsui_calendar-container_mgja0_13nyf_146.awsui_one-grid_mgja0_13nyf_149:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
 }
 
-.awsui_calendar-header_mgja0_1qy5a_153:not(#\9) {
+.awsui_calendar-header_mgja0_13nyf_153:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
-.awsui_calendar-header-months-wrapper_mgja0_1qy5a_159:not(#\9) {
+.awsui_calendar-header-months-wrapper_mgja0_13nyf_159:not(#\9) {
   position: absolute;
   right: 0;
   left: 0;
@@ -195,7 +195,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex: 1;
   pointer-events: none;
 }
-.awsui_calendar-header-month_mgja0_1qy5a_159:not(#\9) {
+.awsui_calendar-header-month_mgja0_13nyf_159:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: 700;
@@ -203,130 +203,133 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   pointer-events: auto;
 }
-.awsui_calendar-next-month-btn_mgja0_1qy5a_180:not(#\9) {
+.awsui_calendar-next-month-btn_mgja0_13nyf_180:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_mgja0_1qy5a_183:not(#\9) {
+.awsui_calendar-prev-month-btn_mgja0_13nyf_183:not(#\9) {
   /* used for identifying element */
 }
 
-.awsui_first-grid_mgja0_1qy5a_187:not(#\9),
-.awsui_second-grid_mgja0_1qy5a_188:not(#\9) {
+.awsui_first-grid_mgja0_13nyf_187:not(#\9),
+.awsui_second-grid_mgja0_13nyf_188:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_date-and-time-container_mgja0_1qy5a_192:not(#\9) {
+.awsui_date-and-time-container_mgja0_13nyf_192:not(#\9) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--size-calendar-grid-width-lxsx0p, 238px), 1fr));
   gap: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_date-and-time-wrapper_mgja0_1qy5a_198:not(#\9) {
+.awsui_date-and-time-wrapper_mgja0_13nyf_198:not(#\9) {
   width: var(--size-calendar-grid-width-lxsx0p, 238px);
   display: grid;
   gap: var(--space-xs-rsr2qu, 8px);
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
 
-.awsui_footer_mgja0_1qy5a_205:not(#\9) {
+.awsui_footer_mgja0_13nyf_205:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   border-top: 1px solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
   padding: 0 var(--space-l-4vl6xu, 20px) var(--space-s-hv8c1d, 12px);
 }
-.awsui_footer_mgja0_1qy5a_205.awsui_has-clear-button_mgja0_1qy5a_212:not(#\9) {
+.awsui_footer_mgja0_13nyf_205.awsui_has-clear-button_mgja0_13nyf_212:not(#\9) {
   justify-content: space-between;
 }
-.awsui_footer_mgja0_1qy5a_205.awsui_one-grid_mgja0_1qy5a_149:not(#\9) {
+.awsui_footer_mgja0_13nyf_205.awsui_one-grid_mgja0_13nyf_149:not(#\9) {
   padding: 0 var(--space-xs-rsr2qu, 8px) var(--space-s-hv8c1d, 12px);
 }
 
-.awsui_footer-button-wrapper_mgja0_1qy5a_219:not(#\9) {
+.awsui_footer-button-wrapper_mgja0_13nyf_219:not(#\9) {
   padding-top: var(--space-s-hv8c1d, 12px);
 }
+.awsui_footer-button-wrapper_mgja0_13nyf_219:not(#\9):last-child {
+  margin-left: auto;
+}
 
-.awsui_icon-wrapper_mgja0_1qy5a_223:not(#\9) {
+.awsui_icon-wrapper_mgja0_13nyf_226:not(#\9) {
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_label_mgja0_1qy5a_228:not(#\9) {
+.awsui_label_mgja0_13nyf_231:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   cursor: default;
 }
 
-.awsui_label_mgja0_1qy5a_228.awsui_label-enabled_mgja0_1qy5a_233:not(#\9):hover > .awsui_trigger-flexbox_mgja0_1qy5a_142 > .awsui_icon-wrapper_mgja0_1qy5a_223 {
+.awsui_label_mgja0_13nyf_231.awsui_label-enabled_mgja0_13nyf_236:not(#\9):hover > .awsui_trigger-flexbox_mgja0_13nyf_142 > .awsui_icon-wrapper_mgja0_13nyf_226 {
   color: var(--color-text-interactive-hover-v3lasm, #000716);
 }
 
-.awsui_label-text_mgja0_1qy5a_237:not(#\9) {
+.awsui_label-text_mgja0_13nyf_240:not(#\9) {
   color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
   font-style: italic;
 }
 
-.awsui_label-token-nowrap_mgja0_1qy5a_242:not(#\9) {
+.awsui_label-token-nowrap_mgja0_13nyf_245:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_mode-switch_mgja0_1qy5a_246:not(#\9) {
+.awsui_mode-switch_mgja0_13nyf_249:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dropdown_mgja0_1qy5a_250:not(#\9) {
+.awsui_dropdown_mgja0_13nyf_253:not(#\9) {
   overflow: auto;
   border-top: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-bottom: 1px solid var(--color-border-container-top-srcvx4, transparent);
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
 }
-.awsui_dropdown_mgja0_1qy5a_250:not(#\9):focus {
+.awsui_dropdown_mgja0_13nyf_253:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_dropdown_mgja0_1qy5a_250:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dropdown_mgja0_13nyf_253:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_dropdown-content_mgja0_1qy5a_266:not(#\9) {
+.awsui_dropdown-content_mgja0_13nyf_269:not(#\9) {
   -webkit-user-select: text;
           user-select: text;
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   width: calc(2 * var(--size-calendar-grid-width-lxsx0p, 238px) + var(--space-xs-rsr2qu, 8px) + 2 * var(--space-l-4vl6xu, 20px));
 }
-.awsui_dropdown-content_mgja0_1qy5a_266.awsui_one-grid_mgja0_1qy5a_149:not(#\9) {
+.awsui_dropdown-content_mgja0_13nyf_269.awsui_one-grid_mgja0_13nyf_149:not(#\9) {
   width: calc(var(--size-calendar-grid-width-lxsx0p, 238px) + 2 * var(--space-l-4vl6xu, 20px));
 }
 
-.awsui_start-date-input_mgja0_1qy5a_275:not(#\9),
-.awsui_start-time-input_mgja0_1qy5a_276:not(#\9),
-.awsui_end-date-input_mgja0_1qy5a_277:not(#\9),
-.awsui_end-time-input_mgja0_1qy5a_278:not(#\9) {
+.awsui_start-date-input_mgja0_13nyf_278:not(#\9),
+.awsui_start-time-input_mgja0_13nyf_279:not(#\9),
+.awsui_end-date-input_mgja0_13nyf_280:not(#\9),
+.awsui_end-time-input_mgja0_13nyf_281:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-section_mgja0_1qy5a_282:not(#\9) {
+.awsui_validation-section_mgja0_13nyf_285:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_validation-error_mgja0_1qy5a_286:not(#\9) {
+.awsui_validation-error_mgja0_13nyf_289:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_clear-button_mgja0_1qy5a_290:not(#\9) {
+.awsui_clear-button_mgja0_13nyf_293:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_apply-button_mgja0_1qy5a_294:not(#\9) {
+.awsui_apply-button_mgja0_13nyf_297:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_cancel-button_mgja0_1qy5a_298:not(#\9) {
+.awsui_cancel-button_mgja0_13nyf_301:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar-aria-live_mgja0_1qy5a_302:not(#\9) {
+.awsui_calendar-aria-live_mgja0_13nyf_305:not(#\9) {
   /* used in test-utils */
 }

package/date-range-picker/styles.selectors.js

@@ -2,43 +2,43 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_mgja0_1qy5a_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1qy5a_1",
-  "root": "awsui_root_mgja0_1qy5a_120",
-  "focus-lock": "awsui_focus-lock_mgja0_1qy5a_134",
-  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_1qy5a_138",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1qy5a_142",
-  "calendar-container": "awsui_calendar-container_mgja0_1qy5a_146",
-  "one-grid": "awsui_one-grid_mgja0_1qy5a_149",
-  "calendar-header": "awsui_calendar-header_mgja0_1qy5a_153",
-  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_1qy5a_159",
-  "calendar-header-month": "awsui_calendar-header-month_mgja0_1qy5a_159",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_1qy5a_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_1qy5a_183",
-  "first-grid": "awsui_first-grid_mgja0_1qy5a_187",
-  "second-grid": "awsui_second-grid_mgja0_1qy5a_188",
-  "date-and-time-container": "awsui_date-and-time-container_mgja0_1qy5a_192",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1qy5a_198",
-  "footer": "awsui_footer_mgja0_1qy5a_205",
-  "has-clear-button": "awsui_has-clear-button_mgja0_1qy5a_212",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1qy5a_219",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_1qy5a_223",
-  "label": "awsui_label_mgja0_1qy5a_228",
-  "label-enabled": "awsui_label-enabled_mgja0_1qy5a_233",
-  "label-text": "awsui_label-text_mgja0_1qy5a_237",
-  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1qy5a_242",
-  "mode-switch": "awsui_mode-switch_mgja0_1qy5a_246",
-  "dropdown": "awsui_dropdown_mgja0_1qy5a_250",
-  "dropdown-content": "awsui_dropdown-content_mgja0_1qy5a_266",
-  "start-date-input": "awsui_start-date-input_mgja0_1qy5a_275",
-  "start-time-input": "awsui_start-time-input_mgja0_1qy5a_276",
-  "end-date-input": "awsui_end-date-input_mgja0_1qy5a_277",
-  "end-time-input": "awsui_end-time-input_mgja0_1qy5a_278",
-  "validation-section": "awsui_validation-section_mgja0_1qy5a_282",
-  "validation-error": "awsui_validation-error_mgja0_1qy5a_286",
-  "clear-button": "awsui_clear-button_mgja0_1qy5a_290",
-  "apply-button": "awsui_apply-button_mgja0_1qy5a_294",
-  "cancel-button": "awsui_cancel-button_mgja0_1qy5a_298",
-  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_1qy5a_302"
+  "calendar": "awsui_calendar_mgja0_13nyf_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_13nyf_1",
+  "root": "awsui_root_mgja0_13nyf_120",
+  "focus-lock": "awsui_focus-lock_mgja0_13nyf_134",
+  "trigger-wrapper": "awsui_trigger-wrapper_mgja0_13nyf_138",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_13nyf_142",
+  "calendar-container": "awsui_calendar-container_mgja0_13nyf_146",
+  "one-grid": "awsui_one-grid_mgja0_13nyf_149",
+  "calendar-header": "awsui_calendar-header_mgja0_13nyf_153",
+  "calendar-header-months-wrapper": "awsui_calendar-header-months-wrapper_mgja0_13nyf_159",
+  "calendar-header-month": "awsui_calendar-header-month_mgja0_13nyf_159",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_mgja0_13nyf_180",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_mgja0_13nyf_183",
+  "first-grid": "awsui_first-grid_mgja0_13nyf_187",
+  "second-grid": "awsui_second-grid_mgja0_13nyf_188",
+  "date-and-time-container": "awsui_date-and-time-container_mgja0_13nyf_192",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_13nyf_198",
+  "footer": "awsui_footer_mgja0_13nyf_205",
+  "has-clear-button": "awsui_has-clear-button_mgja0_13nyf_212",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_13nyf_219",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_13nyf_226",
+  "label": "awsui_label_mgja0_13nyf_231",
+  "label-enabled": "awsui_label-enabled_mgja0_13nyf_236",
+  "label-text": "awsui_label-text_mgja0_13nyf_240",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_13nyf_245",
+  "mode-switch": "awsui_mode-switch_mgja0_13nyf_249",
+  "dropdown": "awsui_dropdown_mgja0_13nyf_253",
+  "dropdown-content": "awsui_dropdown-content_mgja0_13nyf_269",
+  "start-date-input": "awsui_start-date-input_mgja0_13nyf_278",
+  "start-time-input": "awsui_start-time-input_mgja0_13nyf_279",
+  "end-date-input": "awsui_end-date-input_mgja0_13nyf_280",
+  "end-time-input": "awsui_end-time-input_mgja0_13nyf_281",
+  "validation-section": "awsui_validation-section_mgja0_13nyf_285",
+  "validation-error": "awsui_validation-error_mgja0_13nyf_289",
+  "clear-button": "awsui_clear-button_mgja0_13nyf_293",
+  "apply-button": "awsui_apply-button_mgja0_13nyf_297",
+  "cancel-button": "awsui_cancel-button_mgja0_13nyf_301",
+  "calendar-aria-live": "awsui_calendar-aria-live_mgja0_13nyf_305"
 };
   

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

@@ -465,6 +465,7 @@
   --motion-duration-slow-0273ow:180ms;
   --motion-duration-transition-quick-x85tae:90ms;
   --motion-duration-transition-show-paced-ai4wlf:180ms;
+  --motion-duration-transition-show-quick-w3nd9c:90ms;
   --motion-easing-ease-out-quart-z687ml:cubic-bezier(0.165, 0.84, 0.44, 1);
   --motion-easing-refresh-only-a-sy0g8m:cubic-bezier(0, 0, 0, 1);
   --motion-easing-refresh-only-b-nspng9:cubic-bezier(1, 0, 0.83, 1);
@@ -591,6 +592,8 @@
   --shadow-split-side-qv353u:-1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.10);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
   --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.10);
+  --shadow-sticky-column-first-h2plme:4px 0px 20px 1px rgba(0, 7, 22, 0.1);
+  --shadow-sticky-column-last-s13kkz:-4px 0 20px 1px rgba(0, 28, 36, 0.1);
 }
 
 .awsui-dark-mode:not(#\9) {
@@ -942,6 +945,8 @@
   --shadow-split-side-qv353u:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
+  --shadow-sticky-column-first-h2plme:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-column-last-s13kkz:0px 4px 20px 1px rgba(0, 7, 22, 1);
 }
 
 .awsui-compact-mode:not(#\9) {
@@ -992,6 +997,7 @@
   --motion-duration-slow-0273ow:0ms;
   --motion-duration-transition-quick-x85tae:0ms;
   --motion-duration-transition-show-paced-ai4wlf:0ms;
+  --motion-duration-transition-show-quick-w3nd9c:0ms;
   --motion-duration-responsive-dvittz:0ms;
   --motion-duration-expressive-96gzp7:0ms;
   --motion-duration-complex-8zbvzy:0ms;
@@ -1394,6 +1400,8 @@
   --shadow-split-side-qv353u:-1px 0px 1px 0px #192534, -36px 6px 36px -36px rgba(0, 7, 22, 1);
   --shadow-sticky-aijlo6:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-sticky-embedded-qit8ba:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
+  --shadow-sticky-column-first-h2plme:0px 4px 20px 1px rgba(0, 7, 22, 1);
+  --shadow-sticky-column-last-s13kkz:0px 4px 20px 1px rgba(0, 7, 22, 1);
 }
 
 .awsui-context-flashbar:not(#\9) {

package/internal/components/options-list/index.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { BaseComponentProps } from '../../base-component';
 import { NonCancelableEventHandler, CancelableEventHandler, BaseKeyDetail } from '../../events';
+import { DropdownStatusProps } from '../dropdown-status';
 export interface OptionsListProps extends BaseComponentProps {
     open?: boolean;
+    statusType: DropdownStatusProps.StatusType;
     /**
      * Options list
      */

package/internal/components/options-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAKtB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;AAmFD,wBAA6C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,mBAAmB,CAAC,UAAU,CAAC;IAC3C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;AAmFD,wBAA6C"}

package/internal/components/options-list/index.js

@@ -16,7 +16,7 @@ const getItemIndex = (containerRef, event) => {
     return mouseTarget ? parseInt(mouseTarget) : -1;
 };
 const OptionsList = (_a, ref) => {
-    var { open, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby, ariaDescribedby } = _a, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby", "ariaDescribedby"]);
+    var { open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby, ariaDescribedby } = _a, restProps = __rest(_a, ["open", "statusType", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby", "ariaDescribedby"]);
     const baseProps = getBaseProps(restProps);
     const menuRef = useRef(null);
     const handleScroll = useStableEventHandler(() => {
@@ -30,11 +30,10 @@ const OptionsList = (_a, ref) => {
         }
     });
     useEffect(() => {
-        if (!open) {
-            return;
+        if (open && statusType === 'pending') {
+            handleScroll();
         }
-        handleScroll();
-    }, [open, handleScroll]);
+    }, [open, statusType, handleScroll]);
     const className = clsx(styles['options-list'], {
         [styles['decrease-top-margin']]: decreaseTopMargin,
     });