@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.0

package/build-style/style-rtl.css

@@ -237,7 +237,8 @@
   }
 }
 
-.dataviews-wrapper {
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -350,7 +351,8 @@
 /**
  * Applying a consistent 24px padding when DataViews are placed within cards.
  */
-.components-card__body:has(> .dataviews-wrapper) {
+.components-card__body:has(> .dataviews-wrapper),
+.components-card__body:has(> .dataviews-picker-wrapper) {
   padding: 8px 0 0;
   overflow: hidden;
 }
@@ -359,15 +361,25 @@
 .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
   padding-inline: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
   padding-inline-start: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
   padding-inline-end: 24px;
 }
 
@@ -940,6 +952,15 @@
   z-index: 1000001;
 }
 
+.dataviews-picker-footer__bulk-selection {
+  align-self: flex-start;
+  height: 32px;
+}
+
+.dataviews-picker-footer__actions {
+  align-self: flex-end;
+}
+
 .dataviews-selection-checkbox {
   --checkbox-input-size: 24px;
   line-height: 0;
@@ -1051,7 +1072,7 @@
   color: #757575;
 }
 
-.dataviews-view-grid {
+.dataviews-view-grid-items {
   margin-bottom: auto;
   display: grid;
   gap: 32px;
@@ -1060,21 +1081,22 @@
   padding: 0 48px 24px;
   container-type: inline-size;
   /**
-   * Breakpoints were adjusted from media queries breakpoints to account for
-   * the sidebar width. This was done to match the existing styles we had.
-   */
+  	* Breakpoints were adjusted from media queries breakpoints to account for
+  	* the sidebar width. This was done to match the existing styles we had.
+  	*/
 }
-@container (max-width: 480px) {
-  .dataviews-view-grid {
+@container (max-width: 430px) {
+  .dataviews-view-grid-items {
     padding-right: 24px;
     padding-left: 24px;
   }
 }
 @media not (prefers-reduced-motion) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     transition: padding ease-out 0.1s;
   }
 }
+
 .dataviews-view-grid .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -1109,6 +1131,7 @@
   aspect-ratio: 1/1;
   background-color: #fff;
   border-radius: 4px;
+  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -1174,9 +1197,16 @@
   top: -9999em;
   right: 8px;
   z-index: 1;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-selection-checkbox {
+    transition: opacity 0.1s linear;
+  }
 }
 @media (hover: none) {
   .dataviews-view-grid__card .dataviews-selection-checkbox {
+    opacity: 1;
     top: 8px;
   }
 }
@@ -1184,9 +1214,37 @@
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+  opacity: 1;
   top: 8px;
 }
 
+.dataviews-view-grid__card .dataviews-view-grid__media-actions {
+  position: absolute;
+  top: 4px;
+  opacity: 0;
+  left: 4px;
+}
+.dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
+  background-color: #fff;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    transition: opacity 0.1s linear;
+  }
+}
+@media (hover: none) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    opacity: 1;
+    top: 4px;
+  }
+}
+
+.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
+  opacity: 1;
+}
+
 .dataviews-view-grid__media--clickable {
   cursor: pointer;
 }
@@ -1197,6 +1255,13 @@
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
+  container-type: inline-size;
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid__group-header {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
 }
 
 div.dataviews-view-list {
@@ -1385,6 +1450,14 @@ div.dataviews-view-list {
   justify-content: space-between;
 }
 
+.dataviews-view-list__group-header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 24px;
+}
+
 .dataviews-view-table {
   width: 100%;
   text-indent: 0;
@@ -1631,6 +1704,167 @@ div.dataviews-view-list {
   color: #1e1e1e;
 }
 
+.dataviews-view-grid-items {
+  margin-bottom: auto;
+  display: grid;
+  gap: 32px;
+  grid-template-rows: max-content;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  padding: 0 48px 24px;
+  container-type: inline-size;
+  /**
+  	* Breakpoints were adjusted from media queries breakpoints to account for
+  	* the sidebar width. This was done to match the existing styles we had.
+  	*/
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid-items {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid-items {
+    transition: padding ease-out 0.1s;
+  }
+}
+
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card {
+  height: 100%;
+  justify-content: flex-start;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
+  padding: 8px 0 4px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
+  width: fit-content;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  color: #1e1e1e;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
+  outline: none;
+}
+.dataviews-view-picker-grid:focus-visible [data-active-item=true] {
+  outline: 2px solid var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox {
+  top: 8px !important;
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox input {
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media {
+  width: 100%;
+  aspect-ratio: 1/1;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
+  padding: 0 0 12px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
+  min-height: 24px;
+  line-height: 20px;
+  padding-top: 2px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
+  min-height: 24px;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
+  width: 35%;
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
+  display: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
+  padding-bottom: 12px;
+}
+
+.dataviews-view-picker-grid__field-value:empty,
+.dataviews-view-picker-grid__field:empty {
+  display: none;
+}
+
+.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+  position: absolute;
+  top: -9999em;
+  right: 8px;
+  z-index: 1;
+}
+@media (hover: none) {
+  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+    top: 8px;
+  }
+}
+
+.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
+  top: 8px;
+}
+
+.dataviews-view-picker-grid__media--clickable {
+  cursor: pointer;
+}
+
+.dataviews-view-picker-grid-group__header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 .dataviews-controls__datetime {
   border: none;
   padding: 0;
@@ -1719,12 +1953,6 @@ div.dataviews-view-list {
   align-items: flex-start !important;
 }
 
-.dataforms-layouts-regular__field .components-base-control__label {
-  font-size: inherit;
-  font-weight: normal;
-  text-transform: none;
-}
-
 .dataforms-layouts-regular__field-label {
   width: 38%;
   flex-shrink: 0;
@@ -1743,4 +1971,19 @@ div.dataviews-view-list {
   min-height: 32px;
   display: flex;
   align-items: center;
+}
+
+.dataforms-layouts-card__field {
+  width: 100%;
+}
+
+.dataforms-layouts-card__field-description {
+  color: #757575;
+  display: block;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.dataforms-layouts-row__field-control {
+  width: 100%;
 }