etudes 2.6.0 → 3.0.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 (10) hide show
  1. package/lib/Accordion.d.ts +90 -64
  2. package/lib/Accordion.js +84 -33
  3. package/lib/Accordion.js.map +1 -1
  4. package/lib/Dropdown.d.ts +28 -79
  5. package/lib/Dropdown.js +48 -30
  6. package/lib/Dropdown.js.map +1 -1
  7. package/lib/List.d.ts +50 -42
  8. package/lib/List.js +39 -19
  9. package/lib/List.js.map +1 -1
  10. package/package.json +10 -10
package/lib/List.js CHANGED
@@ -60,11 +60,21 @@ var __read = (this && this.__read) || function (o, n) {
60
60
  }
61
61
  return ar;
62
62
  };
63
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
64
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
65
+ if (ar || !(i in from)) {
66
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
67
+ ar[i] = from[i];
68
+ }
69
+ }
70
+ return to.concat(ar || Array.prototype.slice.call(from));
71
+ };
63
72
  var __importDefault = (this && this.__importDefault) || function (mod) {
64
73
  return (mod && mod.__esModule) ? mod : { "default": mod };
65
74
  };
66
75
  Object.defineProperty(exports, "__esModule", { value: true });
67
76
  var classnames_1 = __importDefault(require("classnames"));
77
+ var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
68
78
  var react_1 = __importStar(require("react"));
69
79
  var Each_1 = __importDefault(require("./Each"));
70
80
  var usePrevious_1 = __importDefault(require("./hooks/usePrevious"));
@@ -77,7 +87,7 @@ var styles_1 = __importDefault(require("./utils/styles"));
77
87
  * generic. This component supports both horizontal and vertical orientations.
78
88
  */
79
89
  exports.default = (0, react_1.forwardRef)(function (_a, ref) {
80
- var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, isSelectable = _a.isSelectable, isTogglable = _a.isTogglable, ItemComponentType = _a.itemComponentType, itemLength = _a.itemLength, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.orientation, orientation = _d === void 0 ? 'vertical' : _d, _e = _a.selectedIndex, externalSelectedIndex = _e === void 0 ? -1 : _e, onActivate = _a.onActivate, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, props = __rest(_a, ["className", "style", "borderThickness", "data", "isSelectable", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndex", "onActivate", "onDeselectAt", "onSelectAt"]);
90
+ var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'none' : _c, isTogglable = _a.isTogglable, ItemComponentType = _a.itemComponentType, itemLength = _a.itemLength, _d = _a.itemPadding, itemPadding = _d === void 0 ? 0 : _d, _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = _a.selectedIndices, externalSelectedIndices = _f === void 0 ? [] : _f, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, props = __rest(_a, ["className", "style", "borderThickness", "data", "selectionMode", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndices", "onActivateAt", "onDeselectAt", "onSelectAt"]);
81
91
  var isIndexOutOfRange = function (index) {
82
92
  if (index >= data.length)
83
93
  return true;
@@ -85,7 +95,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
85
95
  return true;
86
96
  return false;
87
97
  };
88
- var isSelectedAt = function (index) { return selectedIndex === index; };
98
+ var isSelectedAt = function (index) { return selectedIndices.indexOf(index) >= 0; };
89
99
  var toggleAt = function (index) {
90
100
  if (isSelectedAt(index)) {
91
101
  deselectAt(index);
@@ -97,15 +107,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
97
107
  var selectAt = function (index) {
98
108
  if (isSelectedAt(index))
99
109
  return;
100
- setSelectedIndex(index);
110
+ switch (selectionMode) {
111
+ case 'multiple':
112
+ setSelectedIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== index; })), false), [index], false); });
113
+ break;
114
+ case 'single':
115
+ setSelectedIndices([index]);
116
+ break;
117
+ default:
118
+ break;
119
+ }
101
120
  };
102
121
  var deselectAt = function (index) {
103
122
  if (!isSelectedAt(index))
104
123
  return;
105
- setSelectedIndex(-1);
124
+ setSelectedIndices(function (prev) { return prev.filter(function (t) { return t !== index; }); });
106
125
  };
107
- var onClick = function (index) {
108
- if (isSelectable) {
126
+ var activateAt = function (index) {
127
+ if (selectionMode !== 'none') {
109
128
  if (isTogglable) {
110
129
  toggleAt(index);
111
130
  }
@@ -113,23 +132,24 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
113
132
  selectAt(index);
114
133
  }
115
134
  }
116
- onActivate === null || onActivate === void 0 ? void 0 : onActivate(index);
135
+ onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(index);
117
136
  };
118
- var _f = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _f[0], setSelectedIndex = _f[1];
119
- var prevSelectedIndex = (0, usePrevious_1.default)(selectedIndex);
137
+ var _g = __read((0, react_1.useState)(externalSelectedIndices), 2), selectedIndices = _g[0], setSelectedIndices = _g[1];
138
+ var prevSelectedIndices = (0, usePrevious_1.default)(selectedIndices);
120
139
  (0, react_1.useEffect)(function () {
121
- if (externalSelectedIndex === selectedIndex)
140
+ if ((0, fast_deep_equal_1.default)(externalSelectedIndices, selectedIndices))
122
141
  return;
123
- setSelectedIndex(externalSelectedIndex);
124
- }, [externalSelectedIndex]);
142
+ setSelectedIndices(externalSelectedIndices);
143
+ }, [JSON.stringify(externalSelectedIndices)]);
125
144
  (0, react_1.useEffect)(function () {
126
- if (!isSelectable)
145
+ var _a;
146
+ if (selectionMode === 'none')
127
147
  return;
128
- if (!isIndexOutOfRange(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1))
129
- onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1);
130
- if (!isIndexOutOfRange(selectedIndex))
131
- onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(selectedIndex);
132
- }, [selectedIndex]);
148
+ var deselected = (_a = prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.filter(function (t) { return !isIndexOutOfRange(t) && selectedIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
149
+ var selected = selectedIndices.filter(function (t) { return !isIndexOutOfRange(t) && (prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.indexOf(t)) === -1; });
150
+ deselected.map(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
151
+ selected.map(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
152
+ }, [selectedIndices]);
133
153
  var fixedClassNames = (0, asClassNameDict_1.default)({
134
154
  root: (0, classnames_1.default)(orientation, {
135
155
  togglable: isTogglable,
@@ -166,6 +186,6 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
166
186
  marginBottom: "".concat(itemPadding, "px"),
167
187
  } : {
168
188
  marginRight: "".concat(itemPadding, "px"),
169
- }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onClick: function () { return onClick(idx); } })); }))));
189
+ }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onClick: function () { return activateAt(idx); } })); }))));
170
190
  });
