@primer/components 0.0.0-2021926103714 → 0.0.0-202192613168
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 +14 -4
- package/dist/browser.esm.js +610 -610
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +176 -176
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.d.ts +6 -0
- package/lib/ActionList/Item.js +5 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -8
- package/lib/sx.d.ts +0 -2
- package/lib/sx.js +0 -8
- package/lib-esm/ActionList/Item.d.ts +6 -0
- package/lib-esm/ActionList/Item.js +5 -1
- package/lib-esm/index.d.ts +0 -1
- package/lib-esm/index.js +0 -1
- package/lib-esm/sx.d.ts +0 -2
- package/lib-esm/sx.js +1 -3
- package/package.json +6 -6
- package/lib/ActionList2/Description.d.ts +0 -6
- package/lib/ActionList2/Description.js +0 -53
- package/lib/ActionList2/Divider.d.ts +0 -8
- package/lib/ActionList2/Divider.js +0 -42
- package/lib/ActionList2/Group.d.ts +0 -8
- package/lib/ActionList2/Group.js +0 -39
- package/lib/ActionList2/Header.d.ts +0 -26
- package/lib/ActionList2/Header.js +0 -55
- package/lib/ActionList2/Item.d.ts +0 -49
- package/lib/ActionList2/Item.js +0 -190
- package/lib/ActionList2/List.d.ts +0 -11
- package/lib/ActionList2/List.js +0 -53
- package/lib/ActionList2/Selection.d.ts +0 -5
- package/lib/ActionList2/Selection.js +0 -67
- package/lib/ActionList2/Visuals.d.ts +0 -11
- package/lib/ActionList2/Visuals.js +0 -90
- package/lib/ActionList2/hacks.d.ts +0 -30
- package/lib/ActionList2/hacks.js +0 -38
- package/lib/ActionList2/index.d.ts +0 -26
- package/lib/ActionList2/index.js +0 -36
- package/lib/utils/create-slots.d.ts +0 -17
- package/lib/utils/create-slots.js +0 -105
- package/lib/utils/use-force-update.d.ts +0 -1
- package/lib/utils/use-force-update.js +0 -19
- package/lib-esm/ActionList2/Description.d.ts +0 -6
- package/lib-esm/ActionList2/Description.js +0 -37
- package/lib-esm/ActionList2/Divider.d.ts +0 -8
- package/lib-esm/ActionList2/Divider.js +0 -30
- package/lib-esm/ActionList2/Group.d.ts +0 -8
- package/lib-esm/ActionList2/Group.js +0 -29
- package/lib-esm/ActionList2/Header.d.ts +0 -26
- package/lib-esm/ActionList2/Header.js +0 -45
- package/lib-esm/ActionList2/Item.d.ts +0 -49
- package/lib-esm/ActionList2/Item.js +0 -183
- package/lib-esm/ActionList2/List.d.ts +0 -11
- package/lib-esm/ActionList2/List.js +0 -35
- package/lib-esm/ActionList2/Selection.d.ts +0 -5
- package/lib-esm/ActionList2/Selection.js +0 -50
- package/lib-esm/ActionList2/Visuals.d.ts +0 -11
- package/lib-esm/ActionList2/Visuals.js +0 -68
- package/lib-esm/ActionList2/hacks.d.ts +0 -30
- package/lib-esm/ActionList2/hacks.js +0 -30
- package/lib-esm/ActionList2/index.d.ts +0 -26
- package/lib-esm/ActionList2/index.js +0 -23
- package/lib-esm/utils/create-slots.d.ts +0 -17
- package/lib-esm/utils/create-slots.js +0 -84
- package/lib-esm/utils/use-force-update.d.ts +0 -1
- package/lib-esm/utils/use-force-update.js +0 -6
@@ -1,30 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* These colors are not yet in our default theme.
|
3
|
-
* TODO: Need to remove this once they are added.
|
4
|
-
*/
|
5
|
-
export const customItemThemes = {
|
6
|
-
default: {
|
7
|
-
hover: {
|
8
|
-
light: 'rgba(46, 77, 108, 0.06)',
|
9
|
-
dark: 'rgba(201, 206, 212, 0.12)',
|
10
|
-
dark_dimmed: 'rgba(201, 206, 212, 0.12)'
|
11
|
-
},
|
12
|
-
focus: {
|
13
|
-
light: 'rgba(54, 77, 100, 0.16)',
|
14
|
-
dark: 'rgba(201, 206, 212, 0.24)',
|
15
|
-
dark_dimmed: 'rgba(201, 206, 212, 0.24)'
|
16
|
-
}
|
17
|
-
},
|
18
|
-
danger: {
|
19
|
-
hover: {
|
20
|
-
light: 'rgba(234, 74, 90, 0.08)',
|
21
|
-
dark: 'rgba(248, 81, 73, 0.16)',
|
22
|
-
dark_dimmed: 'rgba(248, 81, 73, 0.16)'
|
23
|
-
},
|
24
|
-
focus: {
|
25
|
-
light: 'rgba(234, 74, 90, 0.14)',
|
26
|
-
dark: 'rgba(248, 81, 73, 0.24)',
|
27
|
-
dark_dimmed: 'rgba(248, 81, 73, 0.24)'
|
28
|
-
}
|
29
|
-
}
|
30
|
-
};
|
@@ -1,26 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { Group } from './Group';
|
3
|
-
import { Divider } from './Divider';
|
4
|
-
export type { ListProps as ActionListProps } from './List';
|
5
|
-
export type { GroupProps } from './Group';
|
6
|
-
export type { ItemProps } from './Item';
|
7
|
-
export type { DescriptionProps } from './Description';
|
8
|
-
export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
|
9
|
-
/**
|
10
|
-
* Collection of list-related components.
|
11
|
-
*/
|
12
|
-
export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
|
13
|
-
/** Collects related `Items` in an `ActionList`. */
|
14
|
-
Group: typeof Group;
|
15
|
-
/** An actionable or selectable `Item` with an optional icon and description. */
|
16
|
-
Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
|
17
|
-
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
18
|
-
Divider: typeof Divider;
|
19
|
-
Description: import("react").FC<import("./Description").DescriptionProps>;
|
20
|
-
LeadingVisual: import("react").FC<import("../sx").SxProp & {
|
21
|
-
children: import("react").ReactNode;
|
22
|
-
}>;
|
23
|
-
TrailingVisual: import("react").FC<import("../sx").SxProp & {
|
24
|
-
children: import("react").ReactNode;
|
25
|
-
}>;
|
26
|
-
};
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { List } from './List';
|
2
|
-
import { Group } from './Group';
|
3
|
-
import { Item } from './Item';
|
4
|
-
import { Divider } from './Divider';
|
5
|
-
import { Description } from './Description';
|
6
|
-
import { LeadingVisual, TrailingVisual } from './Visuals';
|
7
|
-
|
8
|
-
/**
|
9
|
-
* Collection of list-related components.
|
10
|
-
*/
|
11
|
-
export const ActionList = Object.assign(List, {
|
12
|
-
/** Collects related `Items` in an `ActionList`. */
|
13
|
-
Group,
|
14
|
-
|
15
|
-
/** An actionable or selectable `Item` with an optional icon and description. */
|
16
|
-
Item,
|
17
|
-
|
18
|
-
/** Visually separates `Item`s or `Group`s in an `ActionList`. */
|
19
|
-
Divider,
|
20
|
-
Description,
|
21
|
-
LeadingVisual,
|
22
|
-
TrailingVisual
|
23
|
-
});
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
/** createSlots is a factory that can create a
|
3
|
-
* typesafe Slots + Slot pair to use in a component definition
|
4
|
-
* For example: ActionList.Item uses createSlots to get a Slots wrapper
|
5
|
-
* + Slot component that is used by LeadingVisual, Description
|
6
|
-
*/
|
7
|
-
declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
|
8
|
-
Slots: React.FC<{
|
9
|
-
context: Record<string, unknown>;
|
10
|
-
children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
|
11
|
-
}>;
|
12
|
-
Slot: React.FC<{
|
13
|
-
name: SlotNames;
|
14
|
-
children: React.ReactNode | ((context: Record<string, unknown>) => React.ReactNode);
|
15
|
-
}>;
|
16
|
-
};
|
17
|
-
export default createSlots;
|
@@ -1,84 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useForceUpdate } from './use-force-update';
|
3
|
-
/** createSlots is a factory that can create a
|
4
|
-
* typesafe Slots + Slot pair to use in a component definition
|
5
|
-
* For example: ActionList.Item uses createSlots to get a Slots wrapper
|
6
|
-
* + Slot component that is used by LeadingVisual, Description
|
7
|
-
*/
|
8
|
-
|
9
|
-
const createSlots = slotNames => {
|
10
|
-
const SlotsContext = /*#__PURE__*/React.createContext({
|
11
|
-
registerSlot: () => null,
|
12
|
-
unregisterSlot: () => null,
|
13
|
-
context: {}
|
14
|
-
});
|
15
|
-
/** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
|
16
|
-
* Slot registers themself with the Slots parent.
|
17
|
-
* When all the children have mounted = registered themselves in slot,
|
18
|
-
* we re-render the parent component to render with slots
|
19
|
-
*/
|
20
|
-
|
21
|
-
const Slots = ({
|
22
|
-
context,
|
23
|
-
children
|
24
|
-
}) => {
|
25
|
-
// initialise slots
|
26
|
-
const slotsDefinition = {};
|
27
|
-
slotNames.map(name => slotsDefinition[name] = null);
|
28
|
-
const slotsRef = React.useRef(slotsDefinition);
|
29
|
-
const rerenderWithSlots = useForceUpdate();
|
30
|
-
const [isMounted, setIsMounted] = React.useState(false); // fires after all the effects in children
|
31
|
-
|
32
|
-
React.useEffect(() => {
|
33
|
-
rerenderWithSlots();
|
34
|
-
setIsMounted(true);
|
35
|
-
}, [rerenderWithSlots]);
|
36
|
-
const registerSlot = React.useCallback((name, contents) => {
|
37
|
-
slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
|
38
|
-
|
39
|
-
if (isMounted) rerenderWithSlots();
|
40
|
-
}, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
|
41
|
-
// we need to unregister them from the slot
|
42
|
-
|
43
|
-
const unregisterSlot = React.useCallback(name => {
|
44
|
-
slotsRef.current[name] = null;
|
45
|
-
rerenderWithSlots();
|
46
|
-
}, [rerenderWithSlots]);
|
47
|
-
/**
|
48
|
-
* Slots uses a render prop API so abstract the
|
49
|
-
* implementation detail of using a context provider.
|
50
|
-
*/
|
51
|
-
|
52
|
-
const slots = slotsRef.current;
|
53
|
-
return /*#__PURE__*/React.createElement(SlotsContext.Provider, {
|
54
|
-
value: {
|
55
|
-
registerSlot,
|
56
|
-
unregisterSlot,
|
57
|
-
context
|
58
|
-
}
|
59
|
-
}, children(slots));
|
60
|
-
};
|
61
|
-
|
62
|
-
const Slot = ({
|
63
|
-
name,
|
64
|
-
children
|
65
|
-
}) => {
|
66
|
-
const {
|
67
|
-
registerSlot,
|
68
|
-
unregisterSlot,
|
69
|
-
context
|
70
|
-
} = React.useContext(SlotsContext);
|
71
|
-
React.useEffect(() => {
|
72
|
-
registerSlot(name, typeof children === 'function' ? children(context) : children);
|
73
|
-
return () => unregisterSlot(name);
|
74
|
-
}, [name, children, registerSlot, unregisterSlot, context]);
|
75
|
-
return null;
|
76
|
-
};
|
77
|
-
|
78
|
-
return {
|
79
|
-
Slots,
|
80
|
-
Slot
|
81
|
-
};
|
82
|
-
};
|
83
|
-
|
84
|
-
export default createSlots;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const useForceUpdate: () => () => void;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
|
2
|
-
import React from 'react';
|
3
|
-
export const useForceUpdate = () => {
|
4
|
-
const [, rerender] = React.useState({});
|
5
|
-
return React.useCallback(() => rerender({}), []);
|
6
|
-
};
|