@spaced-out/ui-design-system 0.1.8 → 0.1.10

package/lib/components/Text/Text.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const HighlightText = _ref => {
+const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     highlight,
@@ -29,14 +29,17 @@ const HighlightText = _ref => {
     highlights = (0, _string.escapeRegExp)(highlight);
   }
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
-  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
-    key: part,
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref
+  }, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line react/no-array-index-key
+    key: idx,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)
   }, part) : part));
-};
-const JumboMedium = _ref2 => {
+});
+const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -48,7 +51,8 @@ const JumboMedium = _ref2 => {
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -56,9 +60,9 @@ const JumboMedium = _ref2 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.JumboMedium = JumboMedium;
-const TitleMedium = _ref3 => {
+const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -70,7 +74,8 @@ const TitleMedium = _ref3 => {
     ...props
   } = _ref3;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -78,9 +83,9 @@ const TitleMedium = _ref3 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = _ref4 => {
+const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -92,7 +97,8 @@ const SubTitleLarge = _ref4 => {
     ...props
   } = _ref4;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -100,9 +106,9 @@ const SubTitleLarge = _ref4 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = _ref5 => {
+const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -114,7 +120,8 @@ const SubTitleMedium = _ref5 => {
     ...props
   } = _ref5;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -122,9 +129,9 @@ const SubTitleMedium = _ref5 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = _ref6 => {
+const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -136,7 +143,8 @@ const SubTitleSmall = _ref6 => {
     ...props
   } = _ref6;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -144,9 +152,9 @@ const SubTitleSmall = _ref6 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = _ref7 => {
+const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -158,7 +166,8 @@ const SubTitleExtraSmall = _ref7 => {
     ...props
   } = _ref7;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -166,9 +175,9 @@ const SubTitleExtraSmall = _ref7 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = _ref8 => {
+const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -180,7 +189,8 @@ const ButtonTextMedium = _ref8 => {
     ...props
   } = _ref8;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -188,9 +198,9 @@ const ButtonTextMedium = _ref8 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = _ref9 => {
+const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -202,7 +212,8 @@ const ButtonTextSmall = _ref9 => {
     ...props
   } = _ref9;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -210,9 +221,9 @@ const ButtonTextSmall = _ref9 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = _ref10 => {
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -224,7 +235,8 @@ const ButtonTextExtraSmall = _ref10 => {
     ...props
   } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -232,9 +244,9 @@ const ButtonTextExtraSmall = _ref10 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = _ref11 => {
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -246,7 +258,8 @@ const FormInputMedium = _ref11 => {
     ...props
   } = _ref11;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -254,9 +267,9 @@ const FormInputMedium = _ref11 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = _ref12 => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -268,7 +281,8 @@ const FormInputSmall = _ref12 => {
     ...props
   } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -276,9 +290,9 @@ const FormInputSmall = _ref12 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = _ref13 => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -290,7 +304,8 @@ const BodyLarge = _ref13 => {
     ...props
   } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -298,9 +313,9 @@ const BodyLarge = _ref13 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodyLarge = BodyLarge;
-const BodyMedium = _ref14 => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -312,7 +327,8 @@ const BodyMedium = _ref14 => {
     ...props
   } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -320,9 +336,9 @@ const BodyMedium = _ref14 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodyMedium = BodyMedium;
-const BodySmall = _ref15 => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -334,7 +350,8 @@ const BodySmall = _ref15 => {
     ...props
   } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -342,9 +359,9 @@ const BodySmall = _ref15 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodySmall = BodySmall;
-const FormLabelMedium = _ref16 => {
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -356,7 +373,8 @@ const FormLabelMedium = _ref16 => {
     ...props
   } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -364,9 +382,9 @@ const FormLabelMedium = _ref16 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = _ref17 => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -378,7 +396,8 @@ const FormLabelSmall = _ref17 => {
     ...props
   } = _ref17;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -386,5 +405,5 @@ const FormLabelSmall = _ref17 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormLabelSmall = FormLabelSmall;