@elliemae/ds-props-helpers 2.3.0-next.6 → 2.3.0-next.7

package/cjs/globalProps/constants.js

@@ -9,7 +9,8 @@ require('core-js/modules/web.dom-collections.iterator.js');
 /* eslint-disable max-lines */
 const ariaAttributes = ['aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext'];
 const domAttributes = ['onCopy', 'onCopyCapture', 'onCut', 'onCutCapture', 'onPaste', 'onPasteCapture', 'onCompositionEnd', 'onCompositionEndCapture', 'onCompositionStart', 'onCompositionStartCapture', 'onCompositionUpdate', 'onCompositionUpdateCapture', 'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', 'onChange', 'onChangeCapture', 'onBeforeInput', 'onBeforeInputCapture', 'onInput', 'onInputCapture', 'onReset', 'onResetCapture', 'onSubmit', 'onSubmitCapture', 'onInvalid', 'onInvalidCapture', 'onLoad', 'onLoadCapture', 'onError', 'onErrorCapture', 'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyPressCapture', 'onKeyUp', 'onKeyUpCapture', 'onAbort', 'onAbortCapture', 'onCanPlay', 'onCanPlayCapture', 'onCanPlayThrough', 'onCanPlayThroughCapture', 'onDurationChange', 'onDurationChangeCapture', 'onEmptied', 'onEmptiedCapture', 'onEncrypted', 'onEncryptedCapture', 'onEnded', 'onEndedCapture', 'onLoadedData', 'onLoadedDataCapture', 'onLoadedMetadata', 'onLoadedMetadataCapture', 'onLoadStart', 'onLoadStartCapture', 'onPause', 'onPauseCapture', 'onPlay', 'onPlayCapture', 'onPlaying', 'onPlayingCapture', 'onProgress', 'onProgressCapture', 'onRateChange', 'onRateChangeCapture', 'onSeeked', 'onSeekedCapture', 'onSeeking', 'onSeekingCapture', 'onStalled', 'onStalledCapture', 'onSuspend', 'onSuspendCapture', 'onTimeUpdate', 'onTimeUpdateCapture', 'onVolumeChange', 'onVolumeChangeCapture', 'onWaiting', 'onWaitingCapture', 'onAuxClick', 'onAuxClickCapture', 'onClick', 'onClickCapture', 'onContextMenu', 'onContextMenuCapture', 'onDoubleClick', 'onDoubleClickCapture', 'onDrag', 'onDragCapture', 'onDragEnd', 'onDragEndCapture', 'onDragEnter', 'onDragEnterCapture', 'onDragExit', 'onDragExitCapture', 'onDragLeave', 'onDragLeaveCapture', 'onDragOver', 'onDragOverCapture', 'onDragStart', 'onDragStartCapture', 'onDrop', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseMoveCapture', 'onMouseOut', 'onMouseOutCapture', 'onMouseOver', 'onMouseOverCapture', 'onMouseUp', 'onMouseUpCapture', 'onSelect', 'onSelectCapture', 'onTouchCancel', 'onTouchCancelCapture', 'onTouchEnd', 'onTouchEndCapture', 'onTouchMove', 'onTouchMoveCapture', 'onTouchStart', 'onTouchStartCapture', 'onPointerDown', 'onPointerDownCapture', 'onPointerMove', 'onPointerMoveCapture', 'onPointerUp', 'onPointerUpCapture', 'onPointerCancel', 'onPointerCancelCapture', 'onPointerEnter', 'onPointerEnterCapture', 'onPointerLeave', 'onPointerLeaveCapture', 'onPointerOver', 'onPointerOverCapture', 'onPointerOut', 'onPointerOutCapture', 'onGotPointerCapture', 'onGotPointerCaptureCapture', 'onLostPointerCapture', 'onLostPointerCaptureCapture', 'onScroll', 'onScrollCapture', 'onWheel', 'onWheelCapture', 'onAnimationStart', 'onAnimationStartCapture', 'onAnimationEnd', 'onAnimationEndCapture', 'onAnimationIteration', 'onAnimationIterationCapture', 'onTransitionEnd', 'onTransitionEndCapture'];
-const htmlAttributes = ['about', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', 'as', 'async', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'autoPlay', 'autoSave', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className', 'color', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'datatype', 'dateTime', 'default', 'defaultChecked', 'defaultValue', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'id', 'inlist', 'inputMode', 'integrity', 'is', 'itemID', 'itemProp', 'itemRef', 'itemScope', 'itemType', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'nonce', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsInline', 'poster', 'prefix', 'preload', 'property', 'radioGroup', 'readOnly', 'rel', 'required', 'resource', 'results', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'security', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'tabIndex', 'target', 'title', 'translate', 'type', 'typeof', 'unselectable', 'useMap', 'value', 'vocab', 'width', 'wmode', 'wrap'];
+const htmlAttributes = ['about', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', // 'as', This property causes trouble in TS. This is actually not an HTML Attribute, leaving it here for the record
+'async', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'autoPlay', 'autoSave', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className', 'color', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'datatype', 'dateTime', 'default', 'defaultChecked', 'defaultValue', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'id', 'inlist', 'inputMode', 'integrity', 'is', 'itemID', 'itemProp', 'itemRef', 'itemScope', 'itemType', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'nonce', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsInline', 'poster', 'prefix', 'preload', 'property', 'radioGroup', 'readOnly', 'rel', 'required', 'resource', 'results', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'security', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'tabIndex', 'target', 'title', 'translate', 'type', 'typeof', 'unselectable', 'useMap', 'value', 'vocab', 'width', 'wmode', 'wrap'];
 const globalAttributes = Object.fromEntries([...ariaAttributes, ...domAttributes, ...htmlAttributes].map(entry => [entry, true]));
 
 exports.globalAttributes = globalAttributes;

package/cjs/globalProps/useGetGlobalAttributes.js

@@ -24,6 +24,7 @@ const useGetGlobalAttributes = (props, overrides) => {
 
           globalAttributesObject[key] = newFunc;
         } else {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           globalAttributesObject[key] = value;
         }
       }

package/cjs/index.js

@@ -3,26 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var useMemoMergePropsWithDefault = require('./defaultProps/useMemoMergePropsWithDefault.js');
-var validator = require('./validation/validator.js');
-var errorTemplates = require('./validation/errorTemplates.js');
-var typescriptValidator = require('./validation/typescriptValidator.js');
 var index = require('./getProps/index.js');
 var useGetGlobalAttributes = require('./globalProps/useGetGlobalAttributes.js');
 var globalAttributesPropTypes = require('./globalProps/globalAttributesPropTypes.js');
 var PropTypes = require('./propTypes/PropTypes.js');
 var describe = require('./propTypes/describe.js');
+var validator = require('./validation/validator.js');
+var errorTemplates = require('./validation/errorTemplates.js');
+var typescriptValidator = require('./validation/typescriptValidator.js');
+var useGetXstyledProps = require('./xstyledProps/useGetXstyledProps.js');
+var xstyledPropTypes = require('./xstyledProps/xstyledPropTypes.js');
 
 
 
 exports.useMemoMergePropsWithDefault = useMemoMergePropsWithDefault.useMemoMergePropsWithDefault;
-exports.useValidatePropTypes = validator.useValidatePropTypes;
-exports.throwRequiredError = errorTemplates.throwRequiredError;
-exports.throwTypeError = errorTemplates.throwTypeError;
-exports.useValidateTypescriptPropTypes = typescriptValidator.useValidateTypescriptPropTypes;
-exports.validateTypescriptPropTypesImplementation = typescriptValidator.validateTypescriptPropTypesImplementation;
 exports.getAriaProps = index.getAriaProps;
 exports.getDataProps = index.getDataProps;
 exports.useGetGlobalAttributes = useGetGlobalAttributes.useGetGlobalAttributes;
 exports.globalAttributesPropTypes = globalAttributesPropTypes.globalAttributesPropTypes;
 exports.PropTypes = PropTypes;
 exports.describe = describe;
+exports.useValidatePropTypes = validator.useValidatePropTypes;
+exports.throwRequiredError = errorTemplates.throwRequiredError;
+exports.throwTypeError = errorTemplates.throwTypeError;
+exports.useValidateTypescriptPropTypes = typescriptValidator.useValidateTypescriptPropTypes;
+exports.validateTypescriptPropTypesImplementation = typescriptValidator.validateTypescriptPropTypesImplementation;
+exports.useGetXstyledProps = useGetXstyledProps.useGetXstyledProps;
+exports.xstyledPropTypes = xstyledPropTypes.xstyledPropTypes;

package/cjs/propTypes/PropTypes.js

@@ -21,7 +21,7 @@ const addPropTypeDocumentationField = fieldName => function addFieldToReactDesc(
   }
 
   let realValue = value;
-  if (fieldName === 'global' || fieldName === 'hidden') realValue = true;
+  if (fieldName === 'global' || fieldName === 'hidden' || fieldName === 'xstyled') realValue = true;
   this.reactDesc[fieldName] = realValue;
   return this;
 };
