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

package/build/cjs/public/experimental.css

@@ -55,6 +55,11 @@
   color: var(--osdk-filter-list-empty-text-color);
   font-size: var(--osdk-filter-list-empty-font-size);
 }
+.dragOverlay {
+  box-shadow: var(--osdk-filter-item-drag-overlay-shadow);
+  border-radius: var(--osdk-filter-item-drag-overlay-border-radius);
+  background: var(--osdk-filter-item-drag-overlay-bg);
+}
 
 /* src/shared/ErrorBoundary.module.css */
 .errorContainer {
@@ -972,6 +977,33 @@
   display: flex;
   flex-direction: column;
 }
+.dragHandle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-drag-handle-padding);
+  margin-right: var(--osdk-surface-spacing);
+  border: none;
+  background: var(--osdk-filter-item-drag-handle-bg);
+  cursor: var(--osdk-drag-handle-cursor);
+  border-radius: var(--osdk-filter-item-drag-handle-border-radius);
+  color: var(--osdk-filter-item-drag-handle-color);
+  touch-action: none;
+  &:hover {
+    color: var(--osdk-filter-item-drag-handle-color-hover);
+    background: var(--osdk-filter-item-drag-handle-bg-hover);
+  }
+  &:active {
+    cursor: var(--osdk-drag-handle-cursor-active);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: 2px;
+  }
+}
+.dragging {
+  opacity: var(--osdk-filter-item-dragging-opacity);
+}
 
 /* src/filter-list/base/FilterListHeader.module.css */
 .header {
@@ -1365,13 +1397,13 @@
 }
 .dragHandle {
   display: flex;
-  cursor: grab;
+  cursor: var(--osdk-drag-handle-cursor);
   color: var(--osdk-draggable-item-drag-icon-color);
   &:hover {
     color: var(--osdk-draggable-item-drag-icon-color-hover);
   }
   &:active {
-    cursor: grabbing;
+    cursor: var(--osdk-drag-handle-cursor-active);
   }
   &:focus {
     outline: none;