@crispy-seed/data-table 0.12.1 → 0.14.0

package/dist/styles.css

@@ -5054,53 +5054,94 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   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 {
@@ -5262,6 +5303,10 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   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);
@@ -5419,6 +5464,10 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",