@osdk/react-components 0.2.0-beta.1 → 0.2.0-beta.3

package/build/browser/base-components/combobox/Combobox.module.css

@@ -0,0 +1,177 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.osdkComboboxInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-combobox-spacing, var(--bp-surface-spacing));
+  width: 100%;
+  min-height: 30px;
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 1.5)
+    calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 2);
+  box-sizing: border-box;
+  border-radius: var(--osdk-combobox-border-radius, var(--bp-surface-borderRadius));
+  border: var(--osdk-combobox-border-width, var(--bp-surface-borderWidth)) solid
+    var(--osdk-combobox-border-color, var(--bp-surface-borderColor-default));
+  background-color: var(--osdk-combobox-input-bg, var(--bp-surface-colorRest-default));
+  transition: border-color var(--osdk-combobox-transition-duration, var(--bp-emphasis-transitionDuration))
+    var(--osdk-combobox-transition-ease, var(--bp-emphasis-ease-default));
+
+  &:focus-within {
+    border-color: var(--osdk-combobox-focus-border-color, var(--bp-intent-primary-rest));
+    outline: var(--osdk-combobox-focus-width, var(--bp-emphasis-focusWidth)) solid
+      var(--osdk-combobox-focus-color, var(--bp-emphasis-focusColor));
+    outline-offset: var(--osdk-combobox-focus-offset, var(--bp-emphasis-focusOffset));
+  }
+}
+
+.osdkComboboxSearchIcon {
+  flex-shrink: 0;
+  color: var(--osdk-combobox-icon-color, var(--bp-iconography-colorMuted));
+}
+
+.osdkComboboxInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-family: var(--osdk-combobox-font-family, var(--bp-typography-family-default));
+  font-size: var(--osdk-combobox-font-size, var(--bp-typography-size-bodyMedium));
+  line-height: var(--osdk-combobox-line-height, var(--bp-typography-lineHeight-default));
+  color: var(--osdk-combobox-input-color, var(--bp-typography-colorRest-default));
+  outline: none;
+
+  &::placeholder {
+    color: var(--osdk-combobox-placeholder-color, var(--bp-typography-colorMuted));
+  }
+}
+
+.osdkComboboxPositioner {
+  z-index: var(--osdk-combobox-z-index, var(--bp-surface-zIndex-3));
+}
+
+.osdkComboboxPopup {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
+  overflow-y: auto;
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 1.5);
+  box-sizing: border-box;
+  border-radius: var(--osdk-combobox-border-radius, var(--bp-surface-borderRadius));
+  border: var(--osdk-combobox-border-width, var(--bp-surface-borderWidth)) solid
+    var(--osdk-combobox-border-color, var(--bp-surface-borderColor-default));
+  background-color: var(--osdk-combobox-popup-bg, var(--bp-surface-colorRest-default));
+  box-shadow: var(--osdk-combobox-popup-shadow, var(--bp-surface-shadow-2));
+}
+
+.osdkComboboxItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 1.5)
+    calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 2);
+  border-radius: var(--osdk-combobox-border-radius, var(--bp-surface-borderRadius));
+  cursor: pointer;
+  font-family: var(--osdk-combobox-font-family, var(--bp-typography-family-default));
+  font-size: var(--osdk-combobox-font-size, var(--bp-typography-size-bodyMedium));
+  line-height: var(--osdk-combobox-line-height, var(--bp-typography-lineHeight-default));
+  color: var(--osdk-combobox-item-color, var(--bp-typography-colorRest-default));
+  transition: background-color var(--osdk-combobox-transition-duration, var(--bp-emphasis-transitionDuration))
+    var(--osdk-combobox-transition-ease, var(--bp-emphasis-ease-default));
+
+  &[data-highlighted] {
+    background-color: var(--osdk-combobox-item-bg-highlighted, var(--bp-surface-colorHover-default));
+    outline: none;
+  }
+
+  &[data-selected] {
+    background-color: var(--osdk-combobox-item-bg-selected, var(--bp-surface-depthLayer-primary));
+    color: var(--osdk-combobox-item-color-selected, var(--bp-intent-primary-rest));
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.osdkComboboxChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 1.5);
+  margin-bottom: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 2);
+}
+
+.osdkComboboxChip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--osdk-combobox-spacing, var(--bp-surface-spacing));
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 0.5)
+    calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 1.5);
+  border-radius: var(--osdk-combobox-border-radius, var(--bp-surface-borderRadius));
+  background-color: var(--osdk-combobox-chip-bg, var(--bp-surface-colorHover-default));
+  font-family: var(--osdk-combobox-font-family, var(--bp-typography-family-default));
+  font-size: var(--osdk-combobox-chip-font-size, var(--bp-typography-size-bodySmall));
+  line-height: var(--osdk-combobox-line-height, var(--bp-typography-lineHeight-default));
+  color: var(--osdk-combobox-chip-color, var(--bp-typography-colorRest-default));
+}
+
+.osdkComboboxChipRemove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--osdk-combobox-chip-remove-color, var(--bp-iconography-colorMuted));
+  transition: color var(--osdk-combobox-transition-duration, var(--bp-emphasis-transitionDuration))
+    var(--osdk-combobox-transition-ease, var(--bp-emphasis-ease-default));
+
+  &:hover {
+    color: var(--osdk-combobox-chip-remove-color-hover, var(--bp-typography-colorRest-default));
+  }
+}
+
+.osdkComboboxClear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 0.5);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--osdk-combobox-clear-color, var(--bp-iconography-colorMuted));
+  border-radius: var(--osdk-combobox-border-radius, var(--bp-surface-borderRadius));
+  transition: color var(--osdk-combobox-transition-duration, var(--bp-emphasis-transitionDuration))
+      var(--osdk-combobox-transition-ease, var(--bp-emphasis-ease-default)),
+    background-color var(--osdk-combobox-transition-duration, var(--bp-emphasis-transitionDuration))
+      var(--osdk-combobox-transition-ease, var(--bp-emphasis-ease-default));
+
+  &:hover {
+    color: var(--osdk-combobox-clear-color-hover, var(--bp-typography-colorRest-default));
+    background-color: var(--osdk-combobox-clear-bg-hover, var(--bp-surface-colorHover-default));
+  }
+}
+
+.osdkComboboxEmpty {
+  padding: calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 3)
+    calc(var(--osdk-combobox-spacing, var(--bp-surface-spacing)) * 2);
+  text-align: center;
+  color: var(--osdk-combobox-empty-color, var(--bp-typography-colorMuted));
+  font-family: var(--osdk-combobox-font-family, var(--bp-typography-family-default));
+  font-size: var(--osdk-combobox-font-size, var(--bp-typography-size-bodyMedium));
+}

