@ceed/cds 1.8.4 → 1.8.6

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 (5) hide show
  1. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  2. package/dist/index.cjs +28 -14
  3. package/dist/index.js +28 -14
  4. package/framer/index.js +37 -37
  5. package/package.json +4 -2
package/dist/components/Breadcrumbs/Breadcrumbs.d.ts CHANGED
@@ -14,6 +14,7 @@ declare function Breadcrumbs(props: {
14
14
  slotProps?: {
15
15
  link?: {};
16
16
  } & BreadcrumbsProps["slotProps"];
17
+ collapsed?: boolean;
17
18
  } & BreadcrumbsProps): React.JSX.Element;
18
19
  declare namespace Breadcrumbs {
19
20
  var displayName: string;
package/dist/index.cjs CHANGED
@@ -279,7 +279,7 @@ function Accordions(props) {
279
279
  return /* @__PURE__ */ import_react.default.createElement(MotionAccordions, { variant, color, ...innerProps }, items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
280
280
  Accordion,
281
281
  {
282
- key: index,
282
+ key: `accordion-${index}`,
283
283
  summary: item.summary,
284
284
  details: item.details,
285
285
  index,
@@ -774,9 +774,9 @@ function Breadcrumbs(props) {
774
774
  slotProps: { link: linkProps, ...restSlotProps } = {
775
775
  link: { color: "neutral" }
776
776
  },
777
+ collapsed = true,
777
778
  ...innerProps
778
779
  } = props;
779
- const _endCrumbCount = Math.max(1, endCrumbCount);
780
780
  const Crumb = (props2) => {
781
781
  if (props2.type === "link" && Link4) {
782
782
  return /* @__PURE__ */ import_react9.default.createElement(Link4, { to: props2.linkHref, href: props2.linkHref, ...linkProps }, props2.label);
@@ -784,9 +784,22 @@ function Breadcrumbs(props) {
784
784
  return /* @__PURE__ */ import_react9.default.createElement(Typography_default, null, props2.label);
785
785
  }
786
786
  };
787
- const frontCrumbs = crumbs.slice(0, startCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { ...crumb }));
788
- const backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length ? crumbs.slice(startCrumbCount) : crumbs.slice(-_endCrumbCount)).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { ...crumb }));
789
- const collapsedCrumbs = crumbs.slice(startCrumbCount, -_endCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(MenuItem, null, /* @__PURE__ */ import_react9.default.createElement(Crumb, { ...crumb })));
787
+ if (!collapsed) {
788
+ return /* @__PURE__ */ import_react9.default.createElement(
789
+ import_joy15.Breadcrumbs,
790
+ {
791
+ size,
792
+ slots: restSlots,
793
+ slotProps: restSlotProps,
794
+ ...innerProps
795
+ },
796
+ crumbs.map((crumb, index) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${index}`, ...crumb }))
797
+ );
798
+ }
799
+ const _endCrumbCount = Math.max(1, endCrumbCount);
800
+ const frontCrumbs = crumbs.slice(0, startCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
801
+ const backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length ? crumbs.slice(startCrumbCount) : crumbs.slice(-_endCrumbCount)).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
802
+ const collapsedCrumbs = crumbs.slice(startCrumbCount, -_endCrumbCount).map((crumb) => /* @__PURE__ */ import_react9.default.createElement(MenuItem, { key: `breadcrumb-${crumb.label}` }, /* @__PURE__ */ import_react9.default.createElement(Crumb, { ...crumb })));
790
803
  return /* @__PURE__ */ import_react9.default.createElement(
791
804
  import_joy15.Breadcrumbs,
792
805
  {
@@ -1478,7 +1491,7 @@ var PickerDays = (props) => {
1478
1491
  }
1479
1492
  ))))),
1480
1493
  /* @__PURE__ */ import_react13.default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ import_react13.default.createElement("tr", null, weekDates.map(
1481
- (date, i) => date ? /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: i }, /* @__PURE__ */ import_react13.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react13.default.createElement(
1494
+ (date, i) => date ? /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react13.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react13.default.createElement(
1482
1495
  CalendarDay,
1483
1496
  {
1484
1497
  size: "sm",
@@ -1487,7 +1500,7 @@ var PickerDays = (props) => {
1487
1500
  ...getPickerDayProps(date)
1488
1501
  },
1489
1502
  date
1490
- )), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: i }, /* @__PURE__ */ import_react13.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
1503
+ )), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react13.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react13.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
1491
1504
  )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ import_react13.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react13.default.createElement("td", { colSpan: 13, style: { height: 4 } })))))
1492
1505
  )));
1493
1506
  };
@@ -1539,7 +1552,7 @@ var PickerMonths = (props) => {
1539
1552
  }
1540
1553
  }
1541
1554
  },
1542
- /* @__PURE__ */ import_react13.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: i }, /* @__PURE__ */ import_react13.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react13.default.createElement(
1555
+ /* @__PURE__ */ import_react13.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react13.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react13.default.createElement(import_react13.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react13.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react13.default.createElement(
1543
1556
  CalendarMonth,
1544
1557
  {
1545
1558
  size: "sm",
@@ -2141,7 +2154,7 @@ function TableBody(props) {
2141
2154
  slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
2142
2155
  slotProps: { checkbox: checkboxProps = {} } = {}
2143
2156
  } = props;
2144
- return /* @__PURE__ */ import_react18.default.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ import_react18.default.createElement("tr", { key: rowIndex }, showCheckbox && /* @__PURE__ */ import_react18.default.createElement(
2157
+ return /* @__PURE__ */ import_react18.default.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ import_react18.default.createElement("tr", { key: `table-row-${rowIndex}` }, showCheckbox && /* @__PURE__ */ import_react18.default.createElement(
2145
2158
  "td",
2146
2159
  {
2147
2160
  style: {
@@ -2910,7 +2923,7 @@ function InfoSign(props) {
2910
2923
  maxWidth: "320px"
2911
2924
  }
2912
2925
  },
2913
- title: message?.split("\n").map((line, i) => /* @__PURE__ */ import_react24.default.createElement("div", { key: i }, line))
2926
+ title: message?.split("\n").map((line, i) => /* @__PURE__ */ import_react24.default.createElement("div", { key: `info-sign-${i}` }, line))
2914
2927
  },
2915
2928
  /* @__PURE__ */ import_react24.default.createElement(InfoIcon, null)
2916
2929
  );
@@ -2973,8 +2986,8 @@ var CellTextEllipsis = ({ children }) => {
2973
2986
  {
2974
2987
  title: children,
2975
2988
  placement: "top",
2976
- enterDelay: 1500,
2977
- enterNextDelay: 1500,
2989
+ enterDelay: 800,
2990
+ enterNextDelay: 200,
2978
2991
  onClick: (e) => e.stopPropagation()
2979
2992
  },
2980
2993
  content
@@ -3483,9 +3496,9 @@ var BodyRow = (0, import_react25.memo)(
3483
3496
  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, columns.map((column, i) => /* @__PURE__ */ import_react25.default.createElement(
3484
3497
  BodyCell,
3485
3498
  {
3499
+ key: `${rowId}_${column.field.toString()}_${i}`,
3486
3500
  ...column,
3487
3501
  tableId,
3488
- key: `${rowId}_${column.field.toString()}_${i}`,
3489
3502
  row,
3490
3503
  rowId,
3491
3504
  editMode,
@@ -5445,7 +5458,7 @@ function Navigator(props) {
5445
5458
  return /* @__PURE__ */ import_react38.default.createElement(
5446
5459
  NavigationGroup,
5447
5460
  {
5448
- key: index,
5461
+ key: `${item.title}-${index}`,
5449
5462
  title: item.title,
5450
5463
  startDecorator: item.startDecorator,
5451
5464
  level,
@@ -5660,6 +5673,7 @@ function Stepper(props) {
5660
5673
  return /* @__PURE__ */ import_react41.default.createElement(
5661
5674
  Step,
5662
5675
  {
5676
+ key: `step-${i}`,
5663
5677
  indicator: /* @__PURE__ */ import_react41.default.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ import_react41.default.createElement(import_Check.default, null) : step.indicatorContent),
5664
5678
  active,
5665
5679
  completed,
package/dist/index.js CHANGED
@@ -183,7 +183,7 @@ function Accordions(props) {
183
183
  return /* @__PURE__ */ React.createElement(MotionAccordions, { variant, color, ...innerProps }, items.map((item, index) => /* @__PURE__ */ React.createElement(
184
184
  Accordion,
185
185
  {
186
- key: index,
186
+ key: `accordion-${index}`,
187
187
  summary: item.summary,
188
188
  details: item.details,
189
189
  index,
@@ -704,9 +704,9 @@ function Breadcrumbs(props) {
704
704
  slotProps: { link: linkProps, ...restSlotProps } = {
705
705
  link: { color: "neutral" }
706
706
  },
707
+ collapsed = true,
707
708
  ...innerProps
708
709
  } = props;
709
- const _endCrumbCount = Math.max(1, endCrumbCount);
710
710
  const Crumb = (props2) => {
711
711
  if (props2.type === "link" && Link4) {
712
712
  return /* @__PURE__ */ React8.createElement(Link4, { to: props2.linkHref, href: props2.linkHref, ...linkProps }, props2.label);
@@ -714,9 +714,22 @@ function Breadcrumbs(props) {
714
714
  return /* @__PURE__ */ React8.createElement(Typography_default, null, props2.label);
715
715
  }
716
716
  };
717
- const frontCrumbs = crumbs.slice(0, startCrumbCount).map((crumb) => /* @__PURE__ */ React8.createElement(Crumb, { ...crumb }));
718
- const backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length ? crumbs.slice(startCrumbCount) : crumbs.slice(-_endCrumbCount)).map((crumb) => /* @__PURE__ */ React8.createElement(Crumb, { ...crumb }));
719
- const collapsedCrumbs = crumbs.slice(startCrumbCount, -_endCrumbCount).map((crumb) => /* @__PURE__ */ React8.createElement(MenuItem, null, /* @__PURE__ */ React8.createElement(Crumb, { ...crumb })));
717
+ if (!collapsed) {
718
+ return /* @__PURE__ */ React8.createElement(
719
+ JoyBreadcrumbs,
720
+ {
721
+ size,
722
+ slots: restSlots,
723
+ slotProps: restSlotProps,
724
+ ...innerProps
725
+ },
726
+ crumbs.map((crumb, index) => /* @__PURE__ */ React8.createElement(Crumb, { key: `breadcrumb-${index}`, ...crumb }))
727
+ );
728
+ }
729
+ const _endCrumbCount = Math.max(1, endCrumbCount);
730
+ const frontCrumbs = crumbs.slice(0, startCrumbCount).map((crumb) => /* @__PURE__ */ React8.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
731
+ const backCrumbs = (startCrumbCount + _endCrumbCount > crumbs.length ? crumbs.slice(startCrumbCount) : crumbs.slice(-_endCrumbCount)).map((crumb) => /* @__PURE__ */ React8.createElement(Crumb, { key: `breadcrumb-${crumb.label}`, ...crumb }));
732
+ const collapsedCrumbs = crumbs.slice(startCrumbCount, -_endCrumbCount).map((crumb) => /* @__PURE__ */ React8.createElement(MenuItem, { key: `breadcrumb-${crumb.label}` }, /* @__PURE__ */ React8.createElement(Crumb, { ...crumb })));
720
733
  return /* @__PURE__ */ React8.createElement(
721
734
  JoyBreadcrumbs,
722
735
  {
@@ -1408,7 +1421,7 @@ var PickerDays = (props) => {
1408
1421
  }
1409
1422
  ))))),
1410
1423
  /* @__PURE__ */ React11.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React11.createElement("tr", null, weekDates.map(
1411
- (date, i) => date ? /* @__PURE__ */ React11.createElement(Fragment, { key: i }, /* @__PURE__ */ React11.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React11.createElement(
1424
+ (date, i) => date ? /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React11.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React11.createElement(
1412
1425
  CalendarDay,
1413
1426
  {
1414
1427
  size: "sm",
@@ -1417,7 +1430,7 @@ var PickerDays = (props) => {
1417
1430
  ...getPickerDayProps(date)
1418
1431
  },
1419
1432
  date
1420
- )), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React11.createElement(Fragment, { key: i }, /* @__PURE__ */ React11.createElement("td", null), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
1433
+ )), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React11.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React11.createElement("td", null), i < 6 && /* @__PURE__ */ React11.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
1421
1434
  )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React11.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React11.createElement("td", { colSpan: 13, style: { height: 4 } })))))
1422
1435
  )));
1423
1436
  };
@@ -1469,7 +1482,7 @@ var PickerMonths = (props) => {
1469
1482
  }
1470
1483
  }
1471
1484
  },
1472
- /* @__PURE__ */ React11.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: i }, /* @__PURE__ */ React11.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React11.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React11.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React11.createElement(
1485
+ /* @__PURE__ */ React11.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React11.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React11.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React11.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React11.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React11.createElement(
1473
1486
  CalendarMonth,
1474
1487
  {
1475
1488
  size: "sm",
@@ -2096,7 +2109,7 @@ function TableBody(props) {
2096
2109
  slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
2097
2110
  slotProps: { checkbox: checkboxProps = {} } = {}
2098
2111
  } = props;
2099
- return /* @__PURE__ */ React16.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React16.createElement("tr", { key: rowIndex }, showCheckbox && /* @__PURE__ */ React16.createElement(
2112
+ return /* @__PURE__ */ React16.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React16.createElement("tr", { key: `table-row-${rowIndex}` }, showCheckbox && /* @__PURE__ */ React16.createElement(
2100
2113
  "td",
2101
2114
  {
2102
2115
  style: {
@@ -2878,7 +2891,7 @@ function InfoSign(props) {
2878
2891
  maxWidth: "320px"
2879
2892
  }
2880
2893
  },
2881
- title: message?.split("\n").map((line, i) => /* @__PURE__ */ React22.createElement("div", { key: i }, line))
2894
+ title: message?.split("\n").map((line, i) => /* @__PURE__ */ React22.createElement("div", { key: `info-sign-${i}` }, line))
2882
2895
  },
2883
2896
  /* @__PURE__ */ React22.createElement(InfoIcon, null)
2884
2897
  );
@@ -2941,8 +2954,8 @@ var CellTextEllipsis = ({ children }) => {
2941
2954
  {
2942
2955
  title: children,
2943
2956
  placement: "top",
2944
- enterDelay: 1500,
2945
- enterNextDelay: 1500,
2957
+ enterDelay: 800,
2958
+ enterNextDelay: 200,
2946
2959
  onClick: (e) => e.stopPropagation()
2947
2960
  },
2948
2961
  content
@@ -3451,9 +3464,9 @@ var BodyRow = memo(
3451
3464
  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, columns.map((column, i) => /* @__PURE__ */ React23.createElement(
3452
3465
  BodyCell,
3453
3466
  {
3467
+ key: `${rowId}_${column.field.toString()}_${i}`,
3454
3468
  ...column,
3455
3469
  tableId,
3456
- key: `${rowId}_${column.field.toString()}_${i}`,
3457
3470
  row,
3458
3471
  rowId,
3459
3472
  editMode,
@@ -5465,7 +5478,7 @@ function Navigator(props) {
5465
5478
  return /* @__PURE__ */ React36.createElement(
5466
5479
  NavigationGroup,
5467
5480
  {
5468
- key: index,
5481
+ key: `${item.title}-${index}`,
5469
5482
  title: item.title,
5470
5483
  startDecorator: item.startDecorator,
5471
5484
  level,
@@ -5687,6 +5700,7 @@ function Stepper(props) {
5687
5700
  return /* @__PURE__ */ React39.createElement(
5688
5701
  Step,
5689
5702
  {
5703
+ key: `step-${i}`,
5690
5704
  indicator: /* @__PURE__ */ React39.createElement(StepIndicator, { variant: "solid", color: "primary" }, completed ? /* @__PURE__ */ React39.createElement(CheckIcon, null) : step.indicatorContent),
5691
5705
  active,
5692
5706
  completed,