@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/Calendar/Calendar.css

@@ -259,3 +259,46 @@
   color: #9ca3af;
   font-size: 0.875rem;
 }
+
+/* ---------- Background events (uncovered regions) ----------
+   Painted behind the grid to make ABSENCE visible. An on-call schedule with
+   nobody on call used to render as plain whitespace, which reads exactly like a
+   grid that failed to load; the hatch says "we computed this, and it is empty".
+   Kept deliberately low-contrast so real event blocks stay dominant. */
+.oneuptime-calendar .rbc-day-slot .rbc-background-event,
+.oneuptime-calendar .rbc-background-event {
+  background-color: rgba(251, 191, 36, 0.09); /* amber-400 @ 9% */
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(217, 119, 6, 0.16) 0,
+    rgba(217, 119, 6, 0.16) 1px,
+    transparent 1px,
+    transparent 7px
+  );
+  border: none;
+  border-left: 2px solid rgba(217, 119, 6, 0.35); /* amber-600 */
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  pointer-events: none;
+  opacity: 1;
+}
+
+.oneuptime-calendar .rbc-day-slot .rbc-background-event:hover {
+  filter: none;
+  box-shadow: none;
+}
+
+/* Legend swatch that names the hatched bands. Kept in this file so the swatch
+   and the band it describes can never drift apart. */
+.oneuptime-calendar-gap-swatch {
+  background-color: rgba(251, 191, 36, 0.25);
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(217, 119, 6, 0.55) 0,
+    rgba(217, 119, 6, 0.55) 1px,
+    transparent 1px,
+    transparent 4px
+  );
+  border: 1px solid rgba(217, 119, 6, 0.4);
+}

package/UI/Components/Calendar/Calendar.tsx