package/build/browser/base-components/combobox/Combobox.module.css.js

@@ -0,0 +1,16 @@
+// CSS Module proxy for Combobox.module.css
+const styles = {
+  "osdkComboboxInputWrapper": "Combobox-module__osdkComboboxInputWrapper___QJ-WZal7",
+  "osdkComboboxSearchIcon": "Combobox-module__osdkComboboxSearchIcon___jepAa-OV",
+  "osdkComboboxInput": "Combobox-module__osdkComboboxInput___9516ISdK",
+  "osdkComboboxPositioner": "Combobox-module__osdkComboboxPositioner___hKb8oXuo",
+  "osdkComboboxPopup": "Combobox-module__osdkComboboxPopup___J-p7AW55",
+  "osdkComboboxItem": "Combobox-module__osdkComboboxItem___aw0l3CKj",
+  "osdkComboboxChips": "Combobox-module__osdkComboboxChips___LX40CFj-",
+  "osdkComboboxChip": "Combobox-module__osdkComboboxChip___9O7-N50F",
+  "osdkComboboxChipRemove": "Combobox-module__osdkComboboxChipRemove___QTqMJiEh",
+  "osdkComboboxClear": "Combobox-module__osdkComboboxClear___ylbP7z6a",
+  "osdkComboboxEmpty": "Combobox-module__osdkComboboxEmpty___rfSN-zlQ"
+};
+
+export default styles;

