@enact/limestone 1.3.0 → 1.10.0

package/Input/index.d.ts

@@ -9,99 +9,6 @@ import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spo
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 
-export interface InputFieldBaseProps {
-  /**
-   * Passed by AnnounceDecorator for accessibility.
-   */
-  announce?: Function;
-  /**
-   * Disables InputField and becomes non-interactive.
-   */
-  disabled?: boolean;
-  /**
-   * Blurs the input when the "enter" key is pressed.
-   */
-  dismissOnEnter?: boolean;
-  /**
-   * The icon to be placed at the end of the input.
-   */
-  iconAfter?: string;
-  /**
-   * The icon to be placed at the beginning of the input.
-   */
-  iconBefore?: string;
-  /**
- * Indicates    is invalid and shows
-  , if set.
- */
-  invalid?: boolean;
-  /**
- * The tooltip text to be displayed when the input is
-  .
- * 
- * If this value is  _falsy_ , the tooltip will be shown with the default message.
- */
-  invalidMessage?: string;
-  /**
-   * Called before the input value is changed.
-   *
-   * The change can be prevented by calling  `preventDefault`  on the event.
-   */
-  onBeforeChange?: Function;
-  /**
-   * Called when blurred.
-   */
-  onBlur?: Function;
-  /**
- * Called when the input value is changed.
- * 
- * The event payload includes the current  `value`  as well as a  `stopPropagation()`  method
-which may be called to stop the original  `onChange`  event from the  `<input>`  from
-bubbling.
- */
-  onChange?: Function;
-  /**
-   * Called when clicked.
-   */
-  onClick?: Function;
-  /**
-   * Called when focused.
-   */
-  onFocus?: Function;
-  /**
-   * Called when a key is pressed down.
-   */
-  onKeyDown?: Function;
-  /**
-   * Text to display when    is not set.
-   */
-  placeholder?: string;
-  /**
-   * The size of the input field.
-   */
-  size?: "large" | "small";
-  /**
-   * The type of input.
-   *
-   * Accepted values correspond to the standard HTML5 input types.
-   */
-  type?: string;
-  /**
-   * The value of the input.
-   */
-  value?: string | number;
-}
-/**
- * A Limestone styled input component.
- * 
- * It supports start and end icons, but it does not support Spotlight. Apps should use
-  .
- */
-
-export class InputFieldBase extends React.Component<
-  Merge<React.HTMLProps<HTMLElement>, InputFieldBaseProps>
-> {}
-
 export interface InputPopupBaseProps {
   /**
    * Passed by AnnounceDecorator for accessibility.
@@ -158,6 +65,10 @@ and when  `numberInputField`  is  `'auto'` .
  * This value will override  `minLength`  and  `maxLength` .
  */
   length?: number;
+  /**
+   * Wraps the  `InputField` 's value display in a marquee.
+   */
+  marqueeInputField?: boolean;
   /**
    * The maximum length of number input fields.
    *
@@ -260,23 +171,122 @@ export class InputPopupBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, InputPopupBaseProps>
 > {}
 
-export interface InputFieldDecoratorProps
-  extends Merge<
-    ui_Changeable_ChangeableProps,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface InputFieldBaseProps {
+  /**
+   * Passed by AnnounceDecorator for accessibility.
+   */
+  announce?: Function;
+  /**
+   * Moves the caret to the end of the text when the input receives focus.
+   */
+  caretToEndOnFocus?: boolean;
+  /**
+   * Disables InputField and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Blurs the input when the "enter" key is pressed.
+   */
+  dismissOnEnter?: boolean;
+  /**
+   * The icon to be placed at the end of the input.
+   */
+  iconAfter?: string;
+  /**
+   * The icon to be placed at the beginning of the input.
+   */
+  iconBefore?: string;
+  /**
+ * Indicates    is invalid and shows
+  , if set.
+ */
+  invalid?: boolean;
+  /**
+ * The tooltip text to be displayed when the input is
+  .
+ * 
+ * If this value is  _falsy_ , the tooltip will be shown with the default message.
+ */
+  invalidMessage?: string;
+  /**
+   * Wraps the input's value/placeholder display in a marquee.
+   */
+  marqueeContent?: boolean;
+  /**
+   * Called before the input value is changed.
+   *
+   * The change can be prevented by calling  `preventDefault`  on the event.
+   */
+  onBeforeChange?: Function;
+  /**
+   * Called when blurred.
+   */
+  onBlur?: Function;
+  /**
+ * Called when the input value is changed.
+ * 
+ * The event payload includes the current  `value`  as well as a  `stopPropagation()`  method
+which may be called to stop the original  `onChange`  event from the  `<input>`  from
+bubbling.
+ */
+  onChange?: Function;
+  /**
+   * Called when clicked.
+   */
+  onClick?: Function;
+  /**
+   * Called when focused.
+   */
+  onFocus?: Function;
+  /**
+   * Called when a key is pressed down.
+   */
+  onKeyDown?: Function;
+  /**
+   * Text to display when    is not set.
+   */
+  placeholder?: string;
+  /**
+   * The size of the input field.
+   */
+  size?: "large" | "small";
+  /**
+   * The type of input.
+   *
+   * Accepted values correspond to the standard HTML5 input types.
+   */
+  type?: string;
+  /**
+   * The value of the input.
+   */
+  value?: string | number;
+}
+/**
+ * A Limestone styled input component.
+ * 
+ * It supports start and end icons, but it does not support Spotlight. Apps should use
+  .
+ */
+
+export class InputFieldBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputFieldBaseProps>
+> {}
+
+export interface InputFieldDecoratorProps extends Merge<
+  ui_Changeable_ChangeableProps,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function InputFieldDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & InputFieldDecoratorProps>;
 
