@primer/components 0.0.0-20211124581 → 0.0.0-202111255030
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.
- package/CHANGELOG.md +1 -7
- package/dist/browser.esm.js +148 -166
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +156 -174
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/Divider.d.ts +2 -3
- package/lib/ActionList2/Divider.js +5 -10
- package/lib/ActionList2/Item.js +5 -21
- package/lib/ActionList2/List.js +1 -11
- package/lib/ActionList2/Selection.js +0 -11
- package/lib/ActionList2/index.d.ts +2 -1
- package/lib/Autocomplete/Autocomplete.d.ts +2 -10
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -10
- package/lib/Checkbox.d.ts +1 -1
- package/lib/NewButton/button-base.d.ts +6 -0
- package/lib/NewButton/button-base.js +69 -0
- package/lib/NewButton/button-link.d.ts +26 -0
- package/lib/NewButton/button-link.js +31 -0
- package/lib/NewButton/button.d.ts +2 -11
- package/lib/NewButton/button.js +6 -283
- package/lib/NewButton/icon-button.d.ts +4 -0
- package/lib/NewButton/icon-button.js +57 -0
- package/lib/NewButton/index.d.ts +6 -11
- package/lib/NewButton/index.js +18 -0
- package/lib/NewButton/styles.d.ts +202 -0
- package/lib/NewButton/styles.js +248 -0
- package/lib/NewButton/types.d.ts +28 -8
- package/lib/NewButton/types.js +19 -1
- package/lib/SelectMenu/SelectMenu.d.ts +2 -10
- package/lib/TextInput.d.ts +1 -8
- package/lib/TextInput.js +5 -16
- package/lib/TextInputWithTokens.d.ts +2 -10
- package/lib/_TextInputWrapper.d.ts +0 -3
- package/lib/_TextInputWrapper.js +7 -18
- package/lib/drafts.d.ts +0 -1
- package/lib/drafts.js +0 -13
- package/lib-esm/ActionList2/Divider.d.ts +2 -3
- package/lib-esm/ActionList2/Divider.js +5 -8
- package/lib-esm/ActionList2/Item.js +5 -19
- package/lib-esm/ActionList2/List.js +1 -9
- package/lib-esm/ActionList2/Selection.js +0 -9
- package/lib-esm/ActionList2/index.d.ts +2 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -10
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -10
- package/lib-esm/Checkbox.d.ts +1 -1
- package/lib-esm/NewButton/button-base.d.ts +6 -0
- package/lib-esm/NewButton/button-base.js +47 -0
- package/lib-esm/NewButton/button-link.d.ts +26 -0
- package/lib-esm/NewButton/button-link.js +15 -0
- package/lib-esm/NewButton/button.d.ts +2 -11
- package/lib-esm/NewButton/button.js +4 -275
- package/lib-esm/NewButton/icon-button.d.ts +4 -0
- package/lib-esm/NewButton/icon-button.js +35 -0
- package/lib-esm/NewButton/index.d.ts +6 -11
- package/lib-esm/NewButton/index.js +4 -1
- package/lib-esm/NewButton/styles.d.ts +202 -0
- package/lib-esm/NewButton/styles.js +229 -0
- package/lib-esm/NewButton/types.d.ts +28 -8
- package/lib-esm/NewButton/types.js +6 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -10
- package/lib-esm/TextInput.d.ts +1 -8
- package/lib-esm/TextInput.js +5 -16
- package/lib-esm/TextInputWithTokens.d.ts +2 -10
- package/lib-esm/_TextInputWrapper.d.ts +0 -3
- package/lib-esm/_TextInputWrapper.js +7 -18
- package/lib-esm/drafts.d.ts +0 -1
- package/lib-esm/drafts.js +1 -2
- package/package.json +1 -1
- package/lib/ActionList2/MenuContext.d.ts +0 -10
- package/lib/ActionList2/MenuContext.js +0 -15
- package/lib/ActionMenu2.d.ts +0 -310
- package/lib/ActionMenu2.js +0 -91
- package/lib-esm/ActionList2/MenuContext.d.ts +0 -10
- package/lib-esm/ActionList2/MenuContext.js +0 -3
- package/lib-esm/ActionMenu2.d.ts +0 -310
- package/lib-esm/ActionMenu2.js +0 -67
@@ -1,6 +1,5 @@
|
|
1
|
-
|
2
|
-
import { SxProp } from '../sx';
|
1
|
+
/// <reference types="react" />
|
3
2
|
/**
|
4
3
|
* Visually separates `Item`s or `Group`s in an `ActionList`.
|
5
4
|
*/
|
6
|
-
export declare
|
5
|
+
export declare function Divider(): JSX.Element;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.Divider =
|
6
|
+
exports.Divider = Divider;
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
@@ -11,30 +11,25 @@ var _Box = _interopRequireDefault(require("../Box"));
|
|
11
11
|
|
12
12
|
var _constants = require("../constants");
|
13
13
|
|
14
|
-
var _sx = require("../sx");
|
15
|
-
|
16
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
15
|
|
18
16
|
/**
|
19
17
|
* Visually separates `Item`s or `Group`s in an `ActionList`.
|
20
18
|
*/
|
21
|
-
|
22
|
-
sx = {}
|
23
|
-
}) => {
|
19
|
+
function Divider() {
|
24
20
|
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
25
21
|
as: "li",
|
26
22
|
role: "separator",
|
27
|
-
sx:
|
23
|
+
sx: {
|
28
24
|
height: 1,
|
29
25
|
backgroundColor: 'actionListItem.inlineDivider',
|
30
26
|
marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
|
31
27
|
marginBottom: 2,
|
32
28
|
listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
|
33
29
|
|
34
|
-
},
|
30
|
+
},
|
35
31
|
"data-component": "ActionList.Divider"
|
36
32
|
});
|
37
|
-
}
|
33
|
+
}
|
38
34
|
|
39
|
-
exports.Divider = Divider;
|
40
35
|
Divider.displayName = "Divider";
|
package/lib/ActionList2/Item.js
CHANGED
@@ -21,8 +21,6 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
|
|
21
21
|
|
22
22
|
var _List = require("./List");
|
23
23
|
|
24
|
-
var _MenuContext = require("./MenuContext");
|
25
|
-
|
26
24
|
var _Selection = require("./Selection");
|
27
25
|
|
28
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -84,7 +82,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
84
82
|
onSelect,
|
85
83
|
sx: sxProp = {},
|
86
84
|
id,
|
87
|
-
role,
|
88
85
|
_PrivateItemWrapper,
|
89
86
|
...props
|
90
87
|
}, forwardedRef) => {
|
@@ -93,11 +90,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
93
90
|
showDividers
|
94
91
|
} = _react.default.useContext(_List.ListContext);
|
95
92
|
|
96
|
-
const {
|
97
|
-
itemRole,
|
98
|
-
afterSelect
|
99
|
-
} = _react.default.useContext(_MenuContext.MenuContext);
|
100
|
-
|
101
93
|
const {
|
102
94
|
theme
|
103
95
|
} = (0, _ThemeProvider.useTheme)();
|
@@ -173,24 +165,17 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
173
165
|
const clickHandler = _react.default.useCallback(event => {
|
174
166
|
if (typeof onSelect !== 'function') return;
|
175
167
|
if (disabled) return;
|
176
|
-
|
177
|
-
|
178
|
-
onSelect(event); // if this Item is inside a Menu, close the Menu
|
179
|
-
|
180
|
-
if (typeof afterSelect === 'function') afterSelect();
|
181
|
-
}
|
182
|
-
}, [onSelect, disabled, afterSelect]);
|
168
|
+
if (!event.defaultPrevented) onSelect(event);
|
169
|
+
}, [onSelect, disabled]);
|
183
170
|
|
184
171
|
const keyPressHandler = _react.default.useCallback(event => {
|
185
172
|
if (typeof onSelect !== 'function') return;
|
186
173
|
if (disabled) return;
|
187
174
|
|
188
175
|
if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
|
189
|
-
onSelect(event);
|
190
|
-
|
191
|
-
if (typeof afterSelect === 'function') afterSelect();
|
176
|
+
onSelect(event);
|
192
177
|
}
|
193
|
-
}, [onSelect, disabled
|
178
|
+
}, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
|
194
179
|
|
195
180
|
|
196
181
|
const labelId = (0, _ssr.useSSRSafeId)(id);
|
@@ -213,8 +198,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
|
|
213
198
|
"aria-disabled": disabled ? true : undefined,
|
214
199
|
tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
|
215
200
|
"aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
|
216
|
-
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
217
|
-
role: role || itemRole
|
201
|
+
"aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
|
218
202
|
}, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
|
219
203
|
selected: selected
|
220
204
|
}), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
package/lib/ActionList2/List.js
CHANGED
@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
11
|
|
12
12
|
var _sx = _interopRequireWildcard(require("../sx"));
|
13
13
|
|
14
|
-
var _MenuContext = require("./MenuContext");
|
15
|
-
|
16
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
17
15
|
|
18
16
|
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; }
|
@@ -34,7 +32,6 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
|
|
34
32
|
variant = 'inset',
|
35
33
|
selectionVariant,
|
36
34
|
showDividers = false,
|
37
|
-
role,
|
38
35
|
sx: sxProp = {},
|
39
36
|
...props
|
40
37
|
}, forwardedRef) => {
|
@@ -44,15 +41,8 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
|
|
44
41
|
// reset ul styles
|
45
42
|
paddingY: variant === 'inset' ? 2 : 0
|
46
43
|
};
|
47
|
-
/** if list is inside a Menu, it will get a role from the Menu */
|
48
|
-
|
49
|
-
const {
|
50
|
-
listRole
|
51
|
-
} = _react.default.useContext(_MenuContext.MenuContext);
|
52
|
-
|
53
44
|
return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
|
54
|
-
sx: (0, _sx.merge)(styles, sxProp)
|
55
|
-
role: role || listRole
|
45
|
+
sx: (0, _sx.merge)(styles, sxProp)
|
56
46
|
}, props, {
|
57
47
|
ref: forwardedRef
|
58
48
|
}), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
|
@@ -13,8 +13,6 @@ var _List = require("./List");
|
|
13
13
|
|
14
14
|
var _Group = require("./Group");
|
15
15
|
|
16
|
-
var _MenuContext = require("./MenuContext");
|
17
|
-
|
18
16
|
var _Visuals = require("./Visuals");
|
19
17
|
|
20
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
@@ -29,10 +27,6 @@ const Selection = ({
|
|
29
27
|
const {
|
30
28
|
selectionVariant: groupSelectionVariant
|
31
29
|
} = _react.default.useContext(_Group.GroupContext);
|
32
|
-
|
33
|
-
const {
|
34
|
-
parent
|
35
|
-
} = _react.default.useContext(_MenuContext.MenuContext);
|
36
30
|
/** selectionVariant in Group can override the selectionVariant in List root */
|
37
31
|
|
38
32
|
|
@@ -44,11 +38,6 @@ const Selection = ({
|
|
44
38
|
return null;
|
45
39
|
}
|
46
40
|
|
47
|
-
if (parent === 'ActionMenu') {
|
48
|
-
throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
|
49
|
-
return null;
|
50
|
-
}
|
51
|
-
|
52
41
|
if (selectionVariant === 'single') {
|
53
42
|
return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
|
54
43
|
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import { Divider } from './Divider';
|
2
3
|
export type { ListProps as ActionListProps } from './List';
|
3
4
|
export type { GroupProps } from './Group';
|
4
5
|
export type { ItemProps } from './Item';
|
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
|
|
25
26
|
referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
|
26
27
|
}>;
|
27
28
|
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
28
|
-
Divider:
|
29
|
+
Divider: typeof Divider;
|
29
30
|
/** Secondary text which provides additional information about an `Item`. */
|
30
31
|
Description: import("react").FC<import("./Description").DescriptionProps>;
|
31
32
|
/** Icon (or similar) positioned before `Item` text. */
|
@@ -20,17 +20,11 @@ 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" | "
|
23
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
|
24
24
|
className?: string | undefined;
|
25
25
|
icon?: React.ComponentType<{
|
26
26
|
className?: string | undefined;
|
27
27
|
}> | undefined;
|
28
|
-
leadingVisual?: string | React.ComponentType<{
|
29
|
-
className?: string | undefined;
|
30
|
-
}> | undefined;
|
31
|
-
trailingVisual?: string | React.ComponentType<{
|
32
|
-
className?: string | undefined;
|
33
|
-
}> | undefined;
|
34
28
|
} & Pick<{
|
35
29
|
color?: string | undefined;
|
36
30
|
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
@@ -43,7 +37,6 @@ declare const _default: React.FC<{
|
|
43
37
|
slot?: string | undefined;
|
44
38
|
style?: React.CSSProperties | undefined;
|
45
39
|
title?: string | undefined;
|
46
|
-
size?: "small" | "large" | undefined;
|
47
40
|
block?: boolean | undefined;
|
48
41
|
variant?: "small" | "large" | undefined;
|
49
42
|
role?: React.AriaRole | undefined;
|
@@ -301,10 +294,9 @@ declare const _default: React.FC<{
|
|
301
294
|
disabled?: boolean | undefined;
|
302
295
|
hasIcon?: boolean | undefined;
|
303
296
|
contrast?: boolean | undefined;
|
304
|
-
validationStatus?: "error" | "warning" | undefined;
|
305
297
|
} & {
|
306
298
|
theme?: any;
|
307
|
-
}, "maxWidth" | "minWidth" | "width" | "
|
299
|
+
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
|
308
300
|
as?: React.ComponentType<any> | undefined;
|
309
301
|
}>;
|
310
302
|
Menu: typeof AutocompleteMenu;
|
@@ -12,17 +12,11 @@ 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" | "
|
15
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
|
16
16
|
className?: string | undefined;
|
17
17
|
icon?: React.ComponentType<{
|
18
18
|
className?: string | undefined;
|
19
19
|
}> | undefined;
|
20
|
-
leadingVisual?: string | React.ComponentType<{
|
21
|
-
className?: string | undefined;
|
22
|
-
}> | undefined;
|
23
|
-
trailingVisual?: string | React.ComponentType<{
|
24
|
-
className?: string | undefined;
|
25
|
-
}> | undefined;
|
26
20
|
} & Pick<{
|
27
21
|
color?: string | undefined;
|
28
22
|
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
@@ -35,7 +29,6 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
35
29
|
slot?: string | undefined;
|
36
30
|
style?: React.CSSProperties | undefined;
|
37
31
|
title?: string | undefined;
|
38
|
-
size?: "small" | "large" | undefined;
|
39
32
|
block?: boolean | undefined;
|
40
33
|
variant?: "small" | "large" | undefined;
|
41
34
|
role?: React.AriaRole | undefined;
|
@@ -293,9 +286,8 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
|
|
293
286
|
disabled?: boolean | undefined;
|
294
287
|
hasIcon?: boolean | undefined;
|
295
288
|
contrast?: boolean | undefined;
|
296
|
-
validationStatus?: "error" | "warning" | undefined;
|
297
289
|
} & {
|
298
290
|
theme?: any;
|
299
|
-
}, "maxWidth" | "minWidth" | "width" | "
|
291
|
+
}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
|
300
292
|
export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
|
301
293
|
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> | "
|
28
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
|
29
29
|
export default Checkbox;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
2
|
+
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
3
|
+
import { ButtonProps } from './types';
|
4
|
+
declare const ButtonBase: PolymorphicForwardRefComponent<"a" | "button", ButtonProps>;
|
5
|
+
export declare type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>;
|
6
|
+
export default ButtonBase;
|
@@ -0,0 +1,69 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
11
|
+
|
12
|
+
var _sx = require("../sx");
|
13
|
+
|
14
|
+
var _ThemeProvider = require("../ThemeProvider");
|
15
|
+
|
16
|
+
var _types = require("./types");
|
17
|
+
|
18
|
+
var _styles = require("./styles");
|
19
|
+
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
+
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
23
|
+
|
24
|
+
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; }
|
25
|
+
|
26
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
27
|
+
|
28
|
+
const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
|
29
|
+
children,
|
30
|
+
as: Component = 'button',
|
31
|
+
sx: sxProp = {},
|
32
|
+
...props
|
33
|
+
}, forwardedRef) => {
|
34
|
+
const {
|
35
|
+
leadingIcon: LeadingIcon,
|
36
|
+
trailingIcon: TrailingIcon,
|
37
|
+
variant = 'default',
|
38
|
+
size = 'medium'
|
39
|
+
} = props;
|
40
|
+
const {
|
41
|
+
theme
|
42
|
+
} = (0, _ThemeProvider.useTheme)();
|
43
|
+
const iconWrapStyles = {
|
44
|
+
display: 'inline-block'
|
45
|
+
};
|
46
|
+
|
47
|
+
const sxStyles = _sx.merge.all([(0, _styles.getButtonStyles)(theme), (0, _styles.getSizeStyles)(size, variant, false), (0, _styles.getVariantStyles)(variant, theme), sxProp]);
|
48
|
+
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_types.StyledButton, _extends({
|
50
|
+
as: Component,
|
51
|
+
sx: sxStyles
|
52
|
+
}, props, {
|
53
|
+
ref: forwardedRef
|
54
|
+
}), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
55
|
+
as: "span",
|
56
|
+
"data-component": "leadingIcon",
|
57
|
+
sx: iconWrapStyles
|
58
|
+
}, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
|
59
|
+
"data-component": "text"
|
60
|
+
}, children), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
|
61
|
+
as: "span",
|
62
|
+
"data-component": "trailingIcon",
|
63
|
+
sx: { ...iconWrapStyles,
|
64
|
+
ml: 2
|
65
|
+
}
|
66
|
+
}, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)));
|
67
|
+
});
|
68
|
+
var _default = ButtonBase;
|
69
|
+
exports.default = _default;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
|
3
|
+
declare const LinkButton: PolymorphicForwardRefComponent<"a", Omit<(Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
|
4
|
+
ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
|
5
|
+
}) | (Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
|
6
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
7
|
+
}), string | number | symbol> & {
|
8
|
+
leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
9
|
+
trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
10
|
+
children: React.ReactNode;
|
11
|
+
} & {
|
12
|
+
variant?: import("./types").VariantType | undefined;
|
13
|
+
size?: import("./types").Size | undefined;
|
14
|
+
disabled?: boolean | undefined;
|
15
|
+
} & import("../sx").SxProp & React.HTMLAttributes<HTMLButtonElement> & {
|
16
|
+
[x: string]: any;
|
17
|
+
[x: number]: any;
|
18
|
+
} & {
|
19
|
+
theme?: any;
|
20
|
+
} & {
|
21
|
+
as?: string | React.ComponentType<any> | undefined;
|
22
|
+
forwardedAs?: string | React.ComponentType<any> | undefined;
|
23
|
+
} & {
|
24
|
+
as?: "a" | "button" | undefined;
|
25
|
+
}>;
|
26
|
+
export default LinkButton;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _buttonBase = _interopRequireDefault(require("./button-base"));
|
11
|
+
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
+
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
19
|
+
|
20
|
+
const LinkButton = /*#__PURE__*/(0, _react.forwardRef)(({
|
21
|
+
children,
|
22
|
+
as: Component = 'a',
|
23
|
+
...props
|
24
|
+
}, forwardedRef) => {
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_buttonBase.default, _extends({
|
26
|
+
as: Component,
|
27
|
+
ref: forwardedRef
|
28
|
+
}, props), children);
|
29
|
+
});
|
30
|
+
var _default = LinkButton;
|
31
|
+
exports.default = _default;
|
@@ -1,13 +1,4 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
3
|
-
|
4
|
-
declare const Button: React.ForwardRefExoticComponent<{
|
5
|
-
variant?: VariantType | undefined;
|
6
|
-
size?: import("./types").Size | undefined;
|
7
|
-
icon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
8
|
-
leadingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
9
|
-
trailingIcon?: React.FunctionComponent<import("@primer/octicons-react/dist/icons").IconProps> | undefined;
|
10
|
-
disabled?: boolean | undefined;
|
11
|
-
children: React.ReactNode;
|
12
|
-
} & SxProp & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
2
|
+
import { ButtonProps } from './types';
|
3
|
+
declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
|
13
4
|
export { Button };
|