@osdk/react-components 0.2.0-beta.9 → 0.2.1-main-20260407074313

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

@@ -0,0 +1,364 @@
+/*
+ * 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);
+  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%;
+  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: none;
+  }
+
+  .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
+  );
+  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;
+  gap: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
+  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);
+  }
+}
+
+.osdkComboboxItemIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 4);
+  flex-shrink: 0;
+  color: var(--osdk-combobox-item-color-selected, var(--osdk-intent-primary-rest));
+  visibility: hidden;
+
+  &[data-selected] {
+    visibility: visible;
+  }
+}
+
+.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/esm/base-components/dialog/Dialog.js

@@ -25,11 +25,13 @@ export function Dialog({
   title,
   children,
   footer,
-  className
+  className,
+  disablePointerDismissal
 }) {
   return /*#__PURE__*/React.createElement(BaseUIDialog.Root, {
     open: isOpen,
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    disablePointerDismissal: disablePointerDismissal
   }, /*#__PURE__*/React.createElement(BaseUIDialog.Portal, null, /*#__PURE__*/React.createElement(BaseUIDialog.Backdrop, {
     className: styles.backdrop
   }), /*#__PURE__*/React.createElement(BaseUIDialog.Popup, {

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

@@ -1 +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":[]}
+{"version":3,"file":"Dialog.js","names":["Dialog","BaseUIDialog","Cross","classnames","React","styles","isOpen","onOpenChange","title","children","footer","className","disablePointerDismissal","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: (open: boolean) => void;\n  title: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  disablePointerDismissal?: boolean;\n}\n\nexport function Dialog({\n  isOpen,\n  onOpenChange,\n  title,\n  children,\n  footer,\n  className,\n  disablePointerDismissal,\n}: DialogProps): React.ReactElement {\n  return (\n    <BaseUIDialog.Root\n      open={isOpen}\n      onOpenChange={onOpenChange}\n      disablePointerDismissal={disablePointerDismissal}\n    >\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;AAYxC,OAAO,SAASL,MAAMA,CAAC;EACrBM,MAAM;EACNC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC;AACW,CAAC,EAAsB;EAClC,oBACER,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACa,IAAI;IAChBC,IAAI,EAAET,MAAO;IACbC,YAAY,EAAEA,YAAa;IAC3BK,uBAAuB,EAAEA;EAAwB,gBAEjDR,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACe,MAAM,qBAClBZ,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACgB,QAAQ;IAACN,SAAS,EAAEN,MAAM,CAACa;EAAS,CAAE,CAAC,eACrDd,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACkB,KAAK;IACjBR,SAAS,EAAER,UAAU,CACnBE,MAAM,CAACe,KAAK,EACZT,SACF;EAAE,gBAEFP,KAAA,CAAAS,aAAA;IAAKF,SAAS,EAAEN,MAAM,CAACgB;EAAO,gBAC5BjB,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACqB,KAAK;IAACX,SAAS,EAAEN,MAAM,CAACG;EAAM,GACzCA,KACiB,CAAC,eACrBJ,KAAA,CAAAS,aAAA,CAACZ,YAAY,CAACsB,KAAK;IACjBZ,SAAS,EAAEN,MAAM,CAACmB,WAAY;IAC9B,cAAW;EAAc,gBAEzBpB,KAAA,CAAAS,aAAA,CAACX,KAAK;IAACS,SAAS,EAAEN,MAAM,CAACoB;EAAU,CAAE,CACnB,CACjB,CAAC,eACNrB,KAAA,CAAAS,aAAA;IAAKF,SAAS,EAAEN,MAAM,CAACqB;EAAK,GAAEjB,QAAc,CAAC,EAC5CC,MAAM,IAAI,IAAI,iBAAIN,KAAA,CAAAS,aAAA;IAAKF,SAAS,EAAEN,MAAM,CAACK;EAAO,GAAEA,MAAY,CAC7C,CACD,CACJ,CAAC;AAExB","ignoreList":[]}

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

@@ -36,10 +36,6 @@
   z-index: var(--osdk-surface-z-index-2);
   display: flex;
   flex-direction: column;
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .header {
@@ -84,10 +80,6 @@
     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);

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

@@ -40,7 +40,7 @@
 
 .dragHandle {
   display: flex;
-  cursor: grab;
+  cursor: var(--osdk-drag-handle-cursor);
   color: var(--osdk-draggable-item-drag-icon-color);
 
   &:hover {
@@ -48,11 +48,7 @@
   }
 
   &:active {
-    cursor: grabbing;
-  }
-
-  &:focus {
-    outline: none;
+    cursor: var(--osdk-drag-handle-cursor-active);
   }
 
   &:focus-visible {
@@ -90,10 +86,6 @@
     );
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);

package/build/esm/base-components/search-bar/SearchBar.module.css

@@ -17,8 +17,8 @@
 .searchBar {
   display: flex;
   align-items: center;
-  gap: var(--osdk-surface-spacing);
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 1.5);
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
   border: var(--osdk-surface-border);
   border-radius: var(--osdk-surface-border-radius);
 

package/build/esm/base-components/searchable-menu/SearchableMenu.js

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2026 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 { Menu } from "@base-ui/react/menu";
+import classnames from "classnames";
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { SearchBar } from "../search-bar/SearchBar.js";
+import styles from "./SearchableMenu.module.css";
+function SearchableMenuInner({
+  items,
+  onItemSelected,
+  trigger,
+  triggerClassName,
+  disabled,
+  searchPlaceholder = "Search",
+  emptyMessage = "No matching items",
+  className
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const filteredItems = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    if (!query) return items;
+    return items.filter(item => item.label.toLowerCase().includes(query));
+  }, [items, searchQuery]);
+  const handleSearchChange = useCallback(event => {
+    setSearchQuery(event.target.value);
+  }, []);
+  const handleMenuOpenChange = useCallback(open => {
+    if (open) {
+      setSearchQuery("");
+    }
+  }, []);
+  const handleKeyDown = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return /*#__PURE__*/React.createElement(Menu.Root, {
+    onOpenChange: handleMenuOpenChange
+  }, /*#__PURE__*/React.createElement(Menu.Trigger, {
+    className: triggerClassName,
+    disabled: disabled
+  }, trigger), /*#__PURE__*/React.createElement(Menu.Portal, null, /*#__PURE__*/React.createElement(Menu.Positioner, {
+    className: classnames(styles.positioner, className),
+    sideOffset: 4
+  }, /*#__PURE__*/React.createElement(Menu.Popup, {
+    className: styles.popup
+  }, /*#__PURE__*/React.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: handleSearchChange,
+    placeholder: searchPlaceholder,
+    "aria-label": searchPlaceholder,
+    className: styles.searchContainer,
+    onKeyDown: handleKeyDown
+  }), filteredItems.map(item => /*#__PURE__*/React.createElement(SearchableMenuItemRow, {
+    key: item.key,
+    item: item,
+    onItemSelected: onItemSelected
+  })), filteredItems.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, emptyMessage)))));
+}
+export const SearchableMenu = /*#__PURE__*/memo(SearchableMenuInner);
+function SearchableMenuItemRowInner({
+  item,
+  onItemSelected
+}) {
+  const handleClick = useCallback(() => onItemSelected(item.key), [onItemSelected, item.key]);
+  return /*#__PURE__*/React.createElement(Menu.Item, {
+    className: styles.menuItem,
+    onClick: handleClick
+  }, item.label);
+}
+const SearchableMenuItemRow = /*#__PURE__*/memo(SearchableMenuItemRowInner);
+//# sourceMappingURL=SearchableMenu.js.map

package/build/esm/base-components/searchable-menu/SearchableMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableMenu.js","names":["Menu","classnames","React","memo","useCallback","useMemo","useState","SearchBar","styles","SearchableMenuInner","items","onItemSelected","trigger","triggerClassName","disabled","searchPlaceholder","emptyMessage","className","searchQuery","setSearchQuery","filteredItems","query","toLowerCase","trim","filter","item","label","includes","handleSearchChange","event","target","value","handleMenuOpenChange","open","handleKeyDown","stopPropagation","createElement","Root","onOpenChange","Trigger","Portal","Positioner","positioner","sideOffset","Popup","popup","onChange","placeholder","searchContainer","onKeyDown","map","SearchableMenuItemRow","key","length","emptyState","SearchableMenu","SearchableMenuItemRowInner","handleClick","Item","menuItem","onClick"],"sources":["SearchableMenu.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { Menu } from \"@base-ui/react/menu\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport { SearchBar } from \"../search-bar/SearchBar.js\";\nimport styles from \"./SearchableMenu.module.css\";\n\nexport interface SearchableMenuItem {\n  key: string;\n  label: string;\n}\n\ninterface SearchableMenuProps {\n  items: SearchableMenuItem[];\n  onItemSelected: (key: string) => void;\n  trigger: React.ReactNode;\n  triggerClassName?: string;\n  disabled?: boolean;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n  className?: string;\n}\n\nfunction SearchableMenuInner({\n  items,\n  onItemSelected,\n  trigger,\n  triggerClassName,\n  disabled,\n  searchPlaceholder = \"Search\",\n  emptyMessage = \"No matching items\",\n  className,\n}: SearchableMenuProps): React.ReactElement {\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const filteredItems = useMemo(() => {\n    const query = searchQuery.toLowerCase().trim();\n    if (!query) return items;\n    return items.filter((item) => item.label.toLowerCase().includes(query));\n  }, [items, searchQuery]);\n\n  const handleSearchChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setSearchQuery(event.target.value);\n    },\n    [],\n  );\n\n  const handleMenuOpenChange = useCallback((open: boolean) => {\n    if (open) {\n      setSearchQuery(\"\");\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      event.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu.Root onOpenChange={handleMenuOpenChange}>\n      <Menu.Trigger\n        className={triggerClassName}\n        disabled={disabled}\n      >\n        {trigger}\n      </Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner\n          className={classnames(styles.positioner, className)}\n          sideOffset={4}\n        >\n          <Menu.Popup className={styles.popup}>\n            <SearchBar\n              value={searchQuery}\n              onChange={handleSearchChange}\n              placeholder={searchPlaceholder}\n              aria-label={searchPlaceholder}\n              className={styles.searchContainer}\n              onKeyDown={handleKeyDown}\n            />\n            {filteredItems.map((item) => (\n              <SearchableMenuItemRow\n                key={item.key}\n                item={item}\n                onItemSelected={onItemSelected}\n              />\n            ))}\n            {filteredItems.length === 0 && (\n              <div className={styles.emptyState}>\n                {emptyMessage}\n              </div>\n            )}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n}\n\nexport const SearchableMenu: React.MemoExoticComponent<\n  typeof SearchableMenuInner\n> = memo(SearchableMenuInner);\n\nfunction SearchableMenuItemRowInner(\n  { item, onItemSelected }: {\n    item: SearchableMenuItem;\n    onItemSelected: (key: string) => void;\n  },\n): React.ReactElement {\n  const handleClick = useCallback(\n    () => onItemSelected(item.key),\n    [onItemSelected, item.key],\n  );\n\n  return (\n    <Menu.Item\n      className={styles.menuItem}\n      onClick={handleClick}\n    >\n      {item.label}\n    </Menu.Item>\n  );\n}\n\nconst SearchableMenuItemRow = memo(SearchableMenuItemRowInner);\n"],"mappings":"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","ignoreList":[]}

package/build/esm/base-components/searchable-menu/SearchableMenu.module.css

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 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.
+ */
+
+.positioner {
+  z-index: var(--osdk-surface-z-index-3);
+}
+
+.popup {
+  background-color: var(--osdk-surface-background-color-default-rest);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-surface-shadow-2);
+  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
+  overflow-y: auto;
+  width: var(--anchor-width);
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.searchContainer {
+  border: none;
+  border-bottom: var(--osdk-surface-border);
+  border-radius: 0;
+  position: sticky;
+  top: 0;
+  background-color: var(--osdk-surface-background-color-default-rest);
+}
+
+.menuItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: calc(var(--osdk-surface-spacing) * 2)
+    calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--osdk-typography-size-body-medium);
+  color: var(--osdk-typography-color-default-rest);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 3);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-medium);
+}