171
191
  //# sourceMappingURL=List.js.map
package/lib/List.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n data: T\n index: number\n isSelected: boolean\n orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n /**\n * Thickness of item borders (in pixels). 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * Generically typed data of each item.\n */\n data: T[]\n\n /**\n * The selected index. Any value below 0 indicates that nothing is\n * selected.\n */\n selectedIndex?: number\n\n /**\n * React component type to be used to generate items for this list.\n */\n itemComponentType?: ComponentType<ListItemProps<T>>\n\n /**\n * Optional length of each item.\n */\n itemLength?: number\n\n /**\n * Padding between every item (in pixels).\n */\n itemPadding?: number\n\n /**\n * Indicates whether selections are retained. For example, in the case of a\n * vertical list of clickable rows, being able to retain a selection means\n * when the row is clicked, it becomes and stays selected. Being unable to\n * retain a selection means when the row is clicked, it does not become\n * selected. It is simply clicked and the subsequent event is dispatched.\n */\n isSelectable?: boolean\n\n /**\n * Indicates whether selections can be toggled. For example, in the case of a\n * vertical list of selectable rows, being able to toggle a row means it gets\n * deselected when selected again. Being unable to toggle the row means it\n * does not get deselected when selected again.\n */\n isTogglable?: boolean\n\n /**\n * Orientation of the list.\n */\n orientation?: Orientation\n\n /**\n * Handler invoked when an index is activated.\n */\n onActivate?: (index: number) => void\n\n /**\n * Handler invoked when an index is deselected.\n */\n onDeselectAt?: (index: number) => void\n\n /**\n * Handler invoked when an index is selected.\n */\n onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n className,\n style,\n borderThickness = 0,\n data,\n isSelectable,\n isTogglable,\n itemComponentType: ItemComponentType,\n itemLength,\n itemPadding = 0,\n orientation = 'vertical',\n selectedIndex: externalSelectedIndex = -1,\n onActivate,\n onDeselectAt,\n onSelectAt,\n ...props\n}, ref) => {\n const isIndexOutOfRange = (index: number) => {\n if (index >= data.length) return true\n if (index < 0) return true\n\n return false\n }\n\n const isSelectedAt = (index: number) => selectedIndex === index\n\n const toggleAt = (index: number) => {\n if (isSelectedAt(index)) {\n deselectAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n const selectAt = (index: number) => {\n if (isSelectedAt(index)) return\n setSelectedIndex(index)\n }\n\n const deselectAt = (index: number) => {\n if (!isSelectedAt(index)) return\n setSelectedIndex(-1)\n }\n\n const onClick = (index: number) => {\n if (isSelectable) {\n if (isTogglable) {\n toggleAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n onActivate?.(index)\n }\n\n const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n const prevSelectedIndex = usePrevious(selectedIndex)\n\n useEffect(() => {\n if (externalSelectedIndex === selectedIndex) return\n setSelectedIndex(externalSelectedIndex)\n }, [externalSelectedIndex])\n\n useEffect(() => {\n if (!isSelectable) return\n\n if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n }, [selectedIndex])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n }),\n item: classNames(orientation, {\n togglable: isTogglable,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'flex-start',\n counterReset: 'item-counter',\n display: 'flex',\n flex: '0 0 auto',\n flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n justifyContent: 'flex-start',\n listStyle: 'none',\n },\n item: {\n borderWidth: `${borderThickness}px`,\n counterIncrement: 'item-counter',\n flex: '0 0 auto',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n {ItemComponentType && (\n <Each in={data}>\n {(val, idx) => (\n <ItemComponentType\n className={classNames(fixedClassNames.item, {\n selected: isSelectedAt(idx),\n })}\n style={styles(fixedStyles.item, {\n pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n ...orientation === 'vertical' ? {\n height: itemLength !== undefined ? `${itemLength}px` : undefined,\n marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n } : {\n marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n width: itemLength !== undefined ? `${itemLength}px` : undefined,\n },\n ...idx >= data.length - 1 ? {} : {\n ...orientation === 'vertical' ? {\n marginBottom: `${itemPadding}px`,\n } : {\n marginRight: `${itemPadding}px`,\n },\n },\n })}\n data-index={idx}\n data={val}\n index={idx}\n isSelected={isSelectedAt(idx)}\n orientation={orientation}\n onClick={() => onClick(idx)}\n />\n )}\n </Each>\n )}\n </div>\n )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
1
+ {"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n data: T\n index: number\n isSelected: boolean\n orientation: Orientation\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n /**\n * Thickness of item borders (in pixels). 0 indicates no borders.\n */\n borderThickness?: number\n\n /**\n * Generically typed data of each item.\n */\n data: T[]\n\n /**\n * Indicates if items can be toggled, i.e. they can be deselected if selected\n * again.\n */\n isTogglable?: boolean\n\n /**\n * React component type to be used to generate items for this list.\n */\n itemComponentType?: ComponentType<ListItemProps<T>>\n\n /**\n * Optional length (in pixels) of each item. Length refers to the height in\n * vertical orientation and width in horizontal orientation.\n */\n itemLength?: number\n\n /**\n * Padding between every item (in pixels).\n */\n itemPadding?: number\n\n /**\n * Orientation of the component.\n */\n orientation?: Orientation\n\n /**\n * The selected indices. If `selectionMode` is `single`, only only the first\n * value will be used.\n */\n selectedIndices?: number[]\n\n /**\n * Indicates the selection behavior:\n * - `none`: No selection at all.\n * - `single`: Only one item can be selected at a time.\n * - `multiple`: Multiple items can be selected at the same time.\n */\n selectionMode?: 'none' | 'single' | 'multiple'\n\n /**\n * Handler invoked when an item is activated.\n *\n * @param index Item index.\n */\n onActivateAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is deselected.\n *\n * @param index Item index.\n */\n onDeselectAt?: (index: number) => void\n\n /**\n * Handler invoked when an item is selected.\n *\n * @param index Item index.\n */\n onSelectAt?: (index: number) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n className,\n style,\n borderThickness = 0,\n data,\n selectionMode = 'none',\n isTogglable,\n itemComponentType: ItemComponentType,\n itemLength,\n itemPadding = 0,\n orientation = 'vertical',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n ...props\n}, ref) => {\n const isIndexOutOfRange = (index: number) => {\n if (index >= data.length) return true\n if (index < 0) return true\n\n return false\n }\n\n const isSelectedAt = (index: number) => selectedIndices.indexOf(index) >= 0\n\n const toggleAt = (index: number) => {\n if (isSelectedAt(index)) {\n deselectAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n const selectAt = (index: number) => {\n if (isSelectedAt(index)) return\n\n switch (selectionMode) {\n case 'multiple':\n setSelectedIndices(prev => [...prev.filter(t => t !== index), index])\n\n break\n case 'single':\n setSelectedIndices([index])\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (index: number) => {\n if (!isSelectedAt(index)) return\n\n setSelectedIndices(prev => prev.filter(t => t !== index))\n }\n\n const activateAt = (index: number) => {\n if (selectionMode !== 'none') {\n if (isTogglable) {\n toggleAt(index)\n }\n else {\n selectAt(index)\n }\n }\n\n onActivateAt?.(index)\n }\n\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const prevSelectedIndices = usePrevious(selectedIndices)\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n useEffect(() => {\n if (selectionMode === 'none') return\n\n const deselected = prevSelectedIndices?.filter(t => !isIndexOutOfRange(t) && selectedIndices.indexOf(t) === -1) ?? []\n const selected = selectedIndices.filter(t => !isIndexOutOfRange(t) && prevSelectedIndices?.indexOf(t) === -1)\n\n deselected.map(t => onDeselectAt?.(t))\n selected.map(t => onSelectAt?.(t))\n }, [selectedIndices])\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n }),\n item: classNames(orientation, {\n togglable: isTogglable,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'flex-start',\n counterReset: 'item-counter',\n display: 'flex',\n flex: '0 0 auto',\n flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n justifyContent: 'flex-start',\n listStyle: 'none',\n },\n item: {\n borderWidth: `${borderThickness}px`,\n counterIncrement: 'item-counter',\n flex: '0 0 auto',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n })\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n {ItemComponentType && (\n <Each in={data}>\n {(val, idx) => (\n <ItemComponentType\n className={classNames(fixedClassNames.item, {\n selected: isSelectedAt(idx),\n })}\n style={styles(fixedStyles.item, {\n pointerEvents: isTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n ...orientation === 'vertical' ? {\n height: itemLength !== undefined ? `${itemLength}px` : undefined,\n marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n } : {\n marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n width: itemLength !== undefined ? `${itemLength}px` : undefined,\n },\n ...idx >= data.length - 1 ? {} : {\n ...orientation === 'vertical' ? {\n marginBottom: `${itemPadding}px`,\n } : {\n marginRight: `${itemPadding}px`,\n },\n },\n })}\n data-index={idx}\n data={val}\n index={idx}\n isSelected={isSelectedAt(idx)}\n orientation={orientation}\n onClick={() => activateAt(idx)}\n />\n )}\n </Each>\n )}\n </div>\n )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etudes",
3
- "version": "2.6.0",
3
+ "version": "3.0.0",
4
4
  "description": "A study of headless React components",
5
5
  "main": "lib",
6
6
  "scripts": {
@@ -29,7 +29,7 @@
29
29
  "lib"
30
30
  ],
31
31
  "devDependencies": {
32
- "@babel/core": "^7.22.17",
32
+ "@babel/core": "^7.22.19",
33
33
  "@babel/plugin-transform-runtime": "^7.22.15",
34
34
  "@babel/preset-env": "^7.22.15",
35
35
  "@babel/preset-react": "^7.22.15",
@@ -40,11 +40,11 @@
40
40
  "@types/react": "^18.2.21",
41
41
  "@types/react-dom": "^18.2.7",
42
42
  "@types/react-transition-group": "^4.4.6",
43
- "@types/styled-components": "^5.1.26",
43
+ "@types/styled-components": "^5.1.27",
44
44
  "@types/webpack": "^5.28.2",
45
45
  "@types/webpack-env": "^1.18.1",
46
- "@typescript-eslint/eslint-plugin": "^6.6.0",
47
- "@typescript-eslint/parser": "^6.6.0",
46
+ "@typescript-eslint/eslint-plugin": "^6.7.0",
47
+ "@typescript-eslint/parser": "^6.7.0",
48
48
  "babel-loader": "^9.1.3",
49
49
  "babel-plugin-styled-components": "^2.1.4",
50
50
  "concurrently": "^8.2.1",
@@ -55,10 +55,10 @@
55
55
  "html-webpack-plugin": "^5.5.3",
56
56
  "react": "^18.2.0",
57
57
  "react-dom": "^18.2.0",
58
- "react-router": "^6.15.0",
59
- "react-router-dom": "^6.15.0",
58
+ "react-router": "^6.16.0",
59
+ "react-router-dom": "^6.16.0",
60
60
  "rimraf": "^5.0.1",
61
- "styled-components": "^6.0.7",
61
+ "styled-components": "^6.0.8",
62
62
  "ts-node": "^10.9.1",
63
63
  "typescript": "^5.2.2",
64
64
  "wait-on": "^7.0.1",
@@ -79,7 +79,7 @@
79
79
  },
80
80
  "optionalDependencies": {
81
81
  "fast-xml-parser": "^4.2.7",
82
- "react-router": "^6.15.0",
83
- "react-router-dom": "^6.15.0"
82
+ "react-router": "^6.16.0",
83
+ "react-router-dom": "^6.16.0"
84
84
  }
85
85
  }