@nypl/design-system-react-components 0.25.13 → 0.27.0

package/src/components/Select/Select.tsx

@@ -1,9 +1,10 @@
-import React from "react";
 import {
   Box,
+  chakra,
   Select as ChakraSelect,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import React, { useEffect, useState, useRef } from "react";
 
 import HelperErrorText, {
   HelperErrorTextType,
@@ -11,9 +12,7 @@ import HelperErrorText, {
 import Icon from "../Icons/Icon";
 import { IconNames, IconSizes } from "../Icons/IconTypes";
 import Label from "../Label/Label";
-import { SelectTypes } from "./SelectTypes";
-import generateUUID from "../../helpers/generateUUID";
-
+import { SelectTypes, LabelPositions } from "./SelectTypes";
 export interface SelectProps {
   /** Optionally pass in additional Chakra-based styles. */
   additionalStyles?: { [key: string]: any };
@@ -22,7 +21,7 @@ export interface SelectProps {
   /** Optional string to populate the `HelperErrorText` for the standard state. */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
+  id: string;
   /** Optional string to populate the `HelperErrorText` for the error state
    * when `isInvalid` is true. */
   invalidText?: HelperErrorTextType;
@@ -33,6 +32,9 @@ export interface SelectProps {
   isInvalid?: boolean;
   /** Adds the `required` and `aria-required` attributes to the input when true. */
   isRequired?: boolean;
+  /** Optional value to render the label inline, rather than the default (on top)
+   * of the select element. */
+  labelPosition?: LabelPositions;
   /** Provides text for a `Label` component if `showLabel` is set to `true`;
    * populates an `aria-label` attribute on the select input if `showLabel` is
    * set to `false`. */
@@ -51,8 +53,9 @@ export interface SelectProps {
   /** Offers the ability to show the select's label onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
-  /** Whether or not to display the "Required"/"Optional" text in the label text. */
-  showOptReqLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
   /** The value of the selected option.
    * Should be passed along with `onChange` for controlled components. */
   value?: string;
@@ -62,94 +65,130 @@ export interface SelectProps {
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
  */
-const Select = React.forwardRef<
-  HTMLSelectElement,
-  React.PropsWithChildren<SelectProps>
->((props: React.PropsWithChildren<SelectProps>, ref?) => {
-  const {
-    additionalStyles = {},
-    children,
-    className,
-    helperText,
-    id = generateUUID(),
-    invalidText,
-    isDisabled = false,
-    isInvalid = false,
-    isRequired = false,
-    labelText,
-    name,
-    onChange,
-    placeholder,
-    showHelperInvalidText = true,
-    showLabel = true,
-    showOptReqLabel = true,
-    selectType = SelectTypes.Default,
-    value = "",
-  } = props;
-  const ariaAttributes = {};
-  const optReqFlag = isRequired ? "Required" : "Optional";
-  const styles = useMultiStyleConfig("CustomSelect", { variant: selectType });
-  const finalInvalidText = invalidText
-    ? invalidText
-    : "There is an error related to this field.";
-  const footnote: HelperErrorTextType = isInvalid
-    ? finalInvalidText
-    : helperText;
-  // To control the `Select` component, both `onChange` and `value`
-  // must be passed.
-  const controlledProps = onChange ? { onChange, value } : {};
+export const Select = chakra(
+  React.forwardRef<HTMLSelectElement, React.PropsWithChildren<SelectProps>>(
+    (props: React.PropsWithChildren<SelectProps>, ref?) => {
+      const {
+        additionalStyles = {},
+        children,
+        className,
+        helperText,
+        id,
+        invalidText,
+        isDisabled = false,
+        isInvalid = false,
+        isRequired = false,
+        labelPosition = LabelPositions.Default,
+        labelText,
+        name,
+        onChange,
+        placeholder,
+        selectType = SelectTypes.Default,
+        showHelperInvalidText = true,
+        showLabel = true,
+        showRequiredLabel = true,
+        value = "",
+        ...rest
+      } = props;
+      const ariaAttributes = {};
+      const [labelWidth, setLabelWidth] = useState<number>(0);
+      const labelRef = useRef<HTMLInputElement>();
+      const styles = useMultiStyleConfig("CustomSelect", {
+        variant: selectType,
+        labelPosition,
+      });
+      const finalInvalidText = invalidText
+        ? invalidText
+        : "There is an error related to this field.";
+      const footnote: HelperErrorTextType = isInvalid
+        ? finalInvalidText
+        : helperText;
+      // To control the `Select` component, both `onChange` and `value`
+      // must be passed.
+      const controlledProps = onChange ? { onChange, value } : {};
 
-  if (!showLabel) {
-    ariaAttributes["aria-label"] =
-      labelText && footnote ? `${labelText} - ${footnote}` : labelText;
-  } else if (helperText) {
-    ariaAttributes["aria-describedby"] = `${id}-helperText`;
-  }
+      // The number of pixels between the label and select elements
+      // when the labelPosition is inline (equivalent to --nypl-space-xs).
+      const labelSelectGap = 8;
 
-  return (
-    <Box className={className} __css={{ ...styles, ...additionalStyles }}>
-      {showLabel && (
-        <Label
-          id={`${id}-label`}
-          htmlFor={id}
-          optReqFlag={showOptReqLabel && optReqFlag}
-        >
-          {labelText}
-        </Label>
-      )}
-      <ChakraSelect
-        id={id}
-        variant="outline"
-        isRequired={isRequired}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        name={name}
-        placeholder={placeholder}
-        ref={ref}
-        {...controlledProps}
-        {...ariaAttributes}
-        icon={
-          <Icon
-            id={`${id}-icon`}
-            name={IconNames.Arrow}
-            size={IconSizes.Medium}
-          />
+      if (!showLabel) {
+        ariaAttributes["aria-label"] =
+          labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+      } else if (helperText) {
+        ariaAttributes["aria-describedby"] = `${id}-helperText`;
+      }
+
+      if (!id) {
+        console.warn(
+          "NYPL Reservoir Select: This component's required `id` prop was not passed."
+        );
+      }
+
+      useEffect(() => {
+        if (labelPosition === LabelPositions.Inline) {
+          if (labelRef.current) {
+            const width = labelRef.current.clientWidth + labelSelectGap;
+            setLabelWidth(width);
+          }
+        } else {
+          setLabelWidth(0);
         }
-        __css={styles.select}
-      >
-        {children}
-      </ChakraSelect>
-      {footnote && showHelperInvalidText && (
-        <Box __css={styles.helper} aria-disabled={isDisabled}>
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={isInvalid}
-            text={footnote}
-          />
+      }, [labelPosition]);
+
+      return (
+        <Box
+          className={className}
+          __css={{ ...styles, ...additionalStyles }}
+          {...rest}
+        >
+          <Box __css={labelPosition === LabelPositions.Inline && styles.inline}>
+            {showLabel && (
+              <Box ref={labelRef}>
+                <Label
+                  htmlFor={id}
+                  id={`${id}-label`}
+                  isInlined
+                  isRequired={showRequiredLabel && isRequired}
+                >
+                  {labelText}
+                </Label>
+              </Box>
+            )}
+            <ChakraSelect
+              id={id}
+              variant="outline"
+              isRequired={isRequired}
+              isDisabled={isDisabled}
+              isInvalid={isInvalid}
+              name={name}
+              placeholder={placeholder}
+              ref={ref}
+              {...controlledProps}
+              {...ariaAttributes}
+              icon={
+                <Icon
+                  id={`${id}-icon`}
+                  name={IconNames.Arrow}
+                  size={IconSizes.Medium}
+                />
+              }
+              __css={styles.select}
+            >
+              {children}
+            </ChakraSelect>
+          </Box>
+          {footnote && showHelperInvalidText && (
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+              ml={{ sm: "auto", md: `${labelWidth}px` }}
+            />
+          )}
         </Box>
-      )}
-    </Box>
-  );
-});
+      );
+    }
+  )
+);
 
 export default Select;

package/src/components/Select/SelectTypes.tsx

@@ -3,3 +3,8 @@ export enum SelectTypes {
   Default = "default",
   SearchBar = "searchbar",
 }
+
+export enum LabelPositions {
+  Default = "default",
+  Inline = "inline",
+}