@nypl/design-system-react-components 1.2.1 → 1.2.2

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

@@ -599,7 +599,7 @@ var SvgErrorFilled = function SvgErrorFilled(_ref) {
   }, title) : null, _path$n || (_path$n = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0Zm1.2 13.2h-2.4V6h2.4v7.2ZM10.8 18h2.4v-2.4h-2.4V18Z"
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1.003 11h-2V7h2v6Zm-2 3.998h2v-2h-2v2Z"
   })));
 };
 
@@ -613,7 +613,7 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties$o(_ref, _excluded$o);
   return /*#__PURE__*/createElement("svg", _extends$p({
-    viewBox: "0 0 24 25",
+    viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId
@@ -622,7 +622,7 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
   }, title) : null, _path$o || (_path$o = /*#__PURE__*/createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M11.988.912C5.364.912 0 6.288 0 12.912s5.364 12 11.988 12c6.636 0 12.012-5.376 12.012-12s-5.376-12-12.012-12Zm1.212 13.2v-7.2h-2.4v7.2h2.4Zm0 4.8v-2.4h-2.4v2.4h2.4Zm-10.8-6c0 5.304 4.296 9.6 9.6 9.6 5.304 0 9.6-4.296 9.6-9.6 0-5.304-4.296-9.6-9.6-9.6a9.597 9.597 0 0 0-9.6 9.6Z"
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2Zm1.013 5h-2v6h2V7Zm0 7.998h-2v2h2v-2Zm-9.002-2.996c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8-8 3.58-8 8Z"
   })));
 };
 
@@ -2444,8 +2444,7 @@ var Image = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
   return React__default.createElement(Box, {
-    ref: finalRefs,
-    "data-testid": "test"
+    ref: finalRefs
   }, caption || credit ? React__default.createElement(Box, {
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
@@ -3601,7 +3600,7 @@ var Label = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }, 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", "requiredLabelText", "step", "textInputType", "type", "value"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
 // Only used internally.
 var TextInputFormats = {
   email: "jdoe@domain.com",
@@ -3623,6 +3622,8 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     helperText = props.helperText,
     id = props.id,
     invalidText = props.invalidText,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
@@ -3653,12 +3654,24 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     type = _props$type === void 0 ? "text" : _props$type,
     value = props.value,
     rest = _objectWithoutPropertiesLoose(props, _excluded$19);
+  var _useState = useState(value || ""),
+    finalValue = _useState[0],
+    setFinalValue = _useState[1];
+  var closedRef = useRef();
+  var mergedRefs = useMergeRefs(closedRef, ref);
+  // If a ref is not passed, then merging refs won't work.
+  var finalRef = ref ? mergedRefs : closedRef;
   var styles = useMultiStyleConfig("TextInput", {
+    showLabel: showLabel,
     variant: textInputType
   });
   var isTextArea = type === "textarea";
   var isHidden = type === "hidden";
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
+  var internalOnChange = function internalOnChange(e) {
+    setFinalValue(e.target.value);
+    onChange && onChange(e);
+  };
   var footnote = isInvalid ? finalInvalidText : helperText;
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
@@ -3667,9 +3680,20 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     name: "TextInput",
     showLabel: showLabel
   });
+  var onClearClick = function onClearClick() {
+    setFinalValue("");
+    // Set focus back to the input element.
+    finalRef.current.focus();
+  };
   var finalIsInvalid = isInvalid;
   var fieldOutput;
+  var clearButtonOutput;
   var options;
+  useEffect(function () {
+    if (value && value !== finalValue) {
+      setFinalValue(value);
+    }
+  }, [finalValue, value]);
   if (!id) {
     console.warn("NYPL Reservoir TextInput: This component's required `id` prop was not passed.");
   }
@@ -3687,8 +3711,8 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     id: id,
     "aria-hidden": isHidden,
     name: name,
-    onChange: onChange,
-    ref: ref
+    onChange: internalOnChange,
+    ref: finalRef
   } : _extends({
     "aria-required": isRequired,
     defaultValue: defaultValue,
@@ -3700,11 +3724,11 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     maxLength: maxLength,
     min: min,
     name: name,
-    onChange: onChange,
+    onChange: internalOnChange,
     onClick: onClick,
     onFocus: onFocus,
     placeholder: placeholder,
-    ref: ref,
+    ref: finalRef,
     // The `step` attribute is useful for the number type.
     step: type === "number" ? step : null
   }, ariaAttributes, rest);
