@sproutsocial/seeds-react-select 1.0.0 → 1.1.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ 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
+ESM dist/esm/index.js     4.79 KB
+ESM dist/esm/index.js.map 9.78 KB
+ESM ⚡️ Build success in 126ms
+CJS dist/index.js     6.78 KB
+CJS dist/index.js.map 9.86 KB
+CJS ⚡️ Build success in 126ms
 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.
+DTS ⚡️ Build success in 40460ms
+DTS dist/index.d.ts  1.72 KB
+DTS dist/index.d.mts 1.72 KB
+Done in 47.49s.

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sproutsocial/seeds-react-select
 
+## 1.1.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-mixins@4.1.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+  - @sproutsocial/seeds-react-icon@1.1.2
+
+## 1.1.0
+
+### Minor Changes
+
+- a58dd8d: Select component now exports styles
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -56,6 +56,7 @@ var Container = styled.div`
   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:
@@ -180,9 +181,10 @@ var Select_default = Select;
 import "react";
 
 // src/index.ts
-var src_default = Select_default;
+var index_default = Select_default;
 export {
+  Arrow,
   Select_default as Select,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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"]}
+{"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\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["props"]}

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 
 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 */
@@ -27,4 +28,6 @@ interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCom
 
 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 };
+declare const Arrow: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Pick<TypeSelectProps, "size">, never>;
+
+export { Arrow, Select, type TypeSelectProps, Select as default };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import * as styled_components from 'styled-components';
 
 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 */
@@ -27,4 +28,6 @@ interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCom
 
 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 };
+declare const Arrow: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Pick<TypeSelectProps, "size">, never>;
+
+export { Arrow, Select, type TypeSelectProps, Select as default };

package/dist/index.js

@@ -28,12 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
+  Arrow: () => Arrow,
   Select: () => Select_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
 var React = require("react");
@@ -93,6 +94,7 @@ var Container = import_styled_components.default.div`
   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:
@@ -217,9 +219,10 @@ var Select_default = Select;
 var React2 = require("react");
 
 // src/index.ts
-var src_default = Select_default;
+var index_default = Select_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Arrow,
   Select
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAA4B;AAC5B,gCAA0B;AAC1B,sCAAuB;AAOvB,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA,qBACjD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,wBAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,aAC7D,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,cACtC,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,+BAGtC,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UACzD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,eAK7C,CAAC,UAAU;AACpB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IAEhH,KAAK;AACH,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IAEhH,KAAK;AAAA,IACL;AACE,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,EAClH;AACF,CAAC;AAAA,iBACY,CAAC,UAAU;AACtB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,IAErC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,EACvC;AACF,CAAC;AAAA;AAAA,mBAEc,CAAC,UAAU;AACxB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,IAGrC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQG,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASb,CAAC,UACD,MAAM,YACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA;AAAA,wBAEoB,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA;AAAA,QAG/D,KAAK;AAAA,iBACI,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA,KAEpD;AAAA;AAAA,IAED,sCAAM;AAAA;AAGH,IAAM,QAAQ,yBAAAD,QAAO;AAAA;AAAA;AAAA,WAGjB,CAAC,UAAU;AAClB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,EAChC;AACF,CAAC;AAAA;AAAA,WAEQ,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAIlD,UAAU,cAAc;AACxB,MAAM,cAAc;AAEpB,IAAO,iBAAQ;;;ADlGX;AAzBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,KAAK,CAAC;AAAA,EACN,aAAa,CAAC;AAAA,EACd,GAAG;AACL,MAAuB;AACrB,QAAM,eAAe,CAAC,MAA+C;AACnE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,SACE,6CAAC,kBAAU,SAAS,WAAW,UAAoB,MAAa,GAAG,MACjE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,kBAAgB,QAAQ;AAAA,QACxB,wBAAsB,SAAS;AAAA,QAC/B,6BAA2B,aAAa;AAAA,QACxC,6BAA2B,aAAa;AAAA,QACvC,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IAEA,4CAAC,SAAM,MACL;AAAA,MAAC,wBAAAE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,MAAM,SAAS,UAAU,UAAU;AAAA,QACnC,eAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;;;AEhEf,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["styled","props","Icon","React"]}
+{"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\";\nexport * from \"./styles\";\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-select",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Seeds React Select",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,10 +18,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-icon": "*",
-    "@sproutsocial/seeds-react-mixins": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-icon": "^1.1.1",
+    "@sproutsocial/seeds-react-mixins": "^4.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/index.ts

@@ -3,3 +3,4 @@ import Select from "./Select";
 export default Select;
 export { Select };
 export * from "./SelectTypes";
+export * from "./styles";