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

package/dist/components/Label/Label.d.ts

@@ -12,6 +12,9 @@ interface LabelProps {
     /** Controls whether the "(Required)" text should be displayed alongside the
      * label's text. False by default. */
     isRequired?: boolean;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
 }
 /**
  * A label for form inputs. It should never be used alone.

package/dist/components/TextInput/TextInput.d.ts

@@ -56,6 +56,9 @@ export interface InputProps {
     /** Whether or not to display the "(Required)" text in the label text.
      * True by default. */
     showRequiredLabel?: boolean;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
     /** The amount to increase or decrease when using the number type. */
     step?: number;
     /** FOR INTERNAL DS USE ONLY: the input variant to display. */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -3,7 +3,7 @@ export interface TooltipProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;
     /** Value used to populate the tooltip content. */
-    content: string | React.ReactNode;
+    content: string | number | React.ReactNode;
     /** A class name for the Tooltip parent div. */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes. */

package/dist/design-system-react-components.cjs.development.js

@@ -2514,33 +2514,49 @@ var AudioPlayer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
       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 = React.useState(false),
+      invalidEmbed = _useState[0],
+      setInvalidEmbed = _useState[1];
 
-  var iframeDoc = parseIframeEmbedCode(embedCode); // when no embedCode or it was a broken code.
+  var _useState2 = React.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;
+  React.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 = react.useMultiStyleConfig("AudioPlayer", {});
@@ -2567,7 +2583,7 @@ var AudioPlayer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     "data-testid": "audio-player-component",
     ref: ref,
     __css: styles
-  }, rest), isInvalidEmbed ? React__default.createElement(react.Box, {
+  }, rest), invalidEmbed ? React__default.createElement(react.Box, {
     dangerouslySetInnerHTML: {
       __html: errorMessage
     },
@@ -4053,7 +4069,7 @@ var Form = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }
 });
 
-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.
  */
@@ -4067,6 +4083,7 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
       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 = react.useStyleConfig("Label", {
@@ -4084,10 +4101,10 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     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",
@@ -4131,6 +4148,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       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,
@@ -4226,7 +4244,8 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   }, rest), labelText && showLabel && !isHidden && React__default.createElement(Label, {
     htmlFor: id,
     id: id + "-label",
-    isRequired: showRequiredLabel && isRequired
+    isRequired: showRequiredLabel && isRequired,
+    requiredLabelText: requiredLabelText
   }, labelText), fieldOutput);
 }));
 
@@ -15593,10 +15612,10 @@ var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
       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.");
       }
     });
   }