@osdk/react-components 0.2.0-beta.16 → 0.2.0-beta.18

package/build/cjs/public/experimental.css

@@ -2,28 +2,67 @@
 .filterList {
   display: flex;
   flex-direction: column;
+  height: 100%;
+}
+.filterListCollapsed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--osdk-filter-list-collapsed-width);
+  height: 100%;
+  background: var(--osdk-filter-list-bg);
+  border: var(--osdk-filter-list-border);
+  border-radius: var(--osdk-filter-list-border-radius);
+  padding: var(--osdk-surface-spacing) 0;
+  gap: var(--osdk-surface-spacing);
+}
+.expandedContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
   background: var(--osdk-filter-list-bg);
   border: var(--osdk-filter-list-border);
   border-radius: var(--osdk-filter-list-border-radius);
   padding: var(--osdk-filter-list-padding);
   gap: var(--osdk-filter-list-gap);
 }
-.contentWrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--osdk-filter-list-collapse-transition);
+.hiddenContent {
+  display: none;
+}
+.expandButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-header-button-padding);
+  border: none;
+  background: var(--osdk-filter-header-button-bg);
+  cursor: pointer;
+  border-radius: var(--osdk-filter-header-button-border-radius);
+  color: var(--osdk-filter-header-collapse-icon-color);
+  transition: background-color var(--osdk-filter-header-button-transition);
+  &:hover {
+    background: var(--osdk-filter-header-button-bg-hover);
+  }
+  &:active {
+    background: var(--osdk-filter-header-button-bg-active);
+  }
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 }
-.contentWrapper[data-collapsed=true] {
-  grid-template-rows: 0fr;
-}
-.contentInner {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--osdk-filter-list-gap);
+.collapsedLabel {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-family: var(--osdk-filter-list-collapsed-label-font-family);
+  font-size: var(--osdk-filter-list-collapsed-label-font-size);
+  color: var(--osdk-filter-list-collapsed-label-color);
+  font-weight: var(--osdk-filter-header-font-weight);
+  user-select: none;
 }
 .addButtonContainer {
   display: flex;
@@ -241,6 +280,14 @@
   color: var(--osdk-filter-header-activeCount-color);
   font-variant-numeric: tabular-nums;
 }
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  &:empty {
+    display: none;
+  }
+}
 .collapseButton {
   display: flex;
   align-items: center;
@@ -251,6 +298,7 @@
   cursor: pointer;
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
+  color: var(--osdk-filter-header-collapse-icon-color);
   &:hover {
     background: var(--osdk-filter-header-button-bg-hover);
   }
@@ -265,42 +313,10 @@
     transition: none;
   }
 }
-.collapseIcon {
-  display: block;
-  width: var(--osdk-filter-header-collapse-icon-size);
-  height: var(--osdk-filter-header-collapse-icon-size);
-  border-left: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  border-bottom: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  transform: rotate(-45deg);
-  transition: transform var(--osdk-filter-header-button-transition);
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-.collapsed {
-  transform: rotate(-135deg);
-}
-.headerContentWrapper {
-  display: grid;
-  grid-template-columns: 1fr;
-  overflow: hidden;
-  transition: grid-template-columns var(--osdk-filter-list-collapse-transition);
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-.headerContentWrapper[data-collapsed=true] {
-  grid-template-columns: 0fr;
-}
-.headerContentInner {
+.resetButton {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-}
-.resetButton {
+  gap: calc(var(--osdk-surface-spacing) * 0.5);
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
   color: var(--osdk-filter-header-reset-color);
@@ -1212,14 +1228,56 @@
   }
 }
 
+/* src/base-components/tooltip/Tooltip.module.css */
+.osdkTooltipTrigger {
+  border: none;
+  background: inherit;
+}
+.osdkTooltipPositioner {
+  z-index: var(--osdk-tooltip-z-index);
+}
+.osdkTooltipPopup {
+  padding: var(--osdk-tooltip-padding);
+  background-color: var(--osdk-tooltip-bg);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-tooltip-shadow);
+  max-width: var(--osdk-tooltip-max-width);
+  font-size: var(--osdk-tooltip-font-size);
+}
+.osdkTooltipArrow {
+  display: flex;
+  &[data-side=top] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+  &[data-side=bottom] {
+    top: -8px;
+    rotate: 0deg;
+  }
+  &[data-side=left] {
+    right: -13px;
+    rotate: 90deg;
+  }
+  &[data-side=right] {
+    left: -13px;
+    rotate: -90deg;
+  }
+}
+.tooltipArrowFill {
+  fill: var(--osdk-tooltip-bg);
+}
+.tooltipArrowOuterStroke {
+  fill: var(--osdk-tooltip-border-color);
+}
+
 /* src/object-table/EditableCell.module.css */
-.osdkEditableInput {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+.osdkEditableCell {
   width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
   border-radius: var(--osdk-surface-border-radius);
   border: var(--osdk-surface-border-width) solid transparent;
   background: inherit;
@@ -1229,16 +1287,46 @@
     &.osdkEditedInput {
       border: var(--osdk-table-cell-edited-border);
     }
-    &:focus,
-    &.osdkEditedInput:focus {
+    &:focus-within,
+    &.osdkEditedInput:focus-within {
       border: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
     }
+    &.error {
+      border: var(--osdk-table-cell-edited-border-error);
+      &:focus-within {
+        border: var(--osdk-emphasis-focus-width) solid var(--osdk-intent-danger-rest);
+      }
+    }
+  }
+  &.error {
+    background: var(--osdk-table-cell-editable-bg);
+    border: var(--osdk-table-cell-edited-border-error);
+  }
+}
+.osdkEditableInput {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  background: inherit;
+  border: none;
+  &:focus {
+    outline: none;
   }
 }
 .osdkEditedInput {
   border: var(--osdk-table-cell-edited-border);
   background: var(--osdk-table-cell-editable-bg);
 }
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
+}
 
 /* src/object-table/LoadingCell.module.css */
 .osdkLoadingCell {
@@ -1974,8 +2062,9 @@
 .osdkTableHeaderCell[data-pinned=right]:not(:has(~ [data-pinned=right]):nth-child(n+2)) {
   border-left: var(--osdk-table-pinned-column-border);
 }
-.osdkTableHeaderCell:has([role=checkbox]) {
+.osdkTableSelectionHeaderCell {
   justify-content: center;
+  padding: 0;
 }
 .osdkTableHeaderResizer {
   background: none;
@@ -2165,6 +2254,14 @@
   font-size: var(--osdk-typography-size-body-small);
   padding: calc(var(--osdk-surface-spacing) * 2) 0;
 }
+.editsInfoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  font-size: var(--osdk-typography-size-body-small);
+}
 .modificationCount {
   color: var(--osdk-intent-primary-rest);
   font-size: var(--osdk-typography-size-body-small);
@@ -2176,4 +2273,19 @@
   gap: 8px;
   flex: 1;
 }
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 2);
+  color: var(--osdk-intent-danger-rest);
+}
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
+}
+.divider {
+  width: 1px;
+  height: 8px;
+  background-color: var(--osdk-surface-border-color-default);
+  align-self: center;
+}
 /*# sourceMappingURL=experimental.css.map */