@cntrl-site/sdk-nextjs 0.12.6 → 0.12.7

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 (3) hide show
  1. package/lib/components/Item.js +4 -4
  2. package/package.json +1 -1
  3. package/src/components/Item.tsx +7 -5
package/lib/components/Item.js CHANGED
@@ -41,7 +41,7 @@ const Item = ({ item, sectionId }) => {
41
41
  const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
42
42
  const layout = (0, useCurrentLayout_1.useCurrentLayout)();
43
43
  const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
44
- const layoutValues = [item.area];
44
+ const layoutValues = [item.area, item.hidden];
45
45
  const isInitialRef = (0, react_1.useRef)(true);
46
46
  layoutValues.push(item.sticky);
47
47
  layoutValues.push(sectionHeight);
@@ -72,11 +72,11 @@ const Item = ({ item, sectionId }) => {
72
72
  height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
73
73
  };
74
74
  return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }, children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
75
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
75
+ ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
76
76
  const sizingAxis = parseSizing(layoutParams.sizing);
77
77
  return (`
78
78
  .item-${item.id} {
79
- position: ${sticky ? 'sticky' : 'absolute'};
79
+ position: ${sticky ? 'sticky' : 'absolute'};xw
80
80
  width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
81
81
  height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
82
82
  transform: scale(${scale});
@@ -84,7 +84,7 @@ const Item = ({ item, sectionId }) => {
84
84
  transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
85
85
  pointer-events: auto;
86
86
  --webkit-backface-visibility: hidden;
87
- visibility: ${item.hidden[layout] ? 'hidden' : 'visible'};
87
+ visibility: ${hidden ? 'hidden' : 'visible'};
88
88
  }
89
89
  .item-wrapper-${item.id} {
90
90
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.12.6",
3
+ "version": "0.12.7",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/components/Item.tsx CHANGED
@@ -52,7 +52,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
52
52
  const sectionHeight = useSectionHeightData(sectionId);
53
53
  const layout = useCurrentLayout();
54
54
  const { width, height } = useItemDimensions(item, sectionId);
55
- const layoutValues: Record<string, any>[] = [item.area];
55
+ const layoutValues: Record<string, any>[] = [item.area, item.hidden];
56
56
  const isInitialRef = useRef(true);
57
57
  layoutValues.push(item.sticky);
58
58
  layoutValues.push(sectionHeight);
@@ -88,7 +88,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
88
88
  };
89
89
 
90
90
  return (
91
- <div className={`item-wrapper-${item.id}`}
91
+ <div
92
+ className={`item-wrapper-${item.id}`}
92
93
  style={{ top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
93
94
  >
94
95
  <div
@@ -99,11 +100,12 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
99
100
  <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
100
101
  </div>
101
102
  <JSXStyle id={id}>{`
102
- ${getLayoutStyles(layouts, layoutValues, ([area, sticky, sectionHeight, layoutParams]) => {
103
+ ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
103
104
  const sizingAxis = parseSizing(layoutParams.sizing);
105
+
104
106
  return (`
105
107
  .item-${item.id} {
106
- position: ${sticky ? 'sticky' : 'absolute'};
108
+ position: ${sticky ? 'sticky' : 'absolute'};xw
107
109
  width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
108
110
  height: ${sizingAxis.y === SizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
109
111
  transform: scale(${scale});
@@ -111,7 +113,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
111
113
  transform-origin: ${ScaleAnchorMap[scaleAnchor]};
112
114
  pointer-events: auto;
113
115
  --webkit-backface-visibility: hidden;
114
- visibility: ${item.hidden[layout] ? 'hidden' : 'visible'};
116
+ visibility: ${hidden ? 'hidden' : 'visible'};
115
117
  }
116
118
  .item-wrapper-${item.id} {
117
119
  position: absolute;