@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.
Files changed (66) hide show
  1. package/CHANGELOG.md +14 -4
  2. package/dist/browser.esm.js +610 -610
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +176 -176
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +5 -1
  8. package/lib/index.d.ts +0 -1
  9. package/lib/index.js +0 -8
  10. package/lib/sx.d.ts +0 -2
  11. package/lib/sx.js +0 -8
  12. package/lib-esm/ActionList/Item.d.ts +6 -0
  13. package/lib-esm/ActionList/Item.js +5 -1
  14. package/lib-esm/index.d.ts +0 -1
  15. package/lib-esm/index.js +0 -1
  16. package/lib-esm/sx.d.ts +0 -2
  17. package/lib-esm/sx.js +1 -3
  18. package/package.json +6 -6
  19. package/lib/ActionList2/Description.d.ts +0 -6
  20. package/lib/ActionList2/Description.js +0 -53
  21. package/lib/ActionList2/Divider.d.ts +0 -8
  22. package/lib/ActionList2/Divider.js +0 -42
  23. package/lib/ActionList2/Group.d.ts +0 -8
  24. package/lib/ActionList2/Group.js +0 -39
  25. package/lib/ActionList2/Header.d.ts +0 -26
  26. package/lib/ActionList2/Header.js +0 -55
  27. package/lib/ActionList2/Item.d.ts +0 -49
  28. package/lib/ActionList2/Item.js +0 -190
  29. package/lib/ActionList2/List.d.ts +0 -11
  30. package/lib/ActionList2/List.js +0 -53
  31. package/lib/ActionList2/Selection.d.ts +0 -5
  32. package/lib/ActionList2/Selection.js +0 -67
  33. package/lib/ActionList2/Visuals.d.ts +0 -11
  34. package/lib/ActionList2/Visuals.js +0 -90
  35. package/lib/ActionList2/hacks.d.ts +0 -30
  36. package/lib/ActionList2/hacks.js +0 -38
  37. package/lib/ActionList2/index.d.ts +0 -26
  38. package/lib/ActionList2/index.js +0 -36
  39. package/lib/utils/create-slots.d.ts +0 -17
  40. package/lib/utils/create-slots.js +0 -105
  41. package/lib/utils/use-force-update.d.ts +0 -1
  42. package/lib/utils/use-force-update.js +0 -19
  43. package/lib-esm/ActionList2/Description.d.ts +0 -6
  44. package/lib-esm/ActionList2/Description.js +0 -37
  45. package/lib-esm/ActionList2/Divider.d.ts +0 -8
  46. package/lib-esm/ActionList2/Divider.js +0 -30
  47. package/lib-esm/ActionList2/Group.d.ts +0 -8
  48. package/lib-esm/ActionList2/Group.js +0 -29
  49. package/lib-esm/ActionList2/Header.d.ts +0 -26
  50. package/lib-esm/ActionList2/Header.js +0 -45
  51. package/lib-esm/ActionList2/Item.d.ts +0 -49
  52. package/lib-esm/ActionList2/Item.js +0 -183
  53. package/lib-esm/ActionList2/List.d.ts +0 -11
  54. package/lib-esm/ActionList2/List.js +0 -35
  55. package/lib-esm/ActionList2/Selection.d.ts +0 -5
  56. package/lib-esm/ActionList2/Selection.js +0 -50
  57. package/lib-esm/ActionList2/Visuals.d.ts +0 -11
  58. package/lib-esm/ActionList2/Visuals.js +0 -68
  59. package/lib-esm/ActionList2/hacks.d.ts +0 -30
  60. package/lib-esm/ActionList2/hacks.js +0 -30
  61. package/lib-esm/ActionList2/index.d.ts +0 -26
  62. package/lib-esm/ActionList2/index.js +0 -23
  63. package/lib-esm/utils/create-slots.d.ts +0 -17
  64. package/lib-esm/utils/create-slots.js +0 -84
  65. package/lib-esm/utils/use-force-update.d.ts +0 -1
  66. 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
- };