@primer/components 0.0.0-20211029202722 → 0.0.0-2021103082237

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 (24) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +158 -143
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +167 -152
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/Autocomplete/Autocomplete.d.ts +10 -2
  7. package/lib/Autocomplete/AutocompleteInput.d.ts +10 -2
  8. package/lib/Checkbox.d.ts +1 -1
  9. package/lib/SelectMenu/SelectMenu.d.ts +10 -2
  10. package/lib/TextInput.d.ts +8 -1
  11. package/lib/TextInput.js +17 -5
  12. package/lib/TextInputWithTokens.d.ts +10 -2
  13. package/lib/_TextInputWrapper.d.ts +3 -0
  14. package/lib/_TextInputWrapper.js +18 -7
  15. package/lib-esm/Autocomplete/Autocomplete.d.ts +10 -2
  16. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +10 -2
  17. package/lib-esm/Checkbox.d.ts +1 -1
  18. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -2
  19. package/lib-esm/TextInput.d.ts +8 -1
  20. package/lib-esm/TextInput.js +17 -5
  21. package/lib-esm/TextInputWithTokens.d.ts +10 -2
  22. package/lib-esm/_TextInputWrapper.d.ts +3 -0
  23. package/lib-esm/_TextInputWrapper.js +18 -7
  24. package/package.json +1 -1
