@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

@@ -2612,6 +2612,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     name: "TextInput",
     showLabel: showLabel
   });
+  var finalIsInvalid = isInvalid;
   var fieldOutput;
   var options;
 
@@ -2619,6 +2620,11 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     console.warn("NYPL Reservoir TextInput: This component's required `id` prop was not passed.");
   }
 
+  if (type === "number" && max && min && min > max) {
+    finalIsInvalid = true;
+    console.warn("NYPL Reservoir TextInput: The `min` prop is greater than the `max` prop.");
+  }
+
   if (type === "tel" || type === "url" || type === "email") {
     var example = TextInputFormats[type] || "";
     footnote = createElement(Fragment, null, "Ex: ", example, createElement("br", null), footnote);
@@ -2637,7 +2643,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     id: id,
     isDisabled: isDisabled,
     isRequired: isRequired,
-    isInvalid: isInvalid,
+    isInvalid: finalIsInvalid,
     max: max,
     maxLength: maxLength,
     min: min,
@@ -2668,10 +2674,10 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
 
   return createElement(ComponentWrapper, Object.assign({
     className: className,
-    helperText: helperText,
+    helperText: !finalIsInvalid ? footnote : helperText,
     id: id,
     invalidText: finalInvalidText,
-    isInvalid: isInvalid,
+    isInvalid: finalIsInvalid,
     showHelperInvalidText: showHelperInvalidText && !isHidden,
     __css: styles
   }, rest), labelText && showLabel && !isHidden && createElement(Label, {
@@ -5240,7 +5246,8 @@ var baseStyle$2 = {
   control: baseStyleControl$1,
   label: baseStyleLabel$1,
   // Custom element in the DS Radio component.
-  helperErrorText: baseStyleHelperErrorText$1
+  helperErrorText: baseStyleHelperErrorText$1,
+  hiddenLabel: screenreaderOnly
 }; // Sticking to "md" for the default size.
 
 var sizes$1 = {
@@ -5252,7 +5259,7 @@ var sizes$1 = {
   }
 };
 var Radio = {
-  parts: ["control", "helperErrorText", "label"],
+  parts: ["control", "helperErrorText", "hiddenLabel", "label"],
   baseStyle: baseStyle$2,
   sizes: sizes$1,
   // Default values
@@ -5960,7 +5967,10 @@ var TemplateContentPrimary = {
 };
 var TemplateContentSidebar = {
   baseStyle: {
-    flex: "0 0 255px",
+    flex: {
+      base: "0 0 auto",
+      md: "0 0 255px"
+    },
     order: {
       md: "page.vstack"
     },
@@ -9441,7 +9451,9 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       value = props.value,
       rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
-  var styles = useMultiStyleConfig("Radio", {});
+  var styles = useMultiStyleConfig("Radio", {
+    showLabel: showLabel
+  });
   var footnote = isInvalid ? invalidText : helperText;
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
@@ -9449,7 +9461,10 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     labelText: labelText,
     name: "Radio",
     showLabel: showLabel
-  });
+  }); // We can't use the aria-label because of how Chakra renders its
+  // Radio component. Instead, we'll visually hide the label.
+
+  delete ariaAttributes["aria-label"];
 
   if (!id) {
     console.warn("NYPL Reservoir Radio: This component's required `id` prop was not passed.");
@@ -9475,7 +9490,10 @@ var Radio$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     value: value,
     alignItems: "flex-start",
     __css: styles
-  }, ariaAttributes), showLabel && labelText));
+  }, ariaAttributes), createElement(Box, {
+    as: "span",
+    __css: showLabel ? {} : styles.hiddenLabel
+  }, labelText)));
 }));
 
 var _excluded$1B = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
@@ -10010,8 +10028,13 @@ var Slider = /*#__PURE__*/chakra(function (props) {
 
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
-  } // const footnote = finalIsInvalid ? invalidText : helperText;
+    console.warn("NYPL Reservoir Slider: The RangeSlider's first value is greater than the second value.");
+  }
 
+  if (min > max) {
+    finalIsInvalid = true;
+    console.warn("NYPL Reservoir Slider: The `min` prop is greater than the `max` prop.");
+  }
 
   var styles = useMultiStyleConfig("CustomSlider", {
     isDisabled: isDisabled,