-export interface InputFieldProps
-  extends Merge<
-    Merge<
-      Merge<InputFieldBaseProps, ui_Changeable_ChangeableProps>,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {
+export interface InputFieldProps extends Merge<
+  Merge<
+    Merge<InputFieldBaseProps, ui_Changeable_ChangeableProps>,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {
   /**
  * Focuses the internal input when the component gains 5-way focus.
  * 
@@ -362,11 +372,10 @@ export class InputBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, InputBaseProps>
 > {}
 
-export interface InputDecoratorProps
-  extends Merge<
-    Merge<ui_Toggleable_ToggleableProps, ui_Changeable_ChangeableProps>,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface InputDecoratorProps extends Merge<
+  Merge<ui_Toggleable_ToggleableProps, ui_Changeable_ChangeableProps>,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function InputDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & InputDecoratorProps>;

package/Input/tests/Input-specs.js

@@ -534,4 +534,30 @@ describe('Input specs', function () {
       expect(buttonSubmit).toBeNull();
     });
   });
+  describe('marqueeInputField', function () {
+    test('should not render a marquee node in the InputField by default', function () {
+      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
+            open: true,
+            value: "hello"
+          })
+        })),
+        baseElement = _render.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).toBeNull();
+    });
+    test('should render a marquee node in the InputField when marqueeInputField is true', function () {
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
+            open: true,
+            marqueeInputField: true,
+            value: "hello"
+          })
+        })),
+        baseElement = _render2.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).not.toBeNull();
+      expect(marqueeText.querySelector('.marquee')).not.toBeNull();
+    });
+  });
 });

package/Input/tests/InputField-specs.js

@@ -25,7 +25,7 @@ describe('InputField Specs', function () {
     var inputField = _react.screen.getByLabelText('hello Input field');
     var expected = 'hello';
     var actual = inputField.textContent;
-    expect(actual).toBe(expected);
+    expect(actual).toContain(expected);
   });
   test('should callback onChange with `onChange` type when the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
     var handleChange = jest.fn();
@@ -175,13 +175,13 @@ describe('InputField Specs', function () {
     var inputField = _react.screen.getByLabelText('hello Input field');
     var actual = inputField.textContent;
     var expected = 'hello';
-    expect(actual).toBe(expected);
+    expect(actual).toContain(expected);
   });
   test('should have dir equal to rtl when there is rtl text', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
       value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
     }));
-    var inputField = _react.screen.getByLabelText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי' + ' Input field').children.item(2);
+    var inputField = _react.screen.getByPlaceholderText('');
     var expectedAttribute = 'dir';
     var expectedValue = 'rtl';
     expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
@@ -289,4 +289,171 @@ describe('InputField Specs', function () {
     var expectedAttribute = 'data-webos-voice-label';
     expect(inputField).toHaveAttribute(expectedAttribute, customLabel);
   });
+  test('should callback onKeyDown with `keydown` type when key is pressed', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleKeyDown = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onKeyDown: handleKeyDown
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.mouseDown(inputField);
+    _react.fireEvent.keyDown(inputField, {
+      which: 37,
+      keyCode: 37,
+      code: 37
+    });
+    var key = handleKeyDown.mock.calls[0][0].key;
+    var expected = {
+      type: 'keydown'
+    };
+    var actual = handleKeyDown.mock.calls.length && handleKeyDown.mock.calls[0][0];
+    expect(handleKeyDown).toHaveBeenCalled();
+    expect(key).toBe('ArrowLeft');
+    expect(actual).toMatchObject(expected);
+  }));
+  describe('marqueeContent', function () {
+    test('should not render a marquee node by default', function () {
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+          value: "hello"
+        })),
+        baseElement = _render2.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).toBeNull();
+    });
+    test('should render a marquee node when marqueeContent is true', function () {
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+          marqueeContent: true,
+          value: "hello"
+        })),
+        baseElement = _render3.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).not.toBeNull();
+      expect(marqueeText.querySelector('.marquee')).not.toBeNull();
+    });
+  });
+  describe('moveCaretToEnd', function () {
+    test('should move caret to end of value on mouse focus when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var value = 'hello';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: value
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var setSelectionRange = jest.spyOn(inputField, 'setSelectionRange');
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(setSelectionRange).toHaveBeenCalledWith(value.length, value.length);
+      jest.useRealTimers();
+    });
+    test('should set scrollLeft to scrollWidth for LTR input when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var value = 'hello';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: value
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var scrollLeft = 0;
+      Object.defineProperty(inputField, 'scrollLeft', {
+        get: function get() {
+          return scrollLeft;
+        },
+        set: function set(v) {
+          scrollLeft = v;
+        },
+        configurable: true
+      });
+      Object.defineProperty(inputField, 'scrollWidth', {
+        get: function get() {
+          return 200;
+        },
+        configurable: true
+      });
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(scrollLeft).toBe(200);
+      jest.useRealTimers();
+    });
+    test('should set scrollLeft to 0 for RTL input when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var rtlValue = 'שועל החום הזריז';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: rtlValue
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var scrollLeft = 999;
+      Object.defineProperty(inputField, 'scrollLeft', {
+        get: function get() {
+          return scrollLeft;
+        },
+        set: function set(v) {
+          scrollLeft = v;
+        },
+        configurable: true
+      });
+      Object.defineProperty(inputField, 'scrollWidth', {
+        get: function get() {
+          return 200;
+        },
+        configurable: true
+      });
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(scrollLeft).toBe(0);
+      jest.useRealTimers();
+    });
+    test('should not move caret when caretToEndOnFocus is not set', function () {
+      jest.useFakeTimers();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var setSelectionRange = jest.spyOn(inputField, 'setSelectionRange');
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(setSelectionRange).not.toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+  });
+  describe('decorator icons', function () {
+    test('should render iconBefore and iconAfter with data-input-icon attribute', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconBefore: "plus",
+        iconAfter: "minus"
+      }));
+      var icons = document.querySelectorAll('[data-input-icon]');
+      expect(icons).toHaveLength(2);
+    });
+    test('should not activate the input when iconBefore is clicked', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconBefore: "plus",
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var icon = document.querySelector('[data-input-icon]');
+      var focusSpy = jest.spyOn(inputField, 'focus');
+      _react.fireEvent.mouseDown(icon);
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+    test('should not activate the input when iconAfter is clicked', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconAfter: "minus",
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var icon = document.querySelector('[data-input-icon]');
+      var focusSpy = jest.spyOn(inputField, 'focus');
+      _react.fireEvent.mouseDown(icon);
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/Input/tests/InputPopup-specs.js

@@ -47,7 +47,7 @@ describe('InputPopup Specs', function () {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
         defaultValue: strDefaultValue,
         open: true,
-        value: strValue
+        value: strValue || strDefaultValue
       })
     }));
     var actual = _react.screen.getByDisplayValue(strValue);

package/Item/Item.d.ts

@@ -59,6 +59,10 @@ locales, the nodes are inserted to the left. If nothing is specified, nothing, n
 an empty container, is rendered in this place.
  */
   slotAfter?: React.ReactNode;
+  /**
+   * Aria-label for slotAfter icon.
+   */
+  slotAfterAria?: string;
   /**
  * Nodes to be inserted before  `children`  and  `label` .
  * 
@@ -67,6 +71,10 @@ locales, the nodes are inserted to the right. If nothing is specified, nothing,
 an empty container, is rendered in this place.
  */
   slotBefore?: React.ReactNode;
+  /**
+   * Aria-label for slotBefore icon.
+   */
+  slotBeforeAria?: string;
 }
 /**
  * A Limestone styled item without any behavior.
@@ -76,17 +84,16 @@ export class ItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ItemBaseProps>
 > {}
 
-export interface ItemDecoratorProps
-  extends Merge<
+export interface ItemDecoratorProps extends Merge<
+  Merge<
     Merge<
-      Merge<
-        Merge<ui_Item_ItemDecoratorProps, ui_Slottable_SlottableProps>,
-        spotlight_Spottable_SpottableProps
-      >,
-      limestone_Marquee_MarqueeControllerProps
+      Merge<ui_Item_ItemDecoratorProps, ui_Slottable_SlottableProps>,
+      spotlight_Spottable_SpottableProps
     >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+    limestone_Marquee_MarqueeControllerProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function ItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ItemDecoratorProps>;

package/Item/Item.js

@@ -20,7 +20,7 @@ var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _ItemModule = _interopRequireDefault(require("./Item.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["componentRef", "content", "contentSize", "css", "label", "labelPosition", "marqueeOn"],
-  _excluded2 = ["centered", "children", "componentRef", "contentRef", "contentSize", "css", "inline", "label", "labelPosition", "marqueeOn", "slotAfter", "slotBefore"];
+  _excluded2 = ["centered", "children", "componentRef", "contentRef", "contentSize", "css", "inline", "label", "labelPosition", "marqueeOn", "slotAfter", "slotAfterAria", "slotBefore", "slotBeforeAria"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -217,6 +217,13 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
      * @public
      */
     slotAfter: _propTypes2["default"].node,
+    /**
+     * Aria-label for slotAfter icon.
+     *
+     * @type {String}
+     * @public
+     */
+    slotAfterAria: _propTypes2["default"].string,
     /**
      * Nodes to be inserted before `children` and `label`.
      *
@@ -227,7 +234,14 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
      * @type {Node}
      * @public
      */
-    slotBefore: _propTypes2["default"].node
+    slotBefore: _propTypes2["default"].node,
+    /**
+     * Aria-label for slotBefore icon.
+     *
+     * @type {String}
+     * @public
+     */
+    slotBeforeAria: _propTypes2["default"].string
   },
   defaultProps: {
     labelPosition: 'below',
@@ -267,7 +281,9 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
       labelPosition = _ref5.labelPosition,
       marqueeOn = _ref5.marqueeOn,
       slotAfter = _ref5.slotAfter,
+      slotAfterAria = _ref5.slotAfterAria,
       slotBefore = _ref5.slotBefore,
+      slotBeforeAria = _ref5.slotBeforeAria,
       rest = _objectWithoutProperties(_ref5, _excluded2);
     delete rest.size;
     var keys = Object.keys(rest);
@@ -286,6 +302,7 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
         className: css.bg
       }), slotBefore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.slotBefore,
+        "aria-label": slotBeforeAria,
         shrink: true,
         children: slotBefore
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
@@ -299,6 +316,7 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
         shrink: inline
       }), slotAfter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.slotAfter,
+        "aria-label": slotAfterAria,
         shrink: true,
         children: slotAfter
       }) : null]

package/Item/Item.module.css

@@ -7,7 +7,7 @@
   display: flex;
   position: relative;
   color: inherit;
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .item.selected {
   /* Available for customization */

package/KeyGuide/KeyGuide.d.ts

@@ -66,17 +66,18 @@ export class KeyGuideBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, KeyGuideBaseProps>
 > {}
 
-export interface KeyGuideDecoratorProps
-  extends Merge<
-    limestone_Marquee_MarqueeControllerProps,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface KeyGuideDecoratorProps extends Merge<
+  limestone_Marquee_MarqueeControllerProps,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function KeyGuideDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & KeyGuideDecoratorProps>;
 
-export interface KeyGuideProps
-  extends Merge<KeyGuideBaseProps, KeyGuideDecoratorProps> {}
+export interface KeyGuideProps extends Merge<
+  KeyGuideBaseProps,
+  KeyGuideDecoratorProps
+> {}
 /**
  * A Key Guide component, ready to use in Limestone applications.
  *