@fortanix/baklava 1.0.0-beta-20241114

package/src/components/overlays/DropdownMenu/DropdownMenu.module.scss

@@ -0,0 +1,113 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  $bk-dropdown-menu-min-width: 14rem;
+  
+  .bk-dropdown-menu {
+    @include bk.component-base(bk-dropdown-menu);
+    
+    --bk-dropdown-menu-transition-duration: 150ms;
+    
+    min-width: $bk-dropdown-menu-min-width;
+    max-height: 18rem;
+    padding-bottom: 8px;
+    overflow-y: auto;
+    
+    background: bk.$theme-dropdown-menu-menu-background-default;
+    border: 1px solid bk.$theme-dropdown-menu-menu-border-default;
+    
+    border-radius: 4px;
+    &[data-placement^="bottom"] {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &[data-placement^="top"] {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    
+    &[popover] {
+      &:not(:popover-open) { display: none; }
+      
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          display var(--bk-dropdown-menu-transition-duration) allow-discrete,
+          overlay var(--bk-dropdown-menu-transition-duration) allow-discrete,
+          opacity var(--bk-dropdown-menu-transition-duration) ease-out,
+          translate var(--bk-dropdown-menu-transition-duration) ease-out;
+          /* transform */ /* Note: don't animate `transform` with floating-ui, since it relies on it for positioning */
+        opacity: 0;
+        translate: 0 -1rem;
+      }
+      
+      &:popover-open {
+        opacity: 1;
+        translate: none;
+        
+        @media (prefers-reduced-motion: no-preference) {
+          @starting-style {
+            opacity: 0;
+            translate: 0 -1rem;
+          }
+        }
+      }
+    }
+    
+    > li {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      
+      &:not(:first-child) {
+        border-top: 1px solid bk.$theme-dropdown-menu-menu-border-default;
+      }
+      
+      &:hover {
+        background: bk.$theme-dropdown-menu-menu-background-hover;
+      }
+      &[aria-selected="true"] {
+        background: bk.$theme-dropdown-menu-menu-background-hover;
+        box-shadow: inset 5px 0 bk.$theme-dropdown-menu-menu-tab-default;
+      }
+      
+      @media (prefers-reduced-motion: no-preference) {
+        transition: box-shadow 150ms ease-in;
+      }
+      
+      .bk-dropdown-menu__item {
+        padding: 8px 14px;
+        
+        @include bk.font(bk.$font-family-body);
+        font-size: 14px;
+        line-height: 24px;
+        
+        &:focus-visible {
+          @include bk.focus-inset;
+        }
+        
+        display: flex;
+        align-items: center;
+        gap: bk.$spacing-3;
+        
+        .bk-dropdown-menu__item__icon {
+          font-size: 1.4em;
+        }
+      }
+    }
+    
+    &[popover] > li {
+      @media (prefers-reduced-motion: no-preference) {
+        /* Delay transition until after close is complete to make it less jarring during close animation */
+        transition-delay: var(--bk-dropdown-menu-transition-duration);
+      }
+    }
+  }
+}

