etudes 0.57.0 → 0.60.0

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/lib/MasonryGrid.js +17 -14
  2. package/lib/MasonryGrid.js.map +1 -1
  3. package/lib/hooks/useSearchParamState.d.ts +12 -4
  4. package/lib/hooks/useSearchParamState.js +14 -13
  5. package/lib/hooks/useSearchParamState.js.map +1 -1
  6. package/package.json +26 -26
package/lib/MasonryGrid.js CHANGED
@@ -237,17 +237,19 @@ function MasonryGrid(_a) {
237
237
  }
238
238
  }
239
239
  }
240
- var currWidth = getCurrentWidth();
241
- setMinWidth(currWidth);
242
- setMinHeight(computeMaxLength(sectionHeights, numSections));
243
- rootNode.style.height = "".concat(minHeight, "px");
240
+ var w = getCurrentWidth();
241
+ var h = computeMaxLength(sectionHeights, numSections);
242
+ setMinWidth(w);
243
+ setMinHeight(h);
244
+ if (!isNaN(h))
245
+ rootNode.style.height = "".concat(h, "px");
244
246
  if (isReversed) {
245
247
  for (var i = 0; i < children.length; i++) {
246
248
  var child = children[i];
247
249
  if (!(child instanceof HTMLElement))
248
250
  continue;
249
251
  var x = parseFloat(child.style.left);
250
- child.style.left = "".concat(currWidth - x - parseFloat(child.style.width), "px");
252
+ child.style.left = "".concat(w - x - parseFloat(child.style.width), "px");
251
253
  }
252
254
  }
253
255
  }
@@ -274,18 +276,19 @@ function MasonryGrid(_a) {
274
276
  }
275
277
  }
276
278
  }
277
- var currHeight = getCurrentHeight();
278
- setMinHeight(currHeight);
279
- setMinWidth(computeMaxLength(sectionWidths, numSections));
280
- if (!isNaN(minWidth))
281
- rootNode.style.width = "".concat(minWidth, "px");
279
+ var h = getCurrentHeight();
280
+ var w = computeMaxLength(sectionWidths, numSections);
281
+ setMinHeight(h);
282
+ setMinWidth(w);
283
+ if (!isNaN(w))
284
+ rootNode.style.width = "".concat(w, "px");
282
285
  if (isReversed) {
283
286
  for (var i = 0; i < children.length; i++) {
284
287
  var child = children[i];
285
288
  if (!(child instanceof HTMLElement))
286
289
  continue;
287
290
  var y = parseFloat(child.style.top);
288
- child.style.top = "".concat(currHeight - y - parseFloat(child.style.height), "px");
291
+ child.style.top = "".concat(h - y - parseFloat(child.style.height), "px");
289
292
  }
290
293
  }
291
294
  }
@@ -300,12 +303,12 @@ function MasonryGrid(_a) {
300
303
  setMaxHeight(maxSize.height);
301
304
  }
302
305
  },
303
- });
306
+ }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing]);
304
307
  (0, react_1.useEffect)(function () {
305
308
  var _a;
306
309
  var imageSources = getAllImageSources((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML);
307
310
  if (imageSources.length === 0)
308
- return;
311
+ return repositionChildren();
309
312
  var numImages = imageSources.length;
310
313
  for (var i = 0; i < numImages; i++) {
311
314
  var src = imageSources[i];
@@ -313,7 +316,7 @@ function MasonryGrid(_a) {
313
316
  image.src = src;
314
317
  image.onload = function () { return repositionChildren(); };
315
318
  }
316
- }, []);
319
+ }, [children]);
317
320
  return (react_1.default.createElement(StyledRoot, __assign({}, props, { ref: rootRef, orientation: orientation, style: __assign(__assign({}, style), { flex: '0 0 auto', minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? "".concat(minHeight, "px") : ''), minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? "".concat(minWidth, "px") : ''), padding: '0' }) }), children));
318
321
  }
319
322
  exports.default = MasonryGrid;
