@windstream/react-shared-components 0.1.6 → 0.1.7

package/src/components/select/index.tsx

@@ -1,150 +1,155 @@
-"use client";
-
-import React, { useMemo } from "react";
-import { cx } from "../../utils";
-import { Text } from "../text";
-import { FilterOptions, SelectOption, SelectProps } from "./types";
-import ReactSelect, { createFilter } from "react-select";
-
-export const Select: React.FC<SelectProps> = React.memo(
-  ({
-    options,
-    className,
-    controlClassName,
-    value,
-    isCustomStyle = false,
-    placeholder,
-    required,
-    onChange,
-    filterOptions,
-    hasError,
-    error,
-    helperText,
-    label,
-    labelClassName,
-    size = "md",
-    variant = "default",
-    "data-cy": dataCy,
-    "data-testid": dataTestId,
-    ...rest
-  }) => {
-    const memoizedFilterOption = useMemo(
-      () => createFilter(filterOptions),
-      [filterOptions]
-    );
-
-    const getSizeClasses = () => {
-      switch (size) {
-        case "sm":
-          return "h-[48px] px-3 rounded-lg";
-        case "md":
-        default:
-          return "h-[56px] px-3 rounded-xl";
-      }
-    };
-
-    const memoizedClassNames = useMemo(
-      () => ({
-        control: ({ isFocused }: any) =>
-          cx(
-            getSizeClasses(),
-            "border border-input-border bg-white hover:not-focus:border-input-border-hover",
-            {
-              "border-input-border-selected outline outline-2 outline-input-border-selected":
-                isFocused && !hasError,
-              "border-input-border-critical shadow-none": hasError,
-            },
-            controlClassName
-          ),
-        indicatorSeparator: () => "hidden",
-        dropdownIndicator: ({ selectProps }: any) =>
-          isCustomStyle
-            ? selectProps.value
-              ? "hidden"
-              : "block"
-            : `block text-icon-default ${hasError ? "text-icon-critical" : ""}`,
-        singleValue: () =>
-          cx(
-            isCustomStyle
-              ? "text-text text-body1 whitespace-normal"
-              : "text-text-secondary"
-          ),
-        menu: () => "z-20 mt-2",
-        option: ({ isFocused, isSelected, label }: any) =>
-          cx(
-            "min-h-[40px] px-4 py-2 cursor-pointer",
-            isSelected
-              ? "bg-gray-200 text-text font-semibold"
-              : "bg-white text-text-secondary",
-            !isSelected && "hover:bg-bg-surface-hover",
-            !isSelected && isFocused && "bg-bg-surface-hover",
-            isCustomStyle ? "text-body1 text-text" : "",
-            !isCustomStyle || options[options.length - 1]?.label === label
-              ? ""
-              : "border-b border-border-brand"
-          ),
-        placeholder: () => "text-input-text-placeholder",
-        input: () => "text-text",
-        valueContainer: () => "px-0",
-      }),
-      [isCustomStyle, controlClassName, options, hasError, size]
-    );
-
-    if (variant === "unstyled") {
-      return (
-        <ReactSelect
-          options={options}
-          value={value}
-          placeholder={required ? `${placeholder}*` : placeholder}
-          onChange={onChange}
-          filterOption={memoizedFilterOption}
-          className={cx("rounded-xl", className)}
-          classNames={memoizedClassNames}
-          data-cy={dataCy}
-          data-testid={dataTestId}
-          {...rest}
-        />
-      );
-    }
-
-    return (
-      <div className="w-full">
-        {label && (
-          <label
-            className={cx(
-              "mb-1 block text-sm font-medium text-text-secondary",
-              labelClassName
-            )}
-          >
-            {label}
-          </label>
-        )}
-
-        <ReactSelect
-          options={options}
-          value={value}
-          placeholder={required ? `${placeholder}*` : placeholder}
-          onChange={onChange}
-          filterOption={memoizedFilterOption}
-          className={cx("rounded-xl", className)}
-          classNames={memoizedClassNames}
-          data-cy={dataCy}
-          data-testid={dataTestId}
-          {...rest}
-        />
-
-        {error && (
-          <Text className="footnote mt-1 text-text-critical">{error}</Text>
-        )}
-
-        {!error && helperText && (
-          <Text className="footnote mt-1 text-text-info">{helperText}</Text>
-        )}
-      </div>
-    );
-  }
-);
-
-Select.displayName = "Select";
-
-export type { SelectOption, SelectProps, FilterOptions };
+"use client";
+
+import React, { useMemo } from "react";
+import { cx } from "../../utils";
+import { Text } from "../text";
+import { FilterOptions, SelectOption, SelectProps } from "./types";
+import ReactSelect, { createFilter } from "react-select";
+
+export const Select: React.FC<SelectProps> = React.memo(
+  ({
+    options,
+    className,
+    controlClassName,
+    value,
+    isCustomStyle = false,
+    placeholder,
+    required,
+    onChange,
+    filterOptions,
+    hasError,
+    error,
+    menuClassName,
+    helperText,
+    label,
+    labelClassName,
+    size = "md",
+    variant = "default",
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...rest
+  }) => {
+    const memoizedFilterOption = useMemo(
+      () => createFilter(filterOptions),
+      [filterOptions]
+    );
+
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return "h-[48px] px-3 rounded-lg";
+        case "md":
+        default:
+          return "h-[56px] px-3 rounded-xl";
+      }
+    };
+
+    const memoizedClassNames = useMemo(
+      () => ({
+        control: ({ isFocused }: any) =>
+          cx(
+            getSizeClasses(),
+            "border border-input-border bg-white hover:not-focus:border-input-border-hover",
+            {
+              "border-input-border-selected outline outline-2 outline-input-border-selected":
+                isFocused && !hasError,
+              "border-input-border-critical shadow-none": hasError,
+            },
+            controlClassName
+          ),
+        indicatorSeparator: () => "hidden",
+        dropdownIndicator: ({ selectProps }: any) =>
+          isCustomStyle
+            ? selectProps.value
+              ? "hidden"
+              : "block"
+            : `block text-icon-default ${hasError ? "text-icon-critical" : ""}`,
+        singleValue: () =>
+          cx(
+            isCustomStyle
+              ? "text-text text-body1 whitespace-normal"
+              : "text-text-secondary"
+          ),
+        menu: () =>
+          cx(
+            "z-20 mt-2 rounded-input-poppers bg-surface shadow-dark-drop",
+            menuClassName
+          ),
+        option: ({ isFocused, isSelected, label }: any) =>
+          cx(
+            "min-h-[40px] px-4 py-2 cursor-pointer",
+            isSelected
+              ? "bg-gray-200 text-text font-semibold"
+              : "bg-white text-text-secondary",
+            !isSelected && "hover:bg-bg-surface-hover",
+            !isSelected && isFocused && "bg-bg-surface-hover",
+            isCustomStyle ? "text-body1 text-text" : "",
+            !isCustomStyle || options[options.length - 1]?.label === label
+              ? ""
+              : "border-b border-border-brand"
+          ),
+        placeholder: () => "text-input-text-placeholder",
+        input: () => "text-text",
+        valueContainer: () => "px-0",
+      }),
+      [isCustomStyle, controlClassName, menuClassName, options, hasError, size]
+    );
+
+    if (variant === "unstyled") {
+      return (
+        <ReactSelect
+          options={options}
+          value={value}
+          placeholder={required ? `${placeholder}*` : placeholder}
+          onChange={onChange}
+          filterOption={memoizedFilterOption}
+          className={cx("rounded-xl", className)}
+          classNames={memoizedClassNames}
+          data-cy={dataCy}
+          data-testid={dataTestId}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            className={cx(
+              "mb-1 block text-sm font-medium text-text-secondary",
+              labelClassName
+            )}
+          >
+            {label}
+          </label>
+        )}
+
+        <ReactSelect
+          options={options}
+          value={value}
+          placeholder={required ? `${placeholder}*` : placeholder}
+          onChange={onChange}
+          filterOption={memoizedFilterOption}
+          className={cx("rounded-xl", className)}
+          classNames={memoizedClassNames}
+          data-cy={dataCy}
+          data-testid={dataTestId}
+          {...rest}
+        />
+
+        {error && (
+          <Text className="footnote mt-1 text-text-critical">{error}</Text>
+        )}
+
+        {!error && helperText && (
+          <Text className="footnote mt-1 text-text-info">{helperText}</Text>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export type { SelectOption, SelectProps, FilterOptions };

package/src/components/select/types.ts

@@ -1,35 +1,36 @@
-import { Props as ReactSelectProps } from "react-select";
-
-export interface SelectOption<T = any> {
-  label: string;
-  value: string;
-  data?: T;
-}
-
-export type FilterOptions = {
-  ignoreCase?: boolean;
-  ignoreAccents?: boolean;
-  trim?: boolean;
-  matchFrom?: "start" | "any";
-};
-
-export type OwnProps = {
-  options: SelectOption[];
-  value?: SelectOption;
-  className?: string;
-  isCustomStyle?: boolean;
-  controlClassName?: string;
-  filterOptions?: FilterOptions;
-  hasError?: boolean;
-  error?: string;
-  helperText?: string;
-  label?: string;
-  labelClassName?: string;
-  size?: "sm" | "md";
-  variant?: "default" | "unstyled";
-  "data-cy"?: string;
-  "data-testid"?: string;
-};
-
-export type SelectProps = OwnProps &
-  Omit<ReactSelectProps<SelectOption>, "options" | "value" | "className">;
+import { Props as ReactSelectProps } from "react-select";
+
+export interface SelectOption<T = any> {
+  label: string;
+  value: string;
+  data?: T;
+}
+
+export type FilterOptions = {
+  ignoreCase?: boolean;
+  ignoreAccents?: boolean;
+  trim?: boolean;
+  matchFrom?: "start" | "any";
+};
+
+export type OwnProps = {
+  options: SelectOption[];
+  value?: SelectOption;
+  className?: string;
+  isCustomStyle?: boolean;
+  controlClassName?: string;
+  menuClassName?: string;
+  filterOptions?: FilterOptions;
+  hasError?: boolean;
+  error?: string;
+  helperText?: string;
+  label?: string;
+  labelClassName?: string;
+  size?: "sm" | "md";
+  variant?: "default" | "unstyled";
+  "data-cy"?: string;
+  "data-testid"?: string;
+};
+
+export type SelectProps = OwnProps &
+  Omit<ReactSelectProps<SelectOption>, "options" | "value" | "className">;