@enact/limestone 1.3.0

package/PopupTabLayout/PopupTabLayout.module.css

@@ -0,0 +1,226 @@
+.popupTabLayout.popup,
+.popupTabLayout.optimized {
+  margin: 1.25rem auto 2.75rem 1.25rem;
+  max-height: calc(100vh - 4rem );
+}
+.popupTabLayout .tabLayout .tabs {
+  bottom: auto;
+}
+.popupTabLayout .tabLayout.collapsed {
+  /* Override TabLayout */
+}
+.popupTabLayout .tabLayout .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) .popupTabLayout .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .popupTabLayout .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) .popupTabLayout .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}
+.popupTabLayout .tabLayout .tabGroup .tab.vertical.collapsed.button.selected .bg {
+  /* Override TabLayout */
+}
+.popupTabLayout .tabs {
+  margin-right: var(--primitive-spacing-36);
+}
+.popupTabLayout .tabsExpanded {
+  /* Override TabLayout */
+}
+.popupTabLayout .content {
+  margin-top: 0;
+  height: 100%;
+}
+.popupTabLayout .panels::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.popupTabLayout:global(.neutral) {
+  background-color: transparent;
+}
+.popupTabLayout:global(.neutral) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+.popupTabLayout:global(.neutral) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+.popupTabLayout:global(.neutral) .tabs,
+.popupTabLayout:global(.neutral) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .popupTabLayout:global(.neutral) .tabs,
+:global(.noAnimation) .popupTabLayout:global(.neutral) .content .panels::before {
+  box-shadow: none;
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: #7c848b;
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
+  box-shadow: none;
+}
+.popupTabLayout:global(.light) {
+  background-color: transparent;
+}
+.popupTabLayout:global(.light) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+.popupTabLayout:global(.light) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+.popupTabLayout:global(.light) .tabs,
+.popupTabLayout:global(.light) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .popupTabLayout:global(.light) .tabs,
+:global(.noAnimation) .popupTabLayout:global(.light) .content .panels::before {
+  box-shadow: none;
+}
+.popupTabLayout:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  background-color: transparent;
+}
+.popupTabLayout:global(.game) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+.popupTabLayout:global(.game) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+.popupTabLayout:global(.game) .tabs,
+.popupTabLayout:global(.game) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .popupTabLayout:global(.game) .tabs,
+:global(.noAnimation) .popupTabLayout:global(.game) .content .panels::before {
+  box-shadow: none;
+}
+:global(.green) .popupTabLayout:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  background-color: transparent;
+}
+:global(.green) .popupTabLayout:global(.game) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+:global(.green) .popupTabLayout:global(.game) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+:global(.green) .popupTabLayout:global(.game) .tabs,
+:global(.green) .popupTabLayout:global(.game) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .tabs,
+:global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .content .panels::before {
+  box-shadow: none;
+}
+:global(.orange) .popupTabLayout:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  background-color: transparent;
+}
+:global(.orange) .popupTabLayout:global(.game) .tabs {
+  border-radius: var(--semantic-radius-container);
+}
+:global(.orange) .popupTabLayout:global(.game) .content .panels::before {
+  border-radius: var(--semantic-radius-popup);
+}
+:global(.orange) .popupTabLayout:global(.game) .tabs,
+:global(.orange) .popupTabLayout:global(.game) .content .panels::before {
+  background-color: var(--semantic-color-background-overlay-default);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .tabs,
+:global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .content .panels::before {
+  box-shadow: none;
+}
+.popupTransitionContainer {
+  width: 100%;
+}
+.popup > .body {
+  position: relative;
+  padding: 0;
+}
+:global(.enact-locale-right-to-left) .popup > .body {
+  padding: 0;
+}
+.panels {
+  position: relative;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-height: 100%;
+}
+.panels > .viewport {
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+.panel {
+  padding: 0;
+  max-height: calc(100vh - 4rem );
+}
+.panel > .body {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  padding: var(--primitive-spacing-60);
+}
+.popup > .body,
+.optimized {
+  pointer-events: none;
+}
+.popup > .body .tabs,
+.optimized .tabs,
+.popup > .body .content > .panels,
+.optimized .content > .panels {
+  pointer-events: auto;
+}

package/PopupTabLayout/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "PopupTabLayout.js"
+}

package/PopupTabLayout/tests/PopupTabLayout-specs.js

@@ -0,0 +1,285 @@
+"use strict";
+
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Item = require("../../Item");
+var _PopupTabLayout = require("../PopupTabLayout");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+var keyDown = function keyDown(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var enterKeyDown = keyDown(13);
+var escapeKeyDown = keyDown(27);
+var leftKeyDown = keyDown(37);
+var downKeyDown = keyDown(40);
+var keyUp = function keyUp(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyUp(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var enterKeyUp = keyUp(13);
+var escapeKeyUp = keyUp(27);
+var downKeyUp = keyUp(40);
+describe('PopupTabLayout specs', function () {
+  test('should be rendered opened if open is set to true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popupTabLayout"
+        })
+      })
+    }));
+    var popupTabLayout = _react.screen.getByText('popupTabLayout');
+    expect(popupTabLayout).toBeInTheDocument();
+  });
+  test('should not be rendered if open is set to false', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popupTabLayout"
+        })
+      })
+    }));
+    var popupTabLayout = _react.screen.queryByText('popupTabLayout');
+    expect(popupTabLayout).toBeNull();
+  });
+  test('should apply \'ease-in-out\' class when noAnimation is false', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        "data-testid": "popupTabLayout",
+        noAnimation: false,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popupTabLayout"
+        })
+      })
+    }));
+    var expected = 'ease-in-out';
+    var actual = _react.screen.getByTestId('popupTabLayout').parentElement.parentElement.parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should not apply \'ease-in-out\' class when noAnimation is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        "data-testid": "popupTabLayout",
+        noAnimation: true,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popupTabLayout"
+        })
+      })
+    }));
+    var expected = 'ease-in-out';
+    var actual = _react.screen.getByTestId('popupTabLayout').parentElement.parentElement.parentElement.parentElement;
+    expect(actual).not.toHaveClass(expected);
+  });
+  test('should not close popupTabLayout on escape if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        noAutoDismiss: true,
+        onClose: handleClose,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popupTabLayout"
+        })
+      })
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('popupTabLayout'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleClose).not.toHaveBeenCalled();
+    });
+  }));
+  test('should display items from second tab', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "First Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 2"
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "Second Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 3"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 4"
+              })]
+            })
+          })
+        })]
+      })
+    }));
+    var thirdItem = _react.screen.queryByText('Item 3');
+    var fourthItem = _react.screen.queryByText('Item 4');
+    expect(thirdItem).not.toBeInTheDocument();
+    expect(fourthItem).not.toBeInTheDocument();
+    var secondTab = _react.screen.getByText('Second Tab Title');
+    yield user.click(secondTab);
+    thirdItem = _react.screen.getByText('Item 3');
+    fourthItem = _react.screen.getByText('Item 4');
+    expect(thirdItem).toBeInTheDocument();
+    expect(fourthItem).toBeInTheDocument();
+  }));
+  test('should fire onTabClick event for 5-way Select on tab element', function () {
+    var onTabClick = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          onTabClick: onTabClick,
+          title: "First Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 2"
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "Second Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 3"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 4"
+              })]
+            })
+          })
+        })]
+      })
+    }));
+    var firstTab = _react.screen.getByText('First Tab Title');
+    enterKeyDown(firstTab);
+    enterKeyUp(firstTab);
+    expect(onTabClick).toHaveBeenCalled();
+  });
+  test('should fire onBack event when returning to previous tab', function () {
+    var handleOnBack = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanels, {
+            index: 1,
+            onBack: handleOnBack,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 2"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 3"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 4"
+              })]
+            })]
+          })
+        })
+      })
+    }));
+    var tab = _react.screen.getByText('Tab Title');
+    escapeKeyDown(tab);
+    escapeKeyUp(tab);
+    expect(handleOnBack).toHaveBeenCalled();
+  });
+  test('should fire onKeyDown event for 5-way navigation inside Tab element', function () {
+    var onKeyDown = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "First Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              onKeyDown: onKeyDown,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 2"
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "Second Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.TabPanels, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 3"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 4"
+              })]
+            })
+          })
+        })]
+      })
+    }));
+    var firstItem = _react.screen.getByText('Item 1');
+    downKeyDown(firstItem);
+    downKeyUp(firstItem);
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+  test('should fire onBack event when left key pressed from the second TabPanel', function () {
+    var onBack = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.PopupTabLayout, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopupTabLayout.Tab, {
+          title: "Tab Title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanels, {
+            index: 1,
+            onBack: onBack,
+            rtl: false,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 1"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 2"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopupTabLayout.TabPanel, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 3"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.Item, {
+                children: "Item 4"
+              })]
+            })]
+          })
+        })
+      })
+    }));
+    var firstItem = _react.screen.getByText('Item 3');
+    leftKeyDown(firstItem);
+    expect(onBack).toHaveBeenCalled();
+  });
+});

