@indico-data/design-system 2.29.2 → 2.30.1

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 (14) hide show
  1. package/lib/index.css +78 -82
  2. package/lib/index.esm.css +78 -82
  3. package/lib/index.esm.js +7 -4
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +7 -4
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/floatUI/styles/FloatUI.scss +3 -3
  9. package/src/components/forms/form/styles/Form.scss +8 -0
  10. package/src/components/forms/textarea/Textarea.tsx +3 -0
  11. package/src/components/pill/Pill.stories.tsx +10 -1
  12. package/src/components/table/Table.tsx +9 -2
  13. package/src/components/table/styles/Table.scss +73 -57
  14. package/src/components/table/styles/_variables.scss +9 -9
package/lib/index.css CHANGED
@@ -907,109 +907,95 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
- :root,
911
- :root [data-theme=light],
912
- :root [data-theme=dark] {
913
- --pf-table-font-color: var(--pf-gray-color);
914
- --pf-table-stripe-color: var(--pf-gray-color-100);
915
- }
916
-
917
910
  :root [data-theme=light] {
918
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
919
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
920
917
  }
921
918
 
922
919
  :root [data-theme=dark] {
923
920
  --pf-table-background-color: var(--pf-primary-color-700);
924
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
925
926
  }
926
927
 
927
- :root .table-loading,
928
- :root [data-theme=light] .table-loading,
929
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
930
929
  color: var(--pf-table-font-color);
931
930
  }
932
- :root .table-wrapper,
933
- :root [data-theme=light] .table-wrapper,
934
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
935
933
  background-color: var(--pf-table-background-color);
936
934
  color: var(--pf-table-font-color);
937
- }
938
- :root .table-wrapper .rdt_Table,
939
- :root .table-wrapper .rdt_TableRow,
940
- :root .table-wrapper .rdt_TableCol,
941
- :root .table-wrapper .rdt_TableCol_Sortable,
942
- :root .table-wrapper .rdt_TableCell,
943
- :root .table-wrapper .rdt_TableHeader,
944
- :root .table-wrapper .rdt_TableFooter,
945
- :root .table-wrapper .rdt_TableHead,
946
- :root .table-wrapper .rdt_TableHeadRow,
947
- :root .table-wrapper .rdt_TableBody,
948
- :root .table-wrapper .rdt_ExpanderRow,
949
- :root .table-wrapper .rdt_Pagination,
950
- :root [data-theme=light] .table-wrapper .rdt_Table,
951
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
952
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
953
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
954
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
955
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
956
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
957
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
958
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
959
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
960
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
961
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
962
- :root [data-theme=dark] .table-wrapper .rdt_Table,
963
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
964
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
965
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
966
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
972
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
973
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
974
950
  background-color: var(--pf-table-background-color);
975
951
  color: var(--pf-table-font-color);
976
952
  }
977
- :root .table-wrapper button svg,
978
- :root [data-theme=light] .table-wrapper button svg,
979
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
980
954
  fill: var(--pf-table-font-color);
981
955
  }
982
- :root .table-wrapper button:disabled svg,
983
- :root [data-theme=light] .table-wrapper button:disabled svg,
984
- :root [data-theme=dark] .table-wrapper button:disabled svg {
985
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
986
958
  }
987
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
988
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
989
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
990
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
991
962
  }
992
-
993
- :root [data-theme=light] .table-wrapper .rdt_Table,
994
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
995
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
996
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
997
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
998
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
999
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1003
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1004
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1005
- background-color: var(--pf-table-background-color);
1006
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1007
966
  }
1008
- :root [data-theme=light] .table-wrapper button svg {
1009
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
1010
972
  }
1011
- :root [data-theme=light] .table-wrapper button:disabled svg {
1012
- fill: var(--pf-gray-color-300);
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
988
+ }
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
995
+ }
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1013
999
  }
1014
1000
 
1015
1001
  :root,
@@ -1466,6 +1452,15 @@ form {
1466
1452
  width: 100%;
1467
1453
  }
1468
1454
 
1455
+ :root [data-theme=light],
1456
+ :root {
1457
+ --pf-form-input-border-color: var(--pf-border-color);
1458
+ }
1459
+
1460
+ :root [data-theme=dark] {
1461
+ --pf-form-input-border-color: var(--pf-border-color);
1462
+ }
1463
+
1469
1464
  :root,