package/lib/MasonryGrid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areSectionsAligned?: boolean\n horizontalSpacing?: number\n isReversed?: boolean\n orientation?: Orientation\n sections?: number\n verticalSpacing?: number\n}>\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * Computes the index and current length of the next available section for a specific base value,\n * based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to be used to evaluate\n * the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be length if a new item were\n * to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n const numSections = currentSectionLengths.length\n\n let sectionIdx = NaN\n let minLength = Infinity\n\n for (let i = 0; i < numSections; i++) {\n const length = currentSectionLengths[i]\n const isShorter = length < minLength\n const isEligibleSection = (i + base) <= numSections\n let hasRoomInSubsequentSections = true\n\n for (let j = 1; j < base; j++) {\n if (currentSectionLengths[i + j] > length) {\n hasRoomInSubsequentSections = false\n }\n }\n\n if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n sectionIdx = i\n minLength = length\n }\n }\n\n if (isNaN(sectionIdx)) {\n return [0, computeMaxLength(currentSectionLengths, base)]\n }\n else {\n return [sectionIdx, minLength]\n }\n}\n\n/**\n * A helper function that computes the max section length of an array of section lengths. Only the\n * first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any non-numerical values\n * will be ignored and return value will be based on all sections. A `base` value will\n * be clamped between 1 and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n let arr = currentSectionLengths\n\n if (base !== undefined && base !== null && !isNaN(base)) {\n arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n }\n\n return arr.reduce((out, curr, i) => (curr > out) ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n const classList = element.classList\n\n for (let i = 0; i < classList.length; i++) {\n const c = classList[i]\n\n if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n }\n }\n\n return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n if (!htmlString) return []\n\n const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n const imageTags = htmlString.match(regexImg) ?? []\n\n const out: string[] = []\n\n for (let i = 0; i < imageTags.length; i++) {\n const tag = imageTags[i]\n const src = tag.match(regexSrc)?.[2]\n\n if (!src) continue\n\n out.push(src)\n }\n\n return out\n}\n\n/**\n * This is a React component that arranges all of its immediate children in a masonry grid. Refrain\n * from assigning CSS styles to it via `className` or `style` property, though they are still\n * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be\n * in either vertical or horizontal orientation. The length of every child element *parallel to the\n * direction of the orientation* is automatically set according to the number of sections specified\n * for the grid. This means that in an horizontally oriented grid, the *width* of each child element\n * is automatically set, whereas in a vertically oriented grid the *height* of each child element is\n * automatically set. Additionally, the *number of sections* corresponds to the maximum the number\n * of child elements present in the direction that is parallel to the orientation of the grid.\n * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,\n * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.\n */\nexport default function MasonryGrid({\n areSectionsAligned = false,\n children,\n horizontalSpacing= 0,\n isReversed = false,\n orientation = 'vertical',\n sections = 3,\n style = {},\n verticalSpacing = 0,\n ...props\n}: Props) {\n const rootRef = useRef<HTMLDivElement>(null)\n\n const [minWidth, setMinWidth] = useState(NaN)\n const [minHeight, setMinHeight] = useState(NaN)\n const [maxWidth, setMaxWidth] = useState(NaN)\n const [maxHeight, setMaxHeight] = useState(NaN)\n\n const getCurrentWidth = () => Rect.from(rootRef.current)?.width ?? 0\n\n const getCurrentHeight = () => Rect.from(rootRef.current)?.height ?? 0\n\n const repositionChildren = () => {\n const rootNode = rootRef.current\n\n if (!rootNode) return\n\n debug('Repositioning children... OK')\n\n const children = rootNode.children\n const numSections = sections\n\n if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n if (orientation === 'vertical') {\n const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n child.style.position = 'absolute'\n child.style.width = `calc(${100 / numSections * base}% - ${(horizontalSpacing * (numSections - 1) / numSections) * base}px + ${horizontalSpacing * (base - 1)}px)`\n child.style.height = ''\n child.style.left = `calc(${100 / numSections * colIdx}% - ${(horizontalSpacing * (numSections - 1) / numSections) * colIdx}px + ${horizontalSpacing * colIdx}px)`\n child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n }\n\n if (areSectionsAligned && ((colIdx + base) === numSections)) {\n const m = computeMaxLength(sectionHeights)\n\n for (let j = 0; j < numSections; j++) {\n sectionHeights[j] = m\n }\n }\n }\n\n const currWidth = getCurrentWidth()\n\n setMinWidth(currWidth)\n setMinHeight(computeMaxLength(sectionHeights, numSections))\n rootNode.style.height = `${minHeight}px`\n\n if (isReversed) {\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const x = parseFloat(child.style.left)\n\n child.style.left = `${currWidth - x - parseFloat(child.style.width)}px`\n }\n }\n }\n else {\n const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n child.style.position = 'absolute'\n child.style.width = ''\n child.style.height = `calc(${100 / numSections * base}% - ${(verticalSpacing * (numSections - 1) / numSections) * base}px + ${verticalSpacing * (base - 1)}px)`\n child.style.top = `calc(${100 / numSections * rowIdx}% - ${(verticalSpacing * (numSections - 1) / numSections) * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n }\n\n if (areSectionsAligned && ((rowIdx + base) === numSections)) {\n const m = computeMaxLength(sectionWidths)\n\n for (let j = 0; j < numSections; j++) {\n sectionWidths[j] = m\n }\n }\n }\n\n const currHeight = getCurrentHeight()\n setMinHeight(currHeight)\n setMinWidth(computeMaxLength(sectionWidths, numSections))\n\n if (!isNaN(minWidth)) rootNode.style.width = `${minWidth}px`\n\n if (isReversed) {\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const y = parseFloat(child.style.top)\n\n child.style.top = `${currHeight - y - parseFloat(child.style.height)}px`\n }\n }\n }\n }\n\n useResizeEffect(rootRef, {\n onResize: maxSize => {\n const currWidth = getCurrentWidth()\n const currHeight = getCurrentHeight()\n\n if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {\n repositionChildren()\n setMaxWidth(maxSize.width)\n setMaxHeight(maxSize.height)\n }\n },\n })\n\n useEffect(() => {\n const imageSources = getAllImageSources(rootRef.current?.innerHTML)\n\n if (imageSources.length === 0) return\n\n const numImages = imageSources.length\n\n for (let i = 0; i < numImages; i++) {\n const src = imageSources[i]\n const image = new Image()\n image.src = src\n image.onload = () => repositionChildren()\n }\n }, [])\n\n return (\n <StyledRoot\n {...props}\n ref={rootRef}\n orientation={orientation}\n style={{\n ...style,\n flex: '0 0 auto',\n minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? `${minHeight}px` : ''),\n minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? `${minWidth}px` : ''),\n padding: '0',\n }}\n >\n {children}\n </StyledRoot>\n )\n}\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? 'auto' : '100%'};\n position: relative;\n width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n`\n"]}
1
+ {"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:masonry-grid') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n areSectionsAligned?: boolean\n horizontalSpacing?: number\n isReversed?: boolean\n orientation?: Orientation\n sections?: number\n verticalSpacing?: number\n}>\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * Computes the index and current length of the next available section for a specific base value,\n * based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths - An array of the current section lengths.\n * @param base - The base value of the item to be inserted into the grid, and to be used to evaluate\n * the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be length if a new item were\n * to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n const numSections = currentSectionLengths.length\n\n let sectionIdx = NaN\n let minLength = Infinity\n\n for (let i = 0; i < numSections; i++) {\n const length = currentSectionLengths[i]\n const isShorter = length < minLength\n const isEligibleSection = (i + base) <= numSections\n let hasRoomInSubsequentSections = true\n\n for (let j = 1; j < base; j++) {\n if (currentSectionLengths[i + j] > length) {\n hasRoomInSubsequentSections = false\n }\n }\n\n if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n sectionIdx = i\n minLength = length\n }\n }\n\n if (isNaN(sectionIdx)) {\n return [0, computeMaxLength(currentSectionLengths, base)]\n }\n else {\n return [sectionIdx, minLength]\n }\n}\n\n/**\n * A helper function that computes the max section length of an array of section lengths. Only the\n * first n = `base` sections are inspected.\n *\n * @param currentSectionLengths - An array of section lengths.\n * @param base - The number representing the first n sections to inspect. Any non-numerical values\n * will be ignored and return value will be based on all sections. A `base` value will\n * be clamped between 1 and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n let arr = currentSectionLengths\n\n if (base !== undefined && base !== null && !isNaN(base)) {\n arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n }\n\n return arr.reduce((out, curr, i) => (curr > out) ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element - The HTML element.\n * @param numSections - Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n const classList = element.classList\n\n for (let i = 0; i < classList.length; i++) {\n const c = classList[i]\n\n if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n }\n }\n\n return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n if (!htmlString) return []\n\n const regexImg = /<img.*?src=(\"|')(.*?)(\"|')/g\n const regexSrc = /<img.*?src=(\"|')(.*?)(\"|')/\n const imageTags = htmlString.match(regexImg) ?? []\n\n const out: string[] = []\n\n for (let i = 0; i < imageTags.length; i++) {\n const tag = imageTags[i]\n const src = tag.match(regexSrc)?.[2]\n\n if (!src) continue\n\n out.push(src)\n }\n\n return out\n}\n\n/**\n * This is a React component that arranges all of its immediate children in a masonry grid. Refrain\n * from assigning CSS styles to it via `className` or `style` property, though they are still\n * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be\n * in either vertical or horizontal orientation. The length of every child element *parallel to the\n * direction of the orientation* is automatically set according to the number of sections specified\n * for the grid. This means that in an horizontally oriented grid, the *width* of each child element\n * is automatically set, whereas in a vertically oriented grid the *height* of each child element is\n * automatically set. Additionally, the *number of sections* corresponds to the maximum the number\n * of child elements present in the direction that is parallel to the orientation of the grid.\n * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,\n * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.\n */\nexport default function MasonryGrid({\n areSectionsAligned = false,\n children,\n horizontalSpacing= 0,\n isReversed = false,\n orientation = 'vertical',\n sections = 3,\n style = {},\n verticalSpacing = 0,\n ...props\n}: Props) {\n const rootRef = useRef<HTMLDivElement>(null)\n\n const [minWidth, setMinWidth] = useState(NaN)\n const [minHeight, setMinHeight] = useState(NaN)\n const [maxWidth, setMaxWidth] = useState(NaN)\n const [maxHeight, setMaxHeight] = useState(NaN)\n\n const getCurrentWidth = () => Rect.from(rootRef.current)?.width ?? 0\n\n const getCurrentHeight = () => Rect.from(rootRef.current)?.height ?? 0\n\n const repositionChildren = () => {\n const rootNode = rootRef.current\n\n if (!rootNode) return\n\n debug('Repositioning children... OK')\n\n const children = rootNode.children\n const numSections = sections\n\n if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n if (orientation === 'vertical') {\n const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n child.style.position = 'absolute'\n child.style.width = `calc(${100 / numSections * base}% - ${(horizontalSpacing * (numSections - 1) / numSections) * base}px + ${horizontalSpacing * (base - 1)}px)`\n child.style.height = ''\n child.style.left = `calc(${100 / numSections * colIdx}% - ${(horizontalSpacing * (numSections - 1) / numSections) * colIdx}px + ${horizontalSpacing * colIdx}px)`\n child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n }\n\n if (areSectionsAligned && ((colIdx + base) === numSections)) {\n const m = computeMaxLength(sectionHeights)\n\n for (let j = 0; j < numSections; j++) {\n sectionHeights[j] = m\n }\n }\n }\n\n const w = getCurrentWidth()\n const h = computeMaxLength(sectionHeights, numSections)\n\n setMinWidth(w)\n setMinHeight(h)\n\n if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n if (isReversed) {\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const x = parseFloat(child.style.left)\n\n child.style.left = `${w - x - parseFloat(child.style.width)}px`\n }\n }\n }\n else {\n const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const base = computeBaseFromElement(child, sections)\n const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n child.style.position = 'absolute'\n child.style.width = ''\n child.style.height = `calc(${100 / numSections * base}% - ${(verticalSpacing * (numSections - 1) / numSections) * base}px + ${verticalSpacing * (base - 1)}px)`\n child.style.top = `calc(${100 / numSections * rowIdx}% - ${(verticalSpacing * (numSections - 1) / numSections) * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n for (let j = 0; j < base; j++) {\n sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n }\n\n if (areSectionsAligned && ((rowIdx + base) === numSections)) {\n const m = computeMaxLength(sectionWidths)\n\n for (let j = 0; j < numSections; j++) {\n sectionWidths[j] = m\n }\n }\n }\n\n const h = getCurrentHeight()\n const w = computeMaxLength(sectionWidths, numSections)\n\n setMinHeight(h)\n setMinWidth(w)\n\n if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n if (isReversed) {\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (!(child instanceof HTMLElement)) continue\n\n const y = parseFloat(child.style.top)\n\n child.style.top = `${h - y - parseFloat(child.style.height)}px`\n }\n }\n }\n }\n\n useResizeEffect(rootRef, {\n onResize: maxSize => {\n const currWidth = getCurrentWidth()\n const currHeight = getCurrentHeight()\n\n if ((minWidth !== currWidth) || (minHeight !== currHeight) || (maxSize.width !== maxWidth) || maxSize.height !== maxHeight) {\n repositionChildren()\n setMaxWidth(maxSize.width)\n setMaxHeight(maxSize.height)\n }\n },\n }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n useEffect(() => {\n const imageSources = getAllImageSources(rootRef.current?.innerHTML)\n\n if (imageSources.length === 0) return repositionChildren()\n\n const numImages = imageSources.length\n\n for (let i = 0; i < numImages; i++) {\n const src = imageSources[i]\n const image = new Image()\n image.src = src\n image.onload = () => repositionChildren()\n }\n }, [children])\n\n return (\n <StyledRoot\n {...props}\n ref={rootRef}\n orientation={orientation}\n style={{\n ...style,\n flex: '0 0 auto',\n minHeight: ((orientation === 'vertical' && !isNaN(minHeight)) ? `${minHeight}px` : ''),\n minWidth: ((orientation === 'horizontal' && !isNaN(minWidth)) ? `${minWidth}px` : ''),\n padding: '0',\n }}\n >\n {children}\n </StyledRoot>\n )\n}\n\nconst StyledRoot = styled.div<{\n orientation: Props['orientation']\n}>`\n box-sizing: border-box;\n display: block;\n height: ${props => props.orientation === 'vertical' ? 'auto' : '100%'};\n position: relative;\n width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n`\n"]}
package/lib/hooks/useSearchParamState.d.ts CHANGED
@@ -2,22 +2,30 @@ import { Dispatch, SetStateAction } from 'react';
2
2
  export declare type Options<T> = {
3
3
  /**
4
4
  * Function for transforming the search param value to the value of the mapped state.
5
+ *
6
+ * @param value - The search param value. `undefined` means the value is unavailable.
7
+ *
8
+ * @returns The equivalent state value.
5
9
  */
6
- mapSearchParamToState?: (value: string | null) => NonNullable<T> | null;
10
+ mapSearchParamToState?: (value?: string) => T;
7
11
  /**
8
12
  * Function for transforming the value of the mapped state to the search param value.
13
+ *
14
+ * @param state - The state value.
15
+ *
16
+ * @returns The equivalent search param value.
9
17
  */
10
- mapStateToSearchParam?: (state: T | null) => string | null;
18
+ mapStateToSearchParam?: (state: T) => string | undefined;
11
19
  };
