@nypl/design-system-react-components 1.2.0-rc-2 → 1.2.0

package/dist/design-system-react-components.esm.js

@@ -2508,33 +2508,49 @@ var AudioPlayer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
       id = props.id,
       _props$iframeTitle = props.iframeTitle,
       iframeTitle = _props$iframeTitle === void 0 ? null : _props$iframeTitle,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$Z); // The root iframe object generated from the embedCode.
+      rest = _objectWithoutPropertiesLoose(props, _excluded$Z);
 
+  var _useState = useState(false),
+      invalidEmbed = _useState[0],
+      setInvalidEmbed = _useState[1];
 
-  var iframeDoc = parseIframeEmbedCode(embedCode); // when no embedCode or it was a broken code.
+  var _useState2 = useState(undefined),
+      iframeDoc = _useState2[0],
+      setIframeDoc = _useState2[1];
+  /**
+   * Main hooks to check the embedCode structure.
+   */
 
-  var isInvalidEmbed = !embedCode || !iframeDoc || !isValidEmbedCode(iframeDoc);
-  var errorMessage = "<strong>Error: </strong>This audio player has not been configured properly. Please contact the site administrator.";
 
-  function isValidEmbedCode(doc) {
-    var _doc$src;
+  useEffect(function () {
+    // The root iframe object generated from the embedCode.
+    var iframe = parseIframeEmbedCode(embedCode); // when no embedCode or it was a broken code.
 
-    return audioType !== "file" && (doc == null ? void 0 : (_doc$src = doc.src) == null ? void 0 : _doc$src.includes(audioType + ".com"));
-  } // Only set the iframe title if it doesn't already have it in the iframe.
+    var isInvalidEmbed = !embedCode || !iframe || !isValidEmbedCode(audioType, iframe); // Only set the iframe title if it doesn't already have it in the iframe.
 
+    if (iframe && !iframe.title) {
+      iframe.title = iframeTitle ? iframeTitle : "Embedded audio player";
+    }
 
-  if (iframeDoc && !iframeDoc.title) {
-    iframeDoc.title = iframeTitle ? iframeTitle : "Embedded audio player";
-  }
+    var isThirdPartyService = !!thirdPartyServices.find(function (service) {
+      return service === audioType;
+    });
+    var isThirdPartyWithoutCode = isThirdPartyService && !embedCode;
 
-  var isThirdPartyService = !!thirdPartyServices.find(function (service) {
-    return service === audioType;
-  });
-  var isThirdPartyWithoutCode = isThirdPartyService && !embedCode;
+    if (isThirdPartyWithoutCode) {
+      console.warn("NYPL Reservoir AudioPlayer: The `embedCode` prop is required when using a 3rd party streaming service.");
+      isInvalidEmbed = true;
+    }
+
+    setInvalidEmbed(isInvalidEmbed);
+    setIframeDoc(iframe);
+  }, [embedCode, audioType, iframeTitle]);
+  var errorMessage = "<strong>Error: </strong>This audio player has not been configured properly. Please contact the site administrator.";
 
-  if (isThirdPartyWithoutCode) {
-    console.warn("NYPL Reservoir AudioPlayer: The `embedCode` prop is required when using a 3rd party streaming service.");
-    isInvalidEmbed = true;
+  function isValidEmbedCode(audioType, doc) {
+    var _doc$src;
+
+    return audioType !== "file" && (doc == null ? void 0 : (_doc$src = doc.src) == null ? void 0 : _doc$src.includes(audioType + ".com"));
   }
 
   var styles = useMultiStyleConfig("AudioPlayer", {});
@@ -2561,7 +2577,7 @@ var AudioPlayer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     "data-testid": "audio-player-component",
     ref: ref,
     __css: styles
-  }, rest), isInvalidEmbed ? React__default.createElement(Box, {
+  }, rest), invalidEmbed ? React__default.createElement(Box, {
     dangerouslySetInnerHTML: {
       __html: errorMessage
     },
@@ -4047,7 +4063,7 @@ var Form = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }
 });
 
-var _excluded$18 = ["children", "className", "htmlFor", "id", "isInlined", "isRequired"];
+var _excluded$18 = ["children", "className", "htmlFor", "id", "isInlined", "isRequired", "requiredLabelText"];
 /**
  * A label for form inputs. It should never be used alone.
  */
@@ -4061,6 +4077,7 @@ var Label = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
       isInlined = _props$isInlined === void 0 ? false : _props$isInlined,
       _props$isRequired = props.isRequired,
       isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      requiredLabelText = props.requiredLabelText,
       rest = _objectWithoutPropertiesLoose(props, _excluded$18);
 
   var styles = useStyleConfig("Label", {
@@ -4078,10 +4095,10 @@ var Label = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
     htmlFor: htmlFor,
     ref: ref,
     __css: styles
-  }, rest), children, isRequired && React__default.createElement("span", null, " (Required)"));
+  }, rest), children, isRequired && React__default.createElement("span", null, requiredLabelText ? " (" + requiredLabelText + ")" : " (Required)"));
 }));
 
-var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "step", "textInputType", "type", "value"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
 
 var TextInputFormats = {
   email: "jdoe@domain.com",
@@ -4125,6 +4142,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
+      requiredLabelText = props.requiredLabelText,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
       _props$textInputType = props.textInputType,
@@ -4220,7 +4238,8 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   }, rest), labelText && showLabel && !isHidden && React__default.createElement(Label, {
     htmlFor: id,
     id: id + "-label",
-    isRequired: showRequiredLabel && isRequired
+    isRequired: showRequiredLabel && isRequired,
+    requiredLabelText: requiredLabelText
   }, labelText), fieldOutput);
 }));
 
@@ -15587,10 +15606,10 @@ var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
       shouldWrapChildren = props.shouldWrapChildren,
       rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
 
-  if (typeof content !== "string") {
+  if (typeof content !== "string" && typeof content !== "number") {
     React__default.Children.map(content, function (contentChild) {
       if (contentChild.type !== Icon || contentChild.type !== Image) {
-        console.warn("NYPL Reservoir Tooltip: Pass in a string, DS Icon, or DS Image into the 'content' prop.");
+        console.warn("NYPL Reservoir Tooltip: Pass in a string, number, DS Icon, or DS Image into the 'content' prop.");
       }
     });
   }