package/src/components/overlays/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,91 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { DropdownMenu, type OptionKey, type OptionDef, DropdownMenuContext } from './DropdownMenu.tsx';
+
+
+type DropdownMenuArgs = React.ComponentProps<typeof DropdownMenu>;
+type Story = StoryObj<DropdownMenuArgs>;
+
+export default {
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <DropdownMenu {...args}/>,
+} satisfies Meta<DropdownMenuArgs>;
+
+
+type DropdownMenuControlledProps = React.PropsWithChildren<Partial<DropdownMenuContext>>;
+const DropdownMenuControlled = ({ children, ...dropdownContext }: DropdownMenuControlledProps) => {
+  const [selectedOption, setSelectedOption] = React.useState<null | OptionKey>(null);
+  const context: DropdownMenuContext = {
+    selectedOption,
+    selectOption: (option: OptionDef) => { setSelectedOption(option.optionKey); },
+    close: () => {},
+    ...dropdownContext,
+  };
+  
+  return (
+    // @ts-ignore React 19
+    <DropdownMenuContext value={context}>
+      {children}
+    </DropdownMenuContext>
+  );
+};
+
+export const Standard: Story = {
+  name: 'DropdownMenu',
+  decorators: [Story => <DropdownMenuControlled><Story/></DropdownMenuControlled>],
+  args: {
+    children: (
+      <>
+        <DropdownMenu.Option optionKey="option-1" label="Option 1"/>
+        <DropdownMenu.Option optionKey="option-2" label="Option 2"/>
+        <DropdownMenu.Option optionKey="option-3" label="Option 3"/>
+        <DropdownMenu.Option optionKey="option-4" label="Option 4"/>
+        <DropdownMenu.Option optionKey="option-5" label="Option 5"/>
+        <DropdownMenu.Option optionKey="option-6" label="Option 6"/>
+        <DropdownMenu.Option optionKey="option-7" label="Option 7"/>
+        <DropdownMenu.Option optionKey="option-8" label="Option 8"/>
+        <DropdownMenu.Option optionKey="option-9" label="Option 9"/>
+      </>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  decorators: [Story => <DropdownMenuControlled><Story/></DropdownMenuControlled>],
+  args: {
+    children: (
+      <>
+        <DropdownMenu.Action itemKey="action-1" icon="docs" label="Action 1" onActivate={() => {}}/>
+        <DropdownMenu.Action itemKey="action-2" icon="key-link" label="Action 2" onActivate={() => {}}/>
+      </>
+    ),
+  },
+};
+
+export const WithActionsAndOptions: Story = {
+  decorators: [Story => <DropdownMenuControlled><Story/></DropdownMenuControlled>],
+  args: {
+    children: (
+      <>
+        <DropdownMenu.Option optionKey="option-1" label="Option 1"/>
+        <DropdownMenu.Option optionKey="option-2" label="Option 2"/>
+        <DropdownMenu.Action itemKey="action-1" icon="edit" label="Action 1" onActivate={() => {}}/>
+        <DropdownMenu.Action itemKey="action-2" icon="delete" label="Action 2" onActivate={() => {}}/>
+      </>
+    ),
+  },
+};

package/src/components/overlays/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,155 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { type IconName, Icon } from '../../graphics/Icon/Icon.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+
+import cl from './DropdownMenu.module.scss';
+
+
+export { cl as DropdownMenuClassNames };
+
+
+export type OptionKey = string;
+export type OptionDef = { optionKey: OptionKey, label: string };
+
+export type OptionState = { option: OptionDef, selected: boolean };
+export type DropdownMenuContext = {
+  // Additional props to pass to the option
+  optionProps?: undefined | ((optionState: OptionState) => Record<string, unknown>),
+  
+  selectedOption: null | OptionKey, // The key of the currently selected option (if any)
+  selectOption: (option: OptionDef) => void, // Select the given option
+  
+  close: () => void, // Request dropdown menu close
+};
+export const DropdownMenuContext = React.createContext<null | DropdownMenuContext>(null);
+export const useDropdownMenuContext = (): DropdownMenuContext => {
+  const context = React.use(DropdownMenuContext);
+  if (context === null) { throw new Error(`Missing DropdownMenuContext provider`); }
+  return context;
+};
+
+
+export type ActionProps = React.PropsWithChildren<ComponentProps<typeof Button> & {
+  /** A unique identifier for this action. */
+  itemKey: OptionKey,
+  
+  /** The human-readable label to be shown. */
+  label: string,
+  
+  /** The icon to be displayed (if any). */
+  icon?: undefined | IconName,
+  
+  /** The event handler for when the user activates this action. */
+  onActivate: (context: DropdownMenuContext) => void,
+}>;
+/**
+ * A dropdown menu item that can be triggered to perform some action.
+ */
+export const Action = (props: ActionProps) => {
+  const { itemKey, label, icon, onActivate, ...propsRest } = props;
+  const context = useDropdownMenuContext();
+  const { optionProps, selectedOption, selectOption } = context;
+  
+  const option: OptionDef = { optionKey: itemKey, label };
+  const isSelected = selectedOption === itemKey;
+  
+  return (
+    <li aria-selected={isSelected}>
+      <Button unstyled
+        role="option"
+        {...propsRest}
+        {...optionProps?.({
+          option,
+          selected: false,
+        })}
+        // FIXME: merge these props with `optionProps()`
+        className={cx(
+          cl['bk-dropdown-menu__item'],
+          cl['bk-dropdown-menu__item--action'],
+          propsRest.className,
+        )}
+        onClick={() => { onActivate(context); }}
+      >
+        {icon && <Icon icon={icon}/>}
+        {label ?? propsRest.children}
+      </Button>
+    </li>
+  );
+};
+
+
+export type OptionProps = React.PropsWithChildren<ComponentProps<typeof Button> & {
+  /** A unique identifier for this option. */
+  optionKey: OptionKey,
+  
+  /** The human-readable label to be shown. */
+  label: string,
+  
+  /** The icon to be displayed (if any) */
+  icon?: undefined | IconName,
+}>;
+/**
+ * A dropdown menu item that can be selected.
+ */
+export const Option = (props: OptionProps) => {
+  const { optionKey, label, icon, ...propsRest } = props;
+  const { selectedOption, selectOption, optionProps } = useDropdownMenuContext();
+  
+  const option: OptionDef = { optionKey, label };
+  const isSelected = selectedOption === optionKey;
+  
+  return (
+    <li aria-selected={isSelected}>
+      <Button unstyled
+        role="option"
+        {...propsRest}
+        {...optionProps?.({
+          option,
+          selected: isSelected,
+        })}
+        // FIXME: merge these props with `optionProps()`
+        className={cx(
+          cl['bk-dropdown-menu__item'],
+          cl['bk-dropdown-menu__item--option'],
+          propsRest.className,
+        )}
+        onClick={() => { selectOption(option); }}
+      >
+        {icon && <Icon icon={icon} className={cl['bk-dropdown-menu__item__icon']}/>}
+        <span className={cl['bk-dropdown-menu__item__label']}>{label ?? propsRest.children}</span>
+      </Button>
+    </li>
+  );
+};
+
+export type DropdownMenuProps = React.PropsWithChildren<ComponentProps<'ul'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * Dropdown menu with a list of selectable options.
+ */
+export const DropdownMenu = Object.assign(
+  (props: DropdownMenuProps) => {
+    const { children, unstyled = false, ...propsRest } = props;
+    
+    return (
+      <ul
+        {...propsRest}
+        className={cx(
+          'bk',
+          { [cl['bk-dropdown-menu']]: !unstyled },
+        )}
+      >
+        {children}
+      </ul>
+    );
+  },
+  { Action, Option },
+);

package/src/components/overlays/DropdownMenu/DropdownMenuProvider.module.scss

@@ -0,0 +1,105 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  $bk-dropdown-min-width: 14rem;
+  
+  .bk-dropdown {
+    @include bk.component-base(bk-dropdown);
+    
+    /* Make sure the content does not have any extra space (e.g. under the line) due to baseline alignment */
+    display: flex;
+    
+    > input {
+      min-width: $bk-dropdown-min-width;
+      caret-color: transparent; /* FIXME: find better way to manage the input state */
+    }
+  }
+  
+  .bk-dropdown__dropdown {
+    min-width: $bk-dropdown-min-width;
+    max-height: 18rem;
+    overflow-y: auto;
+    
+    background: bk.$theme-dropdown-menu-menu-background-default;
+    border: 1px solid bk.$theme-dropdown-menu-menu-border-default;
+    
+    border-radius: 4px;
+    &[data-placement="bottom"] {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &[data-placement="top"] {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    
+    display: flex;
+    &:not(:popover-open) { display: none; }
+    flex-direction: column;
+    align-items: stretch;
+    
+    > li {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      
+      &:not(:first-child) {
+        border-top: 1px solid bk.$theme-dropdown-menu-menu-border-default;
+      }
+      
+      &:hover {
+        background: bk.$theme-dropdown-menu-menu-background-hover;
+      }
+      &[aria-selected="true"] {
+        background: bk.$theme-dropdown-menu-menu-background-hover;
+        box-shadow: inset 5px 0 bk.$theme-dropdown-menu-menu-tab-default;
+      }
+      
+      @media (prefers-reduced-motion: no-preference) {
+        /* Add a transition to make the switch to selected state less jarring during close animation */
+        transition: box-shadow 300ms ease-in;
+      }
+    }
+    
+    @media (prefers-reduced-motion: no-preference) {
+      --transition-duration: 150ms;
+      transition:
+        display var(--transition-duration) allow-discrete,
+        overlay var(--transition-duration) allow-discrete,
+        opacity var(--transition-duration) ease-out,
+        translate var(--transition-duration) ease-out;
+        /* transform */ /* Note: don't animate `transform` with floating-ui, since it relies on it for positioning */
+      opacity: 0;
+      translate: 0 -1rem;
+    }
+    
+    &:popover-open {
+      opacity: 1;
+      translate: none;
+      
+      @starting-style {
+        opacity: 0;
+        translate: 0 -1rem;
+      }
+    }
+  }
+  
+  .bk-dropdown__option {
+    padding: 8px 14px;
+    
+    @include bk.font(bk.$font-family-body);
+    font-size: 14px;
+    line-height: 24px;
+    
+    &:focus-visible {
+      outline: none !important; /* Override accessibility layer */
+      box-shadow: inset 2px 2px var(--bk-focus-outline-color), inset -2px -2px var(--bk-focus-outline-color);
+    }
+    
+    display: flex;
+  }
+}

package/src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx

@@ -0,0 +1,71 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { Button } from '../../actions/Button/Button.tsx';
+
+import { DropdownMenuProvider } from './DropdownMenuProvider.tsx';
+
+
+type DropdownMenuProviderArgs = React.ComponentProps<typeof DropdownMenuProvider>;
+type Story = StoryObj<DropdownMenuProviderArgs>;
+
+export default {
+  component: DropdownMenuProvider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <DropdownMenuProvider {...args}/>,
+} satisfies Meta<DropdownMenuProviderArgs>;
+
+
+export const Standard: Story = {
+  name: 'DropdownMenuProvider',
+  args: {
+    children: ({ props, state }) => (
+      <Button variant="primary" {...props()}>
+        {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown'}
+      </Button>
+    ),
+    items: (
+      <>
+        <DropdownMenuProvider.Option optionKey="option-1" label="Option 1"/>
+        <DropdownMenuProvider.Option optionKey="option-2" label="Option 2"/>
+        <DropdownMenuProvider.Option optionKey="option-3" label="Option 3"/>
+        <DropdownMenuProvider.Option optionKey="option-4" label="Option 4"/>
+        <DropdownMenuProvider.Option optionKey="option-5" label="Option 5"/>
+        <DropdownMenuProvider.Option optionKey="option-6" label="Option 6"/>
+      </>
+    ),
+  },
+};
+
+export const WithPlacement: Story = {
+  args: {
+    placement: 'right',
+    children: ({ props, state }) => (
+      <Button variant="primary" {...props()}>
+        {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown placed to the right'}
+      </Button>
+    ),
+    items: (
+      <>
+        <DropdownMenuProvider.Option optionKey="option-1" label="Option 1"/>
+        <DropdownMenuProvider.Option optionKey="option-2" label="Option 2"/>
+        <DropdownMenuProvider.Option optionKey="option-3" label="Option 3"/>
+        <DropdownMenuProvider.Option optionKey="option-4" label="Option 4"/>
+        <DropdownMenuProvider.Option optionKey="option-5" label="Option 5"/>
+        <DropdownMenuProvider.Option optionKey="option-6" label="Option 6"/>
+      </>
+    ),
+  },
+};