primereact 6.5.1 → 7.0.0-rc.2

package/resources/primereact.css

@@ -6,6 +6,10 @@
     display: none;
 }
 
+.p-hidden-space {
+    visibility: hidden;
+}
+
 .p-hidden-accessible {
     border: 0;
     clip: rect(0 0 0 0);
@@ -35,6 +39,7 @@
 .p-disabled, .p-disabled * {
     cursor: default !important;
     pointer-events: none;
+    user-select: none;
 }
 
 .p-component-overlay {
@@ -361,9 +366,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: transparent;
     opacity: 1;
-    transition-property: background-color, opacity;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -377,11 +380,6 @@
     position: fixed;
 }
 
-.p-blockui.p-blockui-leave.p-component-overlay {
-    opacity: 0;
-    background-color: transparent;
-}
-
 .p-breadcrumb {
     overflow-x: auto;
 }
@@ -405,6 +403,10 @@
     align-items: center;
 }
 
+.p-breadcrumb::-webkit-scrollbar {
+    display: none;
+}
+
 .p-button {
     margin: 0;
     display: inline-flex;
@@ -787,6 +789,7 @@
     cursor: pointer;
     user-select: none;
     vertical-align: bottom;
+    position: relative;
 }
 
 .p-checkbox-box {
@@ -1077,13 +1080,26 @@
     margin: 0;
     padding: 0;
 }
+.p-dataview-loading {
+    position: relative;
+    min-height: 4rem;
+}
+
+.p-dataview .p-dataview-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .p-datatable {
     position: relative;
 }
 
 .p-datatable table {
     border-collapse: collapse;
-    width: 100%;
+    min-width: 100%;
     table-layout: fixed;
 }
 
@@ -1108,10 +1124,11 @@
     justify-content: center;
 }
 
-.p-datatable-auto-layout > .p-datatable-wrapper {
+.p-datatable-responsive-scroll > .p-datatable-wrapper {
     overflow-x: auto;
 }
 
+.p-datatable-responsive-scroll > .p-datatable-wrapper > table,
 .p-datatable-auto-layout > .p-datatable-wrapper > table {
     table-layout: auto;
 }
@@ -1126,60 +1143,106 @@
 }
 
 /* Scrollable */
