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

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

@@ -1,4 +1,4 @@
-import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Button as Button$2, Heading as Heading$2, Text as Text$2, useMultiStyleConfig, Flex, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, useMergeRefs, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, SimpleGrid as SimpleGrid$1, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td, useTheme, Input, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, RadioGroup as RadioGroup$2, HStack, useOutsideClick, VStack, Spacer, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, CircularProgress, CircularProgressLabel, Progress, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Switch as Switch$1, Tooltip as Tooltip$2 } from '@chakra-ui/react';
+import { chakra, useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Button as Button$2, Heading as Heading$2, Text as Text$2, useMultiStyleConfig, Flex, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, useMediaQuery, Stack, useMergeRefs, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, SimpleGrid as SimpleGrid$1, TableCaption, Thead, Tr, Th, Table as Table$1, Tbody, Td, useTheme, Input, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, RadioGroup as RadioGroup$2, HStack, useOutsideClick, VStack, Spacer, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, CircularProgress, CircularProgressLabel, Progress, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Tooltip as Tooltip$2, Switch as Switch$1 } from '@chakra-ui/react';
 export { Box, Center, Circle, ColorModeScript, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack, cookieStorageManager, localStorageManager, useColorMode, useColorModeValue } from '@chakra-ui/react';
 import React__default, { createElement, forwardRef, useRef, useState, useEffect, Fragment, useContext } from 'react';
 import useNativeLazyLoading from '@charlietango/use-native-lazy-loading';
@@ -2458,7 +2458,7 @@ var AlphabetFilter = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
       id: "filter-" + item.value,
       isDisabled: isButtonDisabled,
       key: item.value,
-      __css: buttonStyles,
+      sx: buttonStyles,
       onClick: function onClick(e) {
         handleOnClick(e, item.value);
       }
@@ -5189,7 +5189,8 @@ var AlphabetFilter$1 = {
         }
       },
       _disabled: {
-        color: "ui.gray.medium"
+        color: "ui.gray.medium",
+        cursor: "not-allowed"
       }
     }
   }
@@ -9367,6 +9368,7 @@ var theme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
   components: /*#__PURE__*/_extends({
     Accordion: Accordion$1,
     AlphabetFilter: AlphabetFilter$1,
+    AudioPlayer: AudioPlayer$1,
     Breadcrumb: Breadcrumb,
     Button: Button$1,
     ButtonGroup: ButtonGroup$1
@@ -9419,8 +9421,7 @@ var theme = /*#__PURE__*/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
@@ -15578,7 +15579,224 @@ var Tabs = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }, React__default.createElement(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__*/chakra( /*#__PURE__*/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") {
+    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 = useMultiStyleConfig("Tooltip", {});
+  return React__default.createElement(Tooltip$2, 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__*/chakra(function (props) {
+  var id = props.id,
+      _props$tagSetData = props.tagSetData,
+      tagSetData = _props$tagSetData === void 0 ? [] : _props$tagSetData;
+  var styles = 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(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__*/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 = 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.
+
+
+  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__*/chakra( /*#__PURE__*/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 = 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(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.
@@ -15828,7 +16046,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
       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);
@@ -15847,7 +16065,7 @@ var TemplateAppContainer = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function
   }, 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;
 };
@@ -15874,7 +16092,7 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
       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 = useMultiStyleConfig("Toggle", {
     isDisabled: isDisabled,
@@ -15923,7 +16141,7 @@ var Toggle$2 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref
   }), 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__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   var aspectRatio = props.aspectRatio,
       className = props.className,
@@ -15937,7 +16155,7 @@ var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
       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";
@@ -16007,37 +16225,5 @@ var VideoPlayer$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
   }, embedElement)));
 }));
 
-var _excluded$2g = ["children", "className", "content", "id", "isDisabled", "shouldWrapChildren"];
-var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/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 = useMultiStyleConfig("Tooltip", {});
-  return React__default.createElement(Tooltip$2, 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);
-}));
-
-export { Accordion, AlphabetFilter, AudioPlayer, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Footer$1 as Footer, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, Table, Tabs, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
+export { Accordion, AlphabetFilter, AudioPlayer, Breadcrumbs, Button, ButtonGroup, Card, CardActions, CardContent, CardHeading, Checkbox, CheckboxGroup, ColorCard, DSProvider, DatePicker, Fieldset, Footer$1 as Footer, Form, FormField, FormRow, Header$1 as Header, Heading, HelperErrorText, Hero$1 as Hero, HorizontalRule$1 as HorizontalRule, Icon, Image, Label, Link, List$1 as List, Logo$1 as Logo, ModalTrigger, Notification$1 as Notification, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkipNavigation$1 as SkipNavigation, Slider, StatusBadge$1 as StatusBadge, StructuredContent$1 as StructuredContent, Table, Tabs, TagSet$1 as TagSet, Template$1 as Template, TemplateAboveHeader, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, Text, TextInput, Toggle$2 as Toggle, Tooltip$1 as Tooltip, VideoPlayer$1 as VideoPlayer, useCarouselStyles, useModal, useNYPLBreakpoints, useNYPLTheme, useWindowSize };
 //# sourceMappingURL=design-system-react-components.esm.js.map