package/build/browser/base-components/dialog/Dialog.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dialog as BaseUIDialog } from "@base-ui/react/dialog";
+import { Cross } from "@blueprintjs/icons";
+import classnames from "classnames";
+import React from "react";
+import styles from "./Dialog.module.css.js";
+export function Dialog({
+  isOpen,
+  onOpenChange,
+  title,
+  children,
+  footer,
+  className
+}) {
+  return /*#__PURE__*/React.createElement(BaseUIDialog.Root, {
+    open: isOpen,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(BaseUIDialog.Portal, null, /*#__PURE__*/React.createElement(BaseUIDialog.Backdrop, {
+    className: styles.backdrop
+  }), /*#__PURE__*/React.createElement(BaseUIDialog.Popup, {
+    className: classnames(styles.popup, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement(BaseUIDialog.Title, {
+    className: styles.title
+  }, title), /*#__PURE__*/React.createElement(BaseUIDialog.Close, {
+    className: styles.closeButton,
+    "aria-label": "Close dialog"
+  }, /*#__PURE__*/React.createElement(Cross, {
+    className: styles.closeIcon
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, children), footer != null && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, footer))));
+}
+//# sourceMappingURL=Dialog.js.map

package/build/browser/base-components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Dialog","BaseUIDialog","Cross","classnames","React","styles","isOpen","onOpenChange","title","children","footer","className","createElement","Root","open","Portal","Backdrop","backdrop","Popup","popup","header","Title","Close","closeButton","closeIcon","body"],"sources":["Dialog.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Dialog as BaseUIDialog } from \"@base-ui/react/dialog\";\nimport { Cross } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Dialog.module.css\";\n\nexport interface DialogProps {\n  isOpen: boolean;\n  onOpenChange: () => void;\n  title: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n}\n\nexport function Dialog({\n  isOpen,\n  onOpenChange,\n  title,\n  children,\n  footer,\n  className,\n}: DialogProps): React.ReactElement {\n  return (\n    <BaseUIDialog.Root open={isOpen} onOpenChange={onOpenChange}>\n      <BaseUIDialog.Portal>\n        <BaseUIDialog.Backdrop className={styles.backdrop} />\n        <BaseUIDialog.Popup\n          className={classnames(\n            styles.popup,\n            className,\n          )}\n        >\n          <div className={styles.header}>\n            <BaseUIDialog.Title className={styles.title}>\n              {title}\n            </BaseUIDialog.Title>\n            <BaseUIDialog.Close\n              className={styles.closeButton}\n              aria-label=\"Close dialog\"\n            >\n              <Cross className={styles.closeIcon} />\n            </BaseUIDialog.Close>\n          </div>\n          <div className={styles.body}>{children}</div>\n          {footer != null && <div className={styles.footer}>{footer}</div>}\n        </BaseUIDialog.Popup>\n      </BaseUIDialog.Portal>\n    </BaseUIDialog.Root>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,IAAIC,YAAY,QAAQ,uBAAuB;AAC9D,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,qBAAqB;AAWxC,OAAO,SAASL,MAAMA,CAAC;EACrBM,MAAM;EACNC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC;AACW,CAAC,EAAsB;EAClC,oBACEP,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACY,IAAI;IAACC,IAAI,EAAER,MAAO;IAACC,YAAY,EAAEA;EAAa,gBAC1DH,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACc,MAAM,qBAClBX,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACe,QAAQ;IAACL,SAAS,EAAEN,MAAM,CAACY;EAAS,CAAE,CAAC,eACrDb,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACiB,KAAK;IACjBP,SAAS,EAAER,UAAU,CACnBE,MAAM,CAACc,KAAK,EACZR,SACF;EAAE,gBAEFP,KAAA,CAAAQ,aAAA;IAAKD,SAAS,EAAEN,MAAM,CAACe;EAAO,gBAC5BhB,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACoB,KAAK;IAACV,SAAS,EAAEN,MAAM,CAACG;EAAM,GACzCA,KACiB,CAAC,eACrBJ,KAAA,CAAAQ,aAAA,CAACX,YAAY,CAACqB,KAAK;IACjBX,SAAS,EAAEN,MAAM,CAACkB,WAAY;IAC9B,cAAW;EAAc,gBAEzBnB,KAAA,CAAAQ,aAAA,CAACV,KAAK;IAACS,SAAS,EAAEN,MAAM,CAACmB;EAAU,CAAE,CACnB,CACjB,CAAC,eACNpB,KAAA,CAAAQ,aAAA;IAAKD,SAAS,EAAEN,MAAM,CAACoB;EAAK,GAAEhB,QAAc,CAAC,EAC5CC,MAAM,IAAI,IAAI,iBAAIN,KAAA,CAAAQ,aAAA;IAAKD,SAAS,EAAEN,MAAM,CAACK;EAAO,GAAEA,MAAY,CAC7C,CACD,CACJ,CAAC;AAExB","ignoreList":[]}

package/build/browser/base-components/dialog/Dialog.module.css

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--osdk-dialog-backdrop-bg);
+  z-index: var(--osdk-surface-z-index-1);
+}
+
+.popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: var(--osdk-dialog-min-width);
+  max-width: var(--osdk-dialog-max-width);
+  min-height: var(--osdk-dialog-min-height);
+  max-height: var(--osdk-dialog-max-height);
+  background-color: var(--osdk-dialog-bg);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-dialog-shadow);
+  z-index: var(--osdk-surface-z-index-2);
+  display: flex;
+  flex-direction: column;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--osdk-dialog-header-padding);
+  border-bottom: var(--osdk-surface-border);
+}
+
+.title {
+  font-size: var(--osdk-dialog-title-font-size);
+  font-weight: var(--osdk-dialog-title-font-weight);
+}
+
+.body {
+  display: flex;
+  padding: var(--osdk-dialog-body-padding);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--osdk-surface-spacing) * 2);
+  padding: var(--osdk-dialog-footer-padding);
+  border-top: var(--osdk-surface-border);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  padding: calc(var(--osdk-surface-spacing) * 0.5);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:hover {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.closeIcon {
+  width: var(--osdk-iconography-size-small);
+  height: var(--osdk-iconography-size-small);
+  color: var(--osdk-typography-color-muted);
+}

package/build/browser/base-components/dialog/Dialog.module.css.js

@@ -0,0 +1,13 @@
+// CSS Module proxy for Dialog.module.css
+const styles = {
+  "backdrop": "Dialog-module__backdrop___LaM-OTQa",
+  "popup": "Dialog-module__popup___7Hd9wHIO",
+  "header": "Dialog-module__header___uvnNEIbj",
+  "title": "Dialog-module__title___fyskXl6s",
+  "body": "Dialog-module__body___pHE35h4X",
+  "footer": "Dialog-module__footer___H9pEEz3w",
+  "closeButton": "Dialog-module__closeButton___vnkQctUO",
+  "closeIcon": "Dialog-module__closeIcon___L7JMZyxZ"
+};
+
+export default styles;

package/build/browser/base-components/draggable-list/DraggableList.js

@@ -0,0 +1,155 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from "@base-ui/react/button";
+import { DragHandleVertical, SmallCross, Trash } from "@blueprintjs/icons";
+import { closestCenter, DndContext as BaseDndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "./DraggableList.module.css.js";
+function DraggableListItem({
+  item,
+  onRemove,
+  removeIconVariant = "trash",
+  renderContent
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const handleRemove = useCallback(() => {
+    onRemove?.(item.id);
+  }, [item.id, onRemove]);
+  const RemoveIcon = removeIconVariant === "trash" ? Trash : SmallCross;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
+    style: style,
+    className: styles.draggableItem,
+    "data-dragging": isDragging
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: styles.dragHandle,
+    "aria-label": `Reorder ${item.label}`
+  }, attributes, listeners), /*#__PURE__*/React.createElement(DragHandleVertical, {
+    className: styles.icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.itemContent
+  }, renderContent ? renderContent(item) : item.label), onRemove && /*#__PURE__*/React.createElement(Button, {
+    className: styles.removeButton,
+    onClick: handleRemove,
+    "aria-label": `Remove ${item.label}`
+  }, /*#__PURE__*/React.createElement(RemoveIcon, {
+    className: styles.icon
+  })));
+}
+export function DraggableList({
+  items,
+  onReorder,
+  onRemove,
+  removeIconVariant = "cross",
+  renderContent,
+  emptyMessage,
+  className
+}) {
+  const itemIds = useMemo(() => items.map(item => item.id), [items]);
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  const handleDragEnd = useCallback(event => {
+    const {
+      active,
+      over
+    } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex(item => item.id === active.id);
+      const newIndex = items.findIndex(item => item.id === over.id);
+      onReorder(oldIndex, newIndex);
+    }
+  }, [items, onReorder]);
+  const containerRef = useRef(null);
+  useKeyboardEvents(containerRef);
+
+  // TODO: Revert when @types/react is fixed
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(styles.draggableListContainer, className)
+  }, /*#__PURE__*/React.createElement(BaseDndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: itemIds,
+    strategy: verticalListSortingStrategy
+  }, items.map(item => /*#__PURE__*/React.createElement(DraggableListItem, {
+    key: item.id,
+    item: item,
+    onRemove: onRemove,
+    removeIconVariant: removeIconVariant,
+    renderContent: renderContent
+  })))), items.length === 0 && emptyMessage && /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, emptyMessage));
+}
+const useKeyboardEvents = containerRef => {
+  // Base UI's DialogPopup calls stopPropagation on arrow key events, which
+  // prevents them from reaching @dnd-kit's document-level KeyboardSensor
+  // listener. We use a native capture-phase listener to intercept arrow keys
+  // before the dialog can swallow them, and re-dispatch them on the document
+  // so @dnd-kit can process keyboard-driven reordering.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el == null) {
+      return;
+    }
+    const ARROW_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+    function handleCapture(event) {
+      if (!ARROW_KEYS.has(event.key)) {
+        return;
+      }
+
+      // Only intercept when a drag is active (an item has [data-dragging="true"])
+      if (el.querySelector("[data-dragging=\"true\"]") == null) {
+        return;
+      }
+      event.stopPropagation();
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: event.key,
+        code: event.code,
+        bubbles: true
+      }));
+    }
+    el.addEventListener("keydown", handleCapture, true);
+    return () => el.removeEventListener("keydown", handleCapture, true);
+  }, [containerRef]);
+};
+//# sourceMappingURL=DraggableList.js.map