12
20
  /**
13
21
  * Hook for mapping a search param to a state. Whenever the value of the target search param
14
22
  * changes, the mapped state will change as well, and vice versa.
15
23
  *
16
24
  * @param param - The search param key.
17
- * @param initialState - The initial value of the state.
25
+ * @param defaultValue - The default value of the state.
18
26
  * @param options - See {@link Options}.
19
27
  *
20
28
  * @returns A tuple consisting of a stateful value representing the current value of the mapped
21
29
  * state and a function that updates it.
22
30
  */
23
- export default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>];
31
+ export default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }?: Options<T>): [T, Dispatch<SetStateAction<T>>];
package/lib/hooks/useSearchParamState.js CHANGED
@@ -24,20 +24,21 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:ho
24
24
  * changes, the mapped state will change as well, and vice versa.
25
25
  *
26
26
  * @param param - The search param key.
27
- * @param initialState - The initial value of the state.
27
+ * @param defaultValue - The default value of the state.
28
28
  * @param options - See {@link Options}.
29
29
  *
30
30
  * @returns A tuple consisting of a stateful value representing the current value of the mapped
31
31
  * state and a function that updates it.
32
32
  */
33
- function useSearchParamState(param, initialState, _a) {
34
- var _b = _a === void 0 ? {} : _a, mapSearchParamToState = _b.mapSearchParamToState, mapStateToSearchParam = _b.mapStateToSearchParam;
35
- var _mapSearchParamToState = function (value, initialState) {
33
+ function useSearchParamState(param, defaultValue, _a) {
34
+ var _b;
35
+ var _c = _a === void 0 ? {} : _a, mapSearchParamToState = _c.mapSearchParamToState, mapStateToSearchParam = _c.mapStateToSearchParam;
36
+ var _mapSearchParamToState = function (value, defaultValue) {
36
37
  if (mapSearchParamToState) {
37
38
  return mapSearchParamToState(value);
38
39
  }
39
- else if (value === null) {
40
- return initialState !== null && initialState !== void 0 ? initialState : null;
40
+ else if (!value) {
41
+ return defaultValue;
41
42
  }
42
43
  else {
43
44
  return value;
@@ -47,23 +48,23 @@ function useSearchParamState(param, initialState, _a) {
47
48
  if (mapStateToSearchParam) {
48
49
  return mapStateToSearchParam(state);
49
50
  }
50
- else if (state === null) {
51
- return null;
51
+ else if (state === defaultValue) {
52
+ return undefined;
52
53
  }
53
54
  else {
54
55
  return "".concat(state);
55
56
  }
56
57
  };
57
- var _c = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _c[0], setSearchParams = _c[1];
58
- var currentState = _mapSearchParamToState(searchParams.get(param), initialState);
59
- var _d = __read((0, react_1.useState)(currentState), 2), state = _d[0], setState = _d[1];
60
- debug('Using search param state...', 'OK', "param=".concat(param, ", initialState=").concat(currentState));
58
+ var _d = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _d[0], setSearchParams = _d[1];
59
+ var currentState = _mapSearchParamToState((_b = searchParams.get(param)) !== null && _b !== void 0 ? _b : undefined, defaultValue);
60
+ var _e = __read((0, react_1.useState)(currentState), 2), state = _e[0], setState = _e[1];
61
+ debug('Using search param state...', 'OK', "param=".concat(param, ", defaultValue=").concat(currentState));
61
62
  (0, react_1.useEffect)(function () {
62
63
  var value = searchParams.get(param);
63
64
  var newValue = _mapStateToSearchParam(state);
64
65
  if (newValue === value)
65
66
  return;
66
- if (newValue === null) {
67
+ if (!newValue) {
67
68
  searchParams.delete(param);
68
69
  }
69
70
  else {
package/lib/hooks/useSearchParamState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAclG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAuB,EAAE,EAAiE;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IACnI,IAAM,sBAAsB,GAAG,UAAC,KAAoB,EAAE,YAAuB;QAC3E,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAA;SAC5B;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAe;QAC7C,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAA;SACZ;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAA;IAC5E,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n /**\n * Function for transforming the search param value to the value of the mapped state.\n */\n mapSearchParamToState?: (value: string | null) => NonNullable<T> | null\n\n /**\n * Function for transforming the value of the mapped state to the search param value.\n */\n mapStateToSearchParam?: (state: T | null) => string | null\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param initialState - The initial value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n * state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, initialState?: T | null, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [NonNullable<T> | null, Dispatch<SetStateAction<NonNullable<T> | null>>] {\n const _mapSearchParamToState = (value: string | null, initialState?: T | null): NonNullable<T> | null => {\n if (mapSearchParamToState) {\n return mapSearchParamToState(value)\n }\n else if (value === null) {\n return initialState ?? null\n }\n else {\n return value as unknown as NonNullable<T>\n }\n }\n\n const _mapStateToSearchParam = (state: T | null): string | null => {\n if (mapStateToSearchParam) {\n return mapStateToSearchParam(state)\n }\n else if (state === null) {\n return null\n }\n else {\n return `${state}`\n }\n }\n\n const [searchParams, setSearchParams] = useSearchParams()\n const currentState = _mapSearchParamToState(searchParams.get(param), initialState)\n const [state, setState] = useState(currentState)\n\n debug('Using search param state...', 'OK', `param=${param}, initialState=${currentState}`)\n\n useEffect(() => {\n const value = searchParams.get(param)\n const newValue = _mapStateToSearchParam(state)\n\n if (newValue === value) return\n\n if (newValue === null) {\n searchParams.delete(param)\n }\n else {\n searchParams.set(param, newValue)\n }\n\n debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n setSearchParams(searchParams)\n }, [state])\n\n return [state, setState]\n}\n"]}
1
+ {"version":3,"file":"useSearchParamState.js","sourceRoot":"/","sources":["hooks/useSearchParamState.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAqE;AACrE,qDAAkD;AAElD,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAsBlG;;;;;;;;;;GAUG;AACH,SAAwB,mBAAmB,CAAI,KAAa,EAAE,YAAe,EAAE,EAAiE;;QAAjE,qBAA+D,EAAE,KAAA,EAA/D,qBAAqB,2BAAA,EAAE,qBAAqB,2BAAA;IAC3H,IAAM,sBAAsB,GAAG,UAAC,KAAyB,EAAE,YAAe;QACxE,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,YAAY,CAAA;SACpB;aACI;YACH,OAAO,KAAkC,CAAA;SAC1C;IACH,CAAC,CAAA;IAED,IAAM,sBAAsB,GAAG,UAAC,KAAQ;QACtC,IAAI,qBAAqB,EAAE;YACzB,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAA;SACpC;aACI,IAAI,KAAK,KAAK,YAAY,EAAE;YAC/B,OAAO,SAAS,CAAA;SACjB;aACI;YACH,OAAO,UAAG,KAAK,CAAE,CAAA;SAClB;IACH,CAAC,CAAA;IAEK,IAAA,KAAA,OAAkC,IAAA,kCAAe,GAAE,IAAA,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAA;IACzD,IAAM,YAAY,GAAG,sBAAsB,CAAC,MAAA,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,SAAS,EAAE,YAAY,CAAC,CAAA;IACzF,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAA;IAEhD,KAAK,CAAC,6BAA6B,EAAE,IAAI,EAAE,gBAAS,KAAK,4BAAkB,YAAY,CAAE,CAAC,CAAA;IAE1F,IAAA,iBAAS,EAAC;QACR,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACrC,IAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAM;QAE9B,IAAI,CAAC,QAAQ,EAAE;YACb,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B;aACI;YACH,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAClC;QAED,KAAK,CAAC,0BAA0B,EAAE,IAAI,EAAE,gBAAS,KAAK,wBAAc,KAAK,wBAAc,QAAQ,CAAE,CAAC,CAAA;QAElG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAC1B,CAAC;AAlDD,sCAkDC","sourcesContent":["import { Dispatch, SetStateAction, useEffect, useState } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:hooks') : () => {}\n\nexport type Options<T> = {\n /**\n * Function for transforming the search param value to the value of the mapped state.\n *\n * @param value - The search param value. `undefined` means the value is unavailable.\n *\n * @returns The equivalent state value.\n */\n mapSearchParamToState?: (value?: string) => T\n\n /**\n * Function for transforming the value of the mapped state to the search param value.\n *\n * @param state - The state value.\n *\n * @returns The equivalent search param value.\n */\n mapStateToSearchParam?: (state: T) => string | undefined\n}\n\n/**\n * Hook for mapping a search param to a state. Whenever the value of the target search param\n * changes, the mapped state will change as well, and vice versa.\n *\n * @param param - The search param key.\n * @param defaultValue - The default value of the state.\n * @param options - See {@link Options}.\n *\n * @returns A tuple consisting of a stateful value representing the current value of the mapped\n * state and a function that updates it.\n */\nexport default function useSearchParamState<T>(param: string, defaultValue: T, { mapSearchParamToState, mapStateToSearchParam }: Options<T> = {}): [T, Dispatch<SetStateAction<T>>] {\n const _mapSearchParamToState = (value: string | undefined, defaultValue: T): T => {\n if (mapSearchParamToState) {\n return mapSearchParamToState(value)\n }\n else if (!value) {\n return defaultValue\n }\n else {\n return value as unknown as NonNullable<T>\n }\n }\n\n const _mapStateToSearchParam = (state: T): string | undefined => {\n if (mapStateToSearchParam) {\n return mapStateToSearchParam(state)\n }\n else if (state === defaultValue) {\n return undefined\n }\n else {\n return `${state}`\n }\n }\n\n const [searchParams, setSearchParams] = useSearchParams()\n const currentState = _mapSearchParamToState(searchParams.get(param) ?? undefined, defaultValue)\n const [state, setState] = useState(currentState)\n\n debug('Using search param state...', 'OK', `param=${param}, defaultValue=${currentState}`)\n\n useEffect(() => {\n const value = searchParams.get(param)\n const newValue = _mapStateToSearchParam(state)\n\n if (newValue === value) return\n\n if (!newValue) {\n searchParams.delete(param)\n }\n else {\n searchParams.set(param, newValue)\n }\n\n debug('Handling state change...', 'OK', `state=${state}, oldValue=${value}, newValue=${newValue}`)\n\n setSearchParams(searchParams)\n }, [state])\n\n return [state, setState]\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "0.57.0",
3
+ "version": "0.60.0",
4
4
  "description": "A study of styled React components",
5
5
  "main": "lib",
6
6
  "scripts": {
@@ -29,48 +29,48 @@
29
29
  "lib"
30
30
  ],
31
31
  "devDependencies": {
32
- "@babel/core": "^7.17.5",
32
+ "@babel/core": "^7.17.8",
33
33
  "@babel/plugin-proposal-class-properties": "^7.16.7",
34
- "@babel/plugin-proposal-decorators": "^7.17.2",
34
+ "@babel/plugin-proposal-decorators": "^7.17.8",
35
35
  "@babel/plugin-transform-runtime": "^7.17.0",
36
36
  "@babel/preset-env": "^7.16.11",
37
37
  "@babel/preset-react": "^7.16.7",
38
38
  "@babel/preset-typescript": "^7.16.7",
39
- "@babel/runtime": "^7.17.2",
39
+ "@babel/runtime": "^7.17.8",
40
40
  "@types/debug": "^4.1.7",
41
41
  "@types/html-webpack-plugin": "^3.2.6",
42
- "@types/lodash": "^4.14.179",
43
- "@types/react": "^17.0.39",
44
- "@types/react-dom": "^17.0.13",
42
+ "@types/lodash": "^4.14.181",
43
+ "@types/react": "^17.0.43",
44
+ "@types/react-dom": "^17.0.14",
45
45
  "@types/react-transition-group": "^4.4.4",
46
46
  "@types/styled-components": "^5.1.24",
47
47
  "@types/webpack": "^5.28.0",
48
48
  "@types/webpack-env": "^1.16.3",
49
- "@typescript-eslint/eslint-plugin": "^5.14.0",
50
- "@typescript-eslint/parser": "^5.14.0",
51
- "babel-loader": "^8.2.3",
49
+ "@typescript-eslint/eslint-plugin": "^5.17.0",
50
+ "@typescript-eslint/parser": "^5.17.0",
51
+ "babel-loader": "^8.2.4",
52
52
  "babel-plugin-styled-components": "^2.0.6",
53
- "concurrently": "^7.0.0",
53
+ "concurrently": "^7.1.0",
54
54
  "cross-env": "^7.0.3",
55
- "debug": "^4.3.3",
56
- "eslint": "^8.10.0",
55
+ "debug": "^4.3.4",
56
+ "eslint": "^8.12.0",
57
57
  "file-loader": "^6.2.0",
58
58
  "html-webpack-plugin": "^5.5.0",
59
59
  "promptu": "^5.7.0",
60
60
  "raw-loader": "^4.0.2",
61
- "react": "^17.0.2",
62
- "react-dom": "^17.0.2",
63
- "react-is": "^17.0.2",
64
- "react-router": "^6.2.2",
65
- "react-router-dom": "^6.2.2",
61
+ "react": "^18.0.0",
62
+ "react-dom": "^18.0.0",
63
+ "react-is": "^18.0.0",
64
+ "react-router": "^6.3.0",
65
+ "react-router-dom": "^6.3.0",
66
66
  "rimraf": "^3.0.2",
67
- "styled-components": "^5.3.3",
68
- "ts-loader": "^9.2.7",
67
+ "styled-components": "^5.3.5",
68
+ "ts-loader": "^9.2.8",
69
69
  "ts-node": "^10.7.0",
70
- "typescript": "^4.6.2",
70
+ "typescript": "^4.6.3",
71
71
  "url-loader": "^4.1.1",
72
72
  "wait-on": "^6.0.1",
73
- "webpack": "^5.70.0",
73
+ "webpack": "^5.71.0",
74
74
  "webpack-cli": "^4.9.2",
75
75
  "webpack-dev-server": "^4.7.4"
76
76
  },
@@ -84,11 +84,11 @@
84
84
  "spase": "^6.3.0"
85
85
  },
86
86
  "peerDependencies": {
87
- "react": "^17.0.2",
88
- "styled-components": "^5.3.3"
87
+ "react": "^18.0.0",
88
+ "styled-components": "^5.3.5"
89
89
  },
90
90
  "optionalDependencies": {
91
- "react-router": "^6.2.2",
92
- "react-router-dom": "^6.2.2"
91
+ "react-router": "^6.3.0",
92
+ "react-router-dom": "^6.3.0"
93
93
  }
94
94
  }