@ballistix.digital/react-components 0.1.13 → 0.2.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/dist/index.d.ts +22 -19
  2. package/dist/index.esm.js +28 -26
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +28 -26
  5. package/dist/index.js.map +1 -1
  6. package/package.json +7 -3
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { FC, ReactNode, RefObject, ReactElement } from 'react';
1
+ import React, { FC, ReactNode, RefObject, ReactElement, Dispatch, SetStateAction, ElementType } from 'react';
2
2
  import { Menu } from '@headlessui/react';
3
3
 
4
4
  type StylesType$f = {
@@ -338,14 +338,14 @@ type NavigationStylesType$2 = {
338
338
  interface ContainerProps$2 {
339
339
  children: ({ active, setActive, }: {
340
340
  active: string;
341
- setActive: any;
342
- }) => ReactNode | ReactNode[];
341
+ setActive: Dispatch<SetStateAction<string>>;
342
+ }) => ReactNode;
343
343
  styles?: ContainerStylesType$2;
344
344
  }
345
345
  interface ListProps {
346
- children: ReactNode | ReactNode[];
346
+ children: ReactElement;
347
347
  active: string;
348
- setActive: any;
348
+ setActive: Dispatch<SetStateAction<string>>;
349
349
  styles?: NavigationStylesType$2;
350
350
  }
