@sproutsocial/seeds-react-peek-in 0.0.11 → 0.2.8

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 (7) hide show
  1. package/dist/esm/index.js +243 -78
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +67 -15
  4. package/dist/index.d.ts +67 -15
  5. package/dist/index.js +245 -80
  6. package/dist/index.js.map +1 -1
  7. package/package.json +11 -8
package/dist/index.d.mts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { TypeIconName } from '@sproutsocial/seeds-react-icon';
4
+ import { TypeDrawerSnapPoint } from '@sproutsocial/seeds-react-drawer';
4
5
 
5
6
  interface TypePeekInControlledProps {
6
7
  /** Controlled open state */
@@ -25,19 +26,46 @@ type TypePeekInActionProps = {
25
26
  /** Disable the action */
26
27
  disabled?: boolean;
27
28
  };
28
- type TypePeekInRailToggleConfig = {
29
- /** Icon name for the rail toggle button */
30
- iconName: string;
29
+ type TypePeekInPanelToggleConfig = {
30
+ /** Icon name for the panel toggle button */
31
+ iconName: TypeIconName;
31
32
  /** Accessible label. Default: "Toggle panel" */
32
33
  "aria-label"?: string;
33
34
  };
34
35
  type TypePeekInProps = (TypePeekInControlledProps | TypePeekInUncontrolledProps) & {
35
36
  /** Aria label for the built-in close button */
36
37
  closeButtonAriaLabel?: string;
37
- /** Additional action buttons shown in the rail alongside the close button */
38
+ /** Additional action buttons shown in the action bar alongside the close button */
38
39
  actions?: TypePeekInActionProps[];
39
- /** Show a rail toggle button in the action rail. Requires PeekIn.Rail to be present. */
40
- railToggle?: TypePeekInRailToggleConfig;
40
+ /** Show a panel toggle button in the action bar. Requires PeekIn.Panel to be present. */
41
+ panelToggle?: TypePeekInPanelToggleConfig;
42
+ /**
43
+ * Snap points the mobile bottom-sheet rendering can rest at when swiped.
44
+ * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings
45
+ * accept `px`/`rem`. Ignored on desktop (full-screen modal).
46
+ */
47
+ snapPoints?: TypeDrawerSnapPoint[];
48
+ /** Initial snap point for uncontrolled use. Mobile only. */
49
+ defaultSnapPoint?: TypeDrawerSnapPoint | null;
50
+ /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */
51
+ snapPoint?: TypeDrawerSnapPoint | null;
52
+ /** Fires when the active snap point changes. Mobile only. */
53
+ onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;
54
+ /** When true, fast swipes can't skip past adjacent snap points. Mobile only. */
55
+ snapToSequentialPoints?: boolean;
56
+ /**
57
+ * When true, the mobile bottom-sheet rendering does not dismiss when the
58
+ * user taps outside the popup. Useful with snap points so a low-snap peek
59
+ * stays open while the user interacts with nested content.
60
+ */
61
+ disableCloseOnClickOutside?: boolean;
62
+ /**
63
+ * Opt out of the mobile action rail (default) and render `actions`, the
64
+ * panel toggle, and close button inline in the bottom-sheet header instead.
65
+ * Required for snap-point layouts where the rail would collide with the
66
+ * fully-expanded popup. Ignored on desktop (full-screen modal).
67
+ */
68
+ actionsInHeader?: boolean;
41
69
  children: React.ReactNode;
42
70
  };
43
71
  interface TypePeekInHeaderProps {
@@ -48,14 +76,38 @@ interface TypePeekInHeaderProps {
48
76
  /** Action buttons rendered on the right side of the header */
49
77
  children?: React.ReactNode;
50
78
  }
51
- interface TypePeekInMainProps {
79
+ interface TypePeekInContentProps {
52
80
  children: React.ReactNode;
53
81
  }
54
- interface TypePeekInRailProps {
55
- /** Title for the rail header */
56
- title?: React.ReactNode;
57
- /** Whether the rail starts open or collapsed. Default: true */
82
+ interface TypePeekInPanelProps {
83
+ /** Title for the panel header */
84
+ title?: string;
85
+ /** Whether the panel starts open or collapsed. Default: true */
58
86
  defaultOpen?: boolean;
87
+ /**
88
+ * Snap points the panel can rest at when rendered as a nested mobile
89
+ * bottom sheet. Ignored on desktop (side-panel rendering).
90
+ */
91
+ snapPoints?: TypeDrawerSnapPoint[];
92
+ /** Initial snap point for uncontrolled use. Mobile only. */
93
+ defaultSnapPoint?: TypeDrawerSnapPoint | null;
94
+ /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */
95
+ snapPoint?: TypeDrawerSnapPoint | null;
96
+ /** Fires when the active snap point changes. Mobile only. */
97
+ onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;
98
+ /** When true, fast swipes can't skip past adjacent snap points. Mobile only. */
99
+ snapToSequentialPoints?: boolean;
100
+ /**
101
+ * When true, the nested mobile bottom-sheet does not dismiss when the user
102
+ * taps outside it. Lets the user interact with the parent PeekIn while the
103
+ * panel is at a low snap point.
104
+ */
105
+ disableCloseOnClickOutside?: boolean;
106
+ /**
107
+ * Opt out of the mobile action rail and render the close button inline in
108
+ * the bottom-sheet header instead. Ignored on desktop (side-panel rendering).
109
+ */
110
+ actionsInHeader?: boolean;
59
111
  children: React.ReactNode;
60
112
  }
61
113
  interface TypePeekInTriggerProps {
@@ -65,15 +117,15 @@ interface TypePeekInTriggerProps {
65
117
 
66
118
  declare const PeekInHeader: React.FC<TypePeekInHeaderProps>;
67
119
 
68
- declare const PeekInMain: React.FC<TypePeekInMainProps>;
120
+ declare const PeekInContent: React.FC<TypePeekInContentProps>;
69
121
 
70
- declare const PeekInRail: React.FC<TypePeekInRailProps>;
122
+ declare const PeekInPanel: React.FC<TypePeekInPanelProps>;
71
123
 
72
124
  declare const PeekInTrigger: React.FC<TypePeekInTriggerProps>;
73
125
 
74
126
  declare const PeekIn: {
75
- ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, railToggle, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
127
+ ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, panelToggle, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, disableCloseOnClickOutside, actionsInHeader, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
76
128
  displayName: string;
77
129
  };
78
130
 
79
- export { PeekIn, PeekInHeader, PeekInMain, PeekInRail, PeekInTrigger, type TypePeekInActionProps, type TypePeekInHeaderProps, type TypePeekInMainProps, type TypePeekInProps, type TypePeekInRailProps, type TypePeekInRailToggleConfig, type TypePeekInTriggerProps };
131
+ export { PeekIn, PeekInContent, PeekInHeader, PeekInPanel, PeekInTrigger, type TypePeekInActionProps, type TypePeekInContentProps, type TypePeekInHeaderProps, type TypePeekInPanelProps, type TypePeekInPanelToggleConfig, type TypePeekInProps, type TypePeekInTriggerProps };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { TypeIconName } from '@sproutsocial/seeds-react-icon';
4
+ import { TypeDrawerSnapPoint } from '@sproutsocial/seeds-react-drawer';
4
5
 
5
6
  interface TypePeekInControlledProps {
6
7
  /** Controlled open state */
@@ -25,19 +26,46 @@ type TypePeekInActionProps = {
25
26
  /** Disable the action */
26
27
  disabled?: boolean;
27
28
  };
28
- type TypePeekInRailToggleConfig = {
29
- /** Icon name for the rail toggle button */
30
- iconName: string;
29
+ type TypePeekInPanelToggleConfig = {
30
+ /** Icon name for the panel toggle button */
31
+ iconName: TypeIconName;
31
32
  /** Accessible label. Default: "Toggle panel" */
32
33
  "aria-label"?: string;
33
34
  };
34
35
  type TypePeekInProps = (TypePeekInControlledProps | TypePeekInUncontrolledProps) & {
35
36
  /** Aria label for the built-in close button */
36
37
  closeButtonAriaLabel?: string;
37
- /** Additional action buttons shown in the rail alongside the close button */
38
+ /** Additional action buttons shown in the action bar alongside the close button */
38
39
  actions?: TypePeekInActionProps[];
39
- /** Show a rail toggle button in the action rail. Requires PeekIn.Rail to be present. */
40
- railToggle?: TypePeekInRailToggleConfig;
40
+ /** Show a panel toggle button in the action bar. Requires PeekIn.Panel to be present. */
41
+ panelToggle?: TypePeekInPanelToggleConfig;
42
+ /**
43
+ * Snap points the mobile bottom-sheet rendering can rest at when swiped.
44
+ * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings
45
+ * accept `px`/`rem`. Ignored on desktop (full-screen modal).
46
+ */
47
+ snapPoints?: TypeDrawerSnapPoint[];
48
+ /** Initial snap point for uncontrolled use. Mobile only. */
49
+ defaultSnapPoint?: TypeDrawerSnapPoint | null;
50
+ /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */
51
+ snapPoint?: TypeDrawerSnapPoint | null;
52
+ /** Fires when the active snap point changes. Mobile only. */
53
+ onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;
54
+ /** When true, fast swipes can't skip past adjacent snap points. Mobile only. */
55
+ snapToSequentialPoints?: boolean;
56
+ /**
57
+ * When true, the mobile bottom-sheet rendering does not dismiss when the
58
+ * user taps outside the popup. Useful with snap points so a low-snap peek
59
+ * stays open while the user interacts with nested content.
60
+ */
61
+ disableCloseOnClickOutside?: boolean;
62
+ /**
63
+ * Opt out of the mobile action rail (default) and render `actions`, the
64
+ * panel toggle, and close button inline in the bottom-sheet header instead.
65
+ * Required for snap-point layouts where the rail would collide with the
66
+ * fully-expanded popup. Ignored on desktop (full-screen modal).
67
+ */
68
+ actionsInHeader?: boolean;
41
69
  children: React.ReactNode;
42
70
  };
43
71
  interface TypePeekInHeaderProps {
@@ -48,14 +76,38 @@ interface TypePeekInHeaderProps {
48
76
  /** Action buttons rendered on the right side of the header */
49
77
  children?: React.ReactNode;
50
78
  }
51
- interface TypePeekInMainProps {
79
+ interface TypePeekInContentProps {
52
80
  children: React.ReactNode;
53
81
  }
54
- interface TypePeekInRailProps {
55
- /** Title for the rail header */
56
- title?: React.ReactNode;
57
- /** Whether the rail starts open or collapsed. Default: true */
82
+ interface TypePeekInPanelProps {
83
+ /** Title for the panel header */
84
+ title?: string;
85
+ /** Whether the panel starts open or collapsed. Default: true */
58
86
  defaultOpen?: boolean;
87
+ /**
88
+ * Snap points the panel can rest at when rendered as a nested mobile
89
+ * bottom sheet. Ignored on desktop (side-panel rendering).
90
+ */
91
+ snapPoints?: TypeDrawerSnapPoint[];
92
+ /** Initial snap point for uncontrolled use. Mobile only. */
93
+ defaultSnapPoint?: TypeDrawerSnapPoint | null;
94
+ /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */
95
+ snapPoint?: TypeDrawerSnapPoint | null;
96
+ /** Fires when the active snap point changes. Mobile only. */
97
+ onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;
98
+ /** When true, fast swipes can't skip past adjacent snap points. Mobile only. */
99
+ snapToSequentialPoints?: boolean;
100
+ /**
101
+ * When true, the nested mobile bottom-sheet does not dismiss when the user
102
+ * taps outside it. Lets the user interact with the parent PeekIn while the
103
+ * panel is at a low snap point.
104
+ */
105
+ disableCloseOnClickOutside?: boolean;
106
+ /**
107
+ * Opt out of the mobile action rail and render the close button inline in
108
+ * the bottom-sheet header instead. Ignored on desktop (side-panel rendering).
109
+ */
110
+ actionsInHeader?: boolean;
59
111
  children: React.ReactNode;
60
112
  }
61
113
  interface TypePeekInTriggerProps {
@@ -65,15 +117,15 @@ interface TypePeekInTriggerProps {
65
117
 
66
118
  declare const PeekInHeader: React.FC<TypePeekInHeaderProps>;
67
119
 
68
- declare const PeekInMain: React.FC<TypePeekInMainProps>;
120
+ declare const PeekInContent: React.FC<TypePeekInContentProps>;
69
121
 
70
- declare const PeekInRail: React.FC<TypePeekInRailProps>;
122
+ declare const PeekInPanel: React.FC<TypePeekInPanelProps>;
71
123
 
72
124
  declare const PeekInTrigger: React.FC<TypePeekInTriggerProps>;
73
125
 
74
126
  declare const PeekIn: {
75
- ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, railToggle, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
127
+ ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, panelToggle, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, disableCloseOnClickOutside, actionsInHeader, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
76
128
  displayName: string;
77
129
  };
78
130
 
79
- export { PeekIn, PeekInHeader, PeekInMain, PeekInRail, PeekInTrigger, type TypePeekInActionProps, type TypePeekInHeaderProps, type TypePeekInMainProps, type TypePeekInProps, type TypePeekInRailProps, type TypePeekInRailToggleConfig, type TypePeekInTriggerProps };
131
+ export { PeekIn, PeekInContent, PeekInHeader, PeekInPanel, PeekInTrigger, type TypePeekInActionProps, type TypePeekInContentProps, type TypePeekInHeaderProps, type TypePeekInPanelProps, type TypePeekInPanelToggleConfig, type TypePeekInProps, type TypePeekInTriggerProps };