@nypl/design-system-react-components 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -8,6 +8,25 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.4.1 (February 9, 2023)
+
+### Adds
+
+- Adds the `pattern` prop to the `TextInput` component.
+- Adds documentation page "Dynamic Content" to the `Accessibility Guide`.
+- Adds the `isRenderedText` prop to the `HelperErrorText` component.
+
+### Updates
+
+- Adds a third radio button to the `Header` component, separating search options between the Circulating Catalog, Research Catalog, and the NYPL.org website.
+- Temporarily removes the "log in" state from the `Header` component, the feature to read auth cookies, and the patron's name when logged in, and the log out link.
+- Truncate breadcrumb text if beyond 40 characters then add ellipsis at the end. If the breadcrumb text is truncated, the DS `Tooltip` component is used to display the full text in a tooltip when the text is hovered.
+- Updates the `SearchBar`'s `textInputProps` prop to include the following props to pass to the `TextInput` component: `isClearableCallback`, `max`, `maxLength`, `min`, and `pattern`.
+- Updates how the `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, and `RadioGroup` components internally render the `HelperErrorText` component. The update in the `ComponentWrapper` component affects the `AudioPlayer`, `Checkbox`, `Radio`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`, and `VideoPlayer` DS components, each of which render helper or error text.
+- Updates the `MultiSelect` component so it closes when the "escape" key is pressed.
+- Updates where the focus is set in the `MultiSelect` "dialog" variant after the "Apply" button is clicked.
+- Updates where the focus is set in the `MultiSelect` component after the selected items count button is clicked.
+
 ## 1.4.0 (January 26, 2023)
 
 ### Adds
@@ -28,7 +47,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
   `dark.ui.status.primary`, `dark.ui.status.secondary`, `dark.ui.success.primary`,
   `dark.ui.success.secondary`, `dark.ui.warning.primary`
   and `dark.ui.warning.secondary`.
-- Updates the layout of the category `RadioGroup` to `column` for the mobie
+- Updates the layout of the category `RadioGroup` to `column` for the mobile
   view of the `FeedbackBox` component.
 - Updates the background color for the `"iconOnly"` and `"text"` variants of
   the `Button` component.
@@ -39,6 +58,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `HelperErrorText` component to set the `ariaLive` default value
   to `"polite"`.
 - Updates the `Accessibility` details for the `Notification` component.
+- Better docs for the `onSubmit` prop in the `FeedbackBox` component.
 
 ### Fixes
 
@@ -198,7 +218,7 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 
 - Deprecates the `link` variant in the `Button` component.
 
-## 1.1.0 (Ausut 30, 2022)
+## 1.1.0 (August 30, 2022)
 
 This release is exactly the same as the `1.1.0-rc5` release candidate which was published and reviewed. Minor bug fixes, listed below, were made.
 

package/dist/components/Header/components/HeaderLogin.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 export interface HeaderLoginProps {
     catalogRef?: React.RefObject<HTMLDivElement & HTMLAnchorElement>;
-    greetingRef?: React.RefObject<HTMLDivElement>;
     isMobile?: boolean;
 }
 /**
@@ -9,5 +8,5 @@ export interface HeaderLoginProps {
  * in and log out. When the patron is logged in, it will also display the patron's
  * name, links to the catalogs, and a log out link.
  */
-declare const HeaderLogin: import("@chakra-ui/react").ChakraComponent<({ catalogRef, greetingRef, isMobile }: HeaderLoginProps) => JSX.Element, {}>;
+declare const HeaderLogin: import("@chakra-ui/react").ChakraComponent<({ catalogRef, isMobile }: HeaderLoginProps) => JSX.Element, {}>;
 export default HeaderLogin;

package/dist/components/Header/components/HeaderSearchForm.d.ts

@@ -2,6 +2,7 @@
 export interface HeaderSearchFormProps {
     isMobile?: boolean;
 }
+export declare type SearchOptionType = "circulatingCatalog" | "researchCatalog" | "website";
 /**
  * Displays the search form for the Header's search interface. On mobile, two
  * buttons are displayed and on desktop, two radio inputs are displayed.

package/dist/components/Header/utils/headerUtils.d.ts

@@ -48,6 +48,10 @@ export declare const encoreEncodeSearchString: (searchString: any) => any;
  * Returns the final URL for the NYPL Encore search.
  */
 export declare const getEncoreCatalogURL: (searchValue: any) => any;
+/**
+ * Returns the final URL for the NYPL Research Catalog search.
+ */
+export declare const getResearchCatalogURL: (searchValue: any) => string;
 /**
  * Returns the final URL for the NYPL catalog search.
  */

package/dist/components/HelperErrorText/HelperErrorText.d.ts

@@ -19,11 +19,16 @@ interface HelperErrorTextProps {
     id?: string;
     /** Toggles between helper and invalid styling. */
     isInvalid?: boolean;
+    /** Offers the ability to render or not render the content passed in
+     * the `text` prop; `true` by default. */
+    isRenderedText?: boolean;
     /** The text to display. */
     text: HelperErrorTextType;
 }
 /**
- * Helper or error text for forms components.
+ * Component that always renders a div even if the text content is not passed.
+ * This pattern guarantees accessibility guidelines are met if the text content
+ * is dynamically updated by the app or component that implements it.
  */
 export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default HelperErrorText;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,24 +1,15 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-interface BaseProps {
-    id?: string;
-    labelText: string;
-    name: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    value?: string;
-}
+import { SelectProps as InitialSelectProps } from "../Select/Select";
+import { InputProps as InitialInputProps } from "../TextInput/TextInput";
 interface SelectOptionsProps {
     text: string;
     value: string;
 }
-export interface SelectProps extends BaseProps {
+export declare type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
     optionsData: SelectOptionsProps[];
-    onChange?: (event: React.FormEvent) => void;
-}
-export interface TextInputProps extends BaseProps {
-    isClearable?: boolean;
-    placeholder?: string;
-}
+};
+export declare type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
     action?: string;

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

@@ -50,6 +50,8 @@ export interface InputProps {
     onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
     /** The action to perform on the `input`/`textarea`'s onFocus function  */
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Regex to query the user input against. */
+    pattern?: string;
     /** Populates the placeholder for the input/textarea elements */
     placeholder?: string;
     /** Allows the '(Required)' text to be changed for language purposes