351
351
  interface ItemProps {
@@ -353,9 +353,10 @@ interface ItemProps {
353
353
  href?: string;
354
354
  type?: string;
355
355
  children: ReactNode;
356
+ linkComponent?: ElementType;
356
357
  isCurrent?: boolean;
357
358
  isInitial?: boolean;
358
- onClick?: (accessor: any) => void;
359
+ onClick?: (accessor: MouseEvent) => void;
359
360
  }
360
361
  interface FooterProps {
361
362
  children: ReactNode | ReactNode[];
@@ -379,27 +380,28 @@ type NavigationStylesType$1 = {
379
380
  interface ContainerProps$1 {
380
381
  children: ({ active, setActive, }: {
381
382
  active: string;
382
- setActive: any;
383
- }) => ReactNode | ReactNode[];
383
+ setActive: Dispatch<SetStateAction<string>>;
384
+ }) => ReactNode;
384
385
  styles?: ContainerStylesType$1;
385
386
  }
386
387
  interface NavigationProps$1 {
387
- children: ReactNode | ReactNode[];
388
+ children: ReactElement;
388
389
  active: string;
389
- setActive: any;
390
+ setActive: Dispatch<SetStateAction<string>>;
390
391
  styles?: NavigationStylesType$1;
391
392
  }
392
393
  interface NavigationItemProps$1 {
393
394
  accessor: string;
394
395
  href?: string;
395
- type?: string;
396
+ type?: 'underline' | 'pills' | 'buttons';
396
397
  children: ReactNode;
398
+ linkComponent?: ElementType;
397
399
  isCurrent?: boolean;
398
400
  isInitial?: boolean;
399
- onClick?: (accessor: any) => void;
401
+ onClick?: (accessor: MouseEvent) => void;
400
402
  }
401
403
  interface ViewProps$1 {
402
- children: ReactNode | ReactNode[];
404
+ children: ReactNode;
403
405
  }
404
406
  declare const TabNavigation: {
405
407
  Container: React.FC<ContainerProps$1>;
@@ -418,14 +420,14 @@ type NavigationStylesType = {
418
420
  interface ContainerProps {
419
421
  children: ({ active, setActive, }: {
420
422
  active: string;
421
- setActive: any;
422
- }) => ReactNode | ReactNode[];
423
+ setActive: Dispatch<SetStateAction<string>>;
424
+ }) => ReactNode;
423
425
  styles?: ContainerStylesType;
424
426
  }
425
427
  interface NavigationProps {
426
- children: ReactNode | ReactNode[];
428
+ children: ReactElement;
427
429
  active: string;
428
- setActive: any;
430
+ setActive: Dispatch<SetStateAction<string>>;
429
431
  styles?: NavigationStylesType;
430
432
  }
431
433
  interface NavigationItemProps {
@@ -433,12 +435,13 @@ interface NavigationItemProps {
433
435
  href?: string;
434
436
  type?: string;
435
437
  children: ReactNode;
438
+ linkComponent?: ElementType;
436
439
  isCurrent?: boolean;
437
440
  isInitial?: boolean;
438
- onClick?: (accessor: any) => void;
441
+ onClick?: (accessor: MouseEvent) => void;
439
442
  }
440
443
  interface ViewProps {
441
- children: ReactNode | ReactNode[];
444
+ children: ReactNode;
442
445
  }
443
446
  declare const VerticalNavigation: {
444
447
  Container: React.FC<ContainerProps>;
package/dist/index.esm.js CHANGED
@@ -1126,18 +1126,21 @@ var List$2 = function (props) {
1126
1126
  return values.filter(Boolean).join(' ');
1127
1127
  }, []);
1128
1128
  useEffect(function () {
1129
- var _a, _b;
1130
- var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1131
- var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1129
+ var tab;
1130
+ var tabs = Children.map(children, function (child) { return child; });
1131
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1132
1132
  if (initialTab !== undefined) {
1133
1133
  tab = initialTab;
1134
1134
  }
1135
+ else {
1136
+ tab = tabs[0];
1137
+ }
1135
1138
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1136
1139
  }, []);
1137
1140
  return (jsx("nav", __assign({ className: toClassName(styles$5.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1138
1141
  };
1139
1142
  var Item$2 = function (props) {
1140
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1143
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1141
1144
  var toClassName = useCallback(function () {
1142
1145
  var values = [];
1143
1146
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1145,9 +1148,7 @@ var Item$2 = function (props) {
1145
1148
  }
1146
1149
  return values.filter(Boolean).join(' ');
1147
1150
  }, []);
1148
- return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
1149
- ? styles$5.item.active
1150
- : styles$5.item.notActive, styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
1151
+ return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$5.item[isCurrent ? 'active' : 'notActive'], styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
1151
1152
  };
1152
1153
  var Footer = function (props) {
1153
1154
  var children = props.children;
@@ -1181,9 +1182,9 @@ var Container$1 = function (props) {
1181
1182
  var List$1 = function (props) {
1182
1183
  var children = props.children, active = props.active, setActive = props.setActive, customStyles = props.styles;
1183
1184
  var handleChangeSelect = useCallback(function (e) {
1184
- var _a;
1185
- var key = e.currentTarget.value;
1186
- var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.props.accessor === key; });
1185
+ var _a, _b;
1186
+ var key = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
1187
+ var tab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (child) { return child.props.accessor === key; });
1187
1188
  if (tab === null || tab === void 0 ? void 0 : tab.props.href) {
1188
1189
  window.location.href = tab.props.href;
1189
1190
  }
@@ -1199,22 +1200,24 @@ var List$1 = function (props) {
1199
1200
  return values.filter(Boolean).join(' ');
1200
1201
  }, []);
1201
1202
  useEffect(function () {
1202
- var _a, _b;
1203
- var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1204
- var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1203
+ var tab;
1204
+ var tabs = Children.map(children, function (child) { return child; });
1205
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1205
1206
  if (initialTab !== undefined) {
1206
1207
  tab = initialTab;
1207
1208
  }
1209
+ else {
1210
+ tab = tabs[0];
1211
+ }
1208
1212
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1209
- // eslint-disable-next-line react-hooks/exhaustive-deps
1210
- }, [setActive]);
1213
+ }, []);
1211
1214
  return (jsxs(Fragment$1, { children: [jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, customStyles === null || customStyles === void 0 ? void 0 : customStyles.select), onChange: handleChangeSelect }, { children: Children.map(children, function (child) {
1212
1215
  var _a;
1213
1216
  return (jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
1214
1217
  }) }))] })), jsx("div", __assign({ className: "hidden sm:block" }, { children: jsx("nav", __assign({ className: toClassName(styles$4.navigation, customStyles === null || customStyles === void 0 ? void 0 : customStyles.navigation) }, { children: children })) }))] }));
1215
1218
  };
1216
1219
  var Item$1 = function (props) {
1217
- var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1220
+ var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, _b = props.linkComponent, LinkComponent = _b === void 0 ? 'a' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1218
1221
  var toClassName = useCallback(function () {
1219
1222
  var values = [];
1220
1223
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1222,9 +1225,7 @@ var Item$1 = function (props) {
1222
1225
  }
1223
1226
  return values.filter(Boolean).join(' ');
1224
1227
  }, []);
1225
- return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
1226
- ? styles$4.tab[type].active
1227
- : styles$4.tab[type].notActive, styles$4.tab[type].base), onClick: onClick }, { children: children })));
1228
+ return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.tab[type][isCurrent ? 'active' : 'notActive'], styles$4.tab[type].base), onClick: onClick }, { children: children })));
1228
1229
  };
