@pushwoosh/kit-helpers 4.9.1 → 4.10.1

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 (6) hide show
  1. package/ai-documentation.md +54 -3
  2. package/analytics/trackEvent.js +3 -2
  3. package/analytics/utils.d.ts +1 -1
  4. package/grid.d.ts +37 -75
  5. package/grid.js +116 -1
  6. package/package.json +1 -1
package/ai-documentation.md CHANGED
@@ -12,7 +12,7 @@ description: "React component library for building Pushwoosh products with TypeS
12
12
 
13
13
  React component library for building Pushwoosh products with TypeScript, styled-components, and comprehensive hook utilities.
14
14
 
15
- > This page is generated from `ai-documentation.json` and groups the API by Components, Hooks, Utilities, and Types. All styled-component props are prefixed with `$` to avoid DOM prop warnings.
15
+ > This page groups the API by Components, Hooks, Utilities, and Types. All styled-component props are prefixed with `$` to avoid DOM prop warnings.
16
16
 
17
17
  ---
18
18
 
@@ -29,14 +29,30 @@ GridContainer<{
29
29
  $bgColor?: string;
30
30
  $border?: string | CssBoxSides<string>;
31
31
  $borderRadius?: StrNum;
32
+ $bottom?: StrNum;
32
33
  $boxShadow?: string;
33
34
  $gap?: StrNum;
34
35
  $gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
36
+ $height?: StrNum;
37
+ $inset?: StrNum;
35
38
  $justifyContent?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
36
39
  $justifyItems?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';
40
+ $left?: StrNum;
37
41
  $margin?: StrNum | CssBoxSides<StrNum>;
42
+ $maxHeight?: StrNum;
43
+ $maxWidth?: StrNum;
44
+ $minHeight?: StrNum;
45
+ $minWidth?: StrNum;
46
+ $overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';
47
+ $overflowX?: 'hidden' | 'auto' | 'scroll' | 'visible';
48
+ $overflowY?: 'hidden' | 'auto' | 'scroll' | 'visible';
38
49
  $padding?: StrNum | CssBoxSides<StrNum>;
39
50
  $placeItems?: 'center' | 'start' | 'end' | 'stretch';
51
+ $position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
52
+ $right?: StrNum;
53
+ $top?: StrNum;
54
+ $width?: StrNum;
55
+ $zIndex?: number;
40
56
  }>
41
57
  ```
42
58
 
@@ -49,27 +65,62 @@ GridContainer<{
49
65
  | `$bgColor` | string | | | Background color of the grid container | |
50
66
  | `$border` | object | | | Border styling, can be string or object with top/right/bottom/left properties | |
51
67
  | `$borderRadius` | string\|number | | | Border radius, accepts number (converted to px) or string | |
68
+ | `$bottom` | string\|number | | | `bottom` offset (number → px) | |
52
69
  | `$boxShadow` | string | | | CSS box shadow property | |
53
70
  | `$gap` | string\|number | | | Gap between grid items, accepts number (converted to px) or string | |
54
71
  | `$gridAutoFlow` | enum | | | Controls how auto-placed items are inserted in the grid | `row`, `column`, `dense`, `row dense`, `column dense` |
72
+ | `$height` | string\|number | | | `height` (number → px; strings like `'100%'` / `'auto'` / `'fit-content'` pass through) | |
73
+ | `$inset` | string\|number | | | `inset` CSS shorthand (number → px, string passes through, e.g. `'10px 20px'`) | |
55
74
  | `$justifyContent` | enum | | | Aligns the grid content along the main axis | `center`, `start`, `end`, `space-between`, `space-around`, `space-evenly`, `stretch` |
56
75
  | `$justifyItems` | enum | | | Aligns grid items along the main axis | `center`, `start`, `end`, `baseline`, `stretch` |
76
+ | `$left` | string\|number | | | `left` offset (number → px) | |
57
77
  | `$margin` | object | | | Margin spacing, can be number/string or object with directional properties | |
78
+ | `$maxHeight` | string\|number | | | `max-height` (number → px) | |
79
+ | `$maxWidth` | string\|number | | | `max-width` (number → px) | |
80
+ | `$minHeight` | string\|number | | | `min-height` (number → px) | |
81
+ | `$minWidth` | string\|number | | | `min-width` (number → px) | |
82
+ | `$overflow` | enum | | | `overflow` | `hidden`, `auto`, `scroll`, `visible` |
83
+ | `$overflowX` | enum | | | `overflow-x` | `hidden`, `auto`, `scroll`, `visible` |
84
+ | `$overflowY` | enum | | | `overflow-y` | `hidden`, `auto`, `scroll`, `visible` |
58
85
  | `$padding` | object | | | Padding spacing, can be number/string or object with directional properties | |
59
86
  | `$placeItems` | enum | | | Shorthand for align-items and justify-items | `center`, `start`, `end`, `stretch` |
87
+ | `$position` | enum | | | `position` | `static`, `relative`, `absolute`, `fixed`, `sticky` |
88
+ | `$right` | string\|number | | | `right` offset (number → px) | |
89
+ | `$top` | string\|number | | | `top` offset (number → px) | |
90
+ | `$width` | string\|number | | | `width` (number → px; strings pass through) | |
91
+ | `$zIndex` | number | | | `z-index` | |
60
92
 
61
- **Example**
93
+ **Examples**
62
94
  ```tsx
