@sproutsocial/seeds-react-select 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-select/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     6.66 KB
+CJS dist/index.js.map 9.82 KB
+CJS ⚡️ Build success in 163ms
+ESM dist/esm/index.js     4.70 KB
+ESM dist/esm/index.js.map 9.74 KB
+ESM ⚡️ Build success in 168ms
+DTS Build start
+DTS ⚡️ Build success in 37165ms
+DTS dist/index.d.ts  1.52 KB
+DTS dist/index.d.mts 1.52 KB
+Done in 43.16s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-select
+
+## 1.0.0
+
+### Major Changes
+
+- 05f7968: Migrate Select component to seeds-react-select

package/dist/esm/index.js

@@ -0,0 +1,188 @@
+// src/Select.tsx
+import "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var Container = styled.div`
+  position: relative;
+  box-sizing: border-box;
+
+  select {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+    outline: none;
+    appearance: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+
+    padding: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;
+    case "small":
+      return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+    case "default":
+    default:
+      return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+  }
+}};
+    font-size: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].fontSize;
+    case "small":
+    case "default":
+    default:
+      return props.theme.typography[200].fontSize;
+  }
+}};
+
+    line-height: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].lineHeight;
+    case "small":
+    case "default":
+    default:
+      return "normal";
+  }
+}};
+
+    /* kill the dropdown arrow on IE 11 */
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+      ${focusRing}
+    }
+
+    /* Fix for red ring when input is marked required in Firefox */
+    &:not(output):not(:focus):-moz-ui-invalid {
+      box-shadow: none;
+    }
+  }
+
+  ${(props) => props.disabled && css`
+      opacity: 0.4;
+    `}
+
+  ${(props) => props.invalid && css`
+      select {
+        border-color: ${(props2) => props2.theme.colors.form.border.error};
+      }
+
+      ${Arrow} {
+        color: ${(props2) => props2.theme.colors.icon.error};
+      }
+    `}
+
+  ${COMMON}
+`;
+var Arrow = styled.span`
+  position: absolute;
+  top: 50%;
+  right: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.space[350];
+    case "small":
+    case "default":
+    default:
+      return props.theme.space[300];
+  }
+}};
+  transform: translateY(-50%);
+  color: ${(props) => props.theme.colors.icon.base};
+  pointer-events: none;
+`;
+Container.displayName = "SelectContainer";
+Arrow.displayName = "Select Arrow";
+var styles_default = Container;
+
+// src/Select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = ({
+  id,
+  name,
+  children,
+  defaultValue,
+  value,
+  required,
+  isInvalid,
+  onChange,
+  autoFocus,
+  disabled,
+  ariaLabel,
+  ariaDescribedby,
+  size = "default",
+  qa = {},
+  inputProps = {},
+  ...rest
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        name,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedby,
+        defaultValue,
+        value,
+        required,
+        autoFocus,
+        disabled,
+        onChange: handleChange,
+        "data-qa-select": name || "",
+        "data-qa-select-value": value || "unselected",
+        "data-qa-select-isrequired": required === true,
+        "data-qa-select-isdisabled": disabled === true,
+        ...qa,
+        ...inputProps,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(Arrow, { size, children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: "chevron-down-outline",
+        fixedWidth: true,
+        size: size === "small" ? "small" : "medium",
+        "aria-hidden": true
+      }
+    ) })
+  ] });
+};
+var Select_default = Select;
+
+// src/SelectTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Select_default;
+export {
+  Select_default as Select,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Select.tsx","../../src/styles.ts","../../src/SelectTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Arrow } from \"./styles\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n      <select\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <Arrow size={size}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"small\" ? \"small\" : \"medium\"}\n          aria-hidden\n        />\n      </Arrow>\n    </Container>\n  );\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n","import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\n"],"mappings":"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","names":["props"]}

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, "color" | "onChange"> {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the select if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Select, like an error */
+    ariaDescribedby?: string;
+    children: React.ReactNode;
+    defaultValue?: React.ComponentPropsWithoutRef<"select">["value"];
+    /** Current value of the input */
+    value?: React.ComponentPropsWithoutRef<"select">["value"];
+    required?: boolean;
+    isInvalid?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    /** Props to spread onto the underlying input element */
+    inputProps?: React.ComponentPropsWithRef<"select">;
+    qa?: object;
+    onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
+    size?: "large" | "small" | "default";
+}
+
+declare const Select: ({ id, name, children, defaultValue, value, required, isInvalid, onChange, autoFocus, disabled, ariaLabel, ariaDescribedby, size, qa, inputProps, ...rest }: TypeSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { Select, type TypeSelectProps, Select as default };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, "color" | "onChange"> {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the select if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Select, like an error */
+    ariaDescribedby?: string;
+    children: React.ReactNode;
+    defaultValue?: React.ComponentPropsWithoutRef<"select">["value"];
+    /** Current value of the input */
+    value?: React.ComponentPropsWithoutRef<"select">["value"];
+    required?: boolean;
+    isInvalid?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    /** Props to spread onto the underlying input element */
+    inputProps?: React.ComponentPropsWithRef<"select">;
+    qa?: object;
+    onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
+    size?: "large" | "small" | "default";
+}
+
+declare const Select: ({ id, name, children, defaultValue, value, required, isInvalid, onChange, autoFocus, disabled, ariaLabel, ariaDescribedby, size, qa, inputProps, ...rest }: TypeSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { Select, type TypeSelectProps, Select as default };

package/dist/index.js

@@ -0,0 +1,225 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Select: () => Select_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Select.tsx
+var React = require("react");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var Container = import_styled_components.default.div`
+  position: relative;
+  box-sizing: border-box;
+
+  select {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+    outline: none;
+    appearance: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+
+    padding: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;
+    case "small":
+      return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+    case "default":
+    default:
+      return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+  }
+}};
+    font-size: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].fontSize;
+    case "small":
+    case "default":
+    default:
+      return props.theme.typography[200].fontSize;
+  }
+}};
+
+    line-height: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].lineHeight;
+    case "small":
+    case "default":
+    default:
+      return "normal";
+  }
+}};
+
+    /* kill the dropdown arrow on IE 11 */
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+      ${import_seeds_react_mixins.focusRing}
+    }
+
+    /* Fix for red ring when input is marked required in Firefox */
+    &:not(output):not(:focus):-moz-ui-invalid {
+      box-shadow: none;
+    }
+  }
+
+  ${(props) => props.disabled && import_styled_components.css`
+      opacity: 0.4;
+    `}
+
+  ${(props) => props.invalid && import_styled_components.css`
+      select {
+        border-color: ${(props2) => props2.theme.colors.form.border.error};
+      }
+
+      ${Arrow} {
+        color: ${(props2) => props2.theme.colors.icon.error};
+      }
+    `}
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var Arrow = import_styled_components.default.span`
+  position: absolute;
+  top: 50%;
+  right: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.space[350];
+    case "small":
+    case "default":
+    default:
+      return props.theme.space[300];
+  }
+}};
+  transform: translateY(-50%);
+  color: ${(props) => props.theme.colors.icon.base};
+  pointer-events: none;
+`;
+Container.displayName = "SelectContainer";
+Arrow.displayName = "Select Arrow";
+var styles_default = Container;
+
+// src/Select.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Select = ({
+  id,
+  name,
+  children,
+  defaultValue,
+  value,
+  required,
+  isInvalid,
+  onChange,
+  autoFocus,
+  disabled,
+  ariaLabel,
+  ariaDescribedby,
+  size = "default",
+  qa = {},
+  inputProps = {},
+  ...rest
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        id,
+        name,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedby,
+        defaultValue,
+        value,
+        required,
+        autoFocus,
+        disabled,
+        onChange: handleChange,
+        "data-qa-select": name || "",
+        "data-qa-select-value": value || "unselected",
+        "data-qa-select-isrequired": required === true,
+        "data-qa-select-isdisabled": disabled === true,
+        ...qa,
+        ...inputProps,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arrow, { size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_icon.default,
+      {
+        name: "chevron-down-outline",
+        fixedWidth: true,
+        size: size === "small" ? "small" : "medium",
+        "aria-hidden": true
+      }
+    ) })
+  ] });
+};
+var Select_default = Select;
+
+// src/SelectTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Select_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Select.tsx","../src/styles.ts","../src/SelectTypes.ts"],"sourcesContent":["import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Arrow } from \"./styles\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n      <select\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <Arrow size={size}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"small\" ? \"small\" : \"medium\"}\n          aria-hidden\n        />\n      </Arrow>\n    </Container>\n  );\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n"],"mappings":"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","names":["styled","props","Icon","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-select",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-select",
+  "version": "1.0.0",
+  "description": "Seeds React Select",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-mixins": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Select.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "./Select";
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Form Elements/Select",
+  component: Select,
+  argTypes: {
+    size: {
+      options: ["small", "large", undefined],
+      control: {
+        type: "select",
+      },
+    },
+    children: {
+      control: "object",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    isInvalid: {
+      control: "boolean",
+    },
+  },
+  args: {
+    size: undefined,
+    disabled: false,
+    required: false,
+    isInvalid: false,
+    children: [
+      <option value="" disabled selected>
+        Select One
+      </option>,
+      <option value="apple">Apple</option>,
+      <option value="orange">Orange</option>,
+      <option value="banana">Banana</option>,
+    ],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+  },
+};

