@primer/components 0.0.0-2021116181214 → 0.0.0-2021116201150
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/dist/browser.esm.js +2 -2
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +2 -2
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/Item.js +6 -4
- package/lib/ActionList2/List.js +2 -2
- package/lib/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
- package/lib/ActionList2/{ActionListContainerContext.js → MenuContext.js} +3 -3
- package/lib/ActionList2/Selection.js +4 -4
- package/lib/ActionMenu2.d.ts +9 -13
- package/lib/ActionMenu2.js +29 -63
- package/lib/Autocomplete/AutocompleteMenu.js +13 -6
- package/lib/Checkbox.d.ts +1 -1
- package/lib/hooks/index.d.ts +0 -1
- package/lib/hooks/index.js +1 -9
- package/lib/index.d.ts +0 -6
- package/lib/index.js +0 -46
- package/lib-esm/ActionList2/Item.js +6 -4
- package/lib-esm/ActionList2/List.js +2 -2
- package/lib-esm/ActionList2/{ActionListContainerContext.d.ts → MenuContext.d.ts} +3 -3
- package/lib-esm/ActionList2/{ActionListContainerContext.js → MenuContext.js} +1 -1
- package/lib-esm/ActionList2/Selection.js +4 -4
- package/lib-esm/ActionMenu2.d.ts +9 -13
- package/lib-esm/ActionMenu2.js +27 -60
- package/lib-esm/Autocomplete/AutocompleteMenu.js +13 -3
- package/lib-esm/Checkbox.d.ts +1 -1
- package/lib-esm/hooks/index.d.ts +0 -1
- package/lib-esm/hooks/index.js +1 -2
- package/lib-esm/index.d.ts +0 -6
- package/lib-esm/index.js +0 -5
- package/package.json +2 -2
- package/lib/CheckboxInputField.d.ts +0 -11
- package/lib/CheckboxInputField.js +0 -73
- package/lib/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldCaption.js +0 -35
- package/lib/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldLabel.js +0 -35
- package/lib/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
- package/lib/ChoiceFieldset/ChoiceFieldset.js +0 -95
- package/lib/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
- package/lib/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -29
- package/lib/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
- package/lib/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -44
- package/lib/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
- package/lib/ChoiceFieldset/ChoiceFieldsetList.js +0 -69
- package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
- package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -15
- package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
- package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -75
- package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
- package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -17
- package/lib/ChoiceFieldset/index.d.ts +0 -3
- package/lib/ChoiceFieldset/index.js +0 -23
- package/lib/Radio.d.ts +0 -38
- package/lib/Radio.js +0 -55
- package/lib/RadioInputField.d.ts +0 -10
- package/lib/RadioInputField.js +0 -74
- package/lib/TextInputField.d.ts +0 -583
- package/lib/TextInputField.js +0 -66
- package/lib/_InputCaption.d.ts +0 -13
- package/lib/_InputCaption.js +0 -27
- package/lib/_InputField/InputField.d.ts +0 -39
- package/lib/_InputField/InputField.js +0 -90
- package/lib/_InputField/InputFieldCaption.d.ts +0 -3
- package/lib/_InputField/InputFieldCaption.js +0 -30
- package/lib/_InputField/InputFieldLabel.d.ts +0 -9
- package/lib/_InputField/InputFieldLabel.js +0 -34
- package/lib/_InputField/InputFieldValidation.d.ts +0 -6
- package/lib/_InputField/InputFieldValidation.js +0 -17
- package/lib/_InputField/ToggleInputField.d.ts +0 -13
- package/lib/_InputField/ToggleInputField.js +0 -71
- package/lib/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
- package/lib/_InputField/ToggleInputLeadingVisual.js +0 -22
- package/lib/_InputField/ValidationAnimationContainer.d.ts +0 -6
- package/lib/_InputField/ValidationAnimationContainer.js +0 -48
- package/lib/_InputField/index.d.ts +0 -1
- package/lib/_InputField/index.js +0 -15
- package/lib/_InputField/slots.d.ts +0 -13
- package/lib/_InputField/slots.js +0 -17
- package/lib/_InputLabel.d.ts +0 -8
- package/lib/_InputLabel.js +0 -44
- package/lib/_InputValidation.d.ts +0 -8
- package/lib/_InputValidation.js +0 -56
- package/lib/_VisuallyHidden.d.ts +0 -6
- package/lib/_VisuallyHidden.js +0 -39
- package/lib/utils/types/FormValidationStatus.d.ts +0 -1
- package/lib/utils/types/FormValidationStatus.js +0 -1
- package/lib-esm/CheckboxInputField.d.ts +0 -11
- package/lib-esm/CheckboxInputField.js +0 -56
- package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldCaption.js +0 -20
- package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldLabel.js +0 -20
- package/lib-esm/ChoiceFieldset/ChoiceFieldset.d.ts +0 -65
- package/lib-esm/ChoiceFieldset/ChoiceFieldset.js +0 -72
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetDescription.js +0 -17
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.d.ts +0 -9
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetLegend.js +0 -31
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.d.ts +0 -9
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetList.js +0 -52
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.d.ts +0 -19
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListContext.js +0 -5
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.d.ts +0 -25
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetListItem.js +0 -51
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.d.ts +0 -6
- package/lib-esm/ChoiceFieldset/ChoiceFieldsetValidation.js +0 -7
- package/lib-esm/ChoiceFieldset/index.d.ts +0 -3
- package/lib-esm/ChoiceFieldset/index.js +0 -2
- package/lib-esm/Radio.d.ts +0 -38
- package/lib-esm/Radio.js +0 -40
- package/lib-esm/RadioInputField.d.ts +0 -10
- package/lib-esm/RadioInputField.js +0 -56
- package/lib-esm/TextInputField.d.ts +0 -583
- package/lib-esm/TextInputField.js +0 -50
- package/lib-esm/_InputCaption.d.ts +0 -13
- package/lib-esm/_InputCaption.js +0 -16
- package/lib-esm/_InputField/InputField.d.ts +0 -39
- package/lib-esm/_InputField/InputField.js +0 -70
- package/lib-esm/_InputField/InputFieldCaption.d.ts +0 -3
- package/lib-esm/_InputField/InputFieldCaption.js +0 -18
- package/lib-esm/_InputField/InputFieldLabel.d.ts +0 -9
- package/lib-esm/_InputField/InputFieldLabel.js +0 -22
- package/lib-esm/_InputField/InputFieldValidation.d.ts +0 -6
- package/lib-esm/_InputField/InputFieldValidation.js +0 -7
- package/lib-esm/_InputField/ToggleInputField.d.ts +0 -13
- package/lib-esm/_InputField/ToggleInputField.js +0 -54
- package/lib-esm/_InputField/ToggleInputLeadingVisual.d.ts +0 -3
- package/lib-esm/_InputField/ToggleInputLeadingVisual.js +0 -11
- package/lib-esm/_InputField/ValidationAnimationContainer.d.ts +0 -6
- package/lib-esm/_InputField/ValidationAnimationContainer.js +0 -33
- package/lib-esm/_InputField/index.d.ts +0 -1
- package/lib-esm/_InputField/index.js +0 -1
- package/lib-esm/_InputField/slots.d.ts +0 -13
- package/lib-esm/_InputField/slots.js +0 -5
- package/lib-esm/_InputLabel.d.ts +0 -8
- package/lib-esm/_InputLabel.js +0 -32
- package/lib-esm/_InputValidation.d.ts +0 -8
- package/lib-esm/_InputValidation.js +0 -43
- package/lib-esm/_VisuallyHidden.d.ts +0 -6
- package/lib-esm/_VisuallyHidden.js +0 -26
- package/lib-esm/utils/types/FormValidationStatus.d.ts +0 -1
- package/lib-esm/utils/types/FormValidationStatus.js +0 -1
package/lib-esm/ActionMenu2.d.ts
CHANGED
@@ -1,12 +1,10 @@
|
|
1
1
|
import { ButtonProps } from './Button';
|
2
2
|
import React from 'react';
|
3
|
-
import { AnchoredOverlayProps } from './AnchoredOverlay';
|
4
3
|
import { OverlayProps } from './Overlay';
|
5
|
-
|
6
|
-
|
7
|
-
export declare type ActionMenuProps = {
|
4
|
+
import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
|
5
|
+
declare type ActionMenuBaseProps = {
|
8
6
|
/**
|
9
|
-
* Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `
|
7
|
+
* Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
|
10
8
|
*/
|
11
9
|
children: React.ReactElement[] | React.ReactElement;
|
12
10
|
/**
|
@@ -17,18 +15,17 @@ export declare type ActionMenuProps = {
|
|
17
15
|
* If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
|
18
16
|
*/
|
19
17
|
onOpenChange?: (s: boolean) => void;
|
20
|
-
|
18
|
+
/**
|
19
|
+
* Props to be spread on the internal `Overlay` component.
|
20
|
+
*/
|
21
|
+
overlayProps?: Partial<OverlayProps>;
|
22
|
+
};
|
23
|
+
export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
|
21
24
|
export declare type MenuAnchorProps = {
|
22
25
|
children: React.ReactElement;
|
23
26
|
};
|
24
27
|
/** this component is syntactical sugar 🍭 */
|
25
28
|
export declare type MenuButtonProps = ButtonProps;
|
26
|
-
declare type MenuOverlayProps = Partial<OverlayProps> & {
|
27
|
-
/**
|
28
|
-
* Recommended: `ActionList`
|
29
|
-
*/
|
30
|
-
children: React.ReactElement[] | React.ReactElement;
|
31
|
-
};
|
32
29
|
export declare const ActionMenu: React.FC<ActionMenuProps> & {
|
33
30
|
Button: React.ForwardRefExoticComponent<Pick<{
|
34
31
|
color?: string | undefined;
|
@@ -311,7 +308,6 @@ export declare const ActionMenu: React.FC<ActionMenuProps> & {
|
|
311
308
|
variant?: "small" | "medium" | "large" | undefined;
|
312
309
|
}> & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
|
313
310
|
Anchor: React.ForwardRefExoticComponent<MenuAnchorProps & React.RefAttributes<React.RefObject<HTMLElement> | undefined>>;
|
314
|
-
Overlay: React.FC<MenuOverlayProps>;
|
315
311
|
Divider: React.FC<import("./sx").SxProp>;
|
316
312
|
};
|
317
313
|
export {};
|
package/lib-esm/ActionMenu2.js
CHANGED
@@ -1,49 +1,49 @@
|
|
1
1
|
import Button from './Button';
|
2
2
|
import React from 'react';
|
3
3
|
import { AnchoredOverlay } from './AnchoredOverlay';
|
4
|
-
import {
|
4
|
+
import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
|
5
|
+
import { useProvidedRefOrCreate } from './hooks';
|
5
6
|
import { Divider } from './ActionList2/Divider';
|
6
|
-
import {
|
7
|
-
export const MenuContext = /*#__PURE__*/React.createContext({
|
8
|
-
renderAnchor: null,
|
9
|
-
open: false
|
10
|
-
});
|
7
|
+
import { MenuContext as ActionListMenuContext } from './ActionList2/MenuContext';
|
11
8
|
|
12
|
-
const
|
9
|
+
const ActionMenuBase = ({
|
13
10
|
anchorRef: externalAnchorRef,
|
14
11
|
open,
|
15
12
|
onOpenChange,
|
13
|
+
overlayProps,
|
16
14
|
children
|
17
15
|
}) => {
|
18
16
|
const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
|
17
|
+
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
|
19
18
|
const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
|
20
19
|
const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
// with additional props for accessibility
|
25
|
-
|
26
|
-
const contents = React.Children.map(children, child => {
|
20
|
+
let renderAnchor = null;
|
21
|
+
const contents = [];
|
22
|
+
React.Children.map(children, child => {
|
27
23
|
if (child.type === MenuButton || child.type === Anchor) {
|
28
24
|
renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
|
29
|
-
|
30
|
-
|
25
|
+
} else {
|
26
|
+
contents.push(child);
|
31
27
|
}
|
32
|
-
|
33
|
-
return child;
|
34
28
|
});
|
35
|
-
return /*#__PURE__*/React.createElement(
|
29
|
+
return /*#__PURE__*/React.createElement(AnchoredOverlay, {
|
30
|
+
renderAnchor: renderAnchor,
|
31
|
+
anchorRef: anchorRef,
|
32
|
+
open: combinedOpenState,
|
33
|
+
onOpen: onOpen,
|
34
|
+
onClose: onClose,
|
35
|
+
overlayProps: overlayProps
|
36
|
+
}, /*#__PURE__*/React.createElement(ActionListMenuContext.Provider, {
|
36
37
|
value: {
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
onClose
|
38
|
+
parent: 'ActionMenu',
|
39
|
+
listRole: 'menu',
|
40
|
+
itemRole: 'menuitem',
|
41
|
+
afterSelect: onClose
|
42
42
|
}
|
43
|
-
}, contents);
|
43
|
+
}, contents));
|
44
44
|
};
|
45
45
|
|
46
|
-
|
46
|
+
ActionMenuBase.displayName = "ActionMenuBase";
|
47
47
|
const Anchor = /*#__PURE__*/React.forwardRef(({
|
48
48
|
children,
|
49
49
|
...anchorProps
|
@@ -59,42 +59,9 @@ const MenuButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
|
|
59
59
|
ref: anchorRef
|
60
60
|
}, /*#__PURE__*/React.createElement(Button, props));
|
61
61
|
});
|
62
|
-
|
63
|
-
const
|
64
|
-
children,
|
65
|
-
...overlayProps
|
66
|
-
}) => {
|
67
|
-
// we typecast anchorRef as required instead of optional
|
68
|
-
// because we know that we're setting it in context in Menu
|
69
|
-
const {
|
70
|
-
anchorRef,
|
71
|
-
renderAnchor,
|
72
|
-
open,
|
73
|
-
onOpen,
|
74
|
-
onClose
|
75
|
-
} = React.useContext(MenuContext);
|
76
|
-
return /*#__PURE__*/React.createElement(AnchoredOverlay, {
|
77
|
-
anchorRef: anchorRef,
|
78
|
-
renderAnchor: renderAnchor,
|
79
|
-
open: open,
|
80
|
-
onOpen: onOpen,
|
81
|
-
onClose: onClose,
|
82
|
-
overlayProps: overlayProps
|
83
|
-
}, /*#__PURE__*/React.createElement(ActionListContainerContext.Provider, {
|
84
|
-
value: {
|
85
|
-
container: 'ActionMenu',
|
86
|
-
listRole: 'menu',
|
87
|
-
itemRole: 'menuitem',
|
88
|
-
afterSelect: onClose
|
89
|
-
}
|
90
|
-
}, children));
|
91
|
-
};
|
92
|
-
|
93
|
-
Overlay.displayName = "Overlay";
|
94
|
-
Menu.displayName = 'ActionMenu';
|
95
|
-
export const ActionMenu = Object.assign(Menu, {
|
62
|
+
ActionMenuBase.displayName = 'ActionMenu';
|
63
|
+
export const ActionMenu = Object.assign(ActionMenuBase, {
|
96
64
|
Button: MenuButton,
|
97
65
|
Anchor,
|
98
|
-
Overlay,
|
99
66
|
Divider
|
100
67
|
});
|
@@ -6,7 +6,6 @@ import { AutocompleteContext } from './AutocompleteContext';
|
|
6
6
|
import { PlusIcon } from '@primer/octicons-react';
|
7
7
|
import { uniqueId } from '../utils/uniqueId';
|
8
8
|
import { scrollIntoViewingArea } from '../behaviors/scrollIntoViewingArea';
|
9
|
-
import VisuallyHidden from '../_VisuallyHidden';
|
10
9
|
|
11
10
|
const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
|
12
11
|
|
@@ -165,8 +164,19 @@ function AutocompleteMenu(props) {
|
|
165
164
|
setSelectedItemLength(selectedItemIds.length);
|
166
165
|
}
|
167
166
|
}, [selectedItemIds, setSelectedItemLength]);
|
168
|
-
return /*#__PURE__*/React.createElement(
|
169
|
-
|
167
|
+
return /*#__PURE__*/React.createElement(Box, {
|
168
|
+
sx: !showMenu ? {
|
169
|
+
// visually hides this label for sighted users
|
170
|
+
position: 'absolute',
|
171
|
+
width: '1px',
|
172
|
+
height: '1px',
|
173
|
+
padding: '0',
|
174
|
+
margin: '-1px',
|
175
|
+
overflow: 'hidden',
|
176
|
+
clip: 'rect(0, 0, 0, 0)',
|
177
|
+
whiteSpace: 'nowrap',
|
178
|
+
borderWidth: '0'
|
179
|
+
} : {}
|
170
180
|
}, loading ? /*#__PURE__*/React.createElement(Box, {
|
171
181
|
p: 3,
|
172
182
|
display: "flex",
|
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> | "
|
28
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
|
29
29
|
export default Checkbox;
|
package/lib-esm/hooks/index.d.ts
CHANGED
@@ -9,4 +9,3 @@ export { useAnchoredPosition } from './useAnchoredPosition';
|
|
9
9
|
export { useOverlay } from './useOverlay';
|
10
10
|
export type { UseOverlaySettings } from './useOverlay';
|
11
11
|
export { useRenderForcingRef } from './useRenderForcingRef';
|
12
|
-
export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
|
package/lib-esm/hooks/index.js
CHANGED
@@ -4,5 +4,4 @@ export { useOnEscapePress } from './useOnEscapePress';
|
|
4
4
|
export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
|
5
5
|
export { useAnchoredPosition } from './useAnchoredPosition';
|
6
6
|
export { useOverlay } from './useOverlay';
|
7
|
-
export { useRenderForcingRef } from './useRenderForcingRef';
|
8
|
-
export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
|
7
|
+
export { useRenderForcingRef } from './useRenderForcingRef';
|
package/lib-esm/index.d.ts
CHANGED
@@ -21,8 +21,6 @@ export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
|
|
21
21
|
export { useOnEscapePress } from './hooks/useOnEscapePress';
|
22
22
|
export { useOverlay } from './hooks/useOverlay';
|
23
23
|
export { useConfirm } from './Dialog/ConfirmationDialog';
|
24
|
-
export { default as Radio } from './Radio';
|
25
|
-
export type { RadioProps } from './Radio';
|
26
24
|
export { ActionList } from './ActionList';
|
27
25
|
export { ActionMenu } from './ActionMenu';
|
28
26
|
export type { ActionMenuProps } from './ActionMenu';
|
@@ -48,8 +46,6 @@ export { default as CircleBadge } from './CircleBadge';
|
|
48
46
|
export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
|
49
47
|
export { default as CircleOcticon } from './CircleOcticon';
|
50
48
|
export type { CircleOcticonProps } from './CircleOcticon';
|
51
|
-
export { default as CheckboxInputField } from './CheckboxInputField';
|
52
|
-
export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
|
53
49
|
export { default as CounterLabel } from './CounterLabel';
|
54
50
|
export type { CounterLabelProps } from './CounterLabel';
|
55
51
|
export { default as Details } from './Details';
|
@@ -90,7 +86,6 @@ export { default as Popover } from './Popover';
|
|
90
86
|
export type { PopoverProps, PopoverContentProps } from './Popover';
|
91
87
|
export { default as ProgressBar } from './ProgressBar';
|
92
88
|
export type { ProgressBarProps } from './ProgressBar';
|
93
|
-
export { default as RadioInputField } from './RadioInputField';
|
94
89
|
export { default as SelectMenu } from './SelectMenu';
|
95
90
|
export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
|
96
91
|
export { default as SideNav } from './SideNav';
|
@@ -107,7 +102,6 @@ export { default as TabNav } from './TabNav';
|
|
107
102
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
108
103
|
export { default as TextInput } from './TextInput';
|
109
104
|
export type { TextInputProps } from './TextInput';
|
110
|
-
export { default as TextInputField } from './TextInputField';
|
111
105
|
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
112
106
|
export type { TextInputWithTokensProps } from './TextInputWithTokens';
|
113
107
|
export { default as Text } from './Text';
|
package/lib-esm/index.js
CHANGED
@@ -17,7 +17,6 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
|
|
17
17
|
export { useOverlay } from './hooks/useOverlay';
|
18
18
|
export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
|
19
19
|
|
20
|
-
export { default as Radio } from './Radio';
|
21
20
|
export { ActionList } from './ActionList';
|
22
21
|
export { ActionMenu } from './ActionMenu';
|
23
22
|
export { default as Autocomplete } from './Autocomplete';
|
@@ -31,8 +30,6 @@ export { NewButton } from './NewButton';
|
|
31
30
|
export { default as Caret } from './Caret';
|
32
31
|
export { default as CircleBadge } from './CircleBadge';
|
33
32
|
export { default as CircleOcticon } from './CircleOcticon';
|
34
|
-
export { default as CheckboxInputField } from './CheckboxInputField';
|
35
|
-
export { default as ChoiceFieldset, Item } from './ChoiceFieldset';
|
36
33
|
export { default as CounterLabel } from './CounterLabel';
|
37
34
|
export { default as Details } from './Details';
|
38
35
|
export { default as Dialog } from './Dialog';
|
@@ -58,7 +55,6 @@ export { default as Popover } from './Popover';
|
|
58
55
|
// export {default as Portal, registerPortalRoot} from './Portal'
|
59
56
|
// export type {PortalProps} from './Portal'
|
60
57
|
export { default as ProgressBar } from './ProgressBar';
|
61
|
-
export { default as RadioInputField } from './RadioInputField';
|
62
58
|
export { default as SelectMenu } from './SelectMenu';
|
63
59
|
export { default as SideNav } from './SideNav';
|
64
60
|
export { default as Spinner } from './Spinner';
|
@@ -67,7 +63,6 @@ export { default as StyledOcticon } from './StyledOcticon';
|
|
67
63
|
export { default as SubNav } from './SubNav';
|
68
64
|
export { default as TabNav } from './TabNav';
|
69
65
|
export { default as TextInput } from './TextInput';
|
70
|
-
export { default as TextInputField } from './TextInputField';
|
71
66
|
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
72
67
|
export { default as Text } from './Text';
|
73
68
|
export { default as Timeline } from './Timeline';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/components",
|
3
|
-
"version": "0.0.0-
|
3
|
+
"version": "0.0.0-2021116201150",
|
4
4
|
"description": "Primer react components",
|
5
5
|
"main": "lib/index.js",
|
6
6
|
"module": "lib-esm/index.js",
|
@@ -43,7 +43,7 @@
|
|
43
43
|
"author": "GitHub, Inc.",
|
44
44
|
"license": "MIT",
|
45
45
|
"dependencies": {
|
46
|
-
"@primer/octicons-react": "16.1.
|
46
|
+
"@primer/octicons-react": "^16.1.0",
|
47
47
|
"@primer/primitives": "7.1.1",
|
48
48
|
"@radix-ui/react-polymorphic": "0.0.14",
|
49
49
|
"@react-aria/ssr": "3.1.0",
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ToggleInputFieldProps } from './_InputField/ToggleInputField';
|
3
|
-
declare const _default: React.FC<ToggleInputFieldProps> & {
|
4
|
-
Input: React.FC<React.HTMLProps<HTMLInputElement> & {
|
5
|
-
ref?: React.Ref<HTMLInputElement> | undefined;
|
6
|
-
}>;
|
7
|
-
Caption: React.FC<{}>;
|
8
|
-
Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
|
9
|
-
LeadingVisual: React.FC<{}>;
|
10
|
-
};
|
11
|
-
export default _default;
|
@@ -1,73 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
var _ = require(".");
|
11
|
-
|
12
|
-
var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
|
13
|
-
|
14
|
-
var _slots = require("./_InputField/slots");
|
15
|
-
|
16
|
-
var _ToggleInputField = _interopRequireDefault(require("./_InputField/ToggleInputField"));
|
17
|
-
|
18
|
-
var _ToggleInputLeadingVisual = _interopRequireDefault(require("./_InputField/ToggleInputLeadingVisual"));
|
19
|
-
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
|
-
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); }
|
23
|
-
|
24
|
-
const Input = ({
|
25
|
-
id: idProp,
|
26
|
-
required: requiredProp,
|
27
|
-
disabled: disabledProp,
|
28
|
-
...rest
|
29
|
-
}) => {
|
30
|
-
if (idProp) {
|
31
|
-
// eslint-disable-next-line no-console
|
32
|
-
console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
33
|
-
}
|
34
|
-
|
35
|
-
if (disabledProp) {
|
36
|
-
// eslint-disable-next-line no-console
|
37
|
-
console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
38
|
-
}
|
39
|
-
|
40
|
-
if (requiredProp) {
|
41
|
-
// eslint-disable-next-line no-console
|
42
|
-
console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
|
43
|
-
}
|
44
|
-
|
45
|
-
return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
|
46
|
-
name: "Input"
|
47
|
-
}, ({
|
48
|
-
disabled,
|
49
|
-
id,
|
50
|
-
required,
|
51
|
-
captionId
|
52
|
-
}) => /*#__PURE__*/_react.default.createElement(_.Checkbox, _extends({
|
53
|
-
"aria-describedby": captionId,
|
54
|
-
id: id,
|
55
|
-
required: required,
|
56
|
-
disabled: disabled
|
57
|
-
}, rest)));
|
58
|
-
};
|
59
|
-
|
60
|
-
Input.displayName = "Input";
|
61
|
-
|
62
|
-
const CheckboxInputField = props => /*#__PURE__*/_react.default.createElement(_ToggleInputField.default, props);
|
63
|
-
|
64
|
-
CheckboxInputField.displayName = "CheckboxInputField";
|
65
|
-
|
66
|
-
var _default = Object.assign(CheckboxInputField, {
|
67
|
-
Input,
|
68
|
-
Caption: _InputField.default.Caption,
|
69
|
-
Label: _InputField.default.Label,
|
70
|
-
LeadingVisual: _ToggleInputLeadingVisual.default
|
71
|
-
});
|
72
|
-
|
73
|
-
exports.default = _default;
|
@@ -1,35 +0,0 @@
|
|
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 _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
|
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
|
-
const ChoiceFieldCaption = ({
|
19
|
-
children
|
20
|
-
}) => {
|
21
|
-
const choiceFieldsetListContext = (0, _react.useContext)(_ChoiceFieldsetListContext.default);
|
22
|
-
|
23
|
-
if (choiceFieldsetListContext === null) {
|
24
|
-
throw new Error('ChoiceFieldsetListContext returned null');
|
25
|
-
}
|
26
|
-
|
27
|
-
const {
|
28
|
-
fieldComponent: FieldComponent
|
29
|
-
} = choiceFieldsetListContext;
|
30
|
-
return /*#__PURE__*/_react.default.createElement(FieldComponent.Caption, null, children);
|
31
|
-
};
|
32
|
-
|
33
|
-
ChoiceFieldCaption.displayName = "ChoiceFieldCaption";
|
34
|
-
var _default = ChoiceFieldCaption;
|
35
|
-
exports.default = _default;
|
@@ -1,35 +0,0 @@
|
|
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 _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
|
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
|
-
const ChoiceFieldLabel = ({
|
19
|
-
children
|
20
|
-
}) => {
|
21
|
-
const choiceFieldsetListContext = (0, _react.useContext)(_ChoiceFieldsetListContext.default);
|
22
|
-
|
23
|
-
if (choiceFieldsetListContext === null) {
|
24
|
-
throw new Error('ChoiceFieldsetListContext returned null');
|
25
|
-
}
|
26
|
-
|
27
|
-
const {
|
28
|
-
fieldComponent: FieldComponent
|
29
|
-
} = choiceFieldsetListContext;
|
30
|
-
return /*#__PURE__*/_react.default.createElement(FieldComponent.Label, null, children);
|
31
|
-
};
|
32
|
-
|
33
|
-
ChoiceFieldLabel.displayName = "ChoiceFieldLabel";
|
34
|
-
var _default = ChoiceFieldLabel;
|
35
|
-
exports.default = _default;
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import React, { ComponentProps } from 'react';
|
2
|
-
import { FormValidationStatus } from '../utils/types/FormValidationStatus';
|
3
|
-
export interface ChoiceFieldsetProps<T = Record<string, FormValidationStatus>> {
|
4
|
-
children?: React.ReactNode;
|
5
|
-
/**
|
6
|
-
* Whether the fieldset is NOT ready for user input
|
7
|
-
*/
|
8
|
-
disabled?: boolean;
|
9
|
-
/**
|
10
|
-
* The unique identifier for this fieldset. Used to associate the validation text with the fieldset
|
11
|
-
* If an ID is not passed, one will be automatically generated
|
12
|
-
*/
|
13
|
-
id?: string;
|
14
|
-
/**
|
15
|
-
* The unique identifier used to associate radio inputs with eachother
|
16
|
-
* If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated
|
17
|
-
*/
|
18
|
-
name?: string;
|
19
|
-
/**
|
20
|
-
* The callback that is called when a user toggles a choice on or off
|
21
|
-
*/
|
22
|
-
onSelect?: (selectedValues: string[]) => void;
|
23
|
-
/**
|
24
|
-
* Whether this field must have a value for the user to complete their task
|
25
|
-
*/
|
26
|
-
required?: boolean;
|
27
|
-
/**
|
28
|
-
* The selected values
|
29
|
-
*/
|
30
|
-
selected?: string[];
|
31
|
-
/**
|
32
|
-
* A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop,
|
33
|
-
* the associated validation message will be rendered in the correct style
|
34
|
-
*/
|
35
|
-
validationMap?: T;
|
36
|
-
/**
|
37
|
-
* The key of the validation message to show
|
38
|
-
*/
|
39
|
-
validationResult?: keyof T;
|
40
|
-
}
|
41
|
-
export interface ChoiceFieldsetContext extends ChoiceFieldsetProps {
|
42
|
-
validationMessageId: string;
|
43
|
-
}
|
44
|
-
declare const Slot: React.FC<{
|
45
|
-
name: "Description" | "ChoiceList" | "Legend" | "Validation";
|
46
|
-
children: React.ReactNode;
|
47
|
-
}>;
|
48
|
-
export { Slot };
|
49
|
-
declare const ChoiceFieldset: <T extends Record<string, FormValidationStatus>>({ children, disabled, id, name, onSelect, required, selected, validationMap, validationResult }: ChoiceFieldsetProps<T>) => JSX.Element;
|
50
|
-
export declare type InputFieldComponentProps = ComponentProps<typeof ChoiceFieldset>;
|
51
|
-
export type { ChoiceFieldsetListProps } from './ChoiceFieldsetList';
|
52
|
-
export type { ChoiceFieldsetLegendProps } from './ChoiceFieldsetLegend';
|
53
|
-
export type { ChoiceFieldProps } from './ChoiceFieldsetListItem';
|
54
|
-
declare const _default: (<T extends Record<string, FormValidationStatus>>({ children, disabled, id, name, onSelect, required, selected, validationMap, validationResult }: ChoiceFieldsetProps<T>) => JSX.Element) & {
|
55
|
-
Description: React.FC<{}>;
|
56
|
-
Item: React.FC<import("./ChoiceFieldsetListItem").ChoiceFieldProps> & {
|
57
|
-
Caption: React.FC<{}>;
|
58
|
-
Label: React.FC<{}>;
|
59
|
-
LeadingVisual: React.FC<{}>;
|
60
|
-
};
|
61
|
-
Legend: React.FC<import("./ChoiceFieldsetLegend").ChoiceFieldsetLegendProps>;
|
62
|
-
List: React.FC<import("./ChoiceFieldsetList").ChoiceFieldsetListProps>;
|
63
|
-
Validation: React.FC<import("./ChoiceFieldsetValidation").ChoiceFieldsetValidationProps>;
|
64
|
-
};
|
65
|
-
export default _default;
|
@@ -1,95 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = exports.Slot = void 0;
|
7
|
-
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
|
-
var _ = require("..");
|
11
|
-
|
12
|
-
var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
|
13
|
-
|
14
|
-
var _uniqueId = require("../utils/uniqueId");
|
15
|
-
|
16
|
-
var _ValidationAnimationContainer = _interopRequireDefault(require("../_InputField/ValidationAnimationContainer"));
|
17
|
-
|
18
|
-
var _InputValidation = _interopRequireDefault(require("../_InputValidation"));
|
19
|
-
|
20
|
-
var _ChoiceFieldsetListItem = _interopRequireDefault(require("./ChoiceFieldsetListItem"));
|
21
|
-
|
22
|
-
var _ChoiceFieldsetDescription = _interopRequireDefault(require("./ChoiceFieldsetDescription"));
|
23
|
-
|
24
|
-
var _ChoiceFieldsetLegend = _interopRequireDefault(require("./ChoiceFieldsetLegend"));
|
25
|
-
|
26
|
-
var _ChoiceFieldsetList = _interopRequireDefault(require("./ChoiceFieldsetList"));
|
27
|
-
|
28
|
-
var _ChoiceFieldsetValidation = _interopRequireDefault(require("./ChoiceFieldsetValidation"));
|
29
|
-
|
30
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
31
|
-
|
32
|
-
const {
|
33
|
-
Slots,
|
34
|
-
Slot
|
35
|
-
} = (0, _createSlots.default)(['Description', 'ChoiceList', 'Legend', 'Validation']);
|
36
|
-
exports.Slot = Slot;
|
37
|
-
|
38
|
-
const ChoiceFieldset = ({
|
39
|
-
children,
|
40
|
-
disabled,
|
41
|
-
id,
|
42
|
-
name,
|
43
|
-
onSelect,
|
44
|
-
required,
|
45
|
-
selected,
|
46
|
-
validationMap,
|
47
|
-
validationResult
|
48
|
-
}) => {
|
49
|
-
var _React$Children$map;
|
50
|
-
|
51
|
-
const fieldsetId = id || (0, _uniqueId.uniqueId)();
|
52
|
-
const validationChildren = (_React$Children$map = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child.type === _ChoiceFieldsetValidation.default ? child : null)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(Boolean);
|
53
|
-
const validationChildToRender = validationChildren === null || validationChildren === void 0 ? void 0 : validationChildren.find(child => child.props.validationKey === validationResult);
|
54
|
-
const validationMessageId = validationChildToRender ? `${fieldsetId}-validationMsg` : undefined;
|
55
|
-
return /*#__PURE__*/_react.default.createElement(Slots, {
|
56
|
-
context: {
|
57
|
-
disabled,
|
58
|
-
name,
|
59
|
-
onSelect,
|
60
|
-
required,
|
61
|
-
selected,
|
62
|
-
validationMessageId
|
63
|
-
}
|
64
|
-
}, slots => {
|
65
|
-
const isLegendVisible = /*#__PURE__*/_react.default.isValidElement(slots.Legend) && slots.Legend.props.isVisible;
|
66
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
|
67
|
-
as: "fieldset",
|
68
|
-
border: "none",
|
69
|
-
margin: 0,
|
70
|
-
padding: 0,
|
71
|
-
"aria-describedby": [validationMessageId].filter(Boolean).join(' ')
|
72
|
-
}, _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type !== _ChoiceFieldsetValidation.default), /*#__PURE__*/_react.default.createElement(_.Box, {
|
73
|
-
mb: isLegendVisible ? 3 : undefined
|
74
|
-
}, slots.Legend, slots.Description), slots.ChoiceList), validationChildToRender && /*#__PURE__*/_react.default.createElement(_.Box, {
|
75
|
-
mt: 3
|
76
|
-
}, validationMap && validationResult && validationMessageId && /*#__PURE__*/_react.default.createElement(_ValidationAnimationContainer.default, {
|
77
|
-
show: true
|
78
|
-
}, /*#__PURE__*/_react.default.createElement(_InputValidation.default, {
|
79
|
-
validationStatus: validationMap[validationResult],
|
80
|
-
id: validationMessageId
|
81
|
-
}, validationChildToRender))));
|
82
|
-
});
|
83
|
-
};
|
84
|
-
|
85
|
-
ChoiceFieldset.displayName = "ChoiceFieldset";
|
86
|
-
|
87
|
-
var _default = Object.assign(ChoiceFieldset, {
|
88
|
-
Description: _ChoiceFieldsetDescription.default,
|
89
|
-
Item: _ChoiceFieldsetListItem.default,
|
90
|
-
Legend: _ChoiceFieldsetLegend.default,
|
91
|
-
List: _ChoiceFieldsetList.default,
|
92
|
-
Validation: _ChoiceFieldsetValidation.default
|
93
|
-
});
|
94
|
-
|
95
|
-
exports.default = _default;
|