@sproutsocial/seeds-react-select 1.1.21 → 1.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.turbo/turbo-build.log +7 -7
  2. package/CHANGELOG.md +22 -0
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +4 -4
  8. package/src/Select.tsx +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -3,19 +3,19 @@ $ tsup --dts
3
3
  CLI Building entry: src/index.ts
4
4
  CLI Using tsconfig: tsconfig.json
5
5
  CLI tsup v8.5.0
6
- CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-select/tsup.config.ts
6
+ CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-select/tsup.config.ts
7
7
  CLI Target: es2022
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- ESM dist/esm/index.js 4.79 KB
12
- ESM dist/esm/index.js.map 9.78 KB
13
- ESM ⚡️ Build success in 250ms
14
11
  CJS dist/index.js 6.78 KB
15
12
  CJS dist/index.js.map 9.86 KB
16
- CJS ⚡️ Build success in 267ms
13
+ CJS ⚡️ Build success in 85ms
14
+ ESM dist/esm/index.js 4.79 KB
15
+ ESM dist/esm/index.js.map 9.78 KB
16
+ ESM ⚡️ Build success in 85ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 32228ms
18
+ DTS ⚡️ Build success in 4661ms
19
19
  DTS dist/index.d.ts 1.72 KB
20
20
  DTS dist/index.d.mts 1.72 KB
21
- Done in 40.49s.
21
+ Done in 6.03s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @sproutsocial/seeds-react-select
2
2
 
3
+ ## 1.1.24
4
+
5
+ ### Patch Changes
6
+
7
+ - 5f4761a: Tweak default select icon size
8
+
9
+ ## 1.1.23
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [17d4f12]
14
+ - @sproutsocial/seeds-react-theme@3.6.0
15
+ - @sproutsocial/seeds-react-icon@2.2.5
16
+ - @sproutsocial/seeds-react-mixins@4.3.1
17
+
18
+ ## 1.1.22
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [5bb63e1]
23
+ - @sproutsocial/seeds-react-mixins@4.3.0
24
+
3
25
  ## 1.1.21
4
26
 
5
27
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -169,7 +169,7 @@ var Select = ({
169
169
  {
170
170
  name: "chevron-down-outline",
171
171
  fixedWidth: true,
172
- size: size === "small" ? "small" : "medium",
172
+ size: size === "large" ? "medium" : "small",
173
173
  "aria-hidden": true
174
174
  }
175
175
  ) })
package/dist/esm/index.js.map CHANGED
@@ -1 +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\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["props"]}
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 === \"large\" ? \"medium\" : \"small\"}\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.js CHANGED
@@ -207,7 +207,7 @@ var Select = ({
207
207
  {
208
208
  name: "chevron-down-outline",
209
209
  fixedWidth: true,
210
- size: size === "small" ? "small" : "medium",
210
+ size: size === "large" ? "medium" : "small",
211
211
  "aria-hidden": true
212
212
  }
213
213
  ) })
package/dist/index.js.map CHANGED
@@ -1 +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\";\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"]}
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\";\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 === \"large\" ? \"medium\" : \"small\"}\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-select",
3
- "version": "1.1.21",
3
+ "version": "1.1.24",
4
4
  "description": "Seeds React Select",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -18,10 +18,10 @@
18
18
  "test:watch": "jest --watch --coverage=false"
19
19
  },
20
20
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "^3.5.1",
21
+ "@sproutsocial/seeds-react-theme": "^3.6.0",
22
22
  "@sproutsocial/seeds-react-system-props": "^3.0.1",
23
- "@sproutsocial/seeds-react-icon": "^2.2.4",
24
- "@sproutsocial/seeds-react-mixins": "^4.2.5"
23
+ "@sproutsocial/seeds-react-icon": "^2.2.5",
24
+ "@sproutsocial/seeds-react-mixins": "^4.3.1"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@types/react": "^18.0.0",
package/src/Select.tsx CHANGED
@@ -54,7 +54,7 @@ const Select = ({
54
54
  <Icon
55
55
  name="chevron-down-outline"
56
56
  fixedWidth
57
- size={size === "small" ? "small" : "medium"}
57
+ size={size === "large" ? "medium" : "small"}
58
58
  aria-hidden
59
59
  />
60
60
  </Arrow>