Replace all instances of Dropdown with ListBox, and remove the Dropdown component

.storybook/preview-head.html

@@ -1,3 +1,5 @@
+<!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
+
 <style>
   /* This should be the same as the ordering in `layers.css`. */
   @layer reset, baklava, app, accessibility, storybook;

.storybook/preview.tsx

@@ -118,6 +118,8 @@ const preview = {
                   'InputPassword',
                 ],
                 'TextArea',
+                'ListBox',
+                'ListBoxLazy',
                 'Select',
                 'DatePicker',
                 'DatePickerRange',

.vscode/custom.css-data.json

@@ -3,7 +3,9 @@
   "version": 1.1,
   "properties": [
     { "name": "interpolate-size" },
-    { "name": "position-try-fallbacks" }
+    { "name": "position-try-fallbacks" },
+    { "name": "reading-flow" },
+    { "name": "reading-order" }
   ],
   "atDirectives": [
     {

app/Demo.tsx

@@ -27,7 +27,9 @@
         <Header slot="actions">
           <UserMenu userName="Anand Kashyap"/>
           {/* <UserMenu userName="Anand Kashyap – Very Long Name That Will Overflow"/> */}
-          <AccountSelector className="select-action"/>
+          <AccountSelector className="select-action" accounts={null}>
+            {accountSelected => accountSelected ?? 'Accounts'}
+          </AccountSelector>
           <SolutionSelector className="select-action"/>
         </Header>
       </AppLayout.Header>

app/lib.ts

@@ -51,6 +51,8 @@ export { TextArea } from '../src/components/forms/controls/TextArea/TextArea.tsx
 export { DatePicker } from '../src/components/forms/controls/DatePicker/DatePicker.tsx';
 export { TimePicker } from '../src/components/forms/controls/TimePicker/TimePicker.tsx';
 export { DatePickerRange } from '../src/components/forms/controls/DatePickerRange/DatePickerRange.tsx';
+export { ListBox } from '../src/components/forms/controls/ListBox/ListBox.tsx';
+export { ListBoxLazy } from '../src/components/forms/controls/ListBoxLazy/ListBoxLazy.tsx';
 export { Select } from '../src/components/forms/controls/Select/Select.tsx';
 
 // Forms > Fields
@@ -77,7 +79,6 @@ export { Tab, Tabs } from '../src/components/navigations/Tabs/Tabs.tsx';
 export { SpinnerModal } from '../src/components/overlays/SpinnerModal/SpinnerModal.tsx';
 export { DialogModal } from '../src/components/overlays/DialogModal/DialogModal.tsx';
 export { DialogOverlay } from '../src/components/overlays/DialogOverlay/DialogOverlay.tsx';
-export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx';
 export { DropdownMenuProvider } from '../src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx';
 export { ToastProvider, notify } from '../src/components/overlays/ToastProvider/ToastProvider.tsx';
 export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx';

package.json

@@ -110,15 +110,17 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "message-tag": "^0.10.0",
-    "classnames": "^2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
+    "classnames": "^2.5.1",
+    "zustand": "^5.0.3",
     "@floating-ui/react": "^0.27.6",
     "react-table": "^7.8.0",
     "react-datepicker": "^8.0.0",
     "effect": "^3.12.9",
     "react-hook-form": "^7.54.2",
+    "@tanstack/react-virtual": "^3.13.2",
     "optics-ts": "^2.4.1"
   },
   "peerDependencies": {

package.json.js

@@ -171,18 +171,19 @@ const packageConfig = {
     'message-tag': '^0.10.0',
 
     // React
-    'classnames': '^2.5.1',
     'react': '^19.0.0',
     'react-dom': '^19.0.0',
     'react-error-boundary': '^5.0.0',
-    //'@uidotdev/usehooks': '^2.4.1',
+    'classnames': '^2.5.1',
+    'zustand': '^5.0.3',
 
     '@floating-ui/react': '^0.27.6',
     'react-table': '^7.8.0',
     'react-datepicker': '^8.0.0',
 
     'effect': '^3.12.9',
     'react-hook-form': '^7.54.2',
+    '@tanstack/react-virtual': '^3.13.2',
 
     'optics-ts': '^2.4.1',
   },

scripts/import.ts

@@ -216,6 +216,10 @@ const runImportColorsSemantic = async (args: ScriptArgs) => {
       throw new Error(`Should not happen`);
     }
 
+    if (tokenValue.match(/#[a-z0-9]{3,6}/i)) {
+      throw new Error(`Found semantic color token defined using a hardcoded hex color: '${tokenName}'`);
+    }
+
     // Replace references to primitive color tokens with their Sass variable equivalent
     const color = tokenValue.replaceAll(/var\(--(.+?)-(\d+)\)/g, '\$color-$1-$2');
 

src/components/actions/Button/Button.tsx

@@ -147,7 +147,7 @@ export const Button = (props: ButtonProps) => {
   return (
     <button
       aria-label={accessibleName}
-      aria-disabled={!isInteractive}
+      aria-disabled={isInteractive ? undefined : true}
       disabled={disabled}
       {...propsRest}
       type={buttonType} // Not overridable

src/components/containers/Banner/Banner.module.scss

@@ -34,26 +34,22 @@
     color: bk.$theme-banner-text-default;
 
     .bk-banner__header {
-      display: flex;
-      flex-direction: row;
+      @include bk.flex-row;
       align-items: flex-start;
       gap: bk.$spacing-4;
 
       .bk-banner__header__text {
         margin-inline-end: auto; // Space between text and actions
 
-        min-inline-size: 0;
-        display: flex;
-        flex-flow: row wrap;
+        @include bk.flex-row;
+        flex-wrap: wrap;
         gap: bk.$spacing-1;
 
         .bk-banner__title {
           $icon-size: 1.3em;
           margin-inline-start: calc(-1 * (bk.$spacing-2 + $icon-size));
 
-          min-inline-size: 0;
-          display: flex;
-          flex-direction: row;
+          @include bk.flex-row;
           gap: bk.$spacing-2;
           align-items: center;
 
@@ -73,8 +69,9 @@
         }
       }
       .bk-banner__actions {
-        display: flex;
-        flex-direction: row;
+        flex-shrink: 0;
+
+        @include bk.flex-row;
         align-items: center;
         gap: bk.$spacing-3 calc(bk.$spacing-6 / 2);
 

src/components/containers/Dialog/Dialog.module.scss

@@ -67,19 +67,17 @@
       margin-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-7 / 2);
       padding-inline: var(--bk-dialog-padding-inline);
 
-      display: flex;
-      flex-direction: row;
-      gap: bk.$spacing-3;
+      @include bk.flex($dir: row, $gap: bk.$spacing-3);
     }
 
     .bk-dialog__content__icon-aside {
       align-self: flex-start;
 
-      display: flex;
-      flex-direction: row;
-      gap: bk.$spacing-3;
+      @include bk.flex-row($gap: bk.$spacing-3);
     }
 
+    .bk-dialog__content__body { --keep: ; }
+
     .bk-dialog__actions {
       position: sticky;
       inset-block-end: -1px; // -1px to prevent bleed through due to pixel rounding

src/components/containers/Dialog/Dialog.stories.tsx

@@ -97,6 +97,7 @@ export const DialogWithAside: Story = {
             </FieldLayout>
           </FormLayout>
         </Form>
+        <p>ThisIsAVeryLongStringOfTextWithoutAnySpacesToTestWhetherWeHandleWordBreaksCorrectlyWhenTheTextOverflowsTheContainingElement</p>
       </Dialog>
     );
   },

src/components/containers/Dialog/Dialog.tsx

@@ -182,7 +182,7 @@ export const Dialog = Object.assign(
               role="document" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role
               // FIXME: make this focusable instead of the <dialog> as per guidelines on MDN?
               //tabIndex={0}
-              className={cx('bk-prose')}
+              className={cx(cl['bk-dialog__content__body'], 'bk-prose')}
             >
               {children}
             </section>