1229
1230
  var View$1 = function (props) {
1230
1231
  var children = props.children;
@@ -1275,18 +1276,21 @@ var List = function (props) {
1275
1276
  return values.filter(Boolean).join(' ');
1276
1277
  }, []);
1277
1278
  useEffect(function () {
1278
- var _a, _b;
1279
- var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1280
- var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1279
+ var tab;
1280
+ var tabs = Children.map(children, function (child) { return child; });
1281
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1281
1282
  if (initialTab !== undefined) {
1282
1283
  tab = initialTab;
1283
1284
  }
1285
+ else {
1286
+ tab = tabs[0];
1287
+ }
1284
1288
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1285
1289
  }, []);
1286
1290
  return (jsx("nav", __assign({ className: toClassName(styles$3.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1287
1291
  };
1288
1292
  var Item = function (props) {
1289
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1293
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1290
1294
  var toClassName = useCallback(function () {
1291
1295
  var values = [];
1292
1296
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1294,9 +1298,7 @@ var Item = function (props) {
1294
1298
  }
1295
1299
  return values.filter(Boolean).join(' ');
1296
1300
  }, []);
1297
- return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
1298
- ? styles$3.item.active
1299
- : styles$3.item.notActive, styles$3 === null || styles$3 === void 0 ? void 0 : styles$3.item.base), onClick: onClick }, { children: children })));
1301
+ return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
1300
1302
  };
1301
1303
  var View = function (props) {
1302
1304
  var children = props.children;
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -1134,18 +1134,21 @@ var List$2 = function (props) {
1134
1134
  return values.filter(Boolean).join(' ');
1135
1135
  }, []);
1136
1136
  React.useEffect(function () {
1137
- var _a, _b;
1138
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1139
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1137
+ var tab;
1138
+ var tabs = React.Children.map(children, function (child) { return child; });
1139
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1140
1140
  if (initialTab !== undefined) {
1141
1141
  tab = initialTab;
1142
1142
  }
1143
+ else {
1144
+ tab = tabs[0];
1145
+ }
1143
1146
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1144
1147
  }, []);
1145
1148
  return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$5.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1146
1149
  };
1147
1150
  var Item$2 = function (props) {
1148
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1151
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1149
1152
  var toClassName = React.useCallback(function () {
1150
1153
  var values = [];
1151
1154
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1153,9 +1156,7 @@ var Item$2 = function (props) {
1153
1156
  }
1154
1157
  return values.filter(Boolean).join(' ');
1155
1158
  }, []);
1156
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1157
- ? styles$5.item.active
1158
- : styles$5.item.notActive, styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
1159
+ return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$5.item[isCurrent ? 'active' : 'notActive'], styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
1159
1160
  };
1160
1161
  var Footer = function (props) {
1161
1162
  var children = props.children;
@@ -1189,9 +1190,9 @@ var Container$1 = function (props) {
1189
1190
  var List$1 = function (props) {
1190
1191
  var children = props.children, active = props.active, setActive = props.setActive, customStyles = props.styles;
1191
1192
  var handleChangeSelect = React.useCallback(function (e) {
1192
- var _a;
1193
- var key = e.currentTarget.value;
1194
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.props.accessor === key; });
1193
+ var _a, _b;
1194
+ var key = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
1195
+ var tab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (child) { return child.props.accessor === key; });
1195
1196
  if (tab === null || tab === void 0 ? void 0 : tab.props.href) {
1196
1197
  window.location.href = tab.props.href;
1197
1198
  }
@@ -1207,22 +1208,24 @@ var List$1 = function (props) {
1207
1208
  return values.filter(Boolean).join(' ');
1208
1209
  }, []);
1209
1210
  React.useEffect(function () {
1210
- var _a, _b;
1211
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1212
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1211
+ var tab;
1212
+ var tabs = React.Children.map(children, function (child) { return child; });
1213
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1213
1214
  if (initialTab !== undefined) {
1214
1215
  tab = initialTab;
1215
1216
  }
1217
+ else {
1218
+ tab = tabs[0];
1219
+ }
1216
1220
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1217
- // eslint-disable-next-line react-hooks/exhaustive-deps
1218
- }, [setActive]);
1221
+ }, []);
1219
1222
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsxRuntime.jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, customStyles === null || customStyles === void 0 ? void 0 : customStyles.select), onChange: handleChangeSelect }, { children: React.Children.map(children, function (child) {
1220
1223
  var _a;
1221
1224
  return (jsxRuntime.jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
1222
1225
  }) }))] })), jsxRuntime.jsx("div", __assign({ className: "hidden sm:block" }, { children: jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$4.navigation, customStyles === null || customStyles === void 0 ? void 0 : customStyles.navigation) }, { children: children })) }))] }));
