@crispy-seed/data-table 0.12.1 → 0.14.0

package/dist/data-table-recipe.css

@@ -349,50 +349,85 @@ tr:hover .seed-data-table__entityActions {
     line-height: 15px;
     white-space: nowrap;
 }
-.seed-data-table__chipListEditor {
+.seed-data-table__chipPicker {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 3px;
-    min-width: 0;
+    flex-direction: column;
     width: 100%;
+    min-width: 0;
 }
-.seed-data-table__chipRemove {
+.seed-data-table__chipPickerList {
+    display: flex;
+    flex-direction: column;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 0 4px 4px;
+}
+.seed-data-table__chipPickerRow {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 12px;
-    height: 12px;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-height: 32px;
     margin: 0;
-    margin-inline-start: 2px;
-    padding: 0;
+    padding: 4px 8px;
     border: none;
-    border-radius: 999px;
+    border-radius: 6px;
     background: none;
+    font: inherit;
     color: inherit;
-    opacity: 0.6;
+    text-align: start;
     cursor: pointer;
-    transition: opacity .12s, background-color .12s;
 }
-.seed-data-table__chipRemove:hover {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.08);
+.seed-data-table__chipPickerRow:hover {
+    background-color: #f6f7f7;
 }
-.seed-data-table__chipInput {
-    flex: 1 1 auto;
-    min-width: 40px;
-    height: 22px;
+.seed-data-table__chipPickerRow:disabled {
+    cursor: default;
+    opacity: 0.6;
+}
+.seed-data-table__chipPickerBox {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    background-color: #ffffff;
+    color: #ffffff;
+}
+.seed-data-table__chipPickerBox[data-checked] {
+    border-color: #266df0;
+    background-color: #266df0;
+}
+.seed-data-table__chipPickerBox svg {
+    width: 12px;
+    height: 12px;
+}
+.seed-data-table__chipPickerCreate {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-height: 32px;
     margin: 0;
-    padding: 0;
+    padding: 4px 8px;
     border: none;
-    outline: none;
+    border-radius: 6px;
     background: none;
-    font-family: inherit;
+    font: inherit;
     font-size: var(--seed-font-size-t4);
     color: var(--seed-color-fg-neutral);
-    letter-spacing: -0.14px;
+    text-align: start;
+    cursor: pointer;
+}
+.seed-data-table__chipPickerCreate:hover {
+    background-color: #f6f7f7;
 }
 .seed-data-table__expandOverlay {
     box-sizing: border-box;
@@ -538,6 +573,9 @@ tr:hover .seed-data-table__entityActions {
 .seed-data-table__footerCell:last-child {
     border-inline-end: none;
 }
+.seed-data-table__footerCell[data-sticky] {
+    z-index: 3;
+}
 .seed-data-table__footerCell .seed-data-table-column-calc-trigger {
     display: flex;
     align-items: center;
@@ -678,6 +716,9 @@ tr:hover .seed-data-table__entityActions {
     font-weight: var(--seed-font-weight-medium);
     white-space: nowrap;
 }
+.seed-data-table__bulkBar[data-above-footer] {
+    bottom: calc(var(--seed-dimension-x4) + var(--seed-dimension-x9));
+}
 .seed-data-table__bulkBarCount {
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral);

package/dist/data-table-recipe.layered.css

@@ -395,53 +395,94 @@
     display: inline-flex;
   }
 
-  .seed-data-table__chipListEditor {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 3px;
+  .seed-data-table__chipPicker {
+    flex-direction: column;
     width: 100%;
     min-width: 0;
     display: flex;
   }
 
-  .seed-data-table__chipRemove {
+  .seed-data-table__chipPickerList {
+    flex-direction: column;
+    max-height: 240px;
+    padding: 0 4px 4px;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .seed-data-table__chipPickerRow {
     box-sizing: border-box;
-    width: 12px;
-    height: 12px;
+    width: 100%;
+    min-height: 32px;
+    font: inherit;
     color: inherit;
-    opacity: .6;
+    text-align: start;
     cursor: pointer;
     background: none;
     border: none;
-    border-radius: 999px;
+    border-radius: 6px;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    padding: 4px 8px;
+    display: flex;
+  }
+
+  .seed-data-table__chipPickerRow:hover {
+    background-color: #f6f7f7;
+  }
+
+  .seed-data-table__chipPickerRow:disabled {
+    cursor: default;
+    opacity: .6;
+  }
+
+  .seed-data-table__chipPickerBox {
+    box-sizing: border-box;
+    color: #fff;
+    background-color: #fff;
+    border: 1px solid #00000040;
+    border-radius: 4px;
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    margin-inline-start: 2px;
-    padding: 0;
-    transition: opacity .12s, background-color .12s;
+    width: 16px;
+    height: 16px;
     display: inline-flex;
   }
 
-  .seed-data-table__chipRemove:hover {
-    opacity: 1;
-    background-color: #00000014;
+  .seed-data-table__chipPickerBox[data-checked] {
+    background-color: #266df0;
+    border-color: #266df0;
   }
 
-  .seed-data-table__chipInput {
-    min-width: 40px;
-    height: 22px;
-    font-family: inherit;
+  .seed-data-table__chipPickerBox svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .seed-data-table__chipPickerCreate {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 32px;
+    font: inherit;
     font-size: var(--seed-font-size-t4);
     color: var(--seed-color-fg-neutral);
-    letter-spacing: -.14px;
+    text-align: start;
+    cursor: pointer;
     background: none;
     border: none;
-    outline: none;
-    flex: auto;
+    border-radius: 6px;
+    align-items: center;
+    gap: 6px;
     margin: 0;
-    padding: 0;
+    padding: 4px 8px;
+    display: flex;
+  }
+
+  .seed-data-table__chipPickerCreate:hover {
+    background-color: #f6f7f7;
   }
 
   .seed-data-table__expandOverlay {
@@ -603,6 +644,10 @@
     border-inline-end: none;
   }
 
+  .seed-data-table__footerCell[data-sticky] {
+    z-index: 3;
+  }
+
   .seed-data-table__footerCell .seed-data-table-column-calc-trigger {
     align-items: center;
     gap: var(--seed-dimension-x1_5);
@@ -760,6 +805,10 @@
     transform: translateX(-50%);
   }
 
+  .seed-data-table__bulkBar[data-above-footer] {
+    bottom: calc(var(--seed-dimension-x4) + var(--seed-dimension-x9));
+  }
+
   .seed-data-table__bulkBarCount {
     color: var(--seed-color-fg-neutral);
     font-variant-numeric: tabular-nums;