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

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

@@ -2464,7 +2464,7 @@ var AlphabetFilter = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fu
       id: "filter-" + item.value,
       isDisabled: isButtonDisabled,
       key: item.value,
-      __css: buttonStyles,
+      sx: buttonStyles,
       onClick: function onClick(e) {
         handleOnClick(e, item.value);
       }
@@ -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.";
+
+  function isValidEmbedCode(audioType, doc) {
+    var _doc$src;
 
-  if (isThirdPartyWithoutCode) {
-    console.warn("NYPL Reservoir AudioPlayer: The `embedCode` prop is required when using a 3rd party streaming service.");
-    isInvalidEmbed = true;
+    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
     },
@@ -5195,7 +5211,8 @@ var AlphabetFilter$1 = {
         }
       },
       _disabled: {
-        color: "ui.gray.medium"
+        color: "ui.gray.medium",
+        cursor: "not-allowed"
       }
     }
   }
@@ -9373,6 +9390,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
   components: /*#__PURE__*/_extends({
     Accordion: Accordion$1,
     AlphabetFilter: AlphabetFilter$1,
+    AudioPlayer: AudioPlayer$1,
     Breadcrumb: Breadcrumb,
     Button: Button$1,
     ButtonGroup: ButtonGroup$1
@@ -9425,8 +9443,7 @@ var theme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
     TextInput: TextInput$1
   }, Toggle$1, {
     Tooltip: Tooltip,
-    VideoPlayer: VideoPlayer,
-    AudioPlayer: AudioPlayer$1
+    VideoPlayer: VideoPlayer
   }),
   config: {
     // Use `cssVarPrefix` to set the prefix used on the CSS vars produced by
@@ -15584,7 +15601,224 @@ var Tabs = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   }, React__default.createElement(react.Box, Object.assign({}, carouselStyle), tabs)), nextButton), panels);
 })); // Tabs is also exported above so the props can display in Storybook.
 