1223
1226
  };
1224
1227
  var Item$1 = function (props) {
1225
- var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1228
+ var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, _b = props.linkComponent, LinkComponent = _b === void 0 ? 'a' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1226
1229
  var toClassName = React.useCallback(function () {
1227
1230
  var values = [];
1228
1231
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1230,9 +1233,7 @@ var Item$1 = function (props) {
1230
1233
  }
1231
1234
  return values.filter(Boolean).join(' ');
1232
1235
  }, []);
1233
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1234
- ? styles$4.tab[type].active
1235
- : styles$4.tab[type].notActive, styles$4.tab[type].base), onClick: onClick }, { children: children })));
1236
+ return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.tab[type][isCurrent ? 'active' : 'notActive'], styles$4.tab[type].base), onClick: onClick }, { children: children })));
1236
1237
  };
1237
1238
  var View$1 = function (props) {
1238
1239
  var children = props.children;
@@ -1283,18 +1284,21 @@ var List = function (props) {
1283
1284
  return values.filter(Boolean).join(' ');
1284
1285
  }, []);
1285
1286
  React.useEffect(function () {
1286
- var _a, _b;
1287
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1288
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1287
+ var tab;
1288
+ var tabs = React.Children.map(children, function (child) { return child; });
1289
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1289
1290
  if (initialTab !== undefined) {
1290
1291
  tab = initialTab;
1291
1292
  }
1293
+ else {
1294
+ tab = tabs[0];
1295
+ }
1292
1296
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1293
1297
  }, []);
1294
1298
  return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$3.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1295
1299
  };
1296
1300
  var Item = function (props) {
1297
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1301
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1298
1302
  var toClassName = React.useCallback(function () {
1299
1303
  var values = [];
1300
1304
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -1302,9 +1306,7 @@ var Item = function (props) {
1302
1306
  }
1303
1307
  return values.filter(Boolean).join(' ');
1304
1308
  }, []);
1305
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1306
- ? styles$3.item.active
1307
- : styles$3.item.notActive, styles$3 === null || styles$3 === void 0 ? void 0 : styles$3.item.base), onClick: onClick }, { children: children })));
1309
+ return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
1308
1310
  };
1309
1311
  var View = function (props) {
1310
1312
  var children = props.children;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "email": "info@ballistix.digital",
7
7
  "url": "https://ballistix.digital"
8
8
  },
9
- "version": "0.1.13",
9
+ "version": "0.2.0",
10
10
  "private": false,
11
11
  "main": "dist/index.js",
12
12
  "module": "dist/index.esm.js",
@@ -59,6 +59,7 @@
59
59
  "@testing-library/react": "^13.4.0",
60
60
  "@testing-library/user-event": "^13.5.0",
61
61
  "@types/jest": "^27.5.2",
62
+ "@types/lodash": "^4.14.191",
62
63
  "@types/node": "^16.18.12",
63
64
  "@types/react": "^18.0.27",
64
65
  "@types/react-dom": "^18.0.10",
@@ -68,6 +69,7 @@
68
69
  "eslint-plugin-prettier": "^4.2.1",
69
70
  "eslint-plugin-simple-import-sort": "^7.0.0",
70
71
  "eslint-plugin-storybook": "^0.5.3",
72
+ "lodash": "^4.17.21",
71
73
  "postcss": "^8.4.21",
72
74
  "prop-types": "^15.8.1",
73
75
  "react": "^18.2.0",
@@ -90,6 +92,8 @@
90
92
  "@types/react-dom": "^18.0.10",
91
93
  "react": "^18.2.0",
92
94
  "react-dom": "^18.2.0",
93
- "tailwindcss": "^3.2.6"
94
- }
95
+ "tailwindcss": "^3.2.6",
96
+ "lodash": "^4.17.21"
97
+ },
98
+ "dependencies": {}
95
99
  }