td-stylekit 27.1.1 → 27.3.0

package/dist/es/Modal/components/index.d.ts

@@ -6,4 +6,5 @@ export { default as FooterConfirmation } from './FooterConfirmation';
 export { default as ModalOverlay } from './ModalOverlay';
 export { default as ModalMessage } from './ModalMessage';
 export { FooterContainer, ModalDialog } from './elements';
+export { default as Flyout } from './Flyout';
 //# sourceMappingURL=index.d.ts.map

package/dist/es/Modal/components/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Body", {
     return _Body["default"];
   }
 });
+Object.defineProperty(exports, "Flyout", {
+  enumerable: true,
+  get: function get() {
+    return _Flyout["default"];
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -74,6 +80,8 @@ var _ModalMessage = _interopRequireDefault(require("./ModalMessage"));
 
 var _elements = require("./elements");
 
+var _Flyout = _interopRequireDefault(require("./Flyout"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};

package/dist/es/Modal/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const MODAL_SIZES: any;
 export declare const MODAL_SIZES_MAP: {
     [x: number]: {
-        width: number;
+        width: string;
         minHeight: number;
         maxHeight: string;
         height?: undefined;
@@ -12,4 +12,5 @@ export declare const MODAL_SIZES_MAP: {
         maxHeight?: undefined;
     };
 };
+export declare const FLYOUT_WIDTH = 256;
 //# sourceMappingURL=constants.d.ts.map

package/dist/es/Modal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MODAL_SIZES_MAP = exports.MODAL_SIZES = void 0;
+exports.MODAL_SIZES_MAP = exports.MODAL_SIZES = exports.FLYOUT_WIDTH = void 0;
 
 var _keymirror = _interopRequireDefault(require("keymirror"));
 
@@ -20,22 +20,25 @@ var MODAL_SIZES = (0, _keymirror["default"])({
   MEDIUM: null,
   LARGE: null,
   FULL: null
-});
+}); // width needs px string here needs to be explicit as we use it for css `calc`
+
 exports.MODAL_SIZES = MODAL_SIZES;
 var MODAL_SIZES_MAP = (_MODAL_SIZES_MAP = {}, _defineProperty(_MODAL_SIZES_MAP, MODAL_SIZES.SMALL, {
-  width: 400,
+  width: '400px',
   minHeight: 200,
   maxHeight: '80%'
 }), _defineProperty(_MODAL_SIZES_MAP, MODAL_SIZES.MEDIUM, {
-  width: 600,
+  width: "600px",
   minHeight: 320,
   maxHeight: '80%'
 }), _defineProperty(_MODAL_SIZES_MAP, MODAL_SIZES.LARGE, {
-  width: 800,
+  width: "800px",
   minHeight: 432,
   maxHeight: '80%'
 }), _defineProperty(_MODAL_SIZES_MAP, MODAL_SIZES.FULL, {
   width: '90%',
   height: '90%'
 }), _MODAL_SIZES_MAP);
-exports.MODAL_SIZES_MAP = MODAL_SIZES_MAP;
+exports.MODAL_SIZES_MAP = MODAL_SIZES_MAP;
+var FLYOUT_WIDTH = 256;
+exports.FLYOUT_WIDTH = FLYOUT_WIDTH;

package/dist/es/ThemeProvider/ThemeProvider.d.ts

@@ -35,6 +35,7 @@ declare namespace ThemeProvider {
             bigCentered: string;
             popover: string;
             secondaryNavActiveItem: string;
+            flyout: string;
         };
         sizes: {
             PageHeaderIcon: number;
@@ -163,6 +164,7 @@ declare namespace ThemeProvider {
             bigCentered: string;
             popover: string;
             secondaryNavActiveItem: string;
+            flyout: string;
         };
         sizes: {
             PageHeaderIcon: number;

package/dist/es/ThemeProvider/accessibility.js

@@ -29,7 +29,8 @@ var highContrastShadows = {
   pill: '0px 0px 8px 0px rgba(0,0,0,0.4)',
   bigCentered: '0 0 10px 00 rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(0, 0, 0, 0.1)',
   popover: '0 6px 15px 0 rgba(0, 0, 0, 0.1), 0 -1px 4px 0 rgba(0, 0, 0, 0.1)',
-  secondaryNavActiveItem: '0 2px 1px rgba(255,255,255), inset 0px 2px 1px rgba(255,255,255)'
+  secondaryNavActiveItem: '0 2px 1px rgba(255,255,255), inset 0px 2px 1px rgba(255,255,255)',
+  flyout: "inset 8px 0px 10px 0px rgba(0, 0, 0, 0.2), 0 8px 10px 00 rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(0, 0, 0, 0.1)"
 };
 
 var redGreenShiftPalette = _objectSpread(_objectSpread({}, _theme.palette), {}, {

package/dist/es/ThemeProvider/theme.d.ts

@@ -32,6 +32,7 @@ export declare const theme: {
         bigCentered: string;
         popover: string;
         secondaryNavActiveItem: string;
+        flyout: string;
     };
     readonly sizes: {
         PageHeaderIcon: number;

package/dist/es/ThemeProvider/theme.js

@@ -47,7 +47,8 @@ var shadows = {
   pill: '0px 0px 8px 0px rgba(0,0,0,0.2)',
   bigCentered: '0 0 10px 00 rgba(0, 0, 0, 0.1), 0 2px 0 0 rgba(0, 0, 0, 0.05)',
   popover: '0 6px 15px 0 rgba(0, 0, 0, 0.05), 0 -1px 4px 0 rgba(0, 0, 0, 0.05)',
-  secondaryNavActiveItem: '0 2px 1px rgba(255, 255, 255, .7), inset 0px 2px 1px rgba(255, 255, 255, .7)'
+  secondaryNavActiveItem: '0 2px 1px rgba(255, 255, 255, .7), inset 0px 2px 1px rgba(255, 255, 255, .7)',
+  flyout: "inset 8px 0px 10px 0px rgba(0, 0, 0, 0.1), 0 8px 10px 00 rgba(0, 0, 0, 0.1), 0 2px 0 0 rgba(0, 0, 0, 0.05)"
 };
 var sizes = {
   PageHeaderIcon: 87

package/dist/es/utils/enzyme.d.ts

@@ -1,17 +1,3 @@
-import type React from 'react';
-import { RenderOptions, RenderResult } from '@testing-library/react';
 export declare const mountWithTheme: (tree: any) => any;
 export declare const mountWithV5Theme: (tree: any) => any;
-/**
- * Custom render method to allow wrapping components in ThemeProvider for testing
- *
- * @param {ReactElement} ui - The component to be rendered
- * @param {RenderOptions} options - testing library options
- *
- * @return {RenderResult} testing library render result
- */
-declare function customRender(ui: React.ReactElement, options?: RenderOptions & {
-    theme: 'v4' | 'v5';
-}): RenderResult;
-export { customRender as render };
 //# sourceMappingURL=enzyme.d.ts.map

package/dist/es/utils/enzyme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mountWithV5Theme = exports.mountWithTheme = void 0;
-exports.render = customRender;
 
 var _react = require("@emotion/react");
 
@@ -12,22 +11,8 @@ var _enzyme = require("enzyme");
 
 var _src = require("../../src");
 
-var _react2 = require("@testing-library/react");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
-var _excluded = ["theme"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
 
@@ -67,37 +52,5 @@ var mountWithV5Theme = function mountWithV5Theme(tree) {
     wrappingComponent: ThemeProviderWrapperV5
   });
 };
-/**
- * Custom render method to allow wrapping components in ThemeProvider for testing
- *
- * @param {ReactElement} ui - The component to be rendered
- * @param {RenderOptions} options - testing library options
- *
- * @return {RenderResult} testing library render result
- */
-
-
-exports.mountWithV5Theme = mountWithV5Theme;
-
-function customRender(ui, options) {
-  var _ref3 = options || {},
-      _ref3$theme = _ref3.theme,
-      theme = _ref3$theme === void 0 ? 'v4' : _ref3$theme,
-      rest = _objectWithoutProperties(_ref3, _excluded);
-
-  var Providers = function Providers(_ref4) {
-    var children = _ref4.children;
-    return (0, _jsxRuntime.jsx)(_react.ThemeProvider // types for v4 overrides are not correct
-    // @ts-ignore
-    , {
-      "data-gs-c": gsC(children),
-      "data-gs": gs("src", "utils", "enzyme.tsx", "custom-render", "emotion-theme-provider"),
-      theme: theme === 'v5' ? _src.ThemeProvider.v5Theme : _src.ThemeProvider.v4Theme,
-      children: children
-    });
-  };
 
-  return (0, _react2.render)(ui, _objectSpread({
-    wrapper: Providers
-  }, rest));
-}
+exports.mountWithV5Theme = mountWithV5Theme;

package/dist/es/utils/testingLibrary.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+import { RenderOptions, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+/**
+ * Custom render method to allow wrapping components in ThemeProvider for testing
+ *
+ * @param {ReactElement} ui - The component to be rendered
+ * @param {RenderOptions} options - testing library options
+ *
+ * @return {RenderResult} testing library render result
+ */
+declare function customRender(ui: React.ReactElement, options?: RenderOptions & {
+    theme: 'v4' | 'v5';
+}): RenderResult;
+export * from '@testing-library/react';
+export { userEvent };
+export { customRender as render };
+//# sourceMappingURL=testingLibrary.d.ts.map

package/dist/es/utils/testingLibrary.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  render: true,
+  userEvent: true
+};
+exports.render = customRender;
+Object.defineProperty(exports, "userEvent", {
+  enumerable: true,
+  get: function get() {
+    return _userEvent["default"];
+  }
+});
+
+var _react = require("@emotion/react");
+
+var _ = require("..");
+
+var _react2 = require("@testing-library/react");
+
+Object.keys(_react2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _react2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _react2[key];
+    }
+  });
+});
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+var _excluded = ["theme"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
+if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
+
+/**
+ * Custom render method to allow wrapping components in ThemeProvider for testing
+ *
+ * @param {ReactElement} ui - The component to be rendered
+ * @param {RenderOptions} options - testing library options
+ *
+ * @return {RenderResult} testing library render result
+ */
+function customRender(ui, options) {
+  var _ref = options || {},
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'v4' : _ref$theme,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var Providers = function Providers(_ref2) {
+    var children = _ref2.children;
+    return (0, _jsxRuntime.jsx)(_react.ThemeProvider // types for v4 overrides are not correct
+    // @ts-ignore
+    , {
+      "data-gs-c": gsC(children),
+      "data-gs": gs("src", "utils", "testinglibrary.tsx", "custom-render", "emotion-theme-provider"),
+      theme: theme === 'v5' ? _.ThemeProvider.v5Theme : _.ThemeProvider.v4Theme,
+      children: children
+    });
+  };
+
+  return (0, _react2.render)(ui, _objectSpread({
+    wrapper: Providers
+  }, rest));
+} // re-export everything

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "27.1.1",
+  "version": "27.3.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",
@@ -115,10 +115,10 @@
     "@storybook/source-loader": "6.5.0-alpha.50",
     "@storybook/testing-react": "^1.2.3",
     "@storybook/theming": "6.5.0-alpha.50",
-    "@testing-library/dom": "^7.29.1",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/color": "^3.0.1",
     "@types/jest": "^29.0.0",
     "@types/lodash.clamp": "^4.0.6",