-var _excluded$2d = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
+var _excluded$2d = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
+var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      content = props.content,
+      isDisabled = props.isDisabled,
+      shouldWrapChildren = props.shouldWrapChildren,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
+
+  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, number, DS Icon, or DS Image into the 'content' prop.");
+      }
+    });
+  }
+
+  var newChildren = shouldWrapChildren ? React__default.createElement(ComponentWrapper, {
+    width: "fit-content"
+  }, children) : children;
+  var styles = react.useMultiStyleConfig("Tooltip", {});
+  return React__default.createElement(react.Tooltip, Object.assign({
+    hasArrow: true,
+    "aria-label": typeof content !== "string" ? "Tooltip" : undefined,
+    label: content,
+    isDisabled: isDisabled,
+    placement: "top",
+    openDelay: 500,
+    ref: ref,
+    __css: styles
+  }, rest), newChildren);
+}));
+
+/**
+ * The "explore" `TagSet` variant will always display the tags passed as data.
+ * The `label` property in the `tagSetData` prop should be set to a link-type
+ * JSX component for linking to specific content.
+ */
+
+var TagSetExplore$1 = /*#__PURE__*/react.chakra(function (props) {
+  var id = props.id,
+      _props$tagSetData = props.tagSetData,
+      tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData;
+  var styles = react.useStyleConfig("TagSetExplore");
+  return React__default.createElement(React__default.Fragment, null, tagSetData.map(function (tagSet, key) {
+    if (typeof tagSet.label === "string") {
+      console.warn("NYPL Reservoir TagSet: Explore tags require all `label` props to be React components.");
+    }
+
+    return React__default.createElement(TooltipWrapper, {
+      key: key,
+      label: tagSet.label
+    }, React__default.createElement(react.Box, {
+      "data-testid": "explore-tags",
+      id: "ts-explore-" + id + "-" + key,
+      __css: styles
+    }, tagSet.iconName ? React__default.createElement(Icon, {
+      align: "left",
+      "data-testid": "ts-icon",
+      name: tagSet.iconName,
+      size: "small"
+    }) : null, React__default.createElement("span", null, tagSet.label)));
+  }));
+});
+
+/**
+ * The "filter" `TagSet` variant will display tags that can be removed when
+ * `isDismissible` is true and they are clicked.
+ */
+
+var TagSetFilter$1 = /*#__PURE__*/react.chakra(function (props) {
+  var id = props.id,
+      _props$isDismissible = props.isDismissible,
+      isDismissible = _props$isDismissible === void 0 ? false : _props$isDismissible,
+      onClick = props.onClick,
+      _props$tagSetData = props.tagSetData,
+      tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData;
+
+  var _React$useState = React__default.useState(tagSetData),
+      filters = _React$useState[0],
+      setFilters = _React$useState[1];
+
+  var styles = react.useMultiStyleConfig("TagSetFilter", {
+    isDismissible: isDismissible
+  });
+
+  var finalOnClick = function finalOnClick(tagLabel) {
+    onClick && onClick(tagLabel);
+  }; // This expects that the consuming app passes in a new set of data
+  // whenever the current list of tags needs to be updated.
+
+
+  React.useEffect(function () {
+    setFilters(tagSetData);
+  }, [tagSetData, setFilters]);
+  return React__default.createElement(React__default.Fragment, null, filters.map(function (tagSet, key) {
+    if (typeof tagSet.label !== "string") {
+      console.warn("NYPL Reservoir TagSet: Filter tags require all `label` props to be strings.");
+    }
+
+    if (isDismissible && tagSet.iconName) {
+      console.warn("NYPL Reservoir TagSet: Filter tags will not render icons when `isDismissible` is set to true.");
+    }
+
+    return React__default.createElement(TooltipWrapper, {
+      key: key,
+      label: tagSet.label
+    }, React__default.createElement(Button, {
+      "data-testid": "filter-tags",
+      id: "ts-filter-" + id + "-" + key,
+      onClick: isDismissible ? function () {
+        return finalOnClick(tagSet.label);
+      } : undefined,
+      sx: styles
+    }, !isDismissible && tagSet.iconName ? React__default.createElement(Icon, {
+      align: "left",
+      "data-testid": "ts-icon",
+      name: tagSet.iconName,
+      size: "small"
+    }) : null, React__default.createElement("span", null, tagSet.label), isDismissible ? React__default.createElement(Icon, {
+      "data-testid": "filter-close-icon",
+      align: "right",
+      name: "close",
+      size: "small",
+      color: "ui.gray.x-dark",
+      width: "12px"
+    }) : null));
+  }), filters.length > 1 && isDismissible ? React__default.createElement(Button, {
+    buttonType: "link",
+    "data-testid": "filter-clear-all",
+    id: "ts-filter-clear-all-" + id,
+    onClick: function onClick() {
+      return finalOnClick("clearFilters");
+    },
+    __css: styles.clearAll
+  }, "Clear Filters") : null);
+});
+
+var _excluded$2e = ["className", "id", "isDismissible", "onClick", "tagSetData", "type"];
+
+function isFilterType(type) {
+  return type === "filter";
+}
+/**
+ * This helper component wrapper renders a DS `Tooltip` component if the text is
+ * long or a React fragment. This assumes that the `label` prop is a rather
+ * simple single root JSX element, such as `<Link ...>....</Link>`.
+ */
+
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var label = _ref.label,
+      children = _ref.children;
+  var maxCharLengthToShow = 20;
+  var labelText = typeof label === "string" ? label : label.props.children;
+
+  if (labelText.length > maxCharLengthToShow && typeof labelText === "string") {
+    return React__default.createElement(Tooltip$1, {
+      content: labelText
+    }, children);
+  }
+
+  return React__default.createElement(React__default.Fragment, null, children);
+};
+/**
+ * The `TagSet` component renders a group of individual tags which have two
+ * variants: "explore" and "filter". The "explore" tags are meant to be used for
+ * exploratory linkable elements, whereas the "filter" tags are used to display
+ * the filter values that were selected through another UI. Only "filter" tags
+ * can be dismissible.
+ *
+ * The width of a single tag will never be greater than 200px. If necessary, a
+ * tag’s label text will be truncated to keep a tag’s width at or below 200px.
+ * The full label text will be automatically revealed when the tag is hovered
+ * with a DS `Tooltip` component.
+ */
+
+var TagSet$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+      id = props.id,
+      _props$isDismissible = props.isDismissible,
+      isDismissible = _props$isDismissible === void 0 ? false : _props$isDismissible,
+      onClick = props.onClick,
+      _props$tagSetData = props.tagSetData,
+      tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData,
+      _props$type = props.type,
+      type = _props$type === void 0 ? "filter" : _props$type,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
+
+  var styles = react.useStyleConfig("TagSet", {});
+
+  if (!isFilterType(type)) {
+    if (isDismissible) {
+      console.warn("NYPL Reservoir TagSet: The `isDismissible` prop will be ignored when the `type` prop is set to 'explore'.");
+    }
+
+    if (onClick) {
+      console.warn("NYPL Reservoir TagSet: The `onClick` prop will be ignored when the `type` prop is set to 'explore'.");
+    }
+  }
+
+  return React__default.createElement(react.Flex, Object.assign({
+    className: className,
+    id: id,
+    ref: ref,
+    __css: styles
+  }, rest), !isFilterType(type) && React__default.createElement(TagSetExplore$1, {
+    id: id,
+    tagSetData: tagSetData,
+    type: type
+  }), isFilterType(type) && React__default.createElement(TagSetFilter$1, {
+    id: id,
+    isDismissible: isDismissible,
+    onClick: onClick,
+    tagSetData: tagSetData,
+    type: type
+  }));
+}));
+
+var _excluded$2f = ["aboveHeader", "breakout", "contentId", "contentBottom", "contentPrimary", "contentSidebar", "contentTop", "footer", "header", "sidebar", "renderFooterElement", "renderHeaderElement", "renderSkipNavigation"];
 /**
  * The main top-level parent component that wraps all template-related
  * components.
@@ -15834,7 +16068,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
       renderHeaderElement = _props$renderHeaderEl === void 0 ? true : _props$renderHeaderEl,
       _props$renderSkipNavi = props.renderSkipNavigation,
       renderSkipNavigation = _props$renderSkipNavi === void 0 ? false : _props$renderSkipNavi,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2d);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
   var aboveHeaderElem = aboveHeader && React__default.createElement(TemplateAboveHeader, null, aboveHeader);
   var contentTopElem = contentTop && React__default.createElement(TemplateContentTop, null, contentTop);
@@ -15853,7 +16087,7 @@ var TemplateAppContainer = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forward
   }, footer)));
 }));
 
-var _excluded$2e = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
+var _excluded$2g = ["defaultChecked", "helperText", "id", "invalidText", "isChecked", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "size"];
 var onChangeDefault = function onChangeDefault() {
   return;
 };
@@ -15880,7 +16114,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       onChange = _props$onChange === void 0 ? onChangeDefault : _props$onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? "default" : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2e);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
 
   var styles = react.useMultiStyleConfig("Toggle", {
     isDisabled: isDisabled,
@@ -15929,7 +16163,7 @@ var Toggle$2 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
   }), labelText)));
 }));
 
-var _excluded$2f = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
+var _excluded$2h = ["aspectRatio", "className", "descriptionText", "embedCode", "headingText", "helperText", "id", "iframeTitle", "showHelperInvalidText", "videoId", "videoType"];
 var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -15943,7 +16177,7 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
       showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
       videoId = props.videoId,
       videoType = props.videoType,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2f);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2h);
 
   var iframeTitleFinal = videoType === "vimeo" ? iframeTitle || "Vimeo video player" : iframeTitle || "YouTube video player";
   var videoSrc = videoType === "vimeo" ? "https://player.vimeo.com/video/" + videoId + "?autoplay=0&loop=0" : "https://www.youtube.com/embed/" + videoId + "?disablekb=1&autoplay=0&fs=1&modestbranding=0";
@@ -16013,38 +16247,6 @@ var VideoPlayer$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(fun
   }, embedElement)));
 }));
 
-var _excluded$2g = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
-var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      content = props.content,
-      isDisabled = props.isDisabled,
-      shouldWrapChildren = props.shouldWrapChildren,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
-
-  if (typeof content !== "string") {
-    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.");
-      }
-    });
-  }
-
-  var newChildren = shouldWrapChildren ? React__default.createElement(ComponentWrapper, {
-    width: "fit-content"
-  }, children) : children;
-  var styles = react.useMultiStyleConfig("Tooltip", {});
-  return React__default.createElement(react.Tooltip, Object.assign({
-    hasArrow: true,
-    "aria-label": typeof content !== "string" ? "Tooltip" : undefined,
-    label: content,
-    isDisabled: isDisabled,
-    placement: "top",
-    openDelay: 500,
-    ref: ref,
-    __css: styles
-  }, rest), newChildren);
-}));
-
 Object.defineProperty(exports, 'Box', {
   enumerable: true,
   get: function () {
@@ -16212,6 +16414,7 @@ exports.StatusBadge = StatusBadge$1;
 exports.StructuredContent = StructuredContent$1;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TagSet = TagSet$1;
 exports.Template = Template$1;
 exports.TemplateAboveHeader = TemplateAboveHeader;
 exports.TemplateAppContainer = TemplateAppContainer;