package/build/browser/base-components/draggable-list/DraggableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableList.js","names":["Button","DragHandleVertical","SmallCross","Trash","closestCenter","DndContext","BaseDndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","useSortable","verticalListSortingStrategy","CSS","classNames","React","useCallback","useEffect","useMemo","useRef","styles","DraggableListItem","item","onRemove","removeIconVariant","renderContent","attributes","listeners","setNodeRef","transform","transition","isDragging","id","style","Transform","toString","handleRemove","RemoveIcon","createElement","ref","className","draggableItem","_extends","dragHandle","label","icon","itemContent","removeButton","onClick","DraggableList","items","onReorder","emptyMessage","itemIds","map","sensors","activationConstraint","distance","coordinateGetter","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","containerRef","useKeyboardEvents","draggableListContainer","collisionDetection","onDragEnd","strategy","key","length","emptyState","el","current","ARROW_KEYS","Set","handleCapture","has","querySelector","stopPropagation","document","dispatchEvent","KeyboardEvent","code","bubbles","addEventListener","removeEventListener"],"sources":["DraggableList.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { DragHandleVertical, SmallCross, Trash } from \"@blueprintjs/icons\";\nimport {\n  closestCenter,\n  DndContext as BaseDndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport classNames from \"classnames\";\nimport type { RefObject } from \"react\";\nimport React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport styles from \"./DraggableList.module.css\";\n\nexport interface DraggableItem {\n  id: string;\n  label: string;\n}\n\ntype RemoveIconVariant = \"trash\" | \"cross\";\n\ninterface DraggableListItemProps<T extends DraggableItem> {\n  item: T;\n  onRemove?: (id: string) => void;\n  removeIconVariant?: RemoveIconVariant;\n  renderContent?: (item: T) => React.ReactNode;\n}\n\nfunction DraggableListItem<T extends DraggableItem>({\n  item,\n  onRemove,\n  removeIconVariant = \"trash\",\n  renderContent,\n}: DraggableListItemProps<T>): React.ReactElement {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  const handleRemove = useCallback(() => {\n    onRemove?.(item.id);\n  }, [item.id, onRemove]);\n\n  const RemoveIcon = removeIconVariant === \"trash\" ? Trash : SmallCross;\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={styles.draggableItem}\n      data-dragging={isDragging}\n    >\n      <div\n        className={styles.dragHandle}\n        aria-label={`Reorder ${item.label}`}\n        {...attributes}\n        {...listeners}\n      >\n        <DragHandleVertical className={styles.icon} />\n      </div>\n      <div className={styles.itemContent}>\n        {renderContent ? renderContent(item) : item.label}\n      </div>\n      {onRemove && (\n        <Button\n          className={styles.removeButton}\n          onClick={handleRemove}\n          aria-label={`Remove ${item.label}`}\n        >\n          <RemoveIcon className={styles.icon} />\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface DraggableListProps<T extends DraggableItem> {\n  items: T[];\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onRemove: (id: string) => void;\n  removeIconVariant?: RemoveIconVariant;\n  renderContent?: (item: T) => React.ReactNode;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport function DraggableList<T extends DraggableItem>({\n  items,\n  onReorder,\n  onRemove,\n  removeIconVariant = \"cross\",\n  renderContent,\n  emptyMessage,\n  className,\n}: DraggableListProps<T>): React.ReactElement {\n  const itemIds = useMemo(() => items.map((item) => item.id), [items]);\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n\n      if (over && active.id !== over.id) {\n        const oldIndex = items.findIndex((item) => item.id === active.id);\n        const newIndex = items.findIndex((item) => item.id === over.id);\n        onReorder(oldIndex, newIndex);\n      }\n    },\n    [items, onReorder],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useKeyboardEvents(containerRef);\n\n  // TODO: Revert when @types/react is fixed\n  const DndContext = BaseDndContext as any;\n\n  return (\n    <div\n      ref={containerRef}\n      className={classNames(styles.draggableListContainer, className)}\n    >\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n      >\n        <SortableContext\n          items={itemIds}\n          strategy={verticalListSortingStrategy}\n        >\n          {items.map((item) => (\n            <DraggableListItem<T>\n              key={item.id}\n              item={item}\n              onRemove={onRemove}\n              removeIconVariant={removeIconVariant}\n              renderContent={renderContent}\n            />\n          ))}\n        </SortableContext>\n      </DndContext>\n      {items.length === 0 && emptyMessage && (\n        <div className={styles.emptyState}>{emptyMessage}</div>\n      )}\n    </div>\n  );\n}\n\nconst useKeyboardEvents = (containerRef: RefObject<HTMLDivElement>) => {\n  // Base UI's DialogPopup calls stopPropagation on arrow key events, which\n  // prevents them from reaching @dnd-kit's document-level KeyboardSensor\n  // listener. We use a native capture-phase listener to intercept arrow keys\n  // before the dialog can swallow them, and re-dispatch them on the document\n  // so @dnd-kit can process keyboard-driven reordering.\n  useEffect(() => {\n    const el = containerRef.current;\n    if (el == null) {\n      return;\n    }\n\n    const ARROW_KEYS = new Set([\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n    ]);\n\n    function handleCapture(event: KeyboardEvent) {\n      if (!ARROW_KEYS.has(event.key)) {\n        return;\n      }\n\n      // Only intercept when a drag is active (an item has [data-dragging=\"true\"])\n      if (el!.querySelector(\"[data-dragging=\\\"true\\\"]\") == null) {\n        return;\n      }\n\n      event.stopPropagation();\n\n      document.dispatchEvent(\n        new KeyboardEvent(\"keydown\", {\n          key: event.key,\n          code: event.code,\n          bubbles: true,\n        }),\n      );\n    }\n\n    el.addEventListener(\"keydown\", handleCapture, true);\n    return () => el.removeEventListener(\"keydown\", handleCapture, true);\n  }, [containerRef]);\n};\n"],"mappings":"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","ignoreList":[]}