@@ -3713,12 +3737,27 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   if (!isTextArea) {
     options = _extends({
       type: type,
-      value: value
+      value: finalValue
     }, options);
     fieldOutput = React__default.createElement(Input, Object.assign({}, options, {
       __css: styles.input
     }));
+    if (isClearable && !isHidden) {
+      clearButtonOutput = React__default.createElement(Button, {
+        buttonType: "text",
+        id: id + "-clear-btn",
+        onClick: onClearClick,
+        sx: styles.clearButton
+      }, React__default.createElement(Icon, {
+        color: "ui.black",
+        name: "close",
+        size: "medium"
+      }), React__default.createElement("span", null, "Clear ", labelText));
+    }
   } else {
+    if (isClearable) {
+      console.warn("NYPL Reservoir TextInput: The `isClearable` prop cannot be used with the `textarea` type.");
+    }
     fieldOutput = React__default.createElement(Textarea, Object.assign({}, options, {
       __css: styles.textarea
     }), value);
@@ -3736,7 +3775,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     id: id + "-label",
     isRequired: showRequiredLabel && isRequired,
     requiredLabelText: requiredLabelText
-  }, labelText), fieldOutput);
+  }, labelText), fieldOutput, !isHidden && finalValue.length > 0 && clearButtonOutput);
 }));
 
 var _excluded$1a = ["dsRef", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "onClick", "showLabel", "showHelperInvalidText", "showRequiredLabel", "value"],
@@ -6904,10 +6943,17 @@ var tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    padding: "inset.default",
+    px: "inset.default",
+    py: {
+      base: "inset.default",
+      xl: "inset.wide"
+    },
     p: {
       marginBottom: "0",
-      marginTop: "s"
+      marginTop: {
+        base: "xxs",
+        xl: "xs"
+      }
     }
   }),
   heading: {
@@ -8613,12 +8659,28 @@ var input = {
 };
 var TextInput$1 = {
   parts: ["input", "textarea"],
-  baseStyle: {
-    input: input,
-    textarea: /*#__PURE__*/_extends({}, input, {
-      lineheight: "1.5",
-      minHeight: "xxl"
-    })
+  baseStyle: function baseStyle(_ref) {
+    var showLabel = _ref.showLabel;
+    return {
+      position: "relative",
+      input: input,
+      textarea: _extends({}, input, {
+        lineheight: "1.5",
+        minHeight: "xxl"
+      }),
+      clearButton: {
+        position: "absolute",
+        // When `showLabel` is false, the input field is at the top
+        // which means the clear button should float higher.
+        top: showLabel ? "32px" : "0",
+        px: "xs",
+        right: "0",
+        // Don't visually show the text. This also helps
+        // use the "text" `Button` type.
+        span: screenreaderOnly(),
+        zIndex: "9999"
+      }
+    };
   },
   variants: {
     searchBar: {
@@ -13799,6 +13861,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   // Render the `TextInput` component.
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
     id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
+    isClearable: textInputProps == null ? void 0 : textInputProps.isClearable,
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
     name: textInputProps == null ? void 0 : textInputProps.name,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,
@@ -14530,12 +14593,16 @@ var Tooltip$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
   }, 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,
+    closeDelay: 750,
+    closeOnClick: true,
+    closeOnEsc: true,
+    closeOnMouseDown: true,
+    hasArrow: true,
     isDisabled: isDisabled,
-    placement: "top",
+    label: content,
     openDelay: 500,
+    placement: "top",
     ref: ref,
     __css: styles
   }, rest), newChildren);