63
95
  <GridContainer $gap={16} $padding={20} $bgColor="#f0f0f0">
64
96
  <div>Item 1</div>
65
97
  <div>Item 2</div>
66
98
  </GridContainer>
67
99
  ```
100
+ ```tsx
101
+ // Absolute tooltip
102
+ <GridContainer $position="absolute" $top={40} $left={20} $width={350} $zIndex={10}>
103
+ <Tooltip />
104
+ </GridContainer>
105
+ ```
106
+ ```tsx
107
+ // Stretch horizontally
108
+ <GridContainer $position="absolute" $left={0} $right={0} $bottom={0}>
109
+ <Footer />
110
+ </GridContainer>
111
+ ```
112
+ ```tsx
113
+ // Scrollable region
114
+ <GridContainer $padding={16} $maxHeight={400} $overflow="auto">
115
+ ...
116
+ </GridContainer>
117
+ ```
68
118
 
69
119
  **Notes**
70
120
  - All props are prefixed with `$` to indicate they are styled-component props
71
- - Numbers are automatically converted to `px` units
121
+ - Numbers are automatically converted to `px` units; strings (e.g. `'100%'`, `'fit-content'`, `'2rem'`) pass through unchanged
72
122
  - Use `CssBoxSides` for asymmetric margin/padding/border
123
+ - `$inset` maps directly to the CSS `inset` shorthand; for per-side control use individual `$top` / `$right` / `$bottom` / `$left`
73
124
  - Prefer specific layout components (Columns, Rows, Horizontal, Vertical) for common patterns
74
125
 
75
126
  ---
package/analytics/trackEvent.js CHANGED
@@ -1,4 +1,5 @@
1
+ /* eslint no-underscore-dangle: 0 */
1
2
  export const trackEvent = event => {
2
- window.pwTrackingEventsStore = window.pwTrackingEventsStore ?? [];
3
- window.pwTrackingEventsStore.push(event);
3
+ window.__trackingEventsStore = window.__trackingEventsStore ?? [];
4
+ window.__trackingEventsStore.push(event);
4
5
  };
package/analytics/utils.d.ts CHANGED
@@ -17,7 +17,7 @@ declare global {
17
17
  interface Window {
18
18
  OpenReplay?: IOpenReplay;
19
19
  pwOpenReplayIdentifyStore?: OpenReplayProperties[];
20
- pwTrackingEventsStore?: PWTrackingEventsStoreAPI | Array<PWTrackingEvent>;
20
+ __trackingEventsStore?: PWTrackingEventsStoreAPI | Array<PWTrackingEvent>;
21
21
  }
22
22
  }
23
23
  export declare const isProductionMode: () => boolean;
package/grid.d.ts CHANGED
@@ -14,87 +14,49 @@ type CssBoxSides<T> = {
14
14
  right?: T;
15
15
  left?: T;
16
16
  };
17
- export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
18
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
19
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
20
- $bgColor?: string | undefined;
21
- $border?: string | CssBoxSides<string> | undefined;
22
- $borderRadius?: StrNum | undefined;
23
- $boxShadow?: string | undefined;
24
- $gap?: StrNum | undefined;
25
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
26
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
27
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
28
- $margin?: StrNum | CssBoxSides<StrNum> | undefined;
29
- $padding?: StrNum | CssBoxSides<StrNum> | undefined;
30
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
31
- }, never>;
32
- export declare const Columns: import("styled-components").StyledComponent<"div", any, {
33
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
34
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
35
- $bgColor?: string | undefined;
36
- $border?: string | CssBoxSides<string> | undefined;
37
- $borderRadius?: StrNum | undefined;
38
- $boxShadow?: string | undefined;
39
- $gap?: StrNum | undefined;
40
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
41
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
42
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
43
- $margin?: StrNum | CssBoxSides<StrNum> | undefined;
44
- $padding?: StrNum | CssBoxSides<StrNum> | undefined;
45
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
46
- } & {
17
+ type OverflowValue = 'hidden' | 'auto' | 'scroll' | 'visible';
18
+ type GridContainerProps = {
19
+ $alignContent?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
20
+ $alignItems?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';
21
+ $bgColor?: string;
22
+ $border?: string | CssBoxSides<string>;
23
+ $borderRadius?: StrNum;
24
+ $bottom?: StrNum;
25
+ $boxShadow?: string;
26
+ $gap?: StrNum;
27
+ $gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
28
+ $height?: StrNum;
29
+ $inset?: StrNum;
30
+ $justifyContent?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
31
+ $justifyItems?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';
32
+ $left?: StrNum;
33
+ $margin?: StrNum | CssBoxSides<StrNum>;
34
+ $maxHeight?: StrNum;
35
+ $maxWidth?: StrNum;
36
+ $minHeight?: StrNum;
37
+ $minWidth?: StrNum;
38
+ $overflow?: OverflowValue;
39
+ $overflowX?: OverflowValue;
40
+ $overflowY?: OverflowValue;
41
+ $padding?: StrNum | CssBoxSides<StrNum>;
42
+ $placeItems?: 'center' | 'start' | 'end' | 'stretch';
43
+ $position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
44
+ $right?: StrNum;
45
+ $top?: StrNum;
46
+ $width?: StrNum;
47
+ $zIndex?: number;
48
+ };
49
+ export declare const GridContainer: import("styled-components").StyledComponent<"div", any, GridContainerProps, never>;
50
+ export declare const Columns: import("styled-components").StyledComponent<"div", any, GridContainerProps & {
47
51
  $sizes: StrNum;
48
52
  }, never>;
49
- export declare const Rows: import("styled-components").StyledComponent<"div", any, {
50
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
51
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
52
- $bgColor?: string | undefined;
53
- $border?: string | CssBoxSides<string> | undefined;
54
- $borderRadius?: StrNum | undefined;
55
- $boxShadow?: string | undefined;
56
- $gap?: StrNum | undefined;
57
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
58
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
59
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
60
- $margin?: StrNum | CssBoxSides<StrNum> | undefined;
61
- $padding?: StrNum | CssBoxSides<StrNum> | undefined;
62
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
63
- } & {
53
+ export declare const Rows: import("styled-components").StyledComponent<"div", any, GridContainerProps & {
64
54
  $sizes: StrNum;
65
55
  }, never>;
66
- export declare const Horizontal: import("styled-components").StyledComponent<"div", any, {
67
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
68
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
69
- $bgColor?: string | undefined;
70
- $border?: string | CssBoxSides<string> | undefined;
71
- $borderRadius?: StrNum | undefined;
72
- $boxShadow?: string | undefined;
73
- $gap?: StrNum | undefined;
74
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
75
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
76
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
77
- $margin?: StrNum | CssBoxSides<StrNum> | undefined;
78
- $padding?: StrNum | CssBoxSides<StrNum> | undefined;
79
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
80
- } & {
56
+ export declare const Horizontal: import("styled-components").StyledComponent<"div", any, GridContainerProps & {
81
57
  $gridAutoFlow: string;
82
58
  }, "$gridAutoFlow">;
83
- export declare const Vertical: import("styled-components").StyledComponent<"div", any, {
84
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
85
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
86
- $bgColor?: string | undefined;
87
- $border?: string | CssBoxSides<string> | undefined;
88
- $borderRadius?: StrNum | undefined;
89
- $boxShadow?: string | undefined;
90
- $gap?: StrNum | undefined;
91
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
92
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
93
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
94
- $margin?: StrNum | CssBoxSides<StrNum> | undefined;
95
- $padding?: StrNum | CssBoxSides<StrNum> | undefined;
96
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
97
- } & {
59
+ export declare const Vertical: import("styled-components").StyledComponent<"div", any, GridContainerProps & {
98
60
  $gridAutoFlow: string;
99
61
  }, "$gridAutoFlow">;
100
62
  export {};
package/grid.js CHANGED
@@ -29,10 +29,125 @@ function createCssBoxDeclaration(property, value, valueConvert) {
29
29
  }
30
30
  return createCssDeclaration(property, value, valueConvert);
31
31
  }
32
+ const cssDeclarations = {
33
+ $alignContent: {
34
+ property: 'align-content'
35
+ },
36
+ $alignItems: {
37
+ property: 'align-items'
38
+ },
39
+ $bgColor: {
40
+ property: 'background-color'
41
+ },
42
+ $border: {
43
+ property: 'border',
44
+ box: true
45
+ },
46
+ $borderRadius: {
47
+ property: 'border-radius',
48
+ convert: toCssValue
49
+ },
50
+ $boxShadow: {
51
+ property: 'box-shadow'
52
+ },
53
+ $gap: {
54
+ property: 'gap',
55
+ convert: toCssValue
56
+ },
57
+ $gridAutoFlow: {
58
+ property: 'grid-auto-flow'
59
+ },
60
+ $height: {
61
+ property: 'height',
62
+ convert: toCssValue
63
+ },
64
+ $justifyContent: {
65
+ property: 'justify-content'
66
+ },
67
+ $justifyItems: {
68
+ property: 'justify-items'
69
+ },
70
+ $margin: {
71
+ property: 'margin',
72
+ box: true,
73
+ convert: toCssValue
74
+ },
75
+ $maxHeight: {
76
+ property: 'max-height',
77
+ convert: toCssValue
78
+ },
79
+ $maxWidth: {
80
+ property: 'max-width',
81
+ convert: toCssValue
82
+ },
83
+ $minHeight: {
84
+ property: 'min-height',
85
+ convert: toCssValue
86
+ },
87
+ $minWidth: {
88
+ property: 'min-width',
89
+ convert: toCssValue
90
+ },
91
+ $overflow: {
92
+ property: 'overflow'
93
+ },
94
+ $overflowX: {
95
+ property: 'overflow-x'
96
+ },
97
+ $overflowY: {
98
+ property: 'overflow-y'
99
+ },
100
+ $padding: {
101
+ property: 'padding',
102
+ box: true,
103
+ convert: toCssValue
104
+ },
105
+ $placeItems: {
106
+ property: 'place-items'
107
+ },
108
+ $position: {
109
+ property: 'position'
110
+ },
111
+ $inset: {
112
+ property: 'inset',
113
+ convert: toCssValue
114
+ },
115
+ $top: {
116
+ property: 'top',
117
+ convert: toCssValue
118
+ },
119
+ $right: {
120
+ property: 'right',
121
+ convert: toCssValue
122
+ },
123
+ $bottom: {
124
+ property: 'bottom',
125
+ convert: toCssValue
126
+ },
127
+ $left: {
128
+ property: 'left',
129
+ convert: toCssValue
130
+ },
131
+ $width: {
132
+ property: 'width',
133
+ convert: toCssValue
134
+ },
135
+ $zIndex: {
136
+ property: 'z-index'
137
+ }
138
+ };
139
+ const renderCssDeclarations = props => Object.entries(props).map(([key, value]) => {
140
+ const config = cssDeclarations[key];
141
+ if (!config || value === undefined) return undefined;
142
+ if (config.box) {
143
+ return createCssBoxDeclaration(config.property, value, config.convert);
144
+ }
145
+ return createCssDeclaration(config.property, value, config.convert);
146
+ }).filter(Boolean).join('\n');
32
147
  export const GridContainer = styled.div.withConfig({
33
148
  displayName: "GridContainer",
34
149
  componentId: "sc-1mpmh7u-0"
35
- })(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('background-color', props.$bgColor), props => createCssBoxDeclaration('border', props.$border), props => createCssDeclaration('border-radius', props.$borderRadius, toCssValue), props => createCssDeclaration('box-shadow', props.$boxShadow), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssBoxDeclaration('margin', props.$margin, toCssValue), props => createCssBoxDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
150
+ })(["display:grid;", ""], renderCssDeclarations);
36
151
  export const Columns = styled(GridContainer).withConfig({
37
152
  displayName: "Columns",
38
153
  componentId: "sc-1mpmh7u-1"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/kit-helpers",
3
- "version": "4.9.1",
3
+ "version": "4.10.1",
4
4
  "description": "React component for build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",