package/build/browser/base-components/draggable-list/DraggableList.module.css

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.draggableListContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-draggable-item-gap);
+  overflow-y: auto;
+}
+
+.draggableItem {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-draggable-item-gap);
+  padding: var(--osdk-draggable-item-padding);
+  background-color: var(--osdk-draggable-item-bg);
+  border: var(--osdk-draggable-item-border);
+  border-radius: var(--osdk-draggable-item-border-radius);
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+}
+
+.draggableItem[data-dragging="true"] {
+  opacity: 0.5;
+}
+
+.dragHandle {
+  display: flex;
+  cursor: grab;
+  color: var(--osdk-draggable-item-drag-icon-color);
+
+  &:hover {
+    color: var(--osdk-draggable-item-drag-icon-color-hover);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.itemContent {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.removeButton {
+  background: none;
+  border: none;
+  padding: var(--osdk-surface-spacing);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--osdk-draggable-item-drag-icon-color);
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:hover {
+    color: var(--osdk-typography-color-danger-rest);
+  }
+
+  &:active {
+    color: var(--osdk-typography-color-danger-rest);
+    background: oklch(
+      from var(--osdk-surface-background-color-danger-hover) l c h / 0.2
+    );
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-style: italic;
+}

package/build/browser/base-components/draggable-list/DraggableList.module.css.js

@@ -0,0 +1,11 @@
+// CSS Module proxy for DraggableList.module.css
+const styles = {
+  "draggableListContainer": "DraggableList-module__draggableListContainer___78U2PaLj",
+  "draggableItem": "DraggableList-module__draggableItem___yzxaMynW",
+  "dragHandle": "DraggableList-module__dragHandle___Ds-CeRi4",
+  "itemContent": "DraggableList-module__itemContent___lUjVl8eM",
+  "removeButton": "DraggableList-module__removeButton___--alST9G",
+  "emptyState": "DraggableList-module__emptyState___l25Qs23u"
+};
+
+export default styles;