@nypl/design-system-react-components 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -8,6 +8,20 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.3.1 (December 15, 2022)
+
+### Adds
+
+- Adds the optional `isClearableCallback` prop to the `TextInput` component. This prop works with the `isClearable` prop and the passed function is invoked when the "clear" button is clicked. This is most helpful for controlled `TextInput` component implementations.
+
+## Updates
+
+- Updates the background color for the `hover` state in the `secondary` variant of the `Button` component.
+
+### Fixes
+
+- Fixes the z-index value of the SVG icon in the `Select` component so it does not render above other elements on a consuming application's page.
+
 ## 1.3.0 (December 8, 2022)
 
 This release is exactly the same as the `1.3.0-rc` release candidate published on December 2, 2022. The `rc` release was reviewed and validated.

package/dist/components/TextInput/TextInput.d.ts

@@ -24,6 +24,8 @@ export interface InputProps {
     invalidText?: HelperErrorTextType;
     /** Adds a button to clear existing text in the input field. */
     isClearable?: boolean;
+    /** The callback function that is called when the clear button is clicked. */
+    isClearableCallback?: () => void;
     /** Adds the `disabled` and `aria-disabled` prop to the input when true */
     isDisabled?: boolean;
     /** Adds errored styling to the input/textarea and helper text elements */

package/dist/design-system-react-components.cjs.development.js

@@ -2668,6 +2668,18 @@ var getAriaAttrs = function getAriaAttrs(_ref) {
   }
   return ariaAttributes;
 };
+/** Convert a hex color value to an rgb or rgba value */
+var hexToRGB = function hexToRGB(hex, alpha) {
+  var shortHex = hex.length === 4;
+  var rSlice = shortHex ? hex.slice(1, 2).repeat(2) : hex.slice(1, 3),
+    gSlice = shortHex ? hex.slice(2, 3).repeat(2) : hex.slice(3, 5),
+    bSlice = shortHex ? hex.slice(3, 4).repeat(2) : hex.slice(5, 7);
+  var r = parseInt(rSlice, 16),
+    g = parseInt(gSlice, 16),
+    b = parseInt(bSlice, 16);
+  var rgb = r + ", " + g + ", " + b;
+  return alpha ? "rgba(" + rgb + "," + alpha + ")" : "rgb(" + rgb + ")";
+};
 
 var _excluded$12 = ["isIndeterminate", "isChecked"],
   _excluded2$2 = ["className", "invalidText", "helperText", "id", "isChecked", "isDisabled", "isIndeterminate", "isInvalid", "isRequired", "labelText", "name", "onChange", "showHelperInvalidText", "showLabel", "value"];
@@ -3550,7 +3562,7 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, rest), children, isRequired && React__default.createElement("span", null, requiredLabelText ? " (" + requiredLabelText + ")" : " (Required)"));
 }));
 
-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"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isClearableCallback", "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",
@@ -3574,6 +3586,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     invalidText = props.invalidText,
     _props$isClearable = props.isClearable,
     isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
+    isClearableCallback = props.isClearableCallback,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
@@ -3632,6 +3645,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   });
   var onClearClick = function onClearClick() {
     setFinalValue("");
+    isClearableCallback && isClearableCallback();
     // Set focus back to the input element.
     finalRef.current.focus();
   };
@@ -4262,6 +4276,8 @@ var grayMedium = "#BDBDBD";
 var grayLightCool = "#E9E9E9";
 var grayxLightCool = "#F5F5F5";
 var grayxxLightCool = "#FAFAFA";
+var linkPrimary = "#0576D3";
+var linkSecondary = "#004B98";
 var brandPrimary = "#C60917";
 var brandSecondary = "#760000";
 var brandObj = {
@@ -4285,8 +4301,9 @@ var colors = {
     },
     focus: "#4181F1",
     link: {
-      primary: "#0576D3",
-      secondary: "#004B98"
+      primary: linkPrimary,
+      "primary-05": /*#__PURE__*/hexToRGB(linkPrimary, 0.05),
+      secondary: linkSecondary
     },
     status: {
       primary: "#F9E08E",
@@ -4887,7 +4904,7 @@ var secondary = function secondary(_ref2) {
     color: "ui.link.primary"
   }, generalSizeValues(buttonSize), {
     _hover: {
-      bg: "ui.bg.default",
+      bg: "ui.link.primary-05",
       borderColor: "ui.link.secondary",
       color: "ui.link.secondary"
     },
@@ -5509,7 +5526,14 @@ var select = {
   },
   _active: selectTextInputFocusStyles,
   _disabled: /*#__PURE__*/_extends({}, selectTextInputDisabledStyles),
-  _focus: selectTextInputFocusStyles,
+  _focus: /*#__PURE__*/_extends({}, selectTextInputFocusStyles, {
+    // When the select is focused, the icon should be on top of the dropdown.
+    // This should only be done when focused, otherswise the icon will render
+    // above any other elements on the page.
+    "+ .chakra-select__icon-wrapper": {
+      zIndex: "9999"
+    }
+  }),
   _invalid: {
     border: "1px solid",
     borderColor: "ui.error.primary",
@@ -5521,12 +5545,6 @@ var Select = {
   baseStyle: function baseStyle(_ref) {
     var labelPosition = _ref.labelPosition;
     return {
-      // The backgroundColor set to "ui.white" hides the arrow SVG icon when
-      // the component is focused. The background is added for dark mode and
-      // so we need to add specific selector.
-      ".chakra-select__icon-wrapper": {
-        zIndex: "9999"
-      },
       inline: {
         display: {
           md: "flex"