package/lib/Autocomplete/Autocomplete.d.ts CHANGED
@@ -20,11 +20,17 @@ declare const _default: React.FC<{
20
20
  } & {
21
21
  as?: string | React.ComponentType<any> | undefined;
22
22
  forwardedAs?: string | React.ComponentType<any> | undefined;
23
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
23
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
24
24
  className?: string | undefined;
25
25
  icon?: React.ComponentType<{
26
26
  className?: string | undefined;
27
27
  }> | undefined;
28
+ leadingIcon?: React.ComponentType<{
29
+ className?: string | undefined;
30
+ }> | undefined;
31
+ trailingIcon?: React.ComponentType<{
32
+ className?: string | undefined;
33
+ }> | undefined;
28
34
  } & Pick<{
29
35
  color?: string | undefined;
30
36
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -37,6 +43,7 @@ declare const _default: React.FC<{
37
43
  slot?: string | undefined;
38
44
  style?: React.CSSProperties | undefined;
39
45
  title?: string | undefined;
46
+ size?: "small" | "large" | undefined;
40
47
  block?: boolean | undefined;
41
48
  variant?: "small" | "large" | undefined;
42
49
  role?: React.AriaRole | undefined;
@@ -293,9 +300,10 @@ declare const _default: React.FC<{
293
300
  disabled?: boolean | undefined;
294
301
  hasIcon?: boolean | undefined;
295
302
  contrast?: boolean | undefined;
303
+ validationStatus?: "error" | "warning" | undefined;
296
304
  } & {
297
305
  theme?: any;
298
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
306
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
299
307
  as?: React.ComponentType<any> | undefined;
300
308
  }>;
301
309
  Menu: typeof AutocompleteMenu;
package/lib/Autocomplete/AutocompleteInput.d.ts CHANGED
@@ -12,11 +12,17 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
12
12
  } & {
13
13
  as?: string | React.ComponentType<any> | undefined;
14
14
  forwardedAs?: string | React.ComponentType<any> | undefined;
15
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
15
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
16
16
  className?: string | undefined;
17
17
  icon?: React.ComponentType<{
18
18
  className?: string | undefined;
19
19
  }> | undefined;
20
+ leadingIcon?: React.ComponentType<{
21
+ className?: string | undefined;
22
+ }> | undefined;
23
+ trailingIcon?: React.ComponentType<{
24
+ className?: string | undefined;
25
+ }> | undefined;
20
26
  } & Pick<{
21
27
  color?: string | undefined;
22
28
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -29,6 +35,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
29
35
  slot?: string | undefined;
30
36
  style?: React.CSSProperties | undefined;
31
37
  title?: string | undefined;
38
+ size?: "small" | "large" | undefined;
32
39
  block?: boolean | undefined;
33
40
  variant?: "small" | "large" | undefined;
34
41
  role?: React.AriaRole | undefined;
@@ -285,8 +292,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
285
292
  disabled?: boolean | undefined;
286
293
  hasIcon?: boolean | undefined;
287
294
  contrast?: boolean | undefined;
295
+ validationStatus?: "error" | "warning" | undefined;
288
296
  } & {
289
297
  theme?: any;
290
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
298
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
291
299
  export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
292
300
  export default AutocompleteInput;
package/lib/Checkbox.d.ts CHANGED
@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
25
25
  /**
26
26
  * An accessible, native checkbox component
27
27
  */
28
- declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
28
+ declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
29
29
  export default Checkbox;
package/lib/SelectMenu/SelectMenu.d.ts CHANGED
@@ -39,11 +39,17 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
39
39
  } & {
40
40
  as?: string | React.ComponentType<any> | undefined;
41
41
  forwardedAs?: string | React.ComponentType<any> | undefined;
42
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
42
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
43
43
  className?: string | undefined;
44
44
  icon?: React.ComponentType<{
45
45
  className?: string | undefined;
46
46
  }> | undefined;
47
+ leadingIcon?: React.ComponentType<{
48
+ className?: string | undefined;
49
+ }> | undefined;
50
+ trailingIcon?: React.ComponentType<{
51
+ className?: string | undefined;
52
+ }> | undefined;
47
53
  } & Pick<{
48
54
  color?: string | undefined;
49
55
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -56,6 +62,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
56
62
  slot?: string | undefined;
57
63
  style?: React.CSSProperties | undefined;
58
64
  title?: string | undefined;
65
+ size?: "small" | "large" | undefined;
59
66
  block?: boolean | undefined;
60
67
  variant?: "small" | "large" | undefined;
61
68
  role?: React.AriaRole | undefined;
@@ -312,9 +319,10 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
312
319
  disabled?: boolean | undefined;
313
320
  hasIcon?: boolean | undefined;
314
321
  contrast?: boolean | undefined;
322
+ validationStatus?: "error" | "warning" | undefined;
315
323
  } & {
316
324
  theme?: any;
317
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
325
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
318
326
  Footer: import("styled-components").StyledComponent<"footer", any, SxProp, never>;
319
327
  Item: React.ForwardRefExoticComponent<Pick<{
320
328
  as?: React.ElementType<any> | undefined;
package/lib/TextInput.d.ts CHANGED
@@ -4,10 +4,17 @@ import UnstyledTextInput from './_UnstyledTextInput';
4
4
  import TextInputWrapper from './_TextInputWrapper';
5
5
  declare type NonPassthroughProps = {
6
6
  className?: string;
7
+ /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */
7
8
  icon?: React.ComponentType<{
8
9
  className?: string;
9
10
  }>;
10
- } & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
11
+ leadingIcon?: React.ComponentType<{
12
+ className?: string;
13
+ }>;
14
+ trailingIcon?: React.ComponentType<{
15
+ className?: string;
16
+ }>;
17
+ } & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'>;
11
18
  declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
12
19
  declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
13
20
  export declare type TextInputProps = ComponentProps<typeof TextInput>;
package/lib/TextInput.js CHANGED
@@ -20,16 +20,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
20
20
  // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
21
21
  const TextInput = /*#__PURE__*/_react.default.forwardRef(({
22
22
  icon: IconComponent,
23
+ leadingIcon: LeadingIconComponent,
24
+ trailingIcon: TrailingIconComponent,
23
25
  block,
24
26
  className,
25
27
  contrast,
26
28
  disabled,
29
+ validationStatus,
27
30
  sx: sxProp,
28
- theme,
31
+ size: sizeProp,
32
+ // start deprecated props
29
33
  width: widthProp,
30
34
  minWidth: minWidthProp,
31
35
  maxWidth: maxWidthProp,
32
36
  variant: variantProp,
37
+ // end deprecated props
33
38
  ...inputProps
34
39
  }, ref) => {
35
40
  // this class is necessary to style FilterSearch, plz no touchy!
@@ -37,21 +42,28 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(({
37
42
  return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
38
43
  block: block,
39
44
  className: wrapperClasses,
45
+ validationStatus: validationStatus,
40
46
  contrast: contrast,
41
47
  disabled: disabled,
42
- hasIcon: !!IconComponent,
48
+ hasIcon: !!IconComponent || !!(LeadingIconComponent || TrailingIconComponent),
43
49
  sx: sxProp,
44
- theme: theme,
50
+ size: sizeProp,
45
51
  width: widthProp,
46
52
  minWidth: minWidthProp,
47
53
  maxWidth: maxWidthProp,
48
54
  variant: variantProp
49
55
  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, {
50
- className: "TextInput-icon"
56
+ className: "TextInput-leading-icon"
57
+ }), LeadingIconComponent && /*#__PURE__*/_react.default.createElement(LeadingIconComponent, {
58
+ className: "TextInput-leading-icon"
51
59
  }), /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
52
60
  ref: ref,
53
61
  disabled: disabled
54
- }, inputProps)));
62
+ }, inputProps, {
63
+ "data-component": "input"
64
+ })), TrailingIconComponent && /*#__PURE__*/_react.default.createElement(TrailingIconComponent, {
65
+ className: "TextInput-trailing-icon"
66
+ }));
55
67
  });