@@ -32,7 +32,8 @@ const documentedPropType = {
   deprecated: addPropTypeDocumentationField('deprecated'),
   format: addPropTypeDocumentationField('format'),
   global: addPropTypeDocumentationField('global'),
-  hidden: addPropTypeDocumentationField('hidden')
+  hidden: addPropTypeDocumentationField('hidden'),
+  xstyled: addPropTypeDocumentationField('hidden')
 };
 
 const createPropType = type => {

package/cjs/xstyledProps/constants.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
+const marginKeys = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'];
+const paddingKeys = ['padding', 'p', 'paddingTop', 'pt', 'paddingRight', 'pr', 'paddingBottom', 'pb', 'paddingLeft', 'pl', 'px', 'py'];
+const spaceKeys = ['spaceY', 'spaceX', 'spaceXReverse', 'spaceYReverse'];
+const widthKeys = ['w', 'maxWidth', 'maxW', 'minWidth', 'minW'];
+const heightKeys = ['h', 'maxHeight', 'maxH', 'minHeight', 'minH'];
+const maskSizeKeys = ['maskSize'];
+const spacingKeys = [...marginKeys, ...paddingKeys, ...spaceKeys];
+const sizingKeys = [...widthKeys, ...heightKeys, ...maskSizeKeys];
+const layoutKeys = ['display', 'float', 'boxSizing', 'container', 'overflow', 'overflowX', 'overflowY', 'zIndex', 'position', 'top', 'right', 'bottom', 'left', 'visibility', 'overscrollBehavior', 'objectFit'];
+const xstyledKeys = Object.fromEntries([...spacingKeys, ...sizingKeys, ...layoutKeys].map(item => [item, true]));
+
+exports.layoutKeys = layoutKeys;
+exports.xstyledKeys = xstyledKeys;

package/cjs/xstyledProps/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useGetXstyledProps = require('./useGetXstyledProps.js');
+var xstyledPropTypes = require('./xstyledPropTypes.js');
+
+
+
+exports.useGetXstyledProps = useGetXstyledProps.useGetXstyledProps;
+exports.xstyledPropTypes = xstyledPropTypes.xstyledPropTypes;

package/cjs/xstyledProps/useGetXstyledProps.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+var constants = require('./constants.js');
+
+const useGetXstyledProps = props => {
+  const componentXstyledProps = react.useMemo(() => {
+    const xstyledPropsObject = {};
+    Object.entries(props).forEach(_ref => {
+      let [key, value] = _ref;
+
+      if (key in constants.xstyledKeys) {
+        xstyledPropsObject[key] = value;
+      }
+    });
+    return xstyledPropsObject;
+  }, [props]);
+  return componentXstyledProps;
+};
+
+exports.useGetXstyledProps = useGetXstyledProps;

package/cjs/xstyledProps/xstyledPropTypes.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('../propTypes/PropTypes.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('prop-types');
+require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+
+const xstyledPropTypes = {
+  margin: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  m: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginTop: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mt: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginRight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mr: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginBottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mb: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginLeft: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  ml: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mx: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  my: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  padding: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  p: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingTop: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pt: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingRight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pr: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingBottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pb: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingLeft: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pl: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  px: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  py: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceY: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceX: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceXReverse: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceYReverse: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  w: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxWidth: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxW: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minWidth: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minW: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  h: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxHeight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxH: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minHeight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minH: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maskSize: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  display: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  float: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  boxSizing: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  container: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflow: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflowX: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflowY: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  zIndex: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  position: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  top: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  right: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  bottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  left: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  visibility: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overscrollBehavior: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  objectFit: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled()
+};
+
+exports.xstyledPropTypes = xstyledPropTypes;

package/esm/globalProps/constants.js

@@ -5,7 +5,8 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 /* eslint-disable max-lines */
 const ariaAttributes = ['aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext'];
 const domAttributes = ['onCopy', 'onCopyCapture', 'onCut', 'onCutCapture', 'onPaste', 'onPasteCapture', 'onCompositionEnd', 'onCompositionEndCapture', 'onCompositionStart', 'onCompositionStartCapture', 'onCompositionUpdate', 'onCompositionUpdateCapture', 'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', 'onChange', 'onChangeCapture', 'onBeforeInput', 'onBeforeInputCapture', 'onInput', 'onInputCapture', 'onReset', 'onResetCapture', 'onSubmit', 'onSubmitCapture', 'onInvalid', 'onInvalidCapture', 'onLoad', 'onLoadCapture', 'onError', 'onErrorCapture', 'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyPressCapture', 'onKeyUp', 'onKeyUpCapture', 'onAbort', 'onAbortCapture', 'onCanPlay', 'onCanPlayCapture', 'onCanPlayThrough', 'onCanPlayThroughCapture', 'onDurationChange', 'onDurationChangeCapture', 'onEmptied', 'onEmptiedCapture', 'onEncrypted', 'onEncryptedCapture', 'onEnded', 'onEndedCapture', 'onLoadedData', 'onLoadedDataCapture', 'onLoadedMetadata', 'onLoadedMetadataCapture', 'onLoadStart', 'onLoadStartCapture', 'onPause', 'onPauseCapture', 'onPlay', 'onPlayCapture', 'onPlaying', 'onPlayingCapture', 'onProgress', 'onProgressCapture', 'onRateChange', 'onRateChangeCapture', 'onSeeked', 'onSeekedCapture', 'onSeeking', 'onSeekingCapture', 'onStalled', 'onStalledCapture', 'onSuspend', 'onSuspendCapture', 'onTimeUpdate', 'onTimeUpdateCapture', 'onVolumeChange', 'onVolumeChangeCapture', 'onWaiting', 'onWaitingCapture', 'onAuxClick', 'onAuxClickCapture', 'onClick', 'onClickCapture', 'onContextMenu', 'onContextMenuCapture', 'onDoubleClick', 'onDoubleClickCapture', 'onDrag', 'onDragCapture', 'onDragEnd', 'onDragEndCapture', 'onDragEnter', 'onDragEnterCapture', 'onDragExit', 'onDragExitCapture', 'onDragLeave', 'onDragLeaveCapture', 'onDragOver', 'onDragOverCapture', 'onDragStart', 'onDragStartCapture', 'onDrop', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseMoveCapture', 'onMouseOut', 'onMouseOutCapture', 'onMouseOver', 'onMouseOverCapture', 'onMouseUp', 'onMouseUpCapture', 'onSelect', 'onSelectCapture', 'onTouchCancel', 'onTouchCancelCapture', 'onTouchEnd', 'onTouchEndCapture', 'onTouchMove', 'onTouchMoveCapture', 'onTouchStart', 'onTouchStartCapture', 'onPointerDown', 'onPointerDownCapture', 'onPointerMove', 'onPointerMoveCapture', 'onPointerUp', 'onPointerUpCapture', 'onPointerCancel', 'onPointerCancelCapture', 'onPointerEnter', 'onPointerEnterCapture', 'onPointerLeave', 'onPointerLeaveCapture', 'onPointerOver', 'onPointerOverCapture', 'onPointerOut', 'onPointerOutCapture', 'onGotPointerCapture', 'onGotPointerCaptureCapture', 'onLostPointerCapture', 'onLostPointerCaptureCapture', 'onScroll', 'onScrollCapture', 'onWheel', 'onWheelCapture', 'onAnimationStart', 'onAnimationStartCapture', 'onAnimationEnd', 'onAnimationEndCapture', 'onAnimationIteration', 'onAnimationIterationCapture', 'onTransitionEnd', 'onTransitionEndCapture'];
-const htmlAttributes = ['about', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', 'as', 'async', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'autoPlay', 'autoSave', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className', 'color', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'datatype', 'dateTime', 'default', 'defaultChecked', 'defaultValue', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'id', 'inlist', 'inputMode', 'integrity', 'is', 'itemID', 'itemProp', 'itemRef', 'itemScope', 'itemType', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'nonce', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsInline', 'poster', 'prefix', 'preload', 'property', 'radioGroup', 'readOnly', 'rel', 'required', 'resource', 'results', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'security', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'tabIndex', 'target', 'title', 'translate', 'type', 'typeof', 'unselectable', 'useMap', 'value', 'vocab', 'width', 'wmode', 'wrap'];
+const htmlAttributes = ['about', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', // 'as', This property causes trouble in TS. This is actually not an HTML Attribute, leaving it here for the record
+'async', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'autoPlay', 'autoSave', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className', 'color', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'datatype', 'dateTime', 'default', 'defaultChecked', 'defaultValue', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'id', 'inlist', 'inputMode', 'integrity', 'is', 'itemID', 'itemProp', 'itemRef', 'itemScope', 'itemType', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'nonce', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsInline', 'poster', 'prefix', 'preload', 'property', 'radioGroup', 'readOnly', 'rel', 'required', 'resource', 'results', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'security', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'tabIndex', 'target', 'title', 'translate', 'type', 'typeof', 'unselectable', 'useMap', 'value', 'vocab', 'width', 'wmode', 'wrap'];
 const globalAttributes = Object.fromEntries([...ariaAttributes, ...domAttributes, ...htmlAttributes].map(entry => [entry, true]));
 
 export { globalAttributes };

package/esm/globalProps/useGetGlobalAttributes.js

@@ -20,6 +20,7 @@ const useGetGlobalAttributes = (props, overrides) => {
 
           globalAttributesObject[key] = newFunc;
         } else {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           globalAttributesObject[key] = value;
         }
       }

package/esm/index.js

@@ -1,9 +1,11 @@
 export { useMemoMergePropsWithDefault } from './defaultProps/useMemoMergePropsWithDefault.js';
-export { useValidatePropTypes } from './validation/validator.js';
-export { throwRequiredError, throwTypeError } from './validation/errorTemplates.js';
-export { useValidateTypescriptPropTypes, validateTypescriptPropTypesImplementation } from './validation/typescriptValidator.js';
 export { getAriaProps, getDataProps } from './getProps/index.js';
 export { useGetGlobalAttributes } from './globalProps/useGetGlobalAttributes.js';
 export { globalAttributesPropTypes } from './globalProps/globalAttributesPropTypes.js';
 export { default as PropTypes } from './propTypes/PropTypes.js';
 export { default as describe } from './propTypes/describe.js';
+export { useValidatePropTypes } from './validation/validator.js';
+export { throwRequiredError, throwTypeError } from './validation/errorTemplates.js';
+export { useValidateTypescriptPropTypes, validateTypescriptPropTypesImplementation } from './validation/typescriptValidator.js';
+export { useGetXstyledProps } from './xstyledProps/useGetXstyledProps.js';
+export { xstyledPropTypes } from './xstyledProps/xstyledPropTypes.js';

package/esm/propTypes/PropTypes.js

@@ -15,7 +15,7 @@ const addPropTypeDocumentationField = fieldName => function addFieldToReactDesc(
   }
 
   let realValue = value;
-  if (fieldName === 'global' || fieldName === 'hidden') realValue = true;
+  if (fieldName === 'global' || fieldName === 'hidden' || fieldName === 'xstyled') realValue = true;
   this.reactDesc[fieldName] = realValue;
   return this;
 };
@@ -26,7 +26,8 @@ const documentedPropType = {
   deprecated: addPropTypeDocumentationField('deprecated'),
   format: addPropTypeDocumentationField('format'),
   global: addPropTypeDocumentationField('global'),
-  hidden: addPropTypeDocumentationField('hidden')
+  hidden: addPropTypeDocumentationField('hidden'),
+  xstyled: addPropTypeDocumentationField('hidden')
 };
 
 const createPropType = type => {

package/esm/xstyledProps/constants.js

@@ -0,0 +1,16 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+
+const marginKeys = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'];
+const paddingKeys = ['padding', 'p', 'paddingTop', 'pt', 'paddingRight', 'pr', 'paddingBottom', 'pb', 'paddingLeft', 'pl', 'px', 'py'];
+const spaceKeys = ['spaceY', 'spaceX', 'spaceXReverse', 'spaceYReverse'];
+const widthKeys = ['w', 'maxWidth', 'maxW', 'minWidth', 'minW'];
+const heightKeys = ['h', 'maxHeight', 'maxH', 'minHeight', 'minH'];
+const maskSizeKeys = ['maskSize'];
+const spacingKeys = [...marginKeys, ...paddingKeys, ...spaceKeys];
+const sizingKeys = [...widthKeys, ...heightKeys, ...maskSizeKeys];
+const layoutKeys = ['display', 'float', 'boxSizing', 'container', 'overflow', 'overflowX', 'overflowY', 'zIndex', 'position', 'top', 'right', 'bottom', 'left', 'visibility', 'overscrollBehavior', 'objectFit'];
+const xstyledKeys = Object.fromEntries([...spacingKeys, ...sizingKeys, ...layoutKeys].map(item => [item, true]));
+
+export { layoutKeys, xstyledKeys };

package/esm/xstyledProps/index.js

@@ -0,0 +1,2 @@
+export { useGetXstyledProps } from './useGetXstyledProps.js';
+export { xstyledPropTypes } from './xstyledPropTypes.js';

package/esm/xstyledProps/useGetXstyledProps.js

@@ -0,0 +1,23 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useMemo } from 'react';
+import { xstyledKeys } from './constants.js';
+
+const useGetXstyledProps = props => {
+  const componentXstyledProps = useMemo(() => {
+    const xstyledPropsObject = {};
+    Object.entries(props).forEach(_ref => {
+      let [key, value] = _ref;
+
+      if (key in xstyledKeys) {
+        xstyledPropsObject[key] = value;
+      }
+    });
+    return xstyledPropsObject;
+  }, [props]);
+  return componentXstyledProps;
+};
+
+export { useGetXstyledProps };

package/esm/xstyledProps/xstyledPropTypes.js

@@ -0,0 +1,71 @@
+import PropTypes from '../propTypes/PropTypes.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'prop-types';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+
+const xstyledPropTypes = {
+  margin: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  m: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginTop: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mt: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginRight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mr: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginBottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mb: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  marginLeft: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  ml: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  mx: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  my: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  padding: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  p: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingTop: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pt: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingRight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pr: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingBottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pb: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  paddingLeft: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  pl: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  px: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  py: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceY: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceX: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceXReverse: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  spaceYReverse: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  w: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxWidth: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxW: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minWidth: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minW: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  h: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxHeight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maxH: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minHeight: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  minH: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  maskSize: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  display: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  float: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  boxSizing: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  container: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflow: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflowX: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overflowY: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  zIndex: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  position: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  top: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  right: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  bottom: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  left: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  visibility: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  overscrollBehavior: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled(),
+  objectFit: PropTypes.any.description('Applies to the root container. For more info read xstyled docs').xstyled()
+};
+
+export { xstyledPropTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-props-helpers",
-  "version": "2.3.0-next.6",
+  "version": "2.3.0-next.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Props Helpers",
   "module": "./esm/index.js",
@@ -11,6 +11,22 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
+    "./xstyledProps/xstyledPropTypes": {
+      "import": "./esm/xstyledProps/xstyledPropTypes.js",
+      "require": "./cjs/xstyledProps/xstyledPropTypes.js"
+    },
+    "./xstyledProps/useGetXstyledProps": {
+      "import": "./esm/xstyledProps/useGetXstyledProps.js",
+      "require": "./cjs/xstyledProps/useGetXstyledProps.js"
+    },
+    "./xstyledProps": {
+      "import": "./esm/xstyledProps/index.js",
+      "require": "./cjs/xstyledProps/index.js"
+    },
+    "./xstyledProps/constants": {
+      "import": "./esm/xstyledProps/constants.js",
+      "require": "./cjs/xstyledProps/constants.js"
+    },
     "./validation/validator": {
       "import": "./esm/validation/validator.js",
       "require": "./cjs/validation/validator.js"
@@ -127,7 +143,8 @@
     "react-desc": "^4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0"
+    "@testing-library/jest-dom": "~5.15.0",
+    "@xstyled/styled-components": "~3.5.1"
   },
   "peerDependencies": {
     "react": "~17.0.2",