@nypl/design-system-react-components 1.1.0 → 1.1.2

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

@@ -1723,7 +1723,7 @@ var Icon = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref) {
   }
 });
 
-var _excluded$R = ["accordionData", "id", "isDefaultOpen", "panelMaxHeight"];
+var _excluded$R = ["accordionData", "id", "isDefaultOpen", "isAlwaysRendered", "panelMaxHeight"];
 /**
  * Get the minus or plus icon depending on whether the accordion
  * is open or closed.
@@ -1748,13 +1748,17 @@ var getIcon = function getIcon(isExpanded, index, id) {
  */
 
 
-var getElementsFromData = function getElementsFromData(data, id, panelMaxHeight) {
+var getElementsFromData = function getElementsFromData(data, id, isAlwaysRendered, panelMaxHeight) {
   var _data, _data2;
 
   if (data === void 0) {
     data = [];
   }
 
+  if (isAlwaysRendered === void 0) {
+    isAlwaysRendered = false;
+  }
+
   var colorMap = {
     "default": "ui.white",
     warning: "ui.status.primary",
@@ -1803,7 +1807,7 @@ var getElementsFromData = function getElementsFromData(data, id, panelMaxHeight)
         flex: "1",
         fontSize: multipleFontSize,
         textAlign: "left"
-      }, content.label), getIcon(isExpanded, index, id)), isExpanded && panel);
+      }, content.label), getIcon(isExpanded, index, id)), (isAlwaysRendered || isExpanded) && panel);
     });
   });
 };
@@ -1818,6 +1822,8 @@ var Accordion = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
       id = props.id,
       _props$isDefaultOpen = props.isDefaultOpen,
       isDefaultOpen = _props$isDefaultOpen === void 0 ? false : _props$isDefaultOpen,
+      _props$isAlwaysRender = props.isAlwaysRendered,
+      isAlwaysRendered = _props$isAlwaysRender === void 0 ? false : _props$isAlwaysRender,
       panelMaxHeight = props.panelMaxHeight,
       rest = _objectWithoutPropertiesLoose(props, _excluded$R); // Pass `0` to open the first accordion in the 0-index based array.
 
@@ -1828,7 +1834,7 @@ var Accordion = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
     defaultIndex: openFirstAccordion,
     id: id,
     ref: ref
-  }, rest), getElementsFromData(accordionData, id, panelMaxHeight));
+  }, rest), getElementsFromData(accordionData, id, isAlwaysRendered, panelMaxHeight));
 }));
 
 var _excluded$S = ["breadcrumbsData", "breadcrumbsType", "className", "id"];
@@ -1883,7 +1889,7 @@ var Breadcrumbs = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   }, rest), breadcrumbItems);
 }));
 
-var _excluded$T = ["buttonType", "children", "className", "id", "isDisabled", "mouseDown", "onClick", "type"];
+var _excluded$T = ["buttonType", "children", "className", "id", "isDisabled", "mouseDown", "onClick", "size", "type"];
 /**
  * Renders a simple `button` element with custom variant styles.
  */
@@ -1900,6 +1906,8 @@ var Button = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       _props$mouseDown = props.mouseDown,
       mouseDown = _props$mouseDown === void 0 ? false : _props$mouseDown,
       onClick = props.onClick,
+      _props$size = props.size,
+      size = _props$size === void 0 ? "medium" : _props$size,
       _props$type = props.type,
       type = _props$type === void 0 ? "button" : _props$type,
       rest = _objectWithoutPropertiesLoose(props, _excluded$T);
@@ -1918,6 +1926,10 @@ var Button = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
     console.warn("NYPL Reservoir Button: This component's required `id` prop was not passed.");
   }
 