56
68
 
57
69
  TextInput.defaultProps = {
package/lib/TextInputWithTokens.d.ts CHANGED
@@ -44,11 +44,17 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
44
44
  } & {
45
45
  as?: string | React.ComponentType<any> | undefined;
46
46
  forwardedAs?: string | React.ComponentType<any> | undefined;
47
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
47
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
48
48
  className?: string | undefined;
49
49
  icon?: React.ComponentType<{
50
50
  className?: string | undefined;
51
51
  }> | undefined;
52
+ leadingIcon?: React.ComponentType<{
53
+ className?: string | undefined;
54
+ }> | undefined;
55
+ trailingIcon?: React.ComponentType<{
56
+ className?: string | undefined;
57
+ }> | undefined;
52
58
  } & Pick<{
53
59
  color?: string | undefined;
54
60
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -61,6 +67,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
61
67
  slot?: string | undefined;
62
68
  style?: React.CSSProperties | undefined;
63
69
  title?: string | undefined;
70
+ size?: "small" | "large" | undefined;
64
71
  block?: boolean | undefined;
65
72
  variant?: "small" | "large" | undefined;
66
73
  role?: React.AriaRole | undefined;
@@ -317,9 +324,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
317
324
  disabled?: boolean | undefined;
318
325
  hasIcon?: boolean | undefined;
319
326
  contrast?: boolean | undefined;
327
+ validationStatus?: "error" | "warning" | undefined;
320
328
  } & {
321
329
  theme?: any;
322
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
330
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
323
331
  selectedTokenIndex: number | undefined;
324
332
  setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
325
333
  }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
package/lib/_TextInputWrapper.d.ts CHANGED
@@ -5,6 +5,9 @@ declare const TextInputWrapper: import("styled-components").StyledComponent<"spa
5
5
  hasIcon?: boolean | undefined;
6
6
  block?: boolean | undefined;
7
7
  contrast?: boolean | undefined;
8
+ validationStatus?: "error" | "warning" | undefined;
9
+ /** @deprecated Use `size` prop instead */
8
10
  variant?: "small" | "large" | undefined;
11
+ size?: "small" | "large" | undefined;
9
12
  } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