package/src/Select.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Container, { Arrow } from "./styles";
+import type { TypeSelectProps } from "./SelectTypes";
+
+const Select = ({
+  id,
+  name,
+  children,
+  defaultValue,
+  value,
+  required,
+  isInvalid,
+  onChange,
+  autoFocus,
+  disabled,
+  ariaLabel,
+  ariaDescribedby,
+  size = "default",
+  qa = {},
+  inputProps = {},
+  ...rest
+}: TypeSelectProps) => {
+  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>
+      <select
+        id={id}
+        name={name}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        defaultValue={defaultValue}
+        value={value}
+        required={required}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        onChange={handleChange}
+        data-qa-select={name || ""}
+        data-qa-select-value={value || "unselected"}
+        data-qa-select-isrequired={required === true}
+        data-qa-select-isdisabled={disabled === true}
+        {...qa}
+        {...inputProps}
+      >
+        {children}
+      </select>
+
+      <Arrow size={size}>
+        <Icon
+          name="chevron-down-outline"
+          fixedWidth
+          size={size === "small" ? "small" : "medium"}
+          aria-hidden
+        />
+      </Arrow>
+    </Container>
+  );
+};
+
+export default Select;

package/src/SelectTypes.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type {
+  TypeSystemCommonProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeSelectProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"div">, "color" | "onChange"> {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string;
+  name: string;
+
+  /** Label used to describe the select if not used with an accompanying visual label */
+  ariaLabel?: string;
+
+  /** Attribute used to associate other elements that describe the Select, like an error */
+  ariaDescribedby?: string;
+  children: React.ReactNode;
+  defaultValue?: React.ComponentPropsWithoutRef<"select">["value"];
+
+  /** Current value of the input */
+  value?: React.ComponentPropsWithoutRef<"select">["value"];
+  required?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+
+  /** Props to spread onto the underlying input element */
+  inputProps?: React.ComponentPropsWithRef<"select">;
+  qa?: object;
+  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
+  size?: "large" | "small" | "default";
+}

package/src/__tests__/Select.test.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Select from "../Select";
+
+describe("Select", () => {
+  it("should notify on changes", () => {
+    const mockOnChange = jest.fn();
+    render(
+      <Select id="select" name="select" onChange={mockOnChange}>
+        <option value="v">option1</option>
+      </Select>
+    );
+    fireEvent.change(
+      screen.getByDataQaLabel({
+        select: "select",
+      })
+    );
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+  it("should render statuses correctly", () => {
+    const { rerender } = render(
+      <Select id="select" name="select" disabled>
+        <option value="v">option1</option>
+      </Select>
+    );
+    expect(
+      screen.getByDataQaLabel({
+        "select-isdisabled": "true",
+      })
+    ).toBeTruthy();
+    rerender(
+      <Select id="select" name="select" disabled={false} isInvalid>
+        <option value="v">option1</option>
+      </Select>
+    );
+    expect(
+      screen.getByDataQaLabel({
+        "select-isdisabled": "false",
+      })
+    ).toBeTruthy();
+  });
+  it("should render with chevron-down", () => {
+    render(
+      <Select
+        id="select"
+        name="select"
+        inputProps={{
+          style: {
+            display: "block",
+            margin: "200",
+          },
+        }}
+      >
+        <option value="v">option1</option>
+      </Select>
+    );
+    expect(
+      screen.getByDataQaLabel({
+        icon: "chevron-down-outline",
+      })
+    ).toBeTruthy();
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import Select from "./Select";
+
+export default Select;
+export { Select };
+export * from "./SelectTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,129 @@
+import styled, { css } from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import type { TypeSelectProps } from "./SelectTypes";
+
+interface TypeSelectContainer extends Omit<TypeSelectProps, "isInvalid"> {
+  invalid?: boolean;
+}
+
+const Container = styled.div<TypeSelectContainer>`
+  position: relative;
+  box-sizing: border-box;
+
+  select {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    outline: none;
+    appearance: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+
+    padding: ${(props) => {
+      switch (props.size) {
+        case "large":
+          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;
+
+        case "small":
+          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+
+        case "default":
+        default:
+          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+      }
+    }};
+    font-size: ${(props) => {
+      switch (props.size) {
+        case "large":
+          return props.theme.typography[300].fontSize;
+
+        case "small":
+        case "default":
+        default:
+          return props.theme.typography[200].fontSize;
+      }
+    }};
+
+    line-height: ${(props) => {
+      switch (props.size) {
+        case "large":
+          return props.theme.typography[300].lineHeight;
+
+        /* hardcoded to 'normal' so the large change doesn't impact small/default */
+        case "small":
+        case "default":
+        default:
+          return "normal";
+      }
+    }};
+
+    /* kill the dropdown arrow on IE 11 */
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+      ${focusRing}
+    }
+
+    /* Fix for red ring when input is marked required in Firefox */
+    &:not(output):not(:focus):-moz-ui-invalid {
+      box-shadow: none;
+    }
+  }
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.4;
+    `}
+
+  ${(props) =>
+    props.invalid &&
+    css`
+      select {
+        border-color: ${(props) => props.theme.colors.form.border.error};
+      }
+
+      ${Arrow} {
+        color: ${(props) => props.theme.colors.icon.error};
+      }
+    `}
+
+  ${COMMON}
+`;
+
+export const Arrow = styled.span<Pick<TypeSelectProps, "size">>`
+  position: absolute;
+  top: 50%;
+  right: ${(props) => {
+    switch (props.size) {
+      case "large":
+        return props.theme.space[350];
+      case "small":
+      case "default":
+      default:
+        return props.theme.space[300];
+    }
+  }};
+  transform: translateY(-50%);
+  color: ${(props) => props.theme.colors.icon.base};
+  pointer-events: none;
+`;
+
+Container.displayName = "SelectContainer";
+Arrow.displayName = "Select Arrow";
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));