+  if (buttonType === "link") {
+    console.warn("NYPL Reservoir Button: The 'link' value for the 'buttonType' prop has been deprecated.");
+  }
+
   React__default.Children.map(children, function (child) {
     childCount++;
 
@@ -1935,11 +1947,11 @@ var Button = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }
 
   styles = useStyleConfig("Button", {
-    variant: variant
+    variant: variant,
+    buttonSize: size
   });
   return React__default.createElement(Button$2, Object.assign({
     className: className,
-    "data-testid": "button",
     id: id,
     isDisabled: isDisabled,
     ref: ref,
@@ -1947,7 +1959,13 @@ var Button = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   }, btnCallback, {
     __css: styles
   }, rest), children);
-}));
+}), // Chakra uses different values for its own `size` prop. We
+// want to override the values and use our own.
+{
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
 
 /**
  * This hook is used to determine if the current screen size is larger than
@@ -3023,6 +3041,20 @@ var reservoirSpacingTokens = {
   xxl: reservoirSpacingValues["xxl"],
   xxxl: reservoirSpacingValues["xxxl"],
   // Reservoir semantic tokens
+  button: {
+    small: {
+      px: reservoirSpacingValues["xs"],
+      py: reservoirSpacingValues["xxs"]
+    },
+    medium: {
+      px: reservoirSpacingValues["s"],
+      py: reservoirSpacingValues["xs"]
+    },
+    large: {
+      px: reservoirSpacingValues["l"],
+      py: reservoirSpacingValues["s"]
+    }
+  },
   input: {
     group: {
       button: {
@@ -3063,7 +3095,7 @@ var reservoirSpacingTokens = {
 };
 var spacing = /*#__PURE__*/_extends({}, chakraSpacingTokens, reservoirSpacingTokens);
 
-var _excluded$12 = ["children", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
+var _excluded$12 = ["children", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel", "value"];
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a
  * column or in a row. The `CheckboxGroup` component renders all the necessary
@@ -3098,6 +3130,7 @@ var CheckboxGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
       _props$showRequiredLa = props.showRequiredLabel,
       showRequiredLabel = _props$showRequiredLa === void 0 ? true : _props$showRequiredLa,
+      value = props.value,
       rest = _objectWithoutPropertiesLoose(props, _excluded$12);
 
   var footnote = isInvalid ? invalidText : helperText;
@@ -3108,6 +3141,10 @@ var CheckboxGroup = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props
     onChange: onChange
   } : {};
 
+  if (value) {
+    checkboxProps["value"] = value;
+  }
+
   if (!id) {
     console.warn("NYPL Reservoir CheckboxGroup: This component's required `id` prop was not passed.");
   } // Go through the Checkbox children and update them as needed.
@@ -3811,6 +3848,7 @@ var TextInput = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, re
 
 
   options = isHidden ? {
+    defaultValue: defaultValue,
     id: id,
     "aria-hidden": isHidden,
     name: name,
@@ -4717,7 +4755,9 @@ var typography = {
       "default": fontSizeValues["-1"]
     },
     button: {
-      "default": fontSizeValues["-1"]
+      small: fontSizeValues["-2"],
+      "default": fontSizeValues["-1"],
+      large: fontSizeValues["0"]
     },
     heading: {
       primary: fontSizeValues["4"],
@@ -4918,19 +4958,11 @@ var baseStyle = {
   display: "flex",
   cursor: "pointer",
   color: "ui.white",
-  height: "10",
+  fontWeight: "button.default",
   justifyContent: "center",
   lineHeight: "1.5",
-  maxHeight: "2.5rem",
-  minHeight: {
-    base: defaultElementSizes.mobileFieldHeight,
-    md: "auto"
-  },
-  py: "inset.narrow",
-  px: "inset.default",
   textDecoration: "none",
   wordWrap: "normal",
-  fontWeight: "button.default",
   svg: {
     fill: "currentColor"
   },
@@ -4943,92 +4975,184 @@ var baseStyle = {
   _disabled: {
     bg: "ui.gray.light-cool",
     color: "ui.gray.dark",
-    pointerEvents: "none",
-    opacity: "1"
+    opacity: "1",
+    pointerEvents: "none"
+  }
+};
+
+var generalSizeValues = function generalSizeValues(size, isPill) {
+  if (size === void 0) {
+    size = "medium";
   }
+
+  if (isPill === void 0) {
+    isPill = false;
+  }
+
+  var sizes = {
+    small: {
+      fontSize: "button.small",
+      height: "fit-content",
+      minHeight: "auto",
+      px: isPill ? "s" : "button.small.px",
+      py: isPill ? "xxxs" : "button.small.py"
+    },
+    medium: {
+      fontSize: "button.default",
+      height: isPill ? "fit-content" : undefined,
+      minHeight: isPill ? "auto" : {
+        base: defaultElementSizes.mobileFieldHeight,
+        md: "auto"
+      },
+      px: isPill ? "m" : "button.medium.px",
+      py: isPill ? "xxxs" : "button.medium.py"
+    },
+    large: {
+      fontSize: "button.large",
+      height: "fit-content",
+      minHeight: "auto",
+      px: isPill ? "l" : "button.large.px",
+      py: isPill ? "xxs" : "button.large.py"
+    }
+  };
+  return sizes[size];
 }; // Styles for different visual variants:
-// primary, secondary, link, pill, iconOnly, callout, searchbar, noBrand
+// primary, secondary, link, text, pill, iconOnly, callout, noBrand
 
-var primary = {
-  bg: "ui.link.primary",
-  minWidth: "none",
-  height: "none",
-  fontSize: "button.default"
+
+var primary = function primary(_ref) {
+  var _ref$buttonSize = _ref.buttonSize,
+      buttonSize = _ref$buttonSize === void 0 ? "medium" : _ref$buttonSize;
+  return _extends({
+    bg: "ui.link.primary"
+  }, generalSizeValues(buttonSize));
 };
-var secondary = {
-  bg: "ui.white",
-  border: "1px solid",
-  borderColor: "ui.gray.light-cool",
-  color: "inherit",
-  fontSize: "button.default",
-  _hover: {
-    bg: "ui.gray.xx-light-cool",
-    borderColor: "ui.gray.medium"
-  },
-  _disabled: {
-    bg: "ui.gray.x-light-cool"
-  }
+
+var secondary = function secondary(_ref2) {
+  var _ref2$buttonSize = _ref2.buttonSize,
+      buttonSize = _ref2$buttonSize === void 0 ? "medium" : _ref2$buttonSize;
+  return _extends({
+    bg: "ui.white",
+    border: "1px solid",
+    borderColor: "ui.link.primary",
+    color: "ui.link.primary"
+  }, generalSizeValues(buttonSize), {
+    _hover: {
+      bg: "ui.bg.default",
+      borderColor: "ui.link.secondary",
+      color: "ui.link.secondary"
+    },
+    _disabled: {
+      bg: "transparent",
+      borderColor: "ui.disabled.primary",
+      color: "ui.disabled.primary"
+    }
+  });
+}; // The "link" type is deprecated but we still want to style
+// it correctly for backwards compatibility.
+
+
+var link = function link(_ref3) {
+  var _ref3$buttonSize = _ref3.buttonSize,
+      buttonSize = _ref3$buttonSize === void 0 ? "medium" : _ref3$buttonSize;
+  return _extends({
+    bg: "transparent",
+    color: "ui.link.primary",
+    textDecoration: "underline"
+  }, generalSizeValues(buttonSize), {
+    _disabled: {
+      bg: "transparent"
+    },
+    _hover: {
+      bg: "transparent",
+      color: "ui.link.secondary"
+    }
+  });
 };
-var link = {
-  bg: "transparent",
-  lineHeight: "2.5",
-  color: "ui.link.primary",
-  textDecoration: "underline",
-  _disabled: {
-    bg: "transparent"
-  },
-  _hover: {
+
+var text = function text(_ref4) {
+  var _ref4$buttonSize = _ref4.buttonSize,
+      buttonSize = _ref4$buttonSize === void 0 ? "medium" : _ref4$buttonSize;
+  return _extends({
     bg: "transparent",
-    color: "ui.link.secondary"
-  }
+    color: "ui.link.primary"
+  }, generalSizeValues(buttonSize), {
+    _disabled: {
+      bg: "transparent"
+    },
+    _hover: {
+      bg: "transparent",
+      color: "ui.link.secondary"
+    }
+  });
 };
-var pill = {
-  bg: "ui.white",
-  border: "1px solid",
-  borderColor: "ui.gray.light-cool",
-  color: "inherit",
-  borderRadius: "pill",
-  py: "inset.narrow",
-  px: "inset.wide",
-  fontSize: "button.default",
-  _hover: {
-    bg: "ui.gray.xx-light-cool",
-    borderColor: "ui.gray.medium"
-  },
-  _disabled: {
-    bg: "ui.gray.x-light-cool"
-  }
+
+var pill = function pill(_ref5) {
+  var _ref5$buttonSize = _ref5.buttonSize,
+      buttonSize = _ref5$buttonSize === void 0 ? "medium" : _ref5$buttonSize;
+  return _extends({
+    bg: "ui.white",
+    border: "1px solid",
+    borderColor: "ui.gray.light-cool",
+    borderRadius: "pill",
+    color: "inherit"
+  }, generalSizeValues(buttonSize, true), {
+    _hover: {
+      bg: "ui.gray.xx-light-cool",
+      borderColor: "ui.gray.medium"
+    },
+    _disabled: {
+      bg: "ui.gray.x-light-cool"
+    }
+  });
 };
-var iconOnly = {
-  bg: "ui.white",
-  border: "1px solid",
-  borderColor: "ui.gray.light-cool",
-  color: "inherit",
-  _hover: {
-    bg: "ui.gray.xx-light-cool",
-    borderColor: "ui.gray.medium"
-  },
-  paddingInlineStart: "inset.narrow",
-  paddingInlineEnd: "inset.narrow"
+
+var iconOnly = function iconOnly(_ref6) {
+  var _ref6$buttonSize = _ref6.buttonSize,
+      buttonSize = _ref6$buttonSize === void 0 ? "medium" : _ref6$buttonSize;
+  return _extends({
+    bg: "ui.white",
+    border: "1px solid",
+    borderColor: "ui.link.primary",
+    color: "ui.link.primary"
+  }, generalSizeValues(buttonSize), {
+    paddingInlineStart: "inset.narrow",
+    paddingInlineEnd: "inset.narrow",
+    _hover: {
+      bg: "ui.bg.default",
+      borderColor: "ui.link.primary",
+      color: "ui.link.primary"
+    }
+  });
 };
-var callout = {
-  bg: "brand.primary",
-  fontSize: "button.default",
-  _hover: {
-    bg: "brand.secondary"
-  },
-  _active: {
-    bg: "brand.secondary"
-  }
+
+var callout = function callout(_ref7) {
+  var _ref7$buttonSize = _ref7.buttonSize,
+      buttonSize = _ref7$buttonSize === void 0 ? "medium" : _ref7$buttonSize;
+  return _extends({
+    bg: "brand.primary"
+  }, generalSizeValues(buttonSize), {
+    _hover: {
+      bg: "brand.secondary"
+    },
+    _active: {
+      bg: "brand.secondary"
+    }
+  });
 };
 
-var noBrand = /*#__PURE__*/_extends({}, primary, {
-  bg: "ui.black",
-  color: "ui.white",
-  _hover: {
-    bg: "ui.gray.x-dark"
-  }
-});
+var noBrand = function noBrand(_ref8) {
+  var _ref8$buttonSize = _ref8.buttonSize,
+      buttonSize = _ref8$buttonSize === void 0 ? "medium" : _ref8$buttonSize;
+  return _extends({
+    bg: "ui.black",
+    color: "ui.white"
+  }, generalSizeValues(buttonSize), {
+    _hover: {
+      bg: "ui.gray.x-dark"
+    }
+  });
+};
 
 var Button$1 = {
   baseStyle: baseStyle,
@@ -5036,6 +5160,8 @@ var Button$1 = {
   variants: {
     primary: primary,
     secondary: secondary,
+    text: text,
+    // Deprecated type. Use "text" instead.
     link: link,
     pill: pill,
     iconOnly: iconOnly,
@@ -5686,7 +5812,7 @@ var Footer = {
         lg: "30px"
       },
       marginRight: {
-        xl: "70px"
+        xl: "100px"
       },
       order: {
         base: "2",
@@ -6198,7 +6324,7 @@ var HeaderLoginButton = {
         md: "auto"
       },
       padding: {
-        md: "4px 10px"
+        md: "10px 12px"
       },
       svg: {
         fill: isOpen ? "ui.white" : null,
@@ -6454,11 +6580,15 @@ var HeaderSearchForm = {
     desktopSearchBtn: {
       alignSelf: "end",
       backgroundColor: "transparent",
+      borderColor: "ui.white",
       borderRadius: "100px",
       borderWidth: "2px",
       height: "75px",
       maxHeight: "75px",
       width: "75px",
+      svg: {
+        marginTop: "xs"
+      },
       _focus: /*#__PURE__*/_extends({}, headerFocus, {
         borderRadius: "100px"
       }),
@@ -6494,7 +6624,8 @@ var HeaderSearchForm = {
       display: "flex",
       fontSize: "16px",
       flex: "1",
-      padding: "35px 0",
+      justifyContent: "center",
+      padding: "25px 0",
       svg: {
         fill: headerLightBlue,
         marginLeft: "15px"
@@ -6529,7 +6660,7 @@ var HeaderSearchButton = {
         borderBottom: {
           md: "3px solid #1B7FA7"
         },
-        display: "flex",
+        display: "inline-flex",
         lineHeight: "1.3"
       },
       svg: {
@@ -6537,7 +6668,7 @@ var HeaderSearchButton = {
           base: "0",
           md: "xxs"
         },
-        color: {
+        fill: {
           base: isOpen ? "ui.white" : "ui.black",
           md: isOpen ? "ui.white" : "ui.link.primary"
         }
@@ -7370,7 +7501,7 @@ var Notification = {
       },
       icon: {
         flexShrink: "0",
-        marginEnd: "s"
+        marginEnd: "xs"
       }
     };
   }
@@ -7387,7 +7518,7 @@ var NotificationContent = {
       content: {
         color: notificationType === "warning" ? "brand.primary" : "currentColor",
         marginTop: icon ? "xxxs" : "0",
-        paddingStart: alignText ? "calc(var(--nypl-space-m) + var(--nypl-space-s))" : null,
+        paddingStart: alignText ? "calc(var(--nypl-space-s) + var(--nypl-space-s))" : null,
         width: "100%",
         // Links should always be black and underlined.
         a: {
@@ -8098,11 +8229,15 @@ var baseStyle$3 = function baseStyle(_ref) {
     // have text color black.
     tbody: {
       th: {
-        color: "var(--nypl-colors-ui-black)",
+        color: "ui.black",
         backgroundColor: useRowHeaders ? {
           base: "ui.gray.x-light-cool",
           md: "unset"
-        } : undefined
+        } : undefined,
+        verticalAlign: "top"
+      },
+      td: {
+        verticalAlign: "top"
       }
     },
     thead: {
@@ -8666,7 +8801,7 @@ var Toggle$1 = {
 var _baseStyle;
 var $bg = /*#__PURE__*/cssVar("tooltip-bg");
 var Tooltip = {
-  baseStyle: (_baseStyle = {}, _baseStyle[$bg.variable] = "colors.ui.gray.xx-dark", _baseStyle.borderRadius = "4px", _baseStyle.color = "ui.white", _baseStyle.fontSize = "text.tag", _baseStyle.marginBottom = "xxs", _baseStyle.maxWidth = "240px", _baseStyle.px = "s", _baseStyle.py = "xs", _baseStyle)
+  baseStyle: (_baseStyle = {}, _baseStyle[$bg.variable] = "colors.ui.gray.xx-dark", _baseStyle.borderRadius = "4px", _baseStyle.boxShadow = "none", _baseStyle.color = "ui.white", _baseStyle.fontSize = "text.tag", _baseStyle.marginBottom = "xxs", _baseStyle.maxWidth = "240px", _baseStyle.px = "s", _baseStyle.py = "xs", _baseStyle)
 };
 
 var fourByThree = {
@@ -12481,7 +12616,7 @@ var HeaderSearchButton$1 = /*#__PURE__*/chakra(function (_ref) {
     "aria-haspopup": "true",
     "aria-label": labelText,
     "aria-expanded": isOpen ? true : null,
-    buttonType: "link",
+    buttonType: "text",
     id: "searchButton",
     onClick: function onClick() {
       gaUtils.trackEvent(gaAction, gaLabel);
@@ -12691,7 +12826,7 @@ var HeaderLoginButton$1 = /*#__PURE__*/chakra(function (_ref) {
     isDisabled: !isOpen
   }, React__default.createElement(Button, {
     "aria-label": desktopButtonLabel,
-    buttonType: "link",
+    buttonType: "text",
     id: "loginButton",
     onClick: function onClick() {
       gaUtils.trackEvent(gaAction, gaLabel);
@@ -12818,7 +12953,7 @@ var HeaderMobileNavButton$1 = /*#__PURE__*/chakra(function () {
     "aria-haspopup": "true",
     "aria-label": isOpen ? "Close Navigation" : "Open Navigation",
     "aria-expanded": isOpen ? true : null,
-    buttonType: "link",
+    buttonType: "text",
     id: "mobileNav-btn",
     onClick: function onClick() {
       gaUtils.trackEvent("Click", "Mobile mobileMenu");
@@ -12985,7 +13120,7 @@ var Notification$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (prop
 
   var dismissibleButton = dismissible && React__default.createElement(Button, {
     "aria-label": "Close the notification",
-    buttonType: "link",
+    buttonType: "text",
     id: id + "-notification-dismissible-button",
     onClick: handleClose,
     __css: styles.dismissibleButton
@@ -14105,7 +14240,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
     isDisabled: isDisabled,
     onClick: buttonOnClick,
     type: "submit",
-    __css: searchBarButtonStyles
+    sx: searchBarButtonStyles
   }, React__default.createElement(Icon, {
     align: "left",
     id: "searchbar-icon-" + id,
@@ -14226,7 +14361,7 @@ var SkeletonLoader$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (pr
   })))));
 }));
 
-var _excluded$26 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step"];
+var _excluded$26 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRangeSlider", "isRequired", "labelText", "max", "min", "name", "onChange", "showBoxes", "showHelperInvalidText", "showLabel", "showRequiredLabel", "showValues", "step", "value"];
 /**
  * The `Slider` component renders a singular value slider or a range slider
  * with a min and max value. The value(s) can be updated through the slider
@@ -14267,6 +14402,7 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       showValues = _props$showValues === void 0 ? true : _props$showValues,
       _props$step = props.step,
       step = _props$step === void 0 ? 1 : _props$step,
+      value = props.value,
       rest = _objectWithoutPropertiesLoose(props, _excluded$26);
 
   if (!id) {
@@ -14281,8 +14417,19 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
 
   var _React$useState = React__default.useState(finalDevaultValue),
       currentValue = _React$useState[0],
-      setCurrentValue = _React$useState[1];
+      setCurrentValue = _React$useState[1]; // If the value(s) needs to be updated programmatically,
+  // listen to the `value` prop.
 
+
+  useEffect(function () {
+    if (value) {
+      if (typeof value === "number" && value !== currentValue) {
+        setCurrentValue(value);
+      } else if (value[0] !== currentValue[0] || value[1] !== currentValue[1]) {
+        setCurrentValue(value);
+      }
+    }
+  }, [value, currentValue]);
   var finalIsInvalid = isInvalid; // In the Range Slider, if the first value is bigger than the second value,
   // then set the invalid state.