1470
1465
  :root [data-theme=light] {
1471
1466
  --pf-select-background-color: var(--pf-white-color);
@@ -1779,7 +1774,8 @@ form {
1779
1774
 
1780
1775
  .floatui-content {
1781
1776
  border-radius: var(--pf-floatui-border-radius);
1782
- border: 1px solid var(--pf-floatui-border-color);
1777
+ border: solid 1px;
1778
+ border-color: var(--pf-floatui-border-color);
1783
1779
  background: var(--pf-floatui-background-color);
1784
1780
  }
1785
1781
 
package/lib/index.esm.css CHANGED
@@ -907,109 +907,95 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
- :root,
911
- :root [data-theme=light],
912
- :root [data-theme=dark] {
913
- --pf-table-font-color: var(--pf-gray-color);
914
- --pf-table-stripe-color: var(--pf-gray-color-100);
915
- }
916
-
917
910
  :root [data-theme=light] {
918
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
919
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
920
917
  }
921
918
 
922
919
  :root [data-theme=dark] {
923
920
  --pf-table-background-color: var(--pf-primary-color-700);
924
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
925
926
  }
926
927
 
927
- :root .table-loading,
928
- :root [data-theme=light] .table-loading,
929
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
930
929
  color: var(--pf-table-font-color);
931
930
  }
932
- :root .table-wrapper,
933
- :root [data-theme=light] .table-wrapper,
934
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
935
933
  background-color: var(--pf-table-background-color);
936
934
  color: var(--pf-table-font-color);
937
- }
938
- :root .table-wrapper .rdt_Table,
939
- :root .table-wrapper .rdt_TableRow,
940
- :root .table-wrapper .rdt_TableCol,
941
- :root .table-wrapper .rdt_TableCol_Sortable,
942
- :root .table-wrapper .rdt_TableCell,
943
- :root .table-wrapper .rdt_TableHeader,
944
- :root .table-wrapper .rdt_TableFooter,
945
- :root .table-wrapper .rdt_TableHead,
946
- :root .table-wrapper .rdt_TableHeadRow,
947
- :root .table-wrapper .rdt_TableBody,
948
- :root .table-wrapper .rdt_ExpanderRow,
949
- :root .table-wrapper .rdt_Pagination,
950
- :root [data-theme=light] .table-wrapper .rdt_Table,
951
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
952
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
953
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
954
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
955
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
956
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
957
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
958
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
959
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
960
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
961
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
962
- :root [data-theme=dark] .table-wrapper .rdt_Table,
963
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
964
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
965
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
966
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
972
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
973
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
974
950
  background-color: var(--pf-table-background-color);
975
951
  color: var(--pf-table-font-color);
976
952
  }
977
- :root .table-wrapper button svg,
978
- :root [data-theme=light] .table-wrapper button svg,
979
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
980
954
  fill: var(--pf-table-font-color);
981
955
  }
982
- :root .table-wrapper button:disabled svg,
983
- :root [data-theme=light] .table-wrapper button:disabled svg,
984
- :root [data-theme=dark] .table-wrapper button:disabled svg {
985
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
986
958
  }
987
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
988
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
989
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
990
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
991
962
  }
992
-
993
- :root [data-theme=light] .table-wrapper .rdt_Table,
994
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
995
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
996
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
997
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
998
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
999
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1003
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1004
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1005
- background-color: var(--pf-table-background-color);
1006
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1007
966
  }
1008
- :root [data-theme=light] .table-wrapper button svg {
1009
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
1010
972
  }
1011
- :root [data-theme=light] .table-wrapper button:disabled svg {
1012
- fill: var(--pf-gray-color-300);
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
988
+ }
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
995
+ }
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1013
999
  }
1014
1000
 
1015
1001
  :root,
@@ -1466,6 +1452,15 @@ form {
1466
1452
  width: 100%;
1467
1453
  }
1468
1454
 
1455
+ :root [data-theme=light],
1456
+ :root {
1457
+ --pf-form-input-border-color: var(--pf-border-color);
1458
+ }
1459
+
1460
+ :root [data-theme=dark] {
1461
+ --pf-form-input-border-color: var(--pf-border-color);
1462
+ }
1463
+
1469
1464
  :root,
1470
1465
  :root [data-theme=light] {
1471
1466
  --pf-select-background-color: var(--pf-white-color);
@@ -1779,7 +1774,8 @@ form {
1779
1774
 
1780
1775
  .floatui-content {
1781
1776
  border-radius: var(--pf-floatui-border-radius);
1782
- border: 1px solid var(--pf-floatui-border-color);
1777
+ border: solid 1px;
1778
+ border-color: var(--pf-floatui-border-color);
1783
1779
  background: var(--pf-floatui-background-color);
1784
1780
  }
1785
1781
 
package/lib/index.esm.js CHANGED
@@ -20936,8 +20936,11 @@ const LoadingComponent = () => {
20936
20936
  };
20937
20937
 
20938
20938
  const Table$1 = (props) => {
20939
- const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left' } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign"]);
20940
- return (jsx("div", { className: "table-wrapper", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20939
+ const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left', className } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign", "className"]);
20940
+ const combinedClassName = classNames(className, {
20941
+ 'table--striped': striped,
20942
+ });
20943
+ return (jsx("div", { className: "table", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20941
20944
  };
20942
20945
 
20943
20946
  const Label = ({ label, name, isRequired }) => {
@@ -20989,10 +20992,10 @@ const Toggle$1 = e__default.forwardRef((_a, ref) => {
20989
20992
  });
20990
20993
 
20991
20994
  const Textarea = e__default.forwardRef((_a, ref) => {
20992
- var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
20995
+ var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue"]);
20993
20996
  const hasErrors = errorMessage && errorMessage.length > 0;
20994
20997
  const textareaClasses = classNames('textarea', { error: hasErrors });
20995
- return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
20998
+ return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
20996
20999
  });
20997
21000
  const LabeledTextarea = withLabel(Textarea);
20998
21001