10
13
  export default TextInputWrapper;
package/lib/_TextInputWrapper.js CHANGED
@@ -19,7 +19,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
19
19
 
20
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
21
 
22
+ const sizeDeprecatedVariants = (0, _styledSystem.variant)({
23
+ variants: {
24
+ small: {
25
+ minHeight: '28px',
26
+ px: 2,
27
+ py: '3px',
28
+ fontSize: 0,
29
+ lineHeight: '20px'
30
+ },
31
+ large: {
32
+ px: 2,
33
+ py: '10px',
34
+ fontSize: 3
35
+ }
36
+ }
37
+ });
22
38
  const sizeVariants = (0, _styledSystem.variant)({
39
+ prop: 'size',
23
40
  variants: {
24
41
  small: {
25
42
  minHeight: '28px',
@@ -39,13 +56,7 @@ const sizeVariants = (0, _styledSystem.variant)({
39
56
  const TextInputWrapper = _styledComponents.default.span.withConfig({
40
57
  displayName: "_TextInputWrapper__TextInputWrapper",
41
58
  componentId: "sc-5vfcis-0"
42
- })(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
43
- if (props.hasIcon) {
44
- return (0, _styledComponents.css)(["padding:0;"]);
45
- } else {
46
- return (0, _styledComponents.css)(["padding:6px 12px;"]);
47
- }
48
- }, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), props => props.block && props.hasIcon && (0, _styledComponents.css)(["display:flex;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
59
+ })(["width:max-content;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-color:", ";background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;padding:6px 12px;display:grid;grid-template-areas:'leadingIcon input trailingIcon';& >:not(:last-child){margin-right:", ";}[data-component='input']{grid-area:input;}.TextInput-leading-icon{align-self:center;color:", ";grid-area:leadingIcon;}.TextInput-trailing-icon{align-self:center;color:", ";grid-area:trailingIcon;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.validationStatus === 'error' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:", ";}"], (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('colors.danger.emphasis'), (0, _constants.get)('shadows.btn.danger.focusShadow')), props => props.validationStatus === 'warning' && (0, _styledComponents.css)(["border-color:", ";&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}"], (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.emphasis'), (0, _constants.get)('colors.attention.muted')), props => props.block && (0, _styledComponents.css)(["width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeDeprecatedVariants, sizeVariants, _sx.default);
49
60
 
50
61
  var _default = TextInputWrapper;
51
62
  exports.default = _default;
package/lib-esm/Autocomplete/Autocomplete.d.ts CHANGED
@@ -20,11 +20,17 @@ declare const _default: React.FC<{
20
20
  } & {
21
21
  as?: string | React.ComponentType<any> | undefined;
22
22
  forwardedAs?: string | React.ComponentType<any> | undefined;
23
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
23
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
24
24
  className?: string | undefined;
25
25
  icon?: React.ComponentType<{
26
26
  className?: string | undefined;
27
27
  }> | undefined;
28
+ leadingIcon?: React.ComponentType<{
29
+ className?: string | undefined;
30
+ }> | undefined;
31
+ trailingIcon?: React.ComponentType<{
32
+ className?: string | undefined;
33
+ }> | undefined;
28
34
  } & Pick<{
29
35
  color?: string | undefined;
30
36
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -37,6 +43,7 @@ declare const _default: React.FC<{
37
43
  slot?: string | undefined;
38
44
  style?: React.CSSProperties | undefined;
39
45
  title?: string | undefined;
46
+ size?: "small" | "large" | undefined;
40
47
  block?: boolean | undefined;
41
48
  variant?: "small" | "large" | undefined;
42
49
  role?: React.AriaRole | undefined;
@@ -293,9 +300,10 @@ declare const _default: React.FC<{
293
300
  disabled?: boolean | undefined;
294
301
  hasIcon?: boolean | undefined;
295
302
  contrast?: boolean | undefined;
303
+ validationStatus?: "error" | "warning" | undefined;
296
304
  } & {
297
305
  theme?: any;
298
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
306
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
299
307
  as?: React.ComponentType<any> | undefined;
300
308
  }>;
301
309
  Menu: typeof AutocompleteMenu;
package/lib-esm/Autocomplete/AutocompleteInput.d.ts CHANGED
@@ -12,11 +12,17 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
12
12
  } & {
13
13
  as?: string | React.ComponentType<any> | undefined;
14
14
  forwardedAs?: string | React.ComponentType<any> | undefined;
15
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
15
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
16
16
  className?: string | undefined;
17
17
  icon?: React.ComponentType<{
18
18
  className?: string | undefined;
19
19
  }> | undefined;
20
+ leadingIcon?: React.ComponentType<{
21
+ className?: string | undefined;
22
+ }> | undefined;
23
+ trailingIcon?: React.ComponentType<{
24
+ className?: string | undefined;
25
+ }> | undefined;
20
26
  } & Pick<{
21
27
  color?: string | undefined;
22
28
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -29,6 +35,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
29
35
  slot?: string | undefined;
30
36
  style?: React.CSSProperties | undefined;
31
37
  title?: string | undefined;
38
+ size?: "small" | "large" | undefined;
32
39
  block?: boolean | undefined;
33
40
  variant?: "small" | "large" | undefined;
34
41
  role?: React.AriaRole | undefined;
@@ -285,8 +292,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
285
292
  disabled?: boolean | undefined;
286
293
  hasIcon?: boolean | undefined;
287
294
  contrast?: boolean | undefined;
295
+ validationStatus?: "error" | "warning" | undefined;
288
296
  } & {
289
297
  theme?: any;
290
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
298
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
291
299
  export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
292
300
  export default AutocompleteInput;
package/lib-esm/Checkbox.d.ts CHANGED
@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
25
25
  /**
26
26
  * An accessible, native checkbox component
27
27
  */
28
- declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
28
+ declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
29
29
  export default Checkbox;
package/lib-esm/SelectMenu/SelectMenu.d.ts CHANGED
@@ -39,11 +39,17 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
39
39
  } & {
40
40
  as?: string | React.ComponentType<any> | undefined;
41
41
  forwardedAs?: string | React.ComponentType<any> | undefined;
42
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
42
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
43
43
  className?: string | undefined;
44
44
  icon?: React.ComponentType<{
45
45
  className?: string | undefined;
46
46
  }> | undefined;
47
+ leadingIcon?: React.ComponentType<{
48
+ className?: string | undefined;
49
+ }> | undefined;
50
+ trailingIcon?: React.ComponentType<{
51
+ className?: string | undefined;
52
+ }> | undefined;
47
53
  } & Pick<{
48
54
  color?: string | undefined;
49
55
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -56,6 +62,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
56
62
  slot?: string | undefined;
57
63
  style?: React.CSSProperties | undefined;
58
64
  title?: string | undefined;
65
+ size?: "small" | "large" | undefined;
59
66
  block?: boolean | undefined;
60
67
  variant?: "small" | "large" | undefined;
61
68
  role?: React.AriaRole | undefined;
@@ -312,9 +319,10 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
312
319
  disabled?: boolean | undefined;
313
320
  hasIcon?: boolean | undefined;
314
321
  contrast?: boolean | undefined;
322
+ validationStatus?: "error" | "warning" | undefined;
315
323
  } & {
316
324
  theme?: any;
317
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
325
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
318
326
  Footer: import("styled-components").StyledComponent<"footer", any, SxProp, never>;
319
327
  Item: React.ForwardRefExoticComponent<Pick<{
320
328
  as?: React.ElementType<any> | undefined;
package/lib-esm/TextInput.d.ts CHANGED
@@ -4,10 +4,17 @@ import UnstyledTextInput from './_UnstyledTextInput';
4
4
  import TextInputWrapper from './_TextInputWrapper';
5
5
  declare type NonPassthroughProps = {
6
6
  className?: string;
7
+ /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */
7
8
  icon?: React.ComponentType<{
8
9
  className?: string;
9
10
  }>;
10
- } & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
11
+ leadingIcon?: React.ComponentType<{
12
+ className?: string;
13
+ }>;
14
+ trailingIcon?: React.ComponentType<{
15
+ className?: string;
16
+ }>;
17
+ } & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'>;
11
18
  declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
12
19
  declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
13
20
  export declare type TextInputProps = ComponentProps<typeof TextInput>;
package/lib-esm/TextInput.js CHANGED
@@ -7,16 +7,21 @@ import TextInputWrapper from './_TextInputWrapper';
7
7
  // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
8
8
  const TextInput = /*#__PURE__*/React.forwardRef(({
9
9
  icon: IconComponent,
10
+ leadingIcon: LeadingIconComponent,
11
+ trailingIcon: TrailingIconComponent,
10
12
  block,
11
13
  className,
12
14
  contrast,
13
15
  disabled,
16
+ validationStatus,
14
17
  sx: sxProp,
15
- theme,
18
+ size: sizeProp,
19
+ // start deprecated props
16
20
  width: widthProp,
17
21
  minWidth: minWidthProp,
18
22
  maxWidth: maxWidthProp,
19
23
  variant: variantProp,
24
+ // end deprecated props
20
25
  ...inputProps
21
26
  }, ref) => {
22
27
  // this class is necessary to style FilterSearch, plz no touchy!
@@ -24,21 +29,28 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
24
29
  return /*#__PURE__*/React.createElement(TextInputWrapper, {
25
30
  block: block,
26
31
  className: wrapperClasses,
32
+ validationStatus: validationStatus,
27
33
  contrast: contrast,
28
34
  disabled: disabled,
29
- hasIcon: !!IconComponent,
35
+ hasIcon: !!IconComponent || !!(LeadingIconComponent || TrailingIconComponent),
30
36
  sx: sxProp,
31
- theme: theme,
37
+ size: sizeProp,
32
38
  width: widthProp,
33
39
  minWidth: minWidthProp,
34
40
  maxWidth: maxWidthProp,
35
41
  variant: variantProp
36
42
  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
37
- className: "TextInput-icon"
43
+ className: "TextInput-leading-icon"
44
+ }), LeadingIconComponent && /*#__PURE__*/React.createElement(LeadingIconComponent, {
45
+ className: "TextInput-leading-icon"
38
46
  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
39
47
  ref: ref,
40
48
  disabled: disabled
41
- }, inputProps)));
49
+ }, inputProps, {
50
+ "data-component": "input"
51
+ })), TrailingIconComponent && /*#__PURE__*/React.createElement(TrailingIconComponent, {
52
+ className: "TextInput-trailing-icon"
53
+ }));
42
54
  });
43
55
  TextInput.defaultProps = {
44
56
  type: 'text'
package/lib-esm/TextInputWithTokens.d.ts CHANGED
@@ -44,11 +44,17 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
44
44
  } & {
45
45
  as?: string | React.ComponentType<any> | undefined;
46
46
  forwardedAs?: string | React.ComponentType<any> | undefined;
47
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
47
+ }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
48
48
  className?: string | undefined;
49
49
  icon?: React.ComponentType<{
50
50
  className?: string | undefined;
51
51
  }> | undefined;
52
+ leadingIcon?: React.ComponentType<{
53
+ className?: string | undefined;
54
+ }> | undefined;
55
+ trailingIcon?: React.ComponentType<{
56
+ className?: string | undefined;
57
+ }> | undefined;
52
58
  } & Pick<{
53
59
  color?: string | undefined;
54
60
  maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -61,6 +67,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
61
67
  slot?: string | undefined;
62
68
  style?: React.CSSProperties | undefined;
63
69
  title?: string | undefined;
70
+ size?: "small" | "large" | undefined;
64
71
  block?: boolean | undefined;
65
72
  variant?: "small" | "large" | undefined;
66
73
  role?: React.AriaRole | undefined;
@@ -317,9 +324,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
317
324
  disabled?: boolean | undefined;
318
325
  hasIcon?: boolean | undefined;
319
326
  contrast?: boolean | undefined;
327
+ validationStatus?: "error" | "warning" | undefined;
320
328
  } & {
321
329
  theme?: any;
322
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
330
+ }, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
323
331
  selectedTokenIndex: number | undefined;
324
332
  setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
325
333
  }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
package/lib-esm/_TextInputWrapper.d.ts CHANGED
@@ -5,6 +5,9 @@ declare const TextInputWrapper: import("styled-components").StyledComponent<"spa
5
5
  hasIcon?: boolean | undefined;
6
6
  block?: boolean | undefined;
7
7
  contrast?: boolean | undefined;
8
+ validationStatus?: "error" | "warning" | undefined;
9
+ /** @deprecated Use `size` prop instead */
8
10
  variant?: "small" | "large" | undefined;
11
+ size?: "small" | "large" | undefined;
9
12
  } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
10
13
  export default TextInputWrapper;
package/lib-esm/_TextInputWrapper.js CHANGED
@@ -2,7 +2,24 @@ import styled, { css } from 'styled-components';
2
2
  import { maxWidth, minWidth, variant, width } from 'styled-system';
3
3
  import { get } from './constants';
4
4
  import sx from './sx';
5
+ const sizeDeprecatedVariants = variant({
6
+ variants: {
7
+ small: {
8
+ minHeight: '28px',
9
+ px: 2,
10
+ py: '3px',
11
+ fontSize: 0,
12
+ lineHeight: '20px'
13
+ },
14
+ large: {
15
+ px: 2,
16
+ py: '10px',
17
+ fontSize: 3
18
+ }
19
+ }
20
+ });
5
21
  const sizeVariants = variant({
22
+ prop: 'size',
6
23
  variants: {
7
24
  small: {
8
25
  minHeight: '28px',
@@ -21,11 +38,5 @@ const sizeVariants = variant({
21
38
  const TextInputWrapper = styled.span.withConfig({
22
39
  displayName: "_TextInputWrapper__TextInputWrapper",
23
40
  componentId: "sc-5vfcis-0"
24
- })(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
25
- if (props.hasIcon) {
26
- return css(["padding:0;"]);
27
- } else {
28
- return css(["padding:6px 12px;"]);
29
- }
30
- }, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), props => props.block && props.hasIcon && css(["display:flex;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
41
+ })(["width:max-content;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-color:", ";background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;padding:6px 12px;display:grid;grid-template-areas:'leadingIcon input trailingIcon';& >:not(:last-child){margin-right:", ";}[data-component='input']{grid-area:input;}.TextInput-leading-icon{align-self:center;color:", ";grid-area:leadingIcon;}.TextInput-trailing-icon{align-self:center;color:", ";grid-area:trailingIcon;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.canvas.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), get('space.2'), get('colors.fg.muted'), get('colors.fg.muted'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.validationStatus === 'error' && css(["border-color:", ";&:focus-within{border-color:", ";box-shadow:", ";}"], get('colors.danger.emphasis'), get('colors.danger.emphasis'), get('shadows.btn.danger.focusShadow')), props => props.validationStatus === 'warning' && css(["border-color:", ";&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}"], get('colors.attention.emphasis'), get('colors.attention.emphasis'), get('colors.attention.muted')), props => props.block && css(["width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeDeprecatedVariants, sizeVariants, sx);
31
42
  export default TextInputWrapper;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20211029202722",
3
+ "version": "0.0.0-2021103082237",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",