-.p-datatable-scrollable-wrapper {
+.p-datatable-scrollable .p-datatable-wrapper {
     position: relative;
+    overflow: auto;
 }
 
-.p-datatable-scrollable-header,
-.p-datatable-scrollable-footer {
-    overflow: hidden;
+.p-datatable-scrollable .p-datatable-thead,
+.p-datatable-scrollable .p-datatable-tbody,
+.p-datatable-scrollable .p-datatable-tfoot {
+    display: block;
 }
 
-.p-datatable-scrollable-body {
-    overflow: auto;
-    position: relative;
+.p-datatable-scrollable .p-datatable-thead > tr,
+.p-datatable-scrollable .p-datatable-tbody > tr,
+.p-datatable-scrollable .p-datatable-tfoot > tr {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
 }
 
-.p-datatable-scrollable-body > table > .p-datatable-tbody > tr:first-child > td {
-    border-top: 0 none;
+.p-datatable-scrollable .p-datatable-thead > tr > th,
+.p-datatable-scrollable .p-datatable-tbody > tr > td,
+.p-datatable-scrollable .p-datatable-tfoot > tr > td {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
 }
 
-.p-datatable-virtual-table {
-    position: absolute;
+.p-datatable-scrollable .p-datatable-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
 }
 
-/* Frozen Columns */
-.p-datatable-frozen-view .p-datatable-scrollable-body {
-    overflow: hidden;
+.p-datatable-scrollable .p-datatable-frozen-tbody {
+    position: sticky;
+    z-index: 1;
 }
 
-.p-datatable-frozen-view > .p-datatable-scrollable-body > table > .p-datatable-tbody > tr > td:last-child {
-    border-right: 0 none;
+.p-datatable-scrollable .p-datatable-tfoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
 }
 
-.p-datatable-unfrozen-view {
-    position: absolute;
-    top: 0;
+.p-datatable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-datatable-scrollable th.p-frozen-column {
+    z-index: 1;
+}
+
+.p-datatable-scrollable-both .p-datatable-thead > tr > th,
+.p-datatable-scrollable-both .p-datatable-tbody > tr > td,
+.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,
+.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th
+.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
+.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {
+    flex: 0 0 auto;
 }
 
-/* Flex Scrollable */
 .p-datatable-flex-scrollable {
     display: flex;
     flex-direction: column;
-    flex: 1;
     height: 100%;
 }
 
-.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper,
-.p-datatable-flex-scrollable .p-datatable-scrollable-view {
+.p-datatable-flex-scrollable .p-datatable-wrapper {
     display: flex;
     flex-direction: column;
     flex: 1;
     height: 100%;
 }
 
-.p-datatable-flex-scrollable .p-datatable-scrollable-body {
-    flex: 1;
+.p-datatable-scrollable .p-rowgroup-header {
+    position: sticky;
+    z-index: 1;
+}
+
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {
+    display: table;
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {
+    display: table-row;
+}
+
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {
+    display: table-cell;
+}
+
+.p-datatable-virtual-table {
+    position: absolute;
 }
 
 /* Resizable */
@@ -1191,6 +1254,7 @@
 .p-datatable-resizable .p-datatable-tfoot > tr > td,
 .p-datatable-resizable .p-datatable-tbody > tr > td {
     overflow: hidden;
+    white-space: nowrap;
 }
 
 .p-datatable-resizable .p-resizable-column {
@@ -1215,6 +1279,11 @@
     border: 1px solid transparent;
 }
 
+.p-datatable .p-column-header-content {
+    display: flex;
+    align-items: center;
+}
+
 .p-datatable .p-column-resizer-helper {
     width: 1px;
     position: absolute;
@@ -1248,26 +1317,96 @@
     display: none;
 }
 
+.p-reorderable-column,
+.p-datatable-reorderablerow-handle {
+    cursor: move;
+}
+
 /* Loader */
 .p-datatable .p-datatable-loading-overlay {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 2;
 }
 
-.p-dataview-loading {
+/* Filter */
+.p-column-filter-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.p-column-filter-menu {
+    display: inline-flex;
+    margin-left: auto;
+}
+
+.p-column-filter-row .p-column-filter-element {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-column-filter-menu-button,
+.p-column-filter-clear-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
     position: relative;
-    min-height: 4rem;
 }
 
-.p-dataview .p-dataview-loading-overlay {
+.p-column-filter-overlay {
     position: absolute;
-    z-index: 1;
+    top: 0;
+    left: 0;
+}
+
+.p-column-filter-row-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-column-filter-row-item {
+    cursor: pointer;
+}
+
+.p-column-filter-add-button,
+.p-column-filter-remove-button {
+    justify-content: center;
+}
+
+.p-column-filter-add-button .p-button-label,
+.p-column-filter-remove-button .p-button-label {
+    flex-grow: 0;
+}
+
+.p-column-filter-buttonbar {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+}
+
+.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
+    width: auto;
+}
+
+/* Responsive */
+.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+    display: none;
+}
+
+/* VirtualScroller */
+.p-datatable .p-virtualscroller-loading {
+    transform: none !important;
+    min-height: 0;
+    position: sticky;
+    top: 0;
+    left: 0;
 }
 
 .p-dialog-mask {
@@ -1592,6 +1731,11 @@
     pointer-events: none;
 }
 
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
 .p-dock-list {
     margin: 0;
     padding: 0;
@@ -2888,6 +3032,7 @@ input.p-dropdown-label  {
 
 .p-galleria-thumbnail-items-container {
     overflow: hidden;
+    width: 100%;
 }
 
 .p-galleria-thumbnail-items {
@@ -3023,8 +3168,6 @@ input.p-dropdown-label  {
     align-items: center;
     justify-content: center;
     pointer-events: none;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-galleria-mask.p-component-overlay {
@@ -3077,10 +3220,6 @@ input.p-dropdown-label  {
     opacity: 0;
 }
 
-.p-galleria-mask.p-galleria-mask-leave {
-    background-color: transparent;
-}
-
 /* Keyboard Support */
 .p-items-hidden .p-galleria-thumbnail-item {
     visibility: hidden;
@@ -3090,6 +3229,87 @@ input.p-dropdown-label  {
     visibility: visible;
 }
 
+.p-image-mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-image-preview-container {
+    position: relative;
+    display: inline-block;
+}
+
+.p-image-preview-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity .3s;
+}
+
+.p-image-preview-icon {
+    font-size: 1.5rem;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.p-image-preview-container > img {
+    cursor: pointer;
+}
+
+.p-image-toolbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+}
+
+.p-image-action.p-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-image-preview {
+    transition: transform .15s;
+    max-width: 100vw;
+    max-height: 100vh;
+}
+
+.p-image-preview-enter {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+.p-image-preview-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-image-preview-enter-done {
+    transform: none;
+}
+
+.p-image-preview-exit {
+    opacity: 1;
+}
+
+.p-image-preview-exit-active {
+    opacity: 0;
+    transform: scale(0.7);
+    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
 .p-inplace .p-inplace-display {
     display: inline;
     cursor: pointer;
@@ -4443,15 +4663,6 @@ input.p-dropdown-label  {
     position: relative;
 }
 
-.p-sidebar-mask {
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-sidebar-mask-leave.p-component-overlay {
-    background-color: transparent;
-}
-
 .p-sidebar-left {
     top: 0;
     left: 0;
@@ -5069,12 +5280,32 @@ input.p-dropdown-label  {
     z-index: 1;
 }
 
+.p-tabmenu::-webkit-scrollbar {
+    display: none;
+}
+
+.p-tabview-nav-container {
+    position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+
 .p-tabview-nav {
     display: flex;
     margin: 0;
     padding: 0;
     list-style-type: none;
-    flex-wrap: wrap;
+    flex: 1 1 auto;
 }
 
 .p-tabview-nav-link {
@@ -5098,6 +5329,29 @@ input.p-dropdown-label  {
 
 .p-tabview-title {
     line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabview-nav-prev {
+    left: 0;
+}
+
+.p-tabview-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
 }
 
 .p-tag {
@@ -5186,100 +5440,6 @@ input.p-dropdown-label  {
     left: -100%;
 }
 
-.p-toast {
-    position: fixed;
-    width: 25rem;
-}
-
-.p-toast-message-content {
-    display: flex;
-    align-items: flex-start;
-}
-
-.p-toast-message-text {
-    flex: 1 1 auto;
-}
-
-.p-toast-top-right {
-	top: 20px;
-	right: 20px;
-}
-
-.p-toast-top-left {
-	top: 20px;
-	left: 20px;
-}
-
-.p-toast-bottom-left {
-	bottom: 20px;
-	left: 20px;
-}
-
-.p-toast-bottom-right {
-	bottom: 20px;
-	right: 20px;
-}
-
-.p-toast-top-center {
-	top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-toast-bottom-center {
-	bottom: 20px;
-	left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-toast-center {
-	left: 50%;
-	top: 50%;
-    min-width: 20vw;
-    transform: translate(-50%, -50%);
-}
-
-.p-toast-icon-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-toast-icon-close.p-link {
-	cursor: pointer;
-}
-
-/* Animations */
-.p-toast-message-enter {
-    opacity: 0;
-    transform: translateY(50%);
-}
-
-.p-toast-message-enter-active {
-    opacity: 1;
-    transform: translateY(0);
-    transition: transform .3s, opacity .3s;
-}
-
-.p-toast-message-enter-done {
-    transform: none;
-}
-
-.p-toast-message-exit {
-    opacity: 1;
-    max-height: 1000px;
-}
-
-.p-toast-message-exit-active {
-    opacity: 0;
-    max-height: 0;
-    margin-bottom: 0;
-    overflow: hidden;
-    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
-}
-
 .p-timeline {
     display: flex;
     flex-grow: 1;
@@ -5391,6 +5551,100 @@ input.p-dropdown-label  {
     flex-direction: column-reverse;
 }
 
+.p-toast {
+    position: fixed;
+    width: 25rem;
+}
+
+.p-toast-message-content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.p-toast-message-text {
+    flex: 1 1 auto;
+}
+
+.p-toast-top-right {
+	top: 20px;
+	right: 20px;
+}
+
+.p-toast-top-left {
+	top: 20px;
+	left: 20px;
+}
+
+.p-toast-bottom-left {
+	bottom: 20px;
+	left: 20px;
+}
+
+.p-toast-bottom-right {
+	bottom: 20px;
+	right: 20px;
+}
+
+.p-toast-top-center {
+	top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.p-toast-bottom-center {
+	bottom: 20px;
+	left: 50%;
+    transform: translateX(-50%);
+}
+
+.p-toast-center {
+	left: 50%;
+	top: 50%;
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
+}
+
+.p-toast-icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-toast-icon-close.p-link {
+	cursor: pointer;
+}
+
+/* Animations */
+.p-toast-message-enter {
+    opacity: 0;
+    transform: translateY(50%);
+}
+
+.p-toast-message-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: transform .3s, opacity .3s;
+}
+
+.p-toast-message-enter-done {
+    transform: none;
+}
+
+.p-toast-message-exit {
+    opacity: 1;
+    max-height: 1000px;
+}
+
+.p-toast-message-exit-active {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: 0;
+    overflow: hidden;
+    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
+}
+
 .p-toolbar {
     display: flex;
     align-items: center;
@@ -5421,6 +5675,7 @@ input.p-dropdown-label  {
 
 .p-tooltip .p-tooltip-text {
    white-space: pre-line;
+   word-break: break-word;
 }
 
 .p-tooltip-arrow {