@osdk/react-components 0.2.0-beta.2 → 0.2.0-beta.21

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

@@ -0,0 +1,357 @@
+/*
+ * 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;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
+  width: 100%;
+  min-height: var(--osdk-combobox-min-height, 30px);
+  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5)
+    calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
+  box-sizing: border-box;
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width))
+    solid
+    var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
+  background-color: var(
+    --osdk-combobox-input-bg,
+    var(--osdk-surface-background-color-default-rest)
+  );
+  transition: border-color
+    var(
+      --osdk-combobox-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
+    var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &:focus-within {
+    border-color: var(
+      --osdk-combobox-focus-border-color,
+      var(--osdk-intent-primary-rest)
+    );
+    outline: var(--osdk-combobox-focus-width, var(--osdk-emphasis-focus-width))
+      solid var(--osdk-combobox-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var(
+      --osdk-combobox-focus-offset,
+      var(--osdk-emphasis-focus-offset)
+    );
+  }
+}
+
+.osdkComboboxSearchIcon {
+  flex-shrink: 0;
+  color: var(--osdk-combobox-icon-color, var(--osdk-iconography-color-muted));
+}
+
+.osdkComboboxInput {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5)
+    calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width))
+    solid
+    var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
+  background-color: var(
+    --osdk-combobox-input-bg,
+    var(--osdk-surface-background-color-default-rest)
+  );
+  transition: border-color
+    var(
+      --osdk-combobox-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
+    var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &:focus {
+    border-color: var(
+      --osdk-combobox-focus-border-color,
+      var(--osdk-intent-primary-rest)
+    );
+    outline: var(--osdk-combobox-focus-width, var(--osdk-emphasis-focus-width))
+      solid var(--osdk-combobox-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var(
+      --osdk-combobox-focus-offset,
+      var(--osdk-emphasis-focus-offset)
+    );
+  }
+
+  .osdkComboboxInputWrapper & {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+
+    &:focus {
+      border-color: unset;
+      outline: none;
+      outline-offset: unset;
+    }
+  }
+  font-family: var(
+    --osdk-combobox-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-combobox-font-size,
+    var(--osdk-typography-size-body-medium)
+  );
+  line-height: var(
+    --osdk-combobox-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  color: var(
+    --osdk-combobox-input-color,
+    var(--osdk-typography-color-default-rest)
+  );
+  outline: none;
+
+  &::placeholder {
+    color: var(
+      --osdk-combobox-placeholder-color,
+      var(--osdk-typography-color-muted)
+    );
+  }
+}
+
+.osdkComboboxPositioner {
+  z-index: var(--osdk-combobox-z-index, var(--osdk-surface-z-index-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(--osdk-surface-spacing)) * 1.5
+  );
+  box-sizing: border-box;
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width))
+    solid
+    var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
+  background-color: var(
+    --osdk-combobox-popup-bg,
+    var(--osdk-surface-background-color-default-rest)
+  );
+  box-shadow: var(--osdk-combobox-popup-shadow, var(--osdk-surface-shadow-2));
+}
+
+.osdkComboboxItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5)
+    calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  cursor: pointer;
+  font-family: var(
+    --osdk-combobox-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-combobox-font-size,
+    var(--osdk-typography-size-body-medium)
+  );
+  line-height: var(
+    --osdk-combobox-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  color: var(
+    --osdk-combobox-item-color,
+    var(--osdk-typography-color-default-rest)
+  );
+  transition: background-color
+    var(
+      --osdk-combobox-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
+    var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &[data-highlighted] {
+    background-color: var(
+      --osdk-combobox-item-bg-highlighted,
+      var(--osdk-surface-background-color-default-hover)
+    );
+    outline: none;
+  }
+
+  &[data-selected] {
+    background-color: var(
+      --osdk-combobox-item-bg-selected,
+      var(--osdk-surface-layer-primary)
+    );
+    color: var(
+      --osdk-combobox-item-color-selected,
+      var(--osdk-intent-primary-rest)
+    );
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+}
+
+.osdkComboboxChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
+  margin-bottom: calc(
+    var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2
+  );
+}
+
+.osdkComboboxChip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
+  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 0.5)
+    calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  background-color: var(
+    --osdk-combobox-chip-bg,
+    var(--osdk-surface-background-color-default-hover)
+  );
+  font-family: var(
+    --osdk-combobox-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-combobox-chip-font-size,
+    var(--osdk-typography-size-body-small)
+  );
+  line-height: var(
+    --osdk-combobox-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  color: var(
+    --osdk-combobox-chip-color,
+    var(--osdk-typography-color-default-rest)
+  );
+}
+
+.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(--osdk-iconography-color-muted)
+  );
+  transition: color
+    var(
+      --osdk-combobox-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
+    var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &:hover {
+    color: var(
+      --osdk-combobox-chip-remove-color-hover,
+      var(--osdk-typography-color-default-rest)
+    );
+  }
+}
+
+.osdkComboboxClear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(
+    var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 0.5
+  );
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--osdk-combobox-clear-color, var(--osdk-iconography-color-muted));
+  border-radius: var(
+    --osdk-combobox-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  transition:
+    color
+      var(
+        --osdk-combobox-transition-duration,
+        var(--osdk-emphasis-transition-duration)
+      )
+      var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default)),
+    background-color
+      var(
+        --osdk-combobox-transition-duration,
+        var(--osdk-emphasis-transition-duration)
+      )
+      var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+
+  &:hover {
+    color: var(
+      --osdk-combobox-clear-color-hover,
+      var(--osdk-typography-color-default-rest)
+    );
+    background-color: var(
+      --osdk-combobox-clear-bg-hover,
+      var(--osdk-surface-background-color-default-hover)
+    );
+  }
+}
+
+.osdkComboboxList {
+  display: flex;
+  flex-direction: column;
+}
+
+.osdkComboboxEmpty {
+  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 3)
+    calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
+  text-align: center;
+  color: var(--osdk-combobox-empty-color, var(--osdk-typography-color-muted));
+  font-family: var(
+    --osdk-combobox-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-combobox-font-size,
+    var(--osdk-typography-size-body-medium)
+  );
+
+  &:empty {
+    display: none;
+  }
+}

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

@@ -0,0 +1,17 @@
+// 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",
+  "osdkComboboxList": "Combobox-module__osdkComboboxList___q5-nhrtp",
+  "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,93 @@
+/*
+ * 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;
+}
+
+.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-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,157 @@
+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,
+    color: "currentColor"
+  })), /*#__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,
+    color: "currentColor"
+  })));
+}
+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