@@ -20,6 +20,13 @@ const localizer: DateLocalizer = momentLocalizer(moment);
 export interface ComponentProps {
   id?: string | undefined;
   events: Array<CalendarEvent>;
+  /*
+   * Events painted BEHIND the grid rather than as blocks in it. Used to shade
+   * regions that are meaningful by their absence — an on-call schedule's
+   * uncovered hours, for example, which would otherwise be indistinguishable
+   * from a grid that simply failed to load.
+   */
+  backgroundEvents?: Array<CalendarEvent> | undefined;
   defaultCalendarView?: DefaultCalendarView;
   /*
    * Which date the calendar initially opens on. Defaults to "now". Callers that
@@ -81,6 +88,7 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
       <Calendar
         defaultDate={defaultDate}
         events={props.events}
+        backgroundEvents={props.backgroundEvents || []}
         localizer={localizer}
         showMultiDayTimes
         views={CALENDAR_VIEWS}

package/UI/Components/Card/Card.tsx

@@ -17,8 +17,8 @@ export interface CardButtonSchema {
 }
 
 export interface ComponentProps {
-  title?: string | ReactElement;
-  description?: string | ReactElement;
+  title?: string | ReactElement | undefined;
+  description?: string | ReactElement | undefined;
   buttons?: undefined | Array<CardButtonSchema | ReactElement>;
   children?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;

package/UI/Components/Checkbox/Checkbox.tsx

@@ -19,6 +19,20 @@ export interface CategoryProps {
   autoFocus?: boolean | undefined;
   className?: string | undefined;
   isIndeterminate?: boolean | undefined;
+  /*
+   * The accessible name, for a checkbox that has no visible `title` next to it.
+   * A bare box in a table cell is announced as "checkbox" and nothing else, so a
+   * screen reader user hears the same word once per row with no way to tell which
+   * row they are on - and a test cannot address one row's box either.
+   */
+  ariaLabel?: string | undefined;
+  /*
+   * The hover text on the input itself - NOT `title` above, which is the visible
+   * label rendered beside the box. Its most useful job is on a DISABLED box,
+   * where it is the only place the reason can live: a box that cannot be ticked
+   * and does not say why reads as broken rather than as deliberate.
+   */
+  hoverText?: string | undefined;
 }
 
 const CheckboxElement: FunctionComponent<CategoryProps> = (
@@ -67,6 +81,8 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
             onFocus={props.onFocus}
             onBlur={props.onBlur}
             data-testid={props.dataTestId}
+            aria-label={props.ariaLabel}
+            title={props.hoverText}
             aria-describedby={
               props.description ? "checkbox-description" : undefined
             }

package/UI/Components/Dictionary/Dictionary.tsx

@@ -36,6 +36,20 @@ export interface ComponentProps {
   valueTypes?: Array<ValueType>; // by default it'll be Text
   keys?: Array<string> | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
+  /*
+   * Per-key placeholder for the value input, falling back to valuePlaceholder
+   * for any key not listed. The record editor uses this to show the model's own
+   * example value against the column it belongs to, which is a far better
+   * answer to "what goes in this box" than one generic word repeated down the
+   * column.
+   */
+  valuePlaceholders?: Record<string, string> | undefined;
+  /*
+   * Suggestions offered on a row whose key has no entry in valueSuggestions.
+   * Used for suggestions that are about the form rather than the column - the
+   * workflow's {{...}} references, which are equally valid in any row.
+   */
+  defaultValueSuggestions?: Array<string> | undefined;
   onKeySelected?: ((key: string) => void) | undefined;
   isLoadingKeys?: boolean | undefined;
   loadingValueKeys?: Array<string> | undefined;
@@ -231,6 +245,35 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
     return "";
   };
 
+  type ValuePlaceholderForFunction = (key: string) => string | undefined;
+
+  const valuePlaceholderFor: ValuePlaceholderForFunction = (
+    key: string,
+  ): string | undefined => {
+    return (
+      (key ? props.valuePlaceholders?.[key] : undefined) ||
+      props.valuePlaceholder
+    );
+  };
+
+  type ValueSuggestionsForFunction = (key: string) => Array<string> | undefined;
+
+  const valueSuggestionsFor: ValueSuggestionsForFunction = (
+    key: string,
+  ): Array<string> | undefined => {
+    const forKey: Array<string> | undefined = key
+      ? props.valueSuggestions?.[key]
+      : undefined;
+
+    /*
+     * Column-specific suggestions win outright rather than merging: a column
+     * with a known set of values should not have workflow references mixed into
+     * that set, and a row with no such set is exactly where a reference is the
+     * likely thing to type.
+     */
+    return forKey && forKey.length > 0 ? forKey : props.defaultValueSuggestions;
+  };
+
   const operatorDropdownOptions: Array<DropdownOption> =
     DICTIONARY_FILTER_OPERATOR_OPTIONS.map(
       (option: DictionaryFilterOperatorOption) => {
@@ -409,7 +452,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   operatorOption.expectsMultiValue && (
                     <Dropdown
                       isMultiSelect={true}
-                      placeholder={props.valuePlaceholder}
+                      placeholder={valuePlaceholderFor(item.key)}
                       value={(Array.isArray(item.value) ? item.value : []).map(
                         (selectedValue: string) => {
                           return { label: selectedValue, value: selectedValue };
@@ -420,9 +463,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                           ...(Array.isArray(item.value)
                             ? (item.value as Array<string>)
                             : []),
-                          ...(item.key && props.valueSuggestions?.[item.key]
-                            ? props.valueSuggestions[item.key]!
-                            : []),
+                          ...(valueSuggestionsFor(item.key) || []),
                         ]),
                       ).map((optionValue: string) => {
                         return { label: optionValue, value: optionValue };
@@ -458,14 +499,12 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                       placeholder={
                         operatorOption.expectsNumericValue
                           ? "Number"
-                          : props.valuePlaceholder
+                          : valuePlaceholderFor(item.key)
                       }
                       suggestions={
                         operatorOption.expectsNumericValue
                           ? undefined
-                          : item.key && props.valueSuggestions?.[item.key]
-                            ? props.valueSuggestions[item.key]
-                            : undefined
+                          : valueSuggestionsFor(item.key)
                       }
                       isLoadingSuggestions={
                         operatorOption.expectsNumericValue
@@ -501,7 +540,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 {!hideValueInput && item.type === ValueType.Number && (
                   <Input
                     value={item.value.toString()}
-                    placeholder={props.valuePlaceholder}
+                    placeholder={valuePlaceholderFor(item.key)}
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
                       const parsedValue: number = parseInt(value);

package/UI/Components/FormModal/BasicFormModal.tsx

@@ -5,7 +5,7 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, {
   BaseComponentProps as BasicFormComponentProps,
 } from "../Forms/BasicForm";
-import Modal from "../Modal/Modal";
+import Modal, { ModalWidth } from "../Modal/Modal";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement, useEffect, useRef, useState } from "react";
 
@@ -19,6 +19,7 @@ export interface ComponentProps<T extends GenericObject> {
   submitButtonStyleType?: undefined | ButtonStyleType;
   formProps: BasicFormComponentProps<T>;
   description?: string | undefined;
+  modalWidth?: ModalWidth | undefined;
 }
 
 const BasicFormModal: <T extends GenericObject>(

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -1,6 +1,14 @@
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import Icon from "../Icon/Icon";
 import Image from "../Image/Image";
+import KeyboardShortcut, {
+  KeyboardShortcutSize,
+  KeyboardShortcutVariant,
+} from "../KeyboardShortcut/KeyboardShortcut";
+import {
+  KeyboardKeyUtil,
+  KeyboardShortcutKey,
+} from "../KeyboardShortcut/KeyboardKey";
 import Route from "../../../Types/API/Route";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, {
@@ -20,6 +28,13 @@ export interface ComponentProps {
   name: string;
   showDropdown: boolean;
   isPressed?: boolean | undefined;
+  /** Tints the icon, e.g. to mark an AI entry point. */
+  iconClassName?: string | undefined;
+  /**
+   * Shortcut that triggers this button, shown as keycaps beside the label in
+   * the notation of the user's platform (⌘ I on a Mac, Ctrl I elsewhere).
+   */
+  shortcut?: Array<KeyboardShortcutKey> | undefined;
 }
 
 const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
@@ -40,21 +55,42 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
 
   const hasLabel: boolean = Boolean(props.title);
   const hasDropdown: boolean = Boolean(props.children);
+  const hasShortcut: boolean = Boolean(props.shortcut?.length);
 
+  /*
+   * The keycaps are hidden below the sm breakpoint, so the tighter right
+   * padding they need comes in at the same breakpoint they do.
+   */
   const sizeClassName: string = hasLabel
-    ? "h-9 gap-1.5 pl-2.5 pr-3"
+    ? `h-9 gap-1.5 pl-2.5 ${hasShortcut ? "pr-3 sm:pr-1.5" : "pr-3"}`
     : "h-9 w-9 justify-center";
 
+  /*
+   * Native tooltip: the label alone on screen, the shortcut spelled out in
+   * words on hover ("Ask AI · Command + I") for anyone who missed the keycaps.
+   */
+  const tooltip: string = hasShortcut
+    ? `${props.title || props.name} · ${KeyboardKeyUtil.getShortcutLabel(
+        props.shortcut!,
+      )}`
+    : props.title || props.name;
+
   return (
     <div className="relative ml-2 flex-shrink-0">
       <div>
         <button
           type="button"
-          className={`flex items-center rounded-lg border border-gray-200 bg-gray-50 hover:bg-gray-100 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 ${sizeClassName}`}
+          title={tooltip}
+          className={`flex items-center rounded-lg border border-gray-200 bg-gray-50 hover:bg-white hover:border-gray-300 hover:shadow-sm active:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 ${sizeClassName}`}
           id={hasDropdown ? "user-menu-button" : undefined}
           aria-expanded={hasDropdown ? isDropdownVisible : undefined}
           aria-haspopup={hasDropdown ? "true" : undefined}
           aria-pressed={props.isPressed}
+          aria-keyshortcuts={
+            hasShortcut
+              ? KeyboardKeyUtil.getAriaKeyShortcuts(props.shortcut!)
+              : undefined
+          }
           onClick={() => {
             props.onClick?.();
             setIsComponentVisible(!isDropdownVisible);
@@ -73,7 +109,9 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
           )}
           {props.icon && (
             <Icon
-              className={`${hasLabel ? "h-4 w-4" : "h-5 w-5"} text-gray-500`}
+              className={`${hasLabel ? "h-4 w-4" : "h-5 w-5"} ${
+                props.iconClassName || "text-gray-500"
+              }`}
               icon={props.icon}
             />
           )}
@@ -82,6 +120,18 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
               {props.title}
             </span>
           )}
+          {hasShortcut && (
+            /*
+             * Ghost caps, not outlined ones: the button turns white on hover,
+             * and a filled cap keeps its edge against both backgrounds.
+             */
+            <KeyboardShortcut
+              keys={props.shortcut!}
+              size={KeyboardShortcutSize.ExtraSmall}
+              variant={KeyboardShortcutVariant.Ghost}
+              className="ml-0.5 hidden sm:inline-flex"
+            />
+          )}
         </button>
         {props.badge && props.badge > 0 && (
           <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-semibold text-white ring-2 ring-white">

package/UI/Components/Input/Input.tsx

@@ -14,6 +14,7 @@ import React, {
 
 export enum InputType {
   TEXT = "text",
+  PASSWORD = "password",
   NUMBER = "number",
   DATE = "date",
   DATETIME_LOCAL = "datetime-local",

package/UI/Components/KeyboardShortcut/KeyboardKey.ts

@@ -0,0 +1,185 @@
+import PlatformUtil from "../../Utils/Platform";
+
+/**
+ * Named keys for keyboard shortcut hints. Anything not in this list (letters,
+ * digits, "/", "?") can be passed through as a plain string.
+ */
+enum KeyboardKey {
+  /**
+   * The primary shortcut modifier of the platform: ⌘ on Apple hardware,
+   * Ctrl everywhere else. Use this for shortcuts handled with
+   * `event.metaKey || event.ctrlKey`.
+   */
+  Mod = "Mod",
+  Meta = "Meta",
+  Control = "Control",
+  Alt = "Alt",
+  Shift = "Shift",
+  Enter = "Enter",
+  Escape = "Escape",
+  Backspace = "Backspace",
+  Delete = "Delete",
+  Tab = "Tab",
+  Space = "Space",
+  ArrowUp = "ArrowUp",
+  ArrowDown = "ArrowDown",
+  ArrowLeft = "ArrowLeft",
+  ArrowRight = "ArrowRight",
+}
+
+export type KeyboardShortcutKey = KeyboardKey | string;
+
+/**
+ * Renders shortcut keys the way the user's own platform writes them. macOS
+ * users read ⌘⇧K; Windows and Linux users read Ctrl Shift K — the same
+ * shortcut, spelled in the convention they already know.
+ */
+export class KeyboardKeyUtil {
+  /**
+   * The glyph or short word shown on the keycap.
+   */
+  public static getDisplayKey(
+    key: KeyboardShortcutKey,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    switch (key) {
+      case KeyboardKey.Mod:
+        return isApplePlatform ? "⌘" : "Ctrl";
+      case KeyboardKey.Meta:
+        return isApplePlatform ? "⌘" : "Win";
+      case KeyboardKey.Control:
+        return isApplePlatform ? "⌃" : "Ctrl";
+      case KeyboardKey.Alt:
+        return isApplePlatform ? "⌥" : "Alt";
+      case KeyboardKey.Shift:
+        return isApplePlatform ? "⇧" : "Shift";
+      case KeyboardKey.Enter:
+        return isApplePlatform ? "↵" : "Enter";
+      case KeyboardKey.Escape:
+        return "Esc";
+      case KeyboardKey.Backspace:
+        return isApplePlatform ? "⌫" : "Backspace";
+      case KeyboardKey.Delete:
+        return isApplePlatform ? "⌦" : "Del";
+      case KeyboardKey.Tab:
+        return isApplePlatform ? "⇥" : "Tab";
+      case KeyboardKey.Space:
+        return "Space";
+      case KeyboardKey.ArrowUp:
+        return "↑";
+      case KeyboardKey.ArrowDown:
+        return "↓";
+      case KeyboardKey.ArrowLeft:
+        return "←";
+      case KeyboardKey.ArrowRight:
+        return "→";
+      default:
+        // Single characters read better capitalised: "i" -> "I".
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
+  }
+
+  /**
+   * The spoken name for screen readers — glyphs like ⌘ are announced
+   * inconsistently (or not at all), so shortcuts are labelled in words.
+   */
+  public static getSpokenKey(
+    key: KeyboardShortcutKey,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    switch (key) {
+      case KeyboardKey.Mod:
+        return isApplePlatform ? "Command" : "Control";
+      case KeyboardKey.Meta:
+        return isApplePlatform ? "Command" : "Windows";
+      case KeyboardKey.Control:
+        return "Control";
+      case KeyboardKey.Alt:
+        return isApplePlatform ? "Option" : "Alt";
+      case KeyboardKey.Shift:
+        return "Shift";
+      case KeyboardKey.Enter:
+        return "Enter";
+      case KeyboardKey.Escape:
+        return "Escape";
+      case KeyboardKey.Backspace:
+        return "Backspace";
+      case KeyboardKey.Delete:
+        return "Delete";
+      case KeyboardKey.Tab:
+        return "Tab";
+      case KeyboardKey.Space:
+        return "Space";
+      case KeyboardKey.ArrowUp:
+        return "Up arrow";
+      case KeyboardKey.ArrowDown:
+        return "Down arrow";
+      case KeyboardKey.ArrowLeft:
+        return "Left arrow";
+      case KeyboardKey.ArrowRight:
+        return "Right arrow";
+      default:
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
+  }
+
+  /**
+   * A full shortcut written out for tooltips and aria-labels, e.g.
+   * "Command + I" or "Control + I".
+   */
+  public static getShortcutLabel(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        return this.getSpokenKey(key, isApplePlatform);
+      })
+      .join(" + ");
+  }
+
+  /**
+   * The shortcut written with the platform's own glyphs, for plain-text spots
+   * that cannot render keycaps — "⌘B" on a Mac, "Ctrl+B" elsewhere.
+   */
+  public static getDisplayLabel(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        return this.getDisplayKey(key, isApplePlatform);
+      })
+      .join(isApplePlatform ? "" : "+");
+  }
+
+  /**
+   * The shortcut in the token syntax the `aria-keyshortcuts` attribute expects
+   * (e.g. "Meta+I"), so assistive tech can announce and index it.
+   */
+  public static getAriaKeyShortcuts(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        switch (key) {
+          case KeyboardKey.Mod:
+            return isApplePlatform ? "Meta" : "Control";
+          case KeyboardKey.ArrowUp:
+            return "ArrowUp";
+          case KeyboardKey.ArrowDown:
+            return "ArrowDown";
+          case KeyboardKey.ArrowLeft:
+            return "ArrowLeft";
+          case KeyboardKey.ArrowRight:
+            return "ArrowRight";
+          default:
+            return key.length === 1 ? key.toUpperCase() : key;
+        }
+      })
+      .join("+");
+  }
+}
+
+export default KeyboardKey;

package/UI/Components/KeyboardShortcut/KeyboardShortcut.tsx

@@ -0,0 +1,87 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import PlatformUtil from "../../Utils/Platform";
+import KeyboardKey, {
+  KeyboardKeyUtil,
+  KeyboardShortcutKey,
+} from "./KeyboardKey";
+
+export enum KeyboardShortcutSize {
+  ExtraSmall = "ExtraSmall",
+  Small = "Small",
+  Medium = "Medium",
+}
+
+export enum KeyboardShortcutVariant {
+  /** Raised white keycaps — reads well on gray or white surfaces. */
+  Default = "Default",
+  /** Borderless muted caps for dense, secondary hints. */
+  Ghost = "Ghost",
+}
+
+export interface ComponentProps {
+  keys: Array<KeyboardShortcutKey>;
+  size?: KeyboardShortcutSize | undefined;
+  variant?: KeyboardShortcutVariant | undefined;
+  className?: string | undefined;
+}
+
+const SIZE_CLASS: Record<KeyboardShortcutSize, string> = {
+  [KeyboardShortcutSize.ExtraSmall]:
+    "h-[18px] min-w-[18px] px-1 text-[10px] rounded",
+  [KeyboardShortcutSize.Small]:
+    "h-5 min-w-[20px] px-1.5 text-[11px] rounded-[5px]",
+  [KeyboardShortcutSize.Medium]: "h-6 min-w-[24px] px-1.5 text-xs rounded-md",
+};
+
+const VARIANT_CLASS: Record<KeyboardShortcutVariant, string> = {
+  [KeyboardShortcutVariant.Default]:
+    "border border-gray-200 bg-white text-gray-500 shadow-sm",
+  [KeyboardShortcutVariant.Ghost]: "bg-gray-100 text-gray-600",
+};
+
+/**
+ * Renders a keyboard shortcut as keycaps, in the notation of the machine the
+ * user is actually on: ⌘ I on a Mac, Ctrl I on Windows and Linux.
+ *
+ * The caps themselves are hidden from assistive tech — glyphs like ⌘ are
+ * announced inconsistently — and the shortcut is exposed once, in words, as
+ * screen-reader-only text ("Command + I").
+ */
+const KeyboardShortcut: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const isApplePlatform: boolean = PlatformUtil.isApplePlatform();
+
+  const size: KeyboardShortcutSize = props.size || KeyboardShortcutSize.Small;
+  const variant: KeyboardShortcutVariant =
+    props.variant || KeyboardShortcutVariant.Default;
+
+  const keycapClassName: string = `inline-flex flex-none select-none items-center justify-center font-sans font-medium leading-none ${SIZE_CLASS[size]} ${VARIANT_CLASS[variant]}`;
+
+  return (
+    <span
+      className={`inline-flex flex-none items-center gap-1 ${
+        props.className || ""
+      }`}
+    >
+      <span className="sr-only">
+        {KeyboardKeyUtil.getShortcutLabel(props.keys, isApplePlatform)}
+      </span>
+      {props.keys.map((key: KeyboardShortcutKey, index: number) => {
+        return (
+          <kbd
+            aria-hidden="true"
+            key={`${String(key)}-${index}`}
+            className={keycapClassName}
+          >
+            {KeyboardKeyUtil.getDisplayKey(key, isApplePlatform)}
+          </kbd>
+        );
+      })}
+    </span>
+  );
+};
+
+export { KeyboardKey, KeyboardKeyUtil };
+export type { KeyboardShortcutKey };
+export default KeyboardShortcut;