@osdk/react-components 0.2.0-beta.10 → 0.2.0-beta.11

package/build/cjs/public/experimental.css

@@ -1070,53 +1070,31 @@
 }
 
 /* src/object-table/EditableCell.module.css */
-.osdkEditableInput:focus {
-  outline: none;
-}
-
-/* src/base-components/action-button/ActionButton.module.css */
-.button {
-  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 4);
+.osdkEditableInput {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  width: 100%;
   border-radius: var(--osdk-surface-border-radius);
-  font-size: var(--osdk-typography-size-body-medium);
-  cursor: pointer;
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: var(--osdk-focus-visible-outline-offset);
-  }
-}
-.secondaryButton {
-  background-color: var(--osdk-button-secondary-bg);
-  border: var(--osdk-surface-border);
-  color: var(--osdk-button-secondary-color);
-  &:hover:not(:disabled) {
-    background-color: var(--osdk-button-secondary-bg-hover);
-  }
-  &:active:not(:disabled) {
-    background-color: var(--osdk-button-secondary-bg-active);
-  }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  border: var(--osdk-surface-border-width) solid transparent;
+  background: inherit;
+  tr[data-focused=true] & {
+    border: var(--osdk-table-cell-editable-border);
+    background: var(--osdk-table-cell-editable-bg);
+    &.osdkEditedInput {
+      border: var(--osdk-table-cell-edited-border);
+    }
+    &:focus,
+    &.osdkEditedInput:focus {
+      border: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
+    }
   }
 }
-.primaryButton {
-  background-color: var(--osdk-button-primary-bg);
-  border: none;
-  color: var(--osdk-button-primary-color);
-  &:hover:not(:disabled) {
-    background-color: var(--osdk-button-primary-bg-hover);
-  }
-  &:active:not(:disabled) {
-    background-color: var(--osdk-button-primary-bg-active);
-  }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+.osdkEditedInput {
+  border: var(--osdk-table-cell-edited-border);
+  background: var(--osdk-table-cell-editable-bg);
 }
 
 /* src/object-table/LoadingCell.module.css */
@@ -1184,11 +1162,6 @@
   justify-content: center;
   padding: 0;
 }
-.osdkTableCell:not(:has([role=checkbox])):has(input):focus-within {
-  border: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
-  border-radius: var(--osdk-surface-border-radius);
-  background-color: var(--osdk-table-cell-editable-bg);
-}
 .osdkTableCellContent:not(:has([role=checkbox])) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1224,7 +1197,8 @@
     border-top-color: var(--osdk-table-row-border-color-hover);
     border-bottom-color: var(--osdk-table-row-border-color-hover);
   }
-  &[data-selected=true] {
+  &[data-selected=true],
+  &[data-focused=true] {
     z-index: 2;
     background-color: var(--osdk-table-row-bg-active);
     border-top-color: var(--osdk-table-row-border-color-active);
@@ -1246,6 +1220,51 @@
   min-width: 100%;
 }
 
+/* src/base-components/action-button/ActionButton.module.css */
+.button {
+  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 4);
+  border-radius: var(--osdk-surface-border-radius);
+  font-size: var(--osdk-typography-size-body-medium);
+  cursor: pointer;
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+.secondaryButton {
+  background-color: var(--osdk-button-secondary-bg);
+  border: var(--osdk-surface-border);
+  color: var(--osdk-button-secondary-color);
+  &:hover:not(:disabled) {
+    background-color: var(--osdk-button-secondary-bg-hover);
+  }
+  &:active:not(:disabled) {
+    background-color: var(--osdk-button-secondary-bg-active);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+.primaryButton {
+  background-color: var(--osdk-button-primary-bg);
+  border: none;
+  color: var(--osdk-button-primary-color);
+  &:hover:not(:disabled) {
+    background-color: var(--osdk-button-primary-bg-hover);
+  }
+  &:active:not(:disabled) {
+    background-color: var(--osdk-button-primary-bg-active);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
 /* src/base-components/dialog/Dialog.module.css */
 .backdrop {
   position: fixed;
@@ -2014,17 +2033,37 @@
   width: max-content;
   min-width: 100%;
 }
-.submitButtonContainer {
-  background-color: var(--osdk-surface-background-color-default-rest);
-  border-top: var(--osdk-table-border);
-  padding: var(--osdk-table-button-container-padding);
-  display: flex;
-  justify-content: flex-end;
-}
 
 /* src/object-table/CellContextMenu.module.css */
 .osdkCellContextMenu {
   position: fixed;
   z-index: var(--osdk-surface-z-index-2);
 }
+
+/* src/object-table/TableEditContainer.module.css */
+.tableEditContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--osdk-surface-background-color-default-rest);
+  border-top: var(--osdk-table-border);
+  padding: var(--osdk-table-edit-container-padding);
+  min-height: var(--osdk-table-edit-container-min-height);
+}
+.placeholder {
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  padding: calc(var(--osdk-surface-spacing) * 2) 0;
+}
+.modificationCount {
+  color: var(--osdk-intent-primary-rest);
+  font-size: var(--osdk-typography-size-body-small);
+  padding: calc(var(--osdk-surface-spacing) * 2) 0;
+}
+.editButtons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex: 1;
+}
 /*# sourceMappingURL=experimental.css.map */