@reykjavik/hanna-react 0.10.128 → 0.10.129

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/CHANGELOG.md +8 -0
  2. package/_abstract/_AbstractCarousel.d.ts +6 -0
  3. package/_abstract/_AbstractCarousel.js +27 -7
  4. package/esm/_abstract/_AbstractCarousel.d.ts +6 -0
  5. package/esm/_abstract/_AbstractCarousel.js +27 -7
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,14 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.129
8
+
9
+ _2024-07-16_
10
+
11
+ - feat: Add prop `childrenHTML` to `Carousel` for Real Nasty Dirty Work™ —
12
+ primary use case is progressive enhancement of static HTML.
13
+ - feat: Gracefully catch (and log) errors in Sprinkles' lifecycle methods
14
+
7
15
  ## 0.10.128
8
16
 
9
17
  _2024-07-01_
package/_abstract/_AbstractCarousel.d.ts CHANGED
@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
20
20
  * `<Fragment />` or some such.
21
21
  */
22
22
  itemCount?: number;
23
+ }, {
24
+ /**
25
+ * HTML content that should be dangerously inserted directly into the
26
+ * `__itemlist` element
27
+ */
28
+ childrenHTML: string;
23
29
  }> & WrapperElmProps & DeprecatedSeenProp;
24
30
  type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
25
31
  title?: string;
package/_abstract/_AbstractCarousel.js CHANGED
@@ -24,17 +24,35 @@ const scrollXBy = (elm, deltaX) => {
24
24
  };
25
25
  // eslint-disable-next-line complexity
26
26
  const AbstractCarousel = (props) => {
27
- const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
27
+ const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
28
+ const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
28
29
  const children = !props.children
29
30
  ? undefined
30
31
  : Array.isArray(props.children)
31
32
  ? props.children.filter(hanna_utils_1.notNully)
32
33
  : [props.children];
33
34
  const [leftOffset, setLeftOffset] = (0, react_1.useState)();
34
- const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
35
+ const htmlChildrenCount = (0, react_1.useMemo)(() => {
36
+ if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
37
+ return;
38
+ }
39
+ if (!isBrowser) {
40
+ return 1; // Return arbitrary non-zero count to avoid early return below.
41
+ // During SSR (and initial hydration render) we want to render the
42
+ // Carousel component, even though we don't know the exact number of
43
+ // items yet.
44
+ }
45
+ const div = document.createElement('div');
46
+ div.innerHTML = childrenHTML;
47
+ return div.children.length;
48
+ }, [childrenHTML, isBrowser]);
49
+ const itemCount = props.itemCount != null
50
+ ? props.itemCount
51
+ : childrenHTML
52
+ ? htmlChildrenCount
53
+ : (children || items).length;
35
54
  const listRef = (0, react_1.useRef)(null);
36
55
  const [activeItem, setActiveItem] = (0, react_1.useState)(0);
37
- const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
38
56
  // Since listElm gets unmounted and remounted based on isBrowser, we
39
57
  // wait for isBrowser is true before setting scroll and resize events.
40
58
  const listElm = isBrowser && listRef.current;
@@ -91,10 +109,12 @@ const AbstractCarousel = (props) => {
91
109
  }
92
110
  const itemList = (react_1.default.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
93
111
  ? { '--Carousel--leftOffset': `${leftOffset}px` }
94
- : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
95
- items.map((item, i) => (
96
- // @ts-expect-error (Can't be arsed...)
97
- react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
112
+ : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
113
+ ? undefined
114
+ : children ||
115
+ items.map((item, i) => (
116
+ // @ts-expect-error (Can't be arsed...)
117
+ react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
98
118
  return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier,
99
119
  // Prefer `className` over `wrapperProps.className`
100
120
  className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),
package/esm/_abstract/_AbstractCarousel.d.ts CHANGED
@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
20
20
  * `<Fragment />` or some such.
21
21
  */
22
22
  itemCount?: number;
23
+ }, {
24
+ /**
25
+ * HTML content that should be dangerously inserted directly into the
26
+ * `__itemlist` element
27
+ */
28
+ childrenHTML: string;
23
29
  }> & WrapperElmProps & DeprecatedSeenProp;
24
30
  type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
25
31
  title?: string;
package/esm/_abstract/_AbstractCarousel.js CHANGED
@@ -20,17 +20,35 @@ const scrollXBy = (elm, deltaX) => {
20
20
  };
21
21
  // eslint-disable-next-line complexity
22
22
  export const AbstractCarousel = (props) => {
23
- const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
23
+ const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
24
+ const isBrowser = useIsBrowserSide(ssr);
24
25
  const children = !props.children
25
26
  ? undefined
26
27
  : Array.isArray(props.children)
27
28
  ? props.children.filter(notNully)
28
29
  : [props.children];
29
30
  const [leftOffset, setLeftOffset] = useState();
30
- const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
31
+ const htmlChildrenCount = useMemo(() => {
32
+ if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
33
+ return;
34
+ }
35
+ if (!isBrowser) {
36
+ return 1; // Return arbitrary non-zero count to avoid early return below.
37
+ // During SSR (and initial hydration render) we want to render the
38
+ // Carousel component, even though we don't know the exact number of
39
+ // items yet.
40
+ }
41
+ const div = document.createElement('div');
42
+ div.innerHTML = childrenHTML;
43
+ return div.children.length;
44
+ }, [childrenHTML, isBrowser]);
45
+ const itemCount = props.itemCount != null
46
+ ? props.itemCount
47
+ : childrenHTML
48
+ ? htmlChildrenCount
49
+ : (children || items).length;
31
50
  const listRef = useRef(null);
32
51
  const [activeItem, setActiveItem] = useState(0);
33
- const isBrowser = useIsBrowserSide(ssr);
34
52
  // Since listElm gets unmounted and remounted based on isBrowser, we
35
53
  // wait for isBrowser is true before setting scroll and resize events.
36
54
  const listElm = isBrowser && listRef.current;
@@ -87,10 +105,12 @@ export const AbstractCarousel = (props) => {
87
105
  }
88
106
  const itemList = (React.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
89
107
  ? { '--Carousel--leftOffset': `${leftOffset}px` }
90
- : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
91
- items.map((item, i) => (
92
- // @ts-expect-error (Can't be arsed...)
93
- React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
108
+ : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
109
+ ? undefined
110
+ : children ||
111
+ items.map((item, i) => (
112
+ // @ts-expect-error (Can't be arsed...)
113
+ React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
94
114
  return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier,
95
115
  // Prefer `className` over `wrapperProps.className`
96
116
  className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.128",
3
+ "version": "0.10.129",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",