package/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,171 @@
+// Type definitions for limestone/ProgressBar
+
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import * as React from "react";
+
+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 ProgressBarBaseProps {
+  /**
+   * The proportion of the loaded portion of the progress bar.
+   * *  Valid values are between  `0`  and  `1` .
+   */
+  backgroundProgress?: number;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `progressBar`  - The root component class
+ * *  `radial`  - Applied when  `orientation`  is  `'radial'`
+ */
+  css?: object;
+  /**
+   * Highlights the filled portion.
+   */
+  highlighted?: boolean;
+  /**
+   * The orientation of the slider.
+   */
+  orientation?: "horizontal" | "vertical" | "radial";
+  /**
+   * A number between  `0`  and  `1`  indicating the proportion of the filled portion of the bar.
+   */
+  progress?: number;
+  /**
+   * Displays an anchor at  `progressAnchor` .
+   */
+  showAnchor?: boolean;
+  /**
+ * Enables the built-in tooltip.
+ * 
+ * To customize the tooltip, pass either a custom tooltip component or an instance of
+   with additional
+props configured.
+ * 
+ * The provided component will receive the following props from  `ProgressBar` :
+ * *  `orientation`   - The value of  `orientation`
+ * *  `percent`       - Always  `true`  indicating the value should be presented as a percentage
+rather than an absolute value
+ * *  `progress`      - The  `value`  as a proportion between  `min`  and  `max`
+ * *  `visible`       - Always  `true`  indicating that the tooltip should be visible
+ * 
+ * Usage:
+ * ```
+<ProgressBar
+  tooltip={
+    <ProgressBarTooltip position="after" />
+  }
+/>
+```
+ 
+ * The tooltip may also be passed as a child via the  `"tooltip"`  slot. See
+   for more information on how slots can be used.
+ * 
+ * Usage:
+ * ```
+<ProgressBar>
+  <ProgressBarTooltip position="after" />
+</ProgressBar>
+```
+ */
+  tooltip?: boolean | React.ComponentType | JSX.Element;
+}
+/**
+ * Renders a limestone-styled progress bar.
+ */
+
+export class ProgressBarBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ProgressBarBaseProps>
+> {}
+
+export interface ProgressBarTooltipProps {
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root component class
+ */
+  css?: object;
+  /**
+ * Sets the orientation of the tooltip based on the orientation of the bar.
+ * 
+ * 'vertical' sends the tooltip to one of the sides, 'horizontal' positions it above the
+bar, 'radial' can position it on all sides.
+ */
+  orientation?: "horizontal" | "vertical" | "radial";
+  /**
+   * Displays the value as a percentage.
+   */
+  percent?: boolean;
+  /**
+ * Position of the tooltip with respect to the progress bar.
+ * *  For  `orientation="horizontal"`  or  `orientation="radial"`  progress bars, the default value is  `'above'` .
+ * *  For  `orientation="vertical"`  progress bars, the default value is  `'before'` .
+ * 
+ * When using  `'before'`  or  `'after'`  alone or in any of the below combinations,  `'before'` 
+will position the tooltip on the side of the current locale's text directionality. In LTR
+locales, it will be on the left; in RTL locales, it will be on the right. Similarly,
+ `'after'`  will position the tooltip on the opposite side: the right side for LTR and
+left for RTL.
+ * 
+ * Valid values when  `orientation="horizontal"`  or  `orientation="radial"`
+ * _Value_ _Tooltip Direction_ `'above'` Above component, flowing to the nearest end `'above left'` Above component, flowing to the left `'above before'` Above component, flowing to the start of text `'above center'` Above component, flowing to the center `'above right'` Above component, flowing to the right `'above after'` Above component, flowing to the end of text `'below'` Below component, flowing to the nearest end `'below left'` Below component, flowing to the left `'below before'` Below component, flowing to the start of text `'below center'` Below component, flowing to the center `'below right'` Below component, flowing to the right `'below after'` Below component, flowing to the end of text 
+ * Valid values when  `orientation="vertical"`  or  `orientation="radial"`
+ * _Value_ _Tooltip Direction_ `'left'` Left of the component, contents middle aligned `'before'` Start of text side of the component, contents middle aligned `'right'` right of the component, contents middle aligned `'after'` End of text side of the component, contents middle aligned */
+  position?:
+    | "above"
+    | "above before"
+    | "above left"
+    | "above after"
+    | "above center"
+    | "above right"
+    | "below"
+    | "below left"
+    | "below before"
+    | "below center"
+    | "below right"
+    | "below after"
+    | "left"
+    | "before"
+    | "right"
+    | "after";
+  /**
+   * The proportion of the filled part of the bar.
+   * *  Should be a number between 0 and 1.
+   */
+  proportion?: number;
+  /**
+   * Visibility of the tooltip
+   */
+  visible?: boolean;
+}
+/**
+ * A    specifically adapted for use with
+   or
+  .
+ */
+
+export class ProgressBarTooltip extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ProgressBarTooltipProps>
+> {}
+
+export interface ProgressBarDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function ProgressBarDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ProgressBarDecoratorProps>;
+
+export interface ProgressBarProps
+  extends Merge<ProgressBarBaseProps, ProgressBarDecoratorProps> {}
+/**
+ * The ready-to-use Limestone-styled ProgressBar.
+ */
+
+export class ProgressBar extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ProgressBarProps>
+> {}
+
+export default ProgressBar;