@elliemae/ds-popperjs 2.0.0-alpha.3 → 2.0.0-alpha.7

package/cjs/PopoverArrow.js

@@ -13,7 +13,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _svg;
-const StyledArrow = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-olcdf1-0"
 })(["position:absolute;width:18px;height:18px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-18px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-18px;}&[data-placement^='bottom']{top:-18px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-18px;}"], ({
   theme
@@ -29,12 +29,12 @@ const PopoverArrow = ({
   style: style,
   ref: arrowElementRef,
   "data-testid": "ds-tooltip-arrow",
-  children: _svg || (_svg = /*#__PURE__*/_jsx__default['default']("svg", {
+  children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
     viewBox: "0 0 30 30"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("path", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
     className: "stroke",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-  }), /*#__PURE__*/_jsx__default['default']("path", {
+  }), /*#__PURE__*/_jsx__default["default"]("path", {
     className: "fill",
     d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
   })))

package/cjs/PopoverContent.js

@@ -17,10 +17,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 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__default['default'](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; }
-const StyledPopoverContentWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+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__default["default"](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; }
+const StyledPopoverContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1gxm7np-0"
-})(["background:white;max-width:400px;box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);padding:10px;z-index:", ";"], ({
+})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);z-index:", ";"], ({
   zIndex
 }) => zIndex);
 const PopoverContent = ({
@@ -38,7 +38,7 @@ const PopoverContent = ({
   style: popperStyles
 }, popperAttributes), {}, {
   children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](PopoverArrow.PopoverArrow, {
+    children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
       arrowElementRef: setArrowElement,
       style: arrowStyle,
       placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'

package/cjs/config/useConfigDSPopperjs.js

@@ -17,16 +17,18 @@ const useConfigDSPopperjs = appProps => {
   const {
     referenceElement,
     closeContextMenu,
-    modifiers
+    modifiers,
+    startPlacementPreference
   } = props;
   const popperExtraOpts = react.useMemo(() => ({
+    placement: startPlacementPreference,
     modifiers
-  }), [modifiers]);
+  }), [modifiers, startPlacementPreference]);
   const popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _referenceElement$cur, _referenceElement$cur2;
+    var _referenceElement$con;
 
-    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$cur = referenceElement.current) !== null && _referenceElement$cur !== void 0 && (_referenceElement$cur2 = _referenceElement$cur.contains) !== null && _referenceElement$cur2 !== void 0 && _referenceElement$cur2.call(_referenceElement$cur, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
+    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
   });
   return react.useMemo(() => ({
     props,

package/cjs/config/useConfiguredDefaultModifiers.js

@@ -44,7 +44,8 @@ const useConfiguredDefaultModifiers = ({
     if (!explicitAppWithoutArrow) mod.push({
       name: 'arrow',
       options: {
-        element: arrowElement
+        element: arrowElement,
+        padding: 18
       }
     }); // the app can define an explicit element to act as a boundary instead of popperjs default one
 

package/cjs/config/useConfiguredDefaultProps.js

@@ -12,24 +12,26 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 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__default['default'](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 _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__default["default"](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; }
 
 const noop = () => {};
 
-const staticDefaultProps = {
-  referenceElement: null,
-  showPopover: false,
-  closeContextMenu: noop,
-  withoutPortal: false,
-  withoutArrow: false,
-  portalDOMContainer: document.body,
-  placementOrderPreference: ['top', 'bottom', 'left', 'right'],
-  zIndex: 1
-};
 const useConfiguredDefaultProps = ({
   props,
   arrowElement
 }) => {
+  // don't move this out of the hook or `document.body` will explode
+  const staticDefaultProps = react.useMemo(() => ({
+    referenceElement: null,
+    showPopover: false,
+    closeContextMenu: noop,
+    withoutPortal: false,
+    withoutArrow: false,
+    portalDOMContainer: document.body,
+    startPlacementPreference: 'top',
+    placementOrderPreference: ['top', 'bottom', 'left', 'right'],
+    zIndex: 1
+  }), []);
   const {
     modifiers: configuredModifiers
   } = useConfiguredDefaultModifiers.useConfiguredDefaultModifiers({
@@ -38,7 +40,7 @@ const useConfiguredDefaultProps = ({
   });
   const defaultProps = react.useMemo(() => _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
     modifiers: configuredModifiers
-  }), [configuredModifiers]);
+  }), [configuredModifiers, staticDefaultProps]);
   return defaultProps;
 };
 

package/cjs/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var react = require('react');
 var reactDom = require('react-dom');
+var reactDesc = require('react-desc');
+var propTypes = require('./propTypes.js');
 var PopoverContent = require('./PopoverContent.js');
 var useConfigDSPopperjs = require('./config/useConfigDSPopperjs.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -33,7 +35,7 @@ const DSPopperJS = props => {
     styles,
     attributes
   } = popoverHelper;
-  const contentJSX = react.useMemo(() => /*#__PURE__*/_jsx__default['default'](PopoverContent.PopoverContent, {
+  const contentJSX = react.useMemo(() => /*#__PURE__*/_jsx__default["default"](PopoverContent.PopoverContent, {
     setPopperElement: setPopperElement,
     popperStyles: styles.popper,
     popperAttributes: attributes.popper,
@@ -55,4 +57,9 @@ const DSPopperJS = props => {
   return null;
 };
 
+const DSPopperJSWithSchema = reactDesc.describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
+DSPopperJSWithSchema.propTypes = propTypes.dspopperjsPropTypes;
+
 exports.DSPopperJS = DSPopperJS;
+exports.DSPopperJSWithSchema = DSPopperJSWithSchema;
+exports["default"] = DSPopperJS;

package/cjs/propTypes.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const dspopperjsPropTypes = {
+  /**
+   * React ref to popperjs referenceElement
+   */
+  referenceElement: reactDesc.PropTypes.element.description('popperjs DOM referenceElement').isRequired,
+
+  /**
+   * Wheter or not to show the popper content
+   */
+  showPopover: reactDesc.PropTypes.bool.description('whether or not to show the popper content').isRequired,
+
+  /**
+   * Callback to close the context menu, used for "on click outside",
+   *  if not provided click outside will not trigger anything
+   */
+  closeContextMenu: reactDesc.PropTypes.func.description('Callback to close the context menu, used for "on click outside",' + ' if not provided click outside will not trigger anything').defaultValue('() => {}'),
+
+  /**
+   *  Wheter or not the popper content should appear in a DOM portal or not
+   */
+  withoutPortal: reactDesc.PropTypes.bool.description('Whether or not the popper content should appear in a DOM portal or not').defaultValue(true),
+
+  /**
+   *  Wheter or not the popper context menu should print the arrow
+   */
+  withoutArrow: reactDesc.PropTypes.bool.description('Whether or not the popper context menu should print the arrow').defaultValue(false),
+
+  /**
+   *  Bounding element to calculate upon, defaults to it is "clippingParents",
+   *   which are the scrolling containers that may cause the element to be partially or fully cut off.
+   */
+  boundaryElement: reactDesc.PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",' + 'which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(undefined),
+
+  /**
+   *  When using portal, the container in which to append the DOM content, defaults to document body
+   */
+  portalDOMContainer: reactDesc.PropTypes.element.description('When using portal, the container in which to append the DOM content, defaults to document body').defaultValue(undefined),
+
+  /**
+   *  start placement preferences, as per popperjs placement option
+   */
+  startPlacementPreference: reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'top'"),
+
+  /**
+   *  Array of placement preferences, as per popperjs "flip" placement option
+   */
+  placementOrderPreference: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'])).description('Array of placement preferences, as per popperjs "flip" placement option').defaultValue("['top', 'bottom', 'left', 'right']"),
+
+  /**
+   *  popperjs content z-index
+   */
+  zIndex: reactDesc.PropTypes.number.description('popperjs content z-index').defaultValue(1),
+
+  /**
+   *  placement offset array
+   */
+  customOffset: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('placement offset array').defaultValue(1),
+
+  /**
+   *  modifiers array for full-custom popper-js override
+   *  https://popper.js.org/docs/v2/modifiers/
+   */
+  modifiers: reactDesc.PropTypes.array.description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/').defaultValue(1)
+};
+
+exports.dspopperjsPropTypes = dspopperjsPropTypes;

package/esm/PopoverContent.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 const StyledPopoverContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1gxm7np-0"
-})(["background:white;max-width:400px;box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);padding:10px;z-index:", ";"], ({
+})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);z-index:", ";"], ({
   zIndex
 }) => zIndex);
 const PopoverContent = ({

package/esm/config/useConfigDSPopperjs.js

@@ -13,16 +13,18 @@ const useConfigDSPopperjs = appProps => {
   const {
     referenceElement,
     closeContextMenu,
-    modifiers
+    modifiers,
+    startPlacementPreference
   } = props;
   const popperExtraOpts = useMemo(() => ({
+    placement: startPlacementPreference,
     modifiers
-  }), [modifiers]);
+  }), [modifiers, startPlacementPreference]);
   const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);
   useOnClickOutside(popperElement, e => {
-    var _referenceElement$cur, _referenceElement$cur2;
+    var _referenceElement$con;
 
-    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$cur = referenceElement.current) !== null && _referenceElement$cur !== void 0 && (_referenceElement$cur2 = _referenceElement$cur.contains) !== null && _referenceElement$cur2 !== void 0 && _referenceElement$cur2.call(_referenceElement$cur, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
+    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
   });
   return useMemo(() => ({
     props,

package/esm/config/useConfiguredDefaultModifiers.js

@@ -40,7 +40,8 @@ const useConfiguredDefaultModifiers = ({
     if (!explicitAppWithoutArrow) mod.push({
       name: 'arrow',
       options: {
-        element: arrowElement
+        element: arrowElement,
+        padding: 18
       }
     }); // the app can define an explicit element to act as a boundary instead of popperjs default one
 

package/esm/config/useConfiguredDefaultProps.js

@@ -8,20 +8,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const noop = () => {};
 
-const staticDefaultProps = {
-  referenceElement: null,
-  showPopover: false,
-  closeContextMenu: noop,
-  withoutPortal: false,
-  withoutArrow: false,
-  portalDOMContainer: document.body,
-  placementOrderPreference: ['top', 'bottom', 'left', 'right'],
-  zIndex: 1
-};
 const useConfiguredDefaultProps = ({
   props,
   arrowElement
 }) => {
+  // don't move this out of the hook or `document.body` will explode
+  const staticDefaultProps = useMemo(() => ({
+    referenceElement: null,
+    showPopover: false,
+    closeContextMenu: noop,
+    withoutPortal: false,
+    withoutArrow: false,
+    portalDOMContainer: document.body,
+    startPlacementPreference: 'top',
+    placementOrderPreference: ['top', 'bottom', 'left', 'right'],
+    zIndex: 1
+  }), []);
   const {
     modifiers: configuredModifiers
   } = useConfiguredDefaultModifiers({
@@ -30,7 +32,7 @@ const useConfiguredDefaultProps = ({
   });
   const defaultProps = useMemo(() => _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
     modifiers: configuredModifiers
-  }), [configuredModifiers]);
+  }), [configuredModifiers, staticDefaultProps]);
   return defaultProps;
 };
 

package/esm/index.js

@@ -1,6 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { describe } from 'react-desc';
+import { dspopperjsPropTypes } from './propTypes.js';
 import { PopoverContent } from './PopoverContent.js';
 import { useConfigDSPopperjs } from './config/useConfigDSPopperjs.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -47,4 +49,7 @@ const DSPopperJS = props => {
   return null;
 };
 
-export { DSPopperJS };
+const DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
+DSPopperJSWithSchema.propTypes = dspopperjsPropTypes;
+
+export { DSPopperJS, DSPopperJSWithSchema, DSPopperJS as default };

package/esm/propTypes.js

@@ -0,0 +1,68 @@
+import { PropTypes } from 'react-desc';
+
+const dspopperjsPropTypes = {
+  /**
+   * React ref to popperjs referenceElement
+   */
+  referenceElement: PropTypes.element.description('popperjs DOM referenceElement').isRequired,
+
+  /**
+   * Wheter or not to show the popper content
+   */
+  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,
+
+  /**
+   * Callback to close the context menu, used for "on click outside",
+   *  if not provided click outside will not trigger anything
+   */
+  closeContextMenu: PropTypes.func.description('Callback to close the context menu, used for "on click outside",' + ' if not provided click outside will not trigger anything').defaultValue('() => {}'),
+
+  /**
+   *  Wheter or not the popper content should appear in a DOM portal or not
+   */
+  withoutPortal: PropTypes.bool.description('Whether or not the popper content should appear in a DOM portal or not').defaultValue(true),
+
+  /**
+   *  Wheter or not the popper context menu should print the arrow
+   */
+  withoutArrow: PropTypes.bool.description('Whether or not the popper context menu should print the arrow').defaultValue(false),
+
+  /**
+   *  Bounding element to calculate upon, defaults to it is "clippingParents",
+   *   which are the scrolling containers that may cause the element to be partially or fully cut off.
+   */
+  boundaryElement: PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",' + 'which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(undefined),
+
+  /**
+   *  When using portal, the container in which to append the DOM content, defaults to document body
+   */
+  portalDOMContainer: PropTypes.element.description('When using portal, the container in which to append the DOM content, defaults to document body').defaultValue(undefined),
+
+  /**
+   *  start placement preferences, as per popperjs placement option
+   */
+  startPlacementPreference: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'top'"),
+
+  /**
+   *  Array of placement preferences, as per popperjs "flip" placement option
+   */
+  placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'])).description('Array of placement preferences, as per popperjs "flip" placement option').defaultValue("['top', 'bottom', 'left', 'right']"),
+
+  /**
+   *  popperjs content z-index
+   */
+  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),
+
+  /**
+   *  placement offset array
+   */
+  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),
+
+  /**
+   *  modifiers array for full-custom popper-js override
+   *  https://popper.js.org/docs/v2/modifiers/
+   */
+  modifiers: PropTypes.array.description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/').defaultValue(1)
+};
+
+export { dspopperjsPropTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-popperjs",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper JS Wrapper",
   "module": "./esm/index.js",
@@ -15,6 +15,10 @@
       "import": "./esm/utils/hooks/useOnClickOutside.js",
       "require": "./cjs/utils/hooks/useOnClickOutside.js"
     },
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
+    },
     "./PopoverContent": {
       "import": "./esm/PopoverContent.js",
       "require": "./cjs/PopoverContent.js"
@@ -60,7 +64,7 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-alpha.3",
+    "@elliemae/ds-props-helpers": "2.0.0-alpha.7",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/config/useConfiguredDefaultProps.d.ts

@@ -9,6 +9,7 @@ export declare const useConfiguredDefaultProps: ({ props, arrowElement }: {
     withoutPortal: boolean;
     withoutArrow: boolean;
     portalDOMContainer: HTMLElement;
+    startPlacementPreference: string;
     placementOrderPreference: string[];
     zIndex: number;
 };

package/types/config/useConfiguredMergedProps.d.ts

@@ -9,6 +9,7 @@ export declare const useConfiguredMergedProps: ({ props, arrowElement }: {
     withoutPortal: boolean;
     withoutArrow: boolean;
     portalDOMContainer: HTMLElement;
+    startPlacementPreference: string;
     placementOrderPreference: string[];
     zIndex: number;
 }>;

package/types/index.d.ts

@@ -1,3 +1,22 @@
 /// <reference types="react" />
 import type { DSDSPopperjsPropsT } from './index.d';
-export declare const DSPopperJS: (props: DSDSPopperjsPropsT) => JSX.Element;
+declare const DSPopperJS: {
+    (props: DSDSPopperjsPropsT): JSX.Element;
+    propTypes: {
+        referenceElement: any;
+        showPopover: any;
+        closeContextMenu: any;
+        withoutPortal: any;
+        withoutArrow: any;
+        boundaryElement: any;
+        portalDOMContainer: any;
+        startPlacementPreference: any;
+        placementOrderPreference: any;
+        zIndex: any;
+        customOffset: any;
+        modifiers: any;
+    };
+};
+declare const DSPopperJSWithSchema: any;
+export { DSPopperJS, DSPopperJSWithSchema };
+export default DSPopperJS;

package/types/propTypes.d.ts

@@ -0,0 +1,53 @@
+export declare const dspopperjsPropTypes: {
+    /**
+     * React ref to popperjs referenceElement
+     */
+    referenceElement: any;
+    /**
+     * Wheter or not to show the popper content
+     */
+    showPopover: any;
+    /**
+     * Callback to close the context menu, used for "on click outside",
+     *  if not provided click outside will not trigger anything
+     */
+    closeContextMenu: any;
+    /**
+     *  Wheter or not the popper content should appear in a DOM portal or not
+     */
+    withoutPortal: any;
+    /**
+     *  Wheter or not the popper context menu should print the arrow
+     */
+    withoutArrow: any;
+    /**
+     *  Bounding element to calculate upon, defaults to it is "clippingParents",
+     *   which are the scrolling containers that may cause the element to be partially or fully cut off.
+     */
+    boundaryElement: any;
+    /**
+     *  When using portal, the container in which to append the DOM content, defaults to document body
+     */
+    portalDOMContainer: any;
+    /**
+     *  start placement preferences, as per popperjs placement option
+     */
+    startPlacementPreference: any;
+    /**
+     *  Array of placement preferences, as per popperjs "flip" placement option
+     */
+    placementOrderPreference: any;
+    /**
+     *  popperjs content z-index
+     */
+    zIndex: any;
+    /**
+     *  placement offset array
+     */
+    customOffset: any;
+    /**
+     *  modifiers array for full-custom popper-js override
+     *  https://popper.js.org/docs/v2/modifiers/
+     */
+    modifiers: any;
+};