@instructure/ui-buttons 8.8.1-snapshot.7 → 8.9.1-snapshot.2

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 (94) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/es/BaseButton/index.js +12 -133
  3. package/es/BaseButton/props.js +138 -0
  4. package/es/Button/index.js +4 -87
  5. package/es/Button/props.js +107 -0
  6. package/es/CloseButton/index.js +5 -93
  7. package/es/CloseButton/props.js +103 -0
  8. package/es/CondensedButton/index.js +4 -65
  9. package/es/CondensedButton/props.js +86 -0
  10. package/es/IconButton/index.js +4 -91
  11. package/es/IconButton/props.js +111 -0
  12. package/es/ToggleButton/index.js +2 -77
  13. package/es/ToggleButton/props.js +100 -0
  14. package/lib/BaseButton/index.js +12 -133
  15. package/lib/BaseButton/props.js +150 -0
  16. package/lib/Button/index.js +4 -87
  17. package/lib/Button/props.js +119 -0
  18. package/lib/CloseButton/index.js +5 -93
  19. package/lib/CloseButton/props.js +115 -0
  20. package/lib/CondensedButton/index.js +4 -65
  21. package/lib/CondensedButton/props.js +98 -0
  22. package/lib/IconButton/index.js +4 -91
  23. package/lib/IconButton/props.js +123 -0
  24. package/lib/ToggleButton/index.js +3 -79
  25. package/lib/ToggleButton/props.js +112 -0
  26. package/package.json +21 -21
  27. package/src/BaseButton/index.tsx +15 -120
  28. package/src/BaseButton/props.ts +192 -0
  29. package/src/BaseButton/styles.ts +1 -1
  30. package/src/Button/index.tsx +7 -81
  31. package/src/Button/props.ts +149 -0
  32. package/src/CloseButton/index.tsx +8 -82
  33. package/src/CloseButton/props.ts +137 -0
  34. package/src/CloseButton/styles.ts +1 -1
  35. package/src/CondensedButton/index.tsx +7 -57
  36. package/src/CondensedButton/props.ts +118 -0
  37. package/src/IconButton/index.tsx +7 -84
  38. package/src/IconButton/props.ts +154 -0
  39. package/src/ToggleButton/index.tsx +5 -68
  40. package/src/ToggleButton/props.ts +140 -0
  41. package/src/index.ts +6 -6
  42. package/types/BaseButton/index.d.ts +47 -101
  43. package/types/BaseButton/index.d.ts.map +1 -1
  44. package/types/BaseButton/{types.d.ts → props.d.ts} +15 -10
  45. package/types/BaseButton/props.d.ts.map +1 -0
  46. package/types/BaseButton/styles.d.ts +1 -1
  47. package/types/Button/index.d.ts +36 -73
  48. package/types/Button/index.d.ts.map +1 -1
  49. package/types/Button/{types.d.ts → props.d.ts} +12 -4
  50. package/types/Button/props.d.ts.map +1 -0
  51. package/types/CloseButton/index.d.ts +41 -75
  52. package/types/CloseButton/index.d.ts.map +1 -1
  53. package/types/CloseButton/props.d.ts +27 -0
  54. package/types/CloseButton/props.d.ts.map +1 -0
  55. package/types/CloseButton/styles.d.ts +1 -1
  56. package/types/CondensedButton/index.d.ts +28 -55
  57. package/types/CondensedButton/index.d.ts.map +1 -1
  58. package/types/CondensedButton/props.d.ts +24 -0
  59. package/types/CondensedButton/props.d.ts.map +1 -0
  60. package/types/IconButton/index.d.ts +38 -76
  61. package/types/IconButton/index.d.ts.map +1 -1
  62. package/types/IconButton/{types.d.ts → props.d.ts} +11 -3
  63. package/types/IconButton/props.d.ts.map +1 -0
  64. package/types/ToggleButton/index.d.ts +34 -65
  65. package/types/ToggleButton/index.d.ts.map +1 -1
  66. package/types/ToggleButton/{types.d.ts → props.d.ts} +10 -3
  67. package/types/ToggleButton/props.d.ts.map +1 -0
  68. package/types/index.d.ts +6 -6
  69. package/es/BaseButton/types.js +0 -1
  70. package/es/Button/types.js +0 -1
  71. package/es/CloseButton/types.js +0 -1
  72. package/es/CondensedButton/types.js +0 -1
  73. package/es/IconButton/types.js +0 -1
  74. package/es/ToggleButton/types.js +0 -1
  75. package/lib/BaseButton/types.js +0 -1
  76. package/lib/Button/types.js +0 -1
  77. package/lib/CloseButton/types.js +0 -1
  78. package/lib/CondensedButton/types.js +0 -1
  79. package/lib/IconButton/types.js +0 -1
  80. package/lib/ToggleButton/types.js +0 -1
  81. package/src/BaseButton/types.ts +0 -58
  82. package/src/Button/types.ts +0 -44
  83. package/src/CloseButton/types.ts +0 -45
  84. package/src/CondensedButton/types.ts +0 -40
  85. package/src/IconButton/types.ts +0 -45
  86. package/src/ToggleButton/types.ts +0 -48
  87. package/types/BaseButton/types.d.ts.map +0 -1
  88. package/types/Button/types.d.ts.map +0 -1
  89. package/types/CloseButton/types.d.ts +0 -22
  90. package/types/CloseButton/types.d.ts.map +0 -1
  91. package/types/CondensedButton/types.d.ts +0 -16
  92. package/types/CondensedButton/types.d.ts.map +0 -1
  93. package/types/IconButton/types.d.ts.map +0 -1
  94. package/types/ToggleButton/types.d.ts.map +0 -1
package/src/index.ts CHANGED
@@ -29,9 +29,9 @@ export { CondensedButton } from './CondensedButton'
29
29
  export { IconButton } from './IconButton'
30
30
  export { ToggleButton } from './ToggleButton'
31
31
 
32
- export type { BaseButtonProps } from './BaseButton/types'
33
- export type { ButtonProps } from './Button/types'
34
- export type { CloseButtonProps } from './CloseButton/types'
35
- export type { CondensedButtonProps } from './CondensedButton/types'
36
- export type { IconButtonProps } from './IconButton/types'
37
- export type { ToggleButtonProps } from './ToggleButton/types'
32
+ export type { BaseButtonProps } from './BaseButton/props'
33
+ export type { ButtonProps } from './Button/props'
34
+ export type { CloseButtonProps } from './CloseButton/props'
35
+ export type { CondensedButtonProps } from './CondensedButton/props'
36
+ export type { IconButtonProps } from './IconButton/props'
37
+ export type { ToggleButtonProps } from './ToggleButton/props'
@@ -1,8 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import { Component } from 'react';
3
- import PropTypes from 'prop-types';
4
3
  import { jsx } from '@instructure/emotion';
5
- import { BaseButtonProps, BaseButtonStyleProps } from './types';
4
+ import type { BaseButtonProps, BaseButtonStyleProps } from './props';
6
5
  /**
7
6
  ---
8
7
  category: components/utilities
@@ -10,108 +9,59 @@ category: components/utilities
10
9
  **/
11
10
  declare class BaseButton extends Component<BaseButtonProps> {
12
11
  static readonly componentId = "BaseButton";
13
- static propTypes: {
14
- readonly makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
15
- readonly styles: PropTypes.Requireable<object>;
16
- /**
17
- * Specifies the `Button` children.
18
- */
19
- readonly children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
20
- /**
21
- * Specifies the type of the `Button`'s underlying html element.
22
- */
23
- readonly type: PropTypes.Requireable<string>;
24
- /**
25
- * The size of the `Button`
26
- */
27
- readonly size: PropTypes.Requireable<string>;
28
- /**
29
- * Provides a reference to the `Button`'s underlying html element.
30
- */
31
- readonly elementRef: PropTypes.Requireable<(...args: any[]) => any>;
32
- /**
33
- * The element to render as the component root, `Button` by default.
34
- */
35
- readonly as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
36
- /**
37
- * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
38
- */
39
- readonly interaction: PropTypes.Requireable<string>;
40
- /**
41
- * Specifies the color for the `Button`.
42
- */
43
- readonly color: PropTypes.Requireable<string>;
44
- /**
45
- * Override the `Button`'s default focus outline color.
46
- */
47
- readonly focusColor: PropTypes.Requireable<string>;
48
- /**
49
- * The `Button` display property. When set to `inline-block`, the `Button` displays inline with other elements.
50
- * When set to block, the `Button` expands to fill the width of the container.
51
- */
52
- readonly display: PropTypes.Requireable<string>;
53
- /**
54
- * Sets the alignment of the `Button` children and/or icon.
55
- */
56
- readonly textAlign: PropTypes.Requireable<string>;
57
- /**
58
- * Specifies if the `Button` shape should be a circle or rectangle.
59
- */
60
- readonly shape: PropTypes.Requireable<string>;
61
- /**
62
- * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
63
- */
64
- readonly withBackground: PropTypes.Requireable<boolean>;
65
- /**
66
- * Specifies if the `Button` should render with a border.
67
- */
68
- readonly withBorder: PropTypes.Requireable<boolean>;
69
- /**
70
- * Designates if the `Button` should render without padding. This option should only be set when `withBorder` and
71
- * `withBackground` are also set to false.
72
- */
73
- readonly isCondensed: PropTypes.Requireable<boolean>;
74
- /**
75
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
76
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
77
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
78
- */
79
- readonly margin: (props: any, propName: any, componentName: any, location: any) => any;
80
- /**
81
- * Specify a mouse cursor to use when hovering over the button.
82
- * The `pointer` cursor is used by default.
83
- */
84
- readonly cursor: PropTypes.Requireable<string>;
85
- /**
86
- * Specifies an href attribute for the `Button`'s underlying html element.
87
- */
88
- readonly href: PropTypes.Requireable<string>;
89
- /**
90
- * Callback fired when the `Button` is clicked.
91
- */
92
- readonly onClick: PropTypes.Requireable<(...args: any[]) => any>;
93
- /**
94
- * Callback fired when the `Button` receives a keydown event.
95
- */
96
- readonly onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
97
- /**
98
- * An icon, or function that returns an icon.
99
- */
100
- readonly renderIcon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
101
- /**
102
- * Specifies the tabindex of the `Button`.
103
- */
104
- readonly tabIndex: PropTypes.Requireable<string | number>;
105
- };
12
+ static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
13
+ children?: import("react").ReactNode;
14
+ type?: "button" | "submit" | "reset" | undefined;
15
+ size?: "small" | "medium" | "large" | undefined;
16
+ elementRef?: ((...args: any[]) => any) | undefined;
17
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
18
+ interaction?: import("@instructure/ui-react-utils").InteractionType | undefined;
19
+ color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
20
+ focusColor?: "info" | "inverse" | undefined;
21
+ display?: "inline-block" | "block" | undefined;
22
+ textAlign?: "start" | "center" | undefined;
23
+ shape?: "circle" | "rectangle" | undefined;
24
+ withBackground?: boolean | undefined;
25
+ withBorder?: boolean | undefined;
26
+ isCondensed?: boolean | undefined;
27
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
28
+ cursor?: string | undefined;
29
+ href?: string | undefined;
30
+ onClick?: ((...args: any[]) => any) | undefined;
31
+ onKeyDown?: ((...args: any[]) => any) | undefined;
32
+ renderIcon?: import("react").ReactNode | ((...args: any[]) => any);
33
+ tabIndex?: string | number | undefined;
34
+ }>;
35
+ static allowedProps: readonly (keyof {
36
+ children?: import("react").ReactNode;
37
+ type?: "button" | "submit" | "reset" | undefined;
38
+ size?: "small" | "medium" | "large" | undefined;
39
+ elementRef?: ((...args: any[]) => any) | undefined;
40
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
41
+ interaction?: import("@instructure/ui-react-utils").InteractionType | undefined;
42
+ color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
43
+ focusColor?: "info" | "inverse" | undefined;
44
+ display?: "inline-block" | "block" | undefined;
45
+ textAlign?: "start" | "center" | undefined;
46
+ shape?: "circle" | "rectangle" | undefined;
47
+ withBackground?: boolean | undefined;
48
+ withBorder?: boolean | undefined;
49
+ isCondensed?: boolean | undefined;
50
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
51
+ cursor?: string | undefined;
52
+ href?: string | undefined;
53
+ onClick?: ((...args: any[]) => any) | undefined;
54
+ onKeyDown?: ((...args: any[]) => any) | undefined;
55
+ renderIcon?: import("react").ReactNode | ((...args: any[]) => any);
56
+ tabIndex?: string | number | undefined;
57
+ })[];
106
58
  static defaultProps: {
107
59
  readonly children: null;
108
60
  readonly type: "button";
109
61
  readonly size: "medium";
110
62
  readonly elementRef: (el: any) => void;
111
63
  readonly as: "button";
112
- readonly interaction: undefined;
113
64
  readonly color: "secondary";
114
- readonly focusColor: undefined;
115
65
  readonly shape: "rectangle";
116
66
  readonly display: "inline-block";
117
67
  readonly textAlign: "start";
@@ -120,11 +70,7 @@ declare class BaseButton extends Component<BaseButtonProps> {
120
70
  readonly isCondensed: false;
121
71
  readonly margin: "0";
122
72
  readonly cursor: "pointer";
123
- readonly href: undefined;
124
- readonly onClick: undefined;
125
73
  readonly onKeyDown: (event: any) => void;
126
- readonly renderIcon: undefined;
127
- readonly tabIndex: undefined;
128
74
  };
129
75
  _rootElement: null;
130
76
  componentDidMount(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BaseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,SAAS,MAAM,YAAY,CAAA;AAclC,OAAO,EAAa,GAAG,EAAsB,MAAM,sBAAsB,CAAA;AAIzE,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/D;;;;GAIG;AAEH,cAEM,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IACjD,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;QAKd;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAQH;;WAEG;;QAEH;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;QAEH;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;MAEK;IAEV,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;MAyBT;IAEV,YAAY,OAAO;IAEnB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,IAAI,mBAAmB,IAAI,oBAAoB,CAK9C;IAED,IAAI,kBAAkB,YAGrB;IAED,IAAI,WAAW,wEAEd;IAED,IAAI,WAAW,0DAEd;IAED,IAAI,UAAU,YAEb;IAED,IAAI,UAAU,YAEb;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,UAAU,uBAkBb;IAED,IAAI,OAAO,YAEV;IAED,KAAK;IAML,gBAAgB,oBAIf;IAGD,WAAW,uBAaV;IAGD,aAAa,uBA0BZ;IAED,cAAc;IAgCd,MAAM;CAwDP;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BaseButton/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEpE;;;;GAIG;AAEH,cAEM,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IACjD,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;MAmBT;IAEV,YAAY,OAAO;IAEnB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,IAAI,mBAAmB,IAAI,oBAAoB,CAK9C;IAED,IAAI,kBAAkB,YAGrB;IAED,IAAI,WAAW,wEAEd;IAED,IAAI,WAAW,0DAEd;IAED,IAAI,UAAU,YAEb;IAED,IAAI,UAAU,YAEb;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,UAAU,uBAkBb;IAED,IAAI,OAAO,YAEV;IAED,KAAK;IAML,gBAAgB,oBAIf;IAGD,WAAW,uBAaV;IAGD,aAAa,uBA0BZ;IAED,cAAc;IAgCd,MAAM;CAwDP;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,eAAe,UAAU,CAAA"}
@@ -1,10 +1,9 @@
1
- import { AsElementType } from '@instructure/shared-types';
1
+ import React from 'react';
2
2
  import type { InteractionType } from '@instructure/ui-react-utils';
3
- import type { Spacing } from '@instructure/emotion';
4
- import type { ReactNode } from 'react';
5
- export declare type BaseButtonProps = {
6
- makeStyles?: (...args: any[]) => any;
7
- styles?: any;
3
+ import type { Spacing, WithStyleProps } from '@instructure/emotion';
4
+ import type { AsElementType, PropValidators } from '@instructure/shared-types';
5
+ declare type BaseButtonOwnProps = {
6
+ children?: React.ReactNode;
8
7
  type?: 'button' | 'submit' | 'reset';
9
8
  size?: 'small' | 'medium' | 'large';
10
9
  elementRef?: (...args: any[]) => any;
@@ -23,12 +22,18 @@ export declare type BaseButtonProps = {
23
22
  href?: string;
24
23
  onClick?: (...args: any[]) => any;
25
24
  onKeyDown?: (...args: any[]) => any;
26
- renderIcon?: ReactNode | ((...args: any[]) => any);
25
+ renderIcon?: React.ReactNode | ((...args: any[]) => any);
27
26
  tabIndex?: number | string;
28
- children?: ReactNode;
29
27
  };
30
- export declare type BaseButtonStyleProps = {
28
+ declare type BaseButtonStyleProps = {
31
29
  isDisabled: boolean;
32
30
  hasOnlyIconVisible: boolean;
33
31
  };
34
- //# sourceMappingURL=types.d.ts.map
32
+ declare type PropKeys = keyof BaseButtonOwnProps;
33
+ declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
34
+ declare type BaseButtonProps = BaseButtonOwnProps & WithStyleProps;
35
+ declare const propTypes: PropValidators<PropKeys>;
36
+ declare const allowedProps: AllowedPropKeys;
37
+ export type { BaseButtonProps, BaseButtonStyleProps };
38
+ export { propTypes, allowedProps };
39
+ //# sourceMappingURL=props.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/BaseButton/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE9E,aAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,eAAe,GAAG,kBAAkB,GAAG,cAAc,CAAA;AAE1D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAsBnB,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
@@ -1,5 +1,5 @@
1
1
  import { BaseButtonTheme } from '@instructure/shared-types';
2
- import { BaseButtonProps, BaseButtonStyleProps } from './types';
2
+ import { BaseButtonProps, BaseButtonStyleProps } from './props';
3
3
  /**
4
4
  * ---
5
5
  * private: true
@@ -1,6 +1,5 @@
1
- import { Component } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { ButtonProps } from './types';
1
+ import React, { Component } from 'react';
2
+ import type { ButtonProps } from './props';
4
3
  /**
5
4
  ---
6
5
  category: components
@@ -8,88 +7,52 @@ category: components
8
7
  **/
9
8
  declare class Button extends Component<ButtonProps> {
10
9
  static readonly componentId = "Button";
11
- static propTypes: {
12
- /**
13
- * Specifies the `Button` children.
14
- */
15
- children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
16
- /**
17
- * Specifies the type of the `Button`'s underlying html element.
18
- */
19
- type: PropTypes.Requireable<string>;
20
- /**
21
- * The size of the `Button`
22
- */
23
- size: PropTypes.Requireable<string>;
24
- /**
25
- * Provides a reference to the `Button`'s underlying html element.
26
- */
27
- elementRef: PropTypes.Requireable<(...args: any[]) => any>;
28
- /**
29
- * The element to render as the component root, `Button` by default.
30
- */
31
- as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
32
- /**
33
- * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
34
- */
35
- interaction: PropTypes.Requireable<string>;
36
- /**
37
- * Specifies the color for the `Button`.
38
- */
39
- color: PropTypes.Requireable<string>;
40
- /**
41
- * Override the `Button`'s default focus outline color.
42
- */
43
- focusColor: PropTypes.Requireable<string>;
44
- /**
45
- * The `Button` display property. When set to `inline-block`, the `Button` displays inline with other elements.
46
- * When set to block, the `Button` expands to fill the width of the container.
47
- */
48
- display: PropTypes.Requireable<string>;
49
- /**
50
- * Sets the alignment of the `Button` children and/or icon.
51
- */
52
- textAlign: PropTypes.Requireable<string>;
53
- /**
54
- * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
55
- */
56
- withBackground: PropTypes.Requireable<boolean>;
57
- /**
58
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
59
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
60
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
61
- */
62
- margin: (props: any, propName: any, componentName: any, location: any) => any;
63
- /**
64
- * Specify a mouse cursor to use when hovering over the button.
65
- * The `pointer` cursor is used by default.
66
- */
67
- cursor: PropTypes.Requireable<string>;
68
- /**
69
- * Specifies an href attribute for the `Button`'s underlying html element.
70
- */
71
- href: PropTypes.Requireable<string>;
72
- /**
73
- * An icon, or function that returns an icon.
74
- */
75
- renderIcon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
76
- };
10
+ static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
11
+ children?: React.ReactNode;
12
+ type?: "button" | "submit" | "reset" | undefined;
13
+ size?: "small" | "medium" | "large" | undefined;
14
+ elementRef?: ((...args: any[]) => any) | undefined;
15
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
16
+ interaction?: "enabled" | "disabled" | "readonly" | undefined;
17
+ color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
18
+ focusColor?: "info" | "inverse" | undefined;
19
+ display?: "inline-block" | "block" | undefined;
20
+ textAlign?: "start" | "center" | undefined;
21
+ withBackground?: boolean | undefined;
22
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
23
+ cursor?: string | undefined;
24
+ href?: string | undefined;
25
+ renderIcon?: React.ReactNode | ((...args: any[]) => any);
26
+ }>;
27
+ static allowedProps: readonly (keyof {
28
+ children?: React.ReactNode;
29
+ type?: "button" | "submit" | "reset" | undefined;
30
+ size?: "small" | "medium" | "large" | undefined;
31
+ elementRef?: ((...args: any[]) => any) | undefined;
32
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
33
+ interaction?: "enabled" | "disabled" | "readonly" | undefined;
34
+ color?: "primary" | "primary-inverse" | "secondary" | "success" | "danger" | undefined;
35
+ focusColor?: "info" | "inverse" | undefined;
36
+ display?: "inline-block" | "block" | undefined;
37
+ textAlign?: "start" | "center" | undefined;
38
+ withBackground?: boolean | undefined;
39
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
40
+ cursor?: string | undefined;
41
+ href?: string | undefined;
42
+ renderIcon?: React.ReactNode | ((...args: any[]) => any);
43
+ })[];
77
44
  static defaultProps: {
78
45
  children: null;
79
46
  type: string;
80
47
  size: string;
81
48
  elementRef: (el: any) => void;
82
49
  as: string;
83
- interaction: undefined;
84
50
  color: string;
85
- focusColor: undefined;
86
51
  display: string;
87
52
  textAlign: string;
88
53
  withBackground: boolean;
89
54
  margin: string;
90
55
  cursor: string;
91
- href: undefined;
92
- renderIcon: undefined;
93
56
  };
94
57
  _buttonComponent: null;
95
58
  get focused(): null;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAwBA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,SAAS,MAAM,YAAY,CAAA;AASlC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC;;;;GAIG;AAEH,cAEM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;QACd;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAQH;;WAEG;;QAEH;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;;WAIG;;QAEH;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;MAEJ;IAED,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;MAkBlB;IAED,gBAAgB,OAAO;IAEvB,IAAI,OAAO,SAGV;IAED,KAAK;IAML,gBAAgB,oBAKf;IAGD,eAAe,2BAEd;IAED,MAAM;CA8CP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AAEH,cAEM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;MAclB;IAED,gBAAgB,OAAO;IAEvB,IAAI,OAAO,SAGV;IAED,KAAK;IAML,gBAAgB,oBAKf;IAGD,eAAe,2BAEd;IAED,MAAM;CA8CP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
@@ -1,7 +1,8 @@
1
- import { AsElementType } from '@instructure/shared-types';
2
- import type { Spacing } from '@instructure/emotion';
3
1
  import React from 'react';
4
- export declare type ButtonProps = {
2
+ import type { Spacing } from '@instructure/emotion';
3
+ import type { AsElementType, PropValidators } from '@instructure/shared-types';
4
+ declare type ButtonOwnProps = {
5
+ children?: React.ReactNode;
5
6
  type?: 'button' | 'submit' | 'reset';
6
7
  size?: 'small' | 'medium' | 'large';
7
8
  elementRef?: (...args: any[]) => any;
@@ -17,4 +18,11 @@ export declare type ButtonProps = {
17
18
  href?: string;
18
19
  renderIcon?: React.ReactNode | ((...args: any[]) => any);
19
20
  };
20
- //# sourceMappingURL=types.d.ts.map
21
+ declare type PropKeys = keyof ButtonOwnProps;
22
+ declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
23
+ declare type ButtonProps = ButtonOwnProps;
24
+ declare const propTypes: PropValidators<PropKeys>;
25
+ declare const allowedProps: AllowedPropKeys;
26
+ export type { ButtonProps };
27
+ export { propTypes, allowedProps };
28
+ //# sourceMappingURL=props.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Button/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE9E,aAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD,KAAK,CAAC,EAAE,SAAS,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;CACzD,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,CAAA;AAEjC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAgBnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
@@ -1,8 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import { Component } from 'react';
3
- import PropTypes from 'prop-types';
4
3
  import { jsx } from '@instructure/emotion';
5
- import { CloseButtonProps } from './types';
4
+ import type { CloseButtonProps } from './props';
6
5
  /**
7
6
  ---
8
7
  category: components
@@ -10,88 +9,55 @@ category: components
10
9
  **/
11
10
  declare class CloseButton extends Component<CloseButtonProps> {
12
11
  static readonly componentId = "CloseButton";
13
- static propTypes: {
14
- makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
15
- styles: PropTypes.Requireable<object>;
16
- /**
17
- * An accessible label for the `CloseButton` (required)
18
- */
19
- screenReaderLabel: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
20
- /**
21
- * Specifies the color for the `CloseButton`.
22
- */
23
- color: PropTypes.Requireable<string>;
24
- /**
25
- * Specifies if interaction with the `CloseButton` is enabled, disabled, or readonly.
26
- */
27
- interaction: PropTypes.Requireable<string>;
28
- /**
29
- * Provides a reference to the `CloseButton`'s underlying html element.
30
- */
31
- elementRef: PropTypes.Requireable<(...args: any[]) => any>;
32
- /**
33
- * The size of the `CloseButton`
34
- */
35
- size: PropTypes.Requireable<string>;
36
- /**
37
- * Callback fired when the `CloseButton` is clicked.
38
- */
39
- onClick: PropTypes.Requireable<(...args: any[]) => any>;
40
- /**
41
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
42
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
43
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
44
- */
45
- margin: (props: any, propName: any, componentName: any, location: any) => any;
46
- /**
47
- * Specifies the placement of the `CloseButton`
48
- */
49
- placement: PropTypes.Requireable<string>;
50
- /**
51
- * Specifies the offset distance for the `CloseButton` with respect to both the top and start/end of the container.
52
- * Note that for this property to have an effect, the `placement` prop must be set to either `start` or `end`. The
53
- * offset will also be created with respect to a positioned parent. If it does not appear to be working, try setting
54
- * the `position` of the parent container to `relative`.
55
- */
56
- offset: PropTypes.Requireable<string>;
57
- /**
58
- * Specifies the type of the `Button`'s underlying html element.
59
- */
60
- type: PropTypes.Requireable<string>;
61
- /**
62
- * The element to render as the component root, `CloseButton` by default.
63
- */
64
- as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
65
- /**
66
- * Specifies an href attribute for the `CloseButton`'s underlying html element.
67
- */
68
- href: PropTypes.Requireable<string>;
69
- /**
70
- * Specify a mouse cursor to use when hovering over the `CloseButton`.
71
- */
72
- cursor: PropTypes.Requireable<string>;
73
- /**
74
- * Specifies the tabindex of the `CloseButton`.
75
- */
76
- tabIndex: PropTypes.Requireable<string | number>;
77
- };
12
+ static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
13
+ screenReaderLabel: import("react").ReactNode;
14
+ color?: "primary" | "primary-inverse" | undefined;
15
+ interaction?: "enabled" | "disabled" | "readonly" | undefined;
16
+ elementRef?: ((...args: any[]) => any) | undefined;
17
+ size?: "small" | "medium" | "large" | undefined;
18
+ onClick?: ((...args: any[]) => any) | undefined;
19
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
20
+ placement?: "start" | "end" | "static" | undefined; /**
21
+ ---
22
+ category: components
23
+ ---
24
+ **/
25
+ offset?: "small" | "medium" | "none" | "x-small" | undefined;
26
+ type?: "button" | "submit" | "reset" | undefined;
27
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
28
+ href?: string | undefined;
29
+ cursor?: string | undefined;
30
+ tabIndex?: string | number | undefined;
31
+ }>;
32
+ static allowedProps: readonly (keyof {
33
+ screenReaderLabel: import("react").ReactNode;
34
+ color?: "primary" | "primary-inverse" | undefined;
35
+ interaction?: "enabled" | "disabled" | "readonly" | undefined;
36
+ elementRef?: ((...args: any[]) => any) | undefined;
37
+ size?: "small" | "medium" | "large" | undefined;
38
+ onClick?: ((...args: any[]) => any) | undefined;
39
+ margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
40
+ placement?: "start" | "end" | "static" | undefined; /**
41
+ ---
42
+ category: components
43
+ ---
44
+ **/
45
+ offset?: "small" | "medium" | "none" | "x-small" | undefined;
46
+ type?: "button" | "submit" | "reset" | undefined;
47
+ as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
48
+ href?: string | undefined;
49
+ cursor?: string | undefined;
50
+ tabIndex?: string | number | undefined;
51
+ })[];
78
52
  static defaultProps: {
79
- screenReaderLabel: undefined;
80
53
  onClick: (event: any) => void;
81
- elementRef: undefined;
82
- color: undefined;
83
- interaction: undefined;
84
- disabled: undefined;
85
- readOnly: undefined;
86
54
  type: string;
87
55
  placement: string;
88
56
  offset: string;
89
57
  size: string;
90
58
  margin: string;
91
59
  as: string;
92
- href: undefined;
93
60
  cursor: string;
94
- tabIndex: undefined;
95
61
  };
96
62
  componentDidMount(): void;
97
63
  componentDidUpdate(): void;