@fortanix/baklava 1.0.0-beta-20241114

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

@@ -0,0 +1,168 @@
+/* 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 { mergeRefs } from '../../../util/reactUtil.ts';
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { useListNavigation, type Placement } from '@floating-ui/react';
+import { usePopover } from '../../util/Popover/Popover.tsx';
+
+import { DropdownMenuContext, type OptionKey, type OptionDef, Action, Option, DropdownMenu } from './DropdownMenu.tsx';
+
+import cl from './DropdownMenuProvider.module.scss';
+
+
+export { cl as DropdownMenuClassNames };
+
+
+export type AnchorRenderArgs = {
+  props: (userProps?: undefined | React.HTMLProps<Element>) => Record<string, unknown>,
+  state: DropdownMenuContext,
+};
+export type DropdownMenuProviderProps = Omit<ComponentProps<typeof DropdownMenu>, 'children'> & {
+  /**
+  * The content to render, which should contain the anchor. This should be a render prop which takes props to
+  * apply on the anchor element. Alternatively, a single element can be provided to which the props are applied.
+  */
+  children?: ((args: AnchorRenderArgs) => React.ReactNode) | React.ReactNode,
+  
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** The dropdown items. */
+  items: React.ReactNode,
+  
+  /** Override the default placement */
+  placement?: undefined | Placement,
+  
+  /** Enable more precise tracking of the anchor, at the cost of performance. */
+  enablePreciseTracking?: undefined | boolean,
+};
+/**
+ * Provider for a dropdown menu overlay with its trigger.
+ */
+export const DropdownMenuProvider = Object.assign(
+  (props: DropdownMenuProviderProps) => {
+    const { children, unstyled = false, items, placement = 'bottom', enablePreciseTracking, ...propsRest } = props;
+    
+    const selectedRef = React.useRef<React.ElementRef<typeof Option>>(null);
+    const [selected, setSelected] = React.useState<null | OptionDef>(null);
+    
+    const listRef = React.useRef([]);
+    const [activeIndex, setActiveIndex] = React.useState<null | number>(null);
+    const {
+      refs,
+      placement: placementEffective,
+      floatingStyles,
+      getReferenceProps,
+      getFloatingProps,
+      getItemProps,
+      setIsOpen,
+    } = usePopover({
+      placement: placement,
+      offset: 8,
+      floatingUiFlipOptions: {
+        fallbackAxisSideDirection: 'none',
+        fallbackStrategy: 'initialPlacement',
+      },
+      floatingUiInteractions: context => [
+        useListNavigation(context, {
+          listRef,
+          activeIndex,
+          onNavigate: setActiveIndex,
+        }),
+      ],
+    });
+    
+    const context: DropdownMenuContext = React.useMemo((): DropdownMenuContext => ({
+      optionProps: () => getItemProps(),
+      selectedOption: selected?.optionKey ?? null,
+      selectOption: (option: OptionDef) => {
+        setSelected(option);
+        setIsOpen(false);
+        selectedRef.current?.focus(); // Return focus
+      },
+      close: () => { setIsOpen(false); },
+    }), [selected, setIsOpen, getItemProps]);
+    
+    const renderAnchor = () => {
+      const anchorProps: AnchorRenderArgs['props'] = (userProps?: undefined | React.HTMLProps<Element>) => {
+        const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
+        if (typeof userPropsRef === 'string') {
+          // We can't merge refs if one of the refs is a string
+          console.error(`Failed to render DropdownMenuProvider, due to use of legacy string ref`);
+          return (userProps ?? {}) as Record<string, unknown>;
+        }
+        
+        return {
+          ...getReferenceProps(userProps),
+          ref: userPropsRef ? mergeRefs(userPropsRef, refs.setReference) : refs.setReference,
+        };
+      };
+      
+      if (typeof children === 'function') {
+        return children({ props: anchorProps, state: context });
+      }
+      
+      // If a render prop is not used, try to attach it to the element directly.
+      // NOTE: `cloneElement` is marked as a legacy function by React. Recommended is to use a render prop instead.
+      if (!React.isValidElement(children)) {
+        return <span {...anchorProps()}>{children}</span>;
+      }
+      if (React.Children.count(children) === 1) {
+        return React.cloneElement(children, anchorProps(children.props as React.HTMLProps<Element>));
+      }
+      
+      console.error(`Invalid children passed to DropdownMenuProvider, expected a render prop or single child element.`);
+      return children;
+    };
+    
+    return (
+      // @ts-ignore React 19
+      <DropdownMenuContext value={context}>
+        {renderAnchor()}
+        
+        <DropdownMenu
+          {...getFloatingProps({
+            popover: 'manual',
+            style: floatingStyles,
+            ...propsRest,
+            className: cx(propsRest.className),
+          })}
+          tabIndex={undefined}
+          ref={mergeRefs<HTMLUListElement>(refs.setFloating, propsRest.ref)}
+          data-placement={placementEffective}
+        >
+          {items}
+        </DropdownMenu>
+        {/* <Button variant="primary"
+          {...propsRest}
+          className={cx(
+            'bk',
+            { [cl['bk-dropdown']]: !unstyled },
+            propsRest.className,
+          )}
+          {...getReferenceProps()}
+          ref={mergeRefs(selectedRef, refs.setReference as any)}
+        >
+          {context.selectedOption ? `Selected: ${context.selectedOption}` : 'Open dropdown'}
+        </Button> */}
+        {/* <ul
+          ref={refs.setFloating}
+          data-placement={placement}
+          {...getFloatingProps({
+            popover: 'manual',
+            style: floatingStyles,
+            className: cl['bk-dropdown__dropdown'],
+          })}
+          tabIndex={undefined} // Overwrite `tabIndex={-1}` so that we don't allow programmatic focus
+        >
+          {children}
+        </ul> */}
+      </DropdownMenuContext>
+    );
+  },
+  { Action, Option },
+);

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

@@ -0,0 +1,185 @@
+/* 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;
+@use '../../containers/Panel/Panel.module.scss' as Panel;
+
+@layer baklava.components {
+  .bk-modal {
+    @include bk.component-base(bk-modal);
+    
+    @include Panel.bk-panel;
+    
+    /* --bk-modal-background-color: color-mix(in srgb, var(--bk-panel-background-color) 80%, transparent); */
+    --bk-modal-background-color:  var(--bk-panel-background-color);
+    
+    margin: auto;
+    padding: 0;
+    height: fit-content;
+    min-height: bk.$spacing-16;
+    max-width: calc(100% - bk.$spacing-6);
+    max-height: calc(100% - bk.$spacing-6);
+    
+    box-shadow: 0 8px 10px 1px rgba(0 0 0 / 14%), 0 3px 14px 2px rgba(0 0 0 / 12%), 0 5px 5px -3px rgba(0 0 0 / 3%);
+    background-color: var(--bk-modal-background-color);
+    border-radius: bk.$sizing-2;
+    
+    display: none; /* flex */
+    flex-direction: column;
+    
+    &.bk-modal-small {
+      // 484px
+      width: calc(484 * bk.$size-1);
+    }
+    &.bk-modal-medium {
+      // 684px
+      width: calc(684 * bk.$size-1);
+    }
+    &.bk-modal-large {
+      // 784px
+      width: calc(784 * bk.$size-1);
+    }
+    &.bk-modal-x-large {
+      // 906px
+      width: calc(906 * bk.$size-1);
+    }
+    &.bk-modal-fullscreen {
+      width: calc(100% - bk.$spacing-3);
+      height: calc(100% - bk.$spacing-3);
+    }
+    .bk-modal__header {
+      position: sticky;
+      top: 0;
+      padding: 0;
+      
+      background: var(--bk-modal-background-color);
+      
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      margin-bottom: bk.$spacing-7;
+      
+      h1 {
+        font-size: 16px; // do not match bk variable sizes
+        font-weight: bk.$font-weight-semibold;
+      }
+      
+      :nth-child(1 of :global(.action)) {
+        margin-left: auto;
+      }
+    }
+    .bk-modal__close {
+      position: absolute;
+      right: bk.$spacing-8;
+      top: bk.$spacing-8;
+      z-index: 1;
+    }
+    .bk-modal__container {
+      padding: bk.$spacing-8;
+      padding-bottom: bk.$spacing-9;
+      flex-direction: column;
+      overflow: hidden;
+      display: flex;
+      flex: 1;
+    }
+    .bk-modal__content {
+      flex: 1; /* Make sure we cover all available space */
+      overflow: auto;
+    }
+
+    transition:
+      opacity 1ms ease-out,
+      scale 1ms ease-out,
+      overlay 1ms ease-out allow-discrete,
+      display 1ms ease-out allow-discrete;
+    opacity: 0;
+    scale: 0.98 0.98;
+    transition-duration: 200ms; /* Exit transition duration */
+    
+    /* Variant: slide out */
+    --modal-slide-out-inset: var(--bk-sizing-3);
+    &:is(.bk-modal--slide-out-left, .bk-modal--slide-out-right) {
+      position: fixed;
+      inset: 0;
+      margin: 0;
+      width: 60vw;
+      height: auto;
+      max-height: 100%;
+      
+      &.bk-modal--slide-out-left {
+        right: auto;
+        transform-origin: center left;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &.bk-modal--slide-out-right {
+        left: auto;
+        transform-origin: center right;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      
+      opacity: 1;
+      transform: scaleX(0);
+      &:modal {
+        transform: scaleX(1);
+        
+        @starting-style {
+          opacity: 1;
+          transform: scaleX(0);
+        }
+      }
+      
+      .bk-modal__content {
+        overflow: auto;
+      }
+    }
+    
+    /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs */
+    
+    &:modal {
+      display: flex;
+      opacity: 1;
+      scale: 1 1;
+      transition-duration: 120ms; /* Enter transition duration */
+      transition-timing-function: ease-in;
+      
+      @starting-style {
+        opacity: 0;
+        scale: 1.05 1.05;
+      }
+    }
+  }
+  
+  /* Note: `::backdrop` cannot be nested/scoped (at least in Chrome v120) */
+  .bk-modal::backdrop {
+    --transition-time: 200ms;
+    background-color: rgb(0 0 0 / 0%);
+    transition:
+      display var(--transition-time) allow-discrete,
+      overlay var(--transition-time) allow-discrete,
+      background-color var(--transition-time);
+  }
+  .bk-modal:modal::backdrop,
+  .bk-modal-spinner::backdrop {
+    background-color: rgb(0 0 0 / 20%);
+    backdrop-filter: blur(5px); /* Should be in px, not rem (blur effect should be constant) */
+  }
+  @starting-style {
+    .bk-modal:modal::backdrop {
+      background-color: rgb(0 0 0 / 0%);
+    }
+  }
+  
+  .bk-modal-spinner {
+    outline: none !important; // prevent blue border on Esc pressing
+    
+    .bk-modal__content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+/* 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 * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ModalClassNames as cl } from './Modal.tsx';
+import { OverflowTester } from '../../../util/storybook/OverflowTester.tsx';
+import { Modal } from './Modal.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Spinner } from '../../graphics/Spinner/Spinner.tsx';
+
+
+type ButtonArgs = React.ComponentProps<typeof Modal>;
+type Story = StoryObj<ButtonArgs>;
+
+export default {
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<ButtonArgs>;
+
+
+type ModalWithTriggerProps = Omit<React.ComponentProps<typeof Modal>, 'active' | 'onClose'> & {
+  triggerLabel?: string,
+};
+const ModalWithTrigger = ({ triggerLabel = 'Open modal', ...modalProps }: ModalWithTriggerProps) => {
+  const [active, setActive] = React.useState(false);
+  const onClose = React.useCallback(() => { setActive(false); }, []);
+  return (
+    <>
+      <Button variant="primary" onPress={() => { setActive(true); }}>{triggerLabel}</Button>
+      <Modal {...modalProps} active={active} onClose={onClose}/>
+    </>
+  );
+};
+
+const reusableModalChildren: React.JSX.Element = (
+  <>
+    <Modal.Header>
+      <h1>Modal title</h1>
+    </Modal.Header>
+    <Modal.Content>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      
+      <ModalWithTrigger triggerLabel="Open Submodal">
+        <Modal.Header>
+          <h1>Submodal title</h1>
+        </Modal.Header>
+        <Modal.Content>
+          <p>This is a submodal</p>
+          <OverflowTester/>
+        </Modal.Content>
+      </ModalWithTrigger>
+      
+      <OverflowTester/>
+    </Modal.Content>
+    <Modal.Footer>This is a modal footer with eventual action buttons</Modal.Footer>
+  </>
+);
+
+export const ModalSizeSmall: Story = {
+  render: () => (
+    <ModalWithTrigger size="small">
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+export const ModalSizeMedium: Story = {
+  render: () => (
+    <ModalWithTrigger size="medium">
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+export const ModalSizeLarge: Story = {
+  render: () => (
+    <ModalWithTrigger size="large">
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+export const ModalSizeXLarge: Story = {
+  render: () => (
+    <ModalWithTrigger size="x-large">
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+export const ModalSizeFullScreen: Story = {
+  render: () => (
+    <ModalWithTrigger size="fullscreen">
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+export const ModalUncloseable: Story = {
+  render: () => (
+    <ModalWithTrigger closeable={false}>
+      {reusableModalChildren}
+    </ModalWithTrigger>
+  ),
+};
+
+type ModalWithSpinnerTriggerProps = Omit<React.ComponentProps<typeof Modal>, 'active' | 'onClose'> & {
+  triggerLabel?: string,
+};
+const ModalWithSpinnerTrigger = ({ triggerLabel = 'Open modal with spinner (it will close in 5 seconds)', ...modalProps }: ModalWithSpinnerTriggerProps) => {
+  const [active, setActive] = React.useState(false);
+  const onPress = () => {
+    setActive(true);
+    setTimeout(() => {
+      setActive(false);
+    }, 5000);
+  }
+  const onClose = React.useCallback(() => { setActive(false); }, []);
+  return (
+    <>
+      <Button variant="primary" onPress={onPress}>{triggerLabel}</Button>
+      <Modal {...modalProps} active={active} onClose={onClose} closeable={false} className={cl['bk-modal-spinner']} size="fullscreen"/>
+    </>
+  );
+};
+
+export const ModalWithSpinner: Story = {
+  render: () => (
+    <ModalWithSpinnerTrigger unstyled={true}>
+      <Modal.Content>
+        <Spinner size="large" />
+      </Modal.Content>
+    </ModalWithSpinnerTrigger>
+  ),
+};

package/src/components/overlays/Modal/Modal.tsx

@@ -0,0 +1,202 @@
+/* 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 ClassNameArgument, classNames as cx } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+
+import cl from './Modal.module.scss';
+
+export { cl as ModalClassNames };
+
+
+type ModalHeaderProps = React.PropsWithChildren<{
+  unstyled?: boolean;
+  className?: ClassNameArgument;
+}>;
+
+/* Modal Header component */
+const ModalHeader = ({ children, unstyled, className }: ModalHeaderProps) => (
+  <header
+    className={cx(
+      {
+        bk: true,
+        [cl['bk-modal__header'] as string]: !unstyled,
+      },
+      className,
+    )}
+  >
+    {children}
+  </header>
+);
+
+type ModalContentProps = React.PropsWithChildren<{
+  unstyled?: boolean;
+  className?: ClassNameArgument;
+}>;
+
+/* Modal Content component */
+const ModalContent = ({ children, unstyled, className }: ModalContentProps) => (
+  <section
+    className={cx(
+      {
+        bk: true,
+        'body-text': true,
+        [cl['bk-modal__content'] as string]: !unstyled,
+      },
+      className,
+    )}
+  >
+    {children}
+  </section>
+);
+
+type ModalFooterProps = React.PropsWithChildren<{
+  unstyled?: boolean;
+  className?: ClassNameArgument;
+}>;
+
+/* Modal Footer component */
+const ModalFooter = ({ children, unstyled, className }: ModalFooterProps) => (
+  <footer
+    className={cx(
+      {
+        bk: true,
+        [cl['bk-modal__footer'] as string]: !unstyled,
+      },
+      className,
+    )}
+  >
+    {children}
+  </footer>
+);
+
+type ModalProps = React.PropsWithChildren<{
+  unstyled?: boolean;
+  size?: 'small' | 'medium' | 'large' | 'x-large' | 'fullscreen';
+  active: boolean;
+  className?: ClassNameArgument;
+  onClose: () => void;
+  closeable?: boolean;
+}>;
+
+/**
+ * Modal component.
+ */
+const Modal = ({
+  children,
+  unstyled,
+  className,
+  size = 'medium',
+  closeable = true,
+  active,
+  onClose,
+}: ModalProps) => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+
+  // Sync the `active` flag with the DOM dialog
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) {
+      return;
+    }
+
+    if (active && !dialog.open) {
+      dialog.showModal();
+    } else if (!active && dialog.open) {
+      dialog.close();
+    }
+  }, [active]);
+
+  // Sync the dialog close event with the `active` flag
+  const handleCloseEvent = React.useCallback(
+    (event: Event): void => {
+      const dialog = dialogRef.current;
+      if (dialog === null) {
+        return;
+      }
+      
+      if (active && event.target === dialog) {
+        onClose();
+      }
+    },
+    [active, onClose],
+  );
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) {
+      return;
+    }
+    
+    dialog.addEventListener('close', handleCloseEvent);
+    return () => {
+      dialog.removeEventListener('close', handleCloseEvent);
+    };
+  }, [handleCloseEvent]);
+
+  const close = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const handleDialogClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      const dialog = dialogRef.current;
+      if (dialog !== null && event.target === dialog && closeable) {
+        // Note: clicking the backdrop just results in an event where the target is the `<dialog>` element. In order to
+        // distinguish between the backdrop and the modal content, we assume that the `<dialog>` is fully covered by
+        // another element. In our case, `bk-modal__content` must cover the whole `<dialog>` otherwise this will not work.
+        close();
+      }
+    },
+    [close, closeable],
+  );
+
+  // "onKeyDown" instead of "onCancel" as the latter is only fired after the cancel already initiated
+  const handleDialogKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape' && !closeable) {
+      event.preventDefault();
+    }
+  };
+
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    <dialog
+      ref={dialogRef}
+      className={cx(
+        {
+          bk: true,
+          [cl['bk-modal-small'] as string]: size === 'small',
+          [cl['bk-modal-medium'] as string]: size === 'medium',
+          [cl['bk-modal-large'] as string]: size === 'large',
+          [cl['bk-modal-x-large'] as string]: size === 'x-large',
+          [cl['bk-modal-fullscreen'] as string]: size === 'fullscreen',
+          [cl['bk-modal'] as string]: !unstyled,
+        },
+        className,
+      )}
+      onClick={handleDialogClick}
+      onKeyDown={handleDialogKeyDown}
+    >
+      {closeable && (
+        <button
+          type="button"
+          className={cx(cl['bk-modal__close'])}
+          onClick={close}
+        >
+          <Icon icon="cross" />
+        </button>
+      )}
+      <div className={cx(cl['bk-modal__container'])}>
+        {children}
+      </div>
+    </dialog>
+  );
+};
+
+Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+
+export { Modal };