@osdk/react-components 0.2.0-beta.19 → 0.2.0-beta.20

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

@@ -16,6 +16,7 @@
 
 .osdkComboboxInputWrapper {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
   width: 100%;
@@ -23,18 +24,35 @@
   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
+  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))
+  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));
+    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)
+    );
   }
 }
 
@@ -46,16 +64,76 @@
 .osdkComboboxInput {
   flex: 1;
   min-width: 0;
-  border: none;
-  background: transparent;
-  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));
+  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));
+    color: var(
+      --osdk-combobox-placeholder-color,
+      var(--osdk-typography-color-muted)
+    );
   }
 }
 
@@ -69,12 +147,21 @@
   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);
+  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
+  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));
+  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));
 }
 
@@ -83,23 +170,51 @@
   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));
+  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))
+  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));
+    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));
+    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] {
@@ -112,7 +227,9 @@
   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);
+  margin-bottom: calc(
+    var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2
+  );
 }
 
 .osdkComboboxChip {
@@ -121,12 +238,30 @@
   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));
+  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 {
@@ -137,12 +272,22 @@
   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))
+  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));
+    color: var(
+      --osdk-combobox-chip-remove-color-hover,
+      var(--osdk-typography-color-default-rest)
+    );
   }
 }
 
@@ -150,28 +295,63 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 0.5);
+  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))
+  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))
+    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));
+    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));
+  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

@@ -10,6 +10,7 @@ const styles = {
   "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"
 };
 

package/build/browser/base-components/select/Select.js

@@ -34,7 +34,13 @@ function SelectTrigger({
 }) {
   return /*#__PURE__*/React.createElement(BaseUISelect.Trigger, _extends({
     className: classnames(styles.osdkSelectTrigger, className)
-  }, rest), children ?? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseUISelect.Value, null, value => value != null ? String(value) : placeholder), /*#__PURE__*/React.createElement(BaseUISelect.Icon, {
+  }, rest), children ?? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.osdkSelectValueContainer
+  }, /*#__PURE__*/React.createElement(BaseUISelect.Value, {
+    className: styles.osdkSelectValue
+  }), placeholder != null && /*#__PURE__*/React.createElement("span", {
+    className: styles.osdkSelectPlaceholder
+  }, placeholder)), /*#__PURE__*/React.createElement(BaseUISelect.Icon, {
     className: styles.osdkSelectIcon
   }, /*#__PURE__*/React.createElement(CaretDown, {
     color: "currentColor"

package/build/browser/base-components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select","BaseUISelect","CaretDown","classnames","React","styles","SelectRoot","children","rest","createElement","Root","SelectTrigger","className","placeholder","Trigger","_extends","osdkSelectTrigger","Fragment","Value","value","String","Icon","osdkSelectIcon","color","SelectValue","props","osdkSelectValue","SelectPositioner","Positioner","osdkSelectPositioner","sideOffset","SelectPopup","Popup","osdkSelectPopup","SelectItem","Item","osdkSelectItem","ItemText","Portal"],"sources":["Select.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 {\n  Select as BaseUISelect,\n  type SelectItemProps,\n  type SelectPopupProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { CaretDown } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectProps<Value extends string | number>\n  extends Omit<SelectRootProps<Value, false>, \"className\" | \"multiple\">\n{}\n\nfunction SelectRoot<Value extends string | number>({\n  children,\n  ...rest\n}: SelectProps<Value>): React.ReactElement {\n  return (\n    <BaseUISelect.Root<Value> {...rest}>\n      {children}\n    </BaseUISelect.Root>\n  );\n}\n\ninterface SelectTriggerComponentProps\n  extends Omit<SelectTriggerProps, \"className\">\n{\n  className?: string;\n  placeholder?: string;\n}\n\nfunction SelectTrigger({\n  className,\n  placeholder,\n  children,\n  ...rest\n}: SelectTriggerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Trigger\n      className={classnames(styles.osdkSelectTrigger, className)}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          <BaseUISelect.Value>\n            {(value) => (value != null ? String(value) : placeholder)}\n          </BaseUISelect.Value>\n          <BaseUISelect.Icon className={styles.osdkSelectIcon}>\n            <CaretDown color=\"currentColor\" />\n          </BaseUISelect.Icon>\n        </>\n      )}\n    </BaseUISelect.Trigger>\n  );\n}\n\nfunction SelectValue(\n  props: Omit<SelectValueProps, \"className\"> & { className?: string },\n): React.ReactElement {\n  const { className, ...rest } = props;\n  return (\n    <BaseUISelect.Value\n      className={classnames(styles.osdkSelectValue, className)}\n      {...rest}\n    />\n  );\n}\n\ninterface SelectPositionerComponentProps\n  extends Omit<SelectPositionerProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPositioner({\n  className,\n  children,\n  ...rest\n}: SelectPositionerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Positioner\n      className={classnames(styles.osdkSelectPositioner, className)}\n      sideOffset={4}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Positioner>\n  );\n}\n\ninterface SelectPopupComponentProps\n  extends Omit<SelectPopupProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  ...rest\n}: SelectPopupComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Popup\n      className={classnames(styles.osdkSelectPopup, className)}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Popup>\n  );\n}\n\ninterface SelectItemComponentProps extends Omit<SelectItemProps, \"className\"> {\n  className?: string;\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...rest\n}: SelectItemComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Item\n      className={classnames(styles.osdkSelectItem, className)}\n      {...rest}\n    >\n      <BaseUISelect.ItemText>{children}</BaseUISelect.ItemText>\n    </BaseUISelect.Item>\n  );\n}\n\nexport const Select: {\n  Root: typeof SelectRoot;\n  Trigger: typeof SelectTrigger;\n  Value: typeof SelectValue;\n  Portal: typeof BaseUISelect.Portal;\n  Positioner: typeof SelectPositioner;\n  Popup: typeof SelectPopup;\n  Item: typeof SelectItem;\n} = {\n  Root: SelectRoot,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Portal: BaseUISelect.Portal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  Item: SelectItem,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["Select","BaseUISelect","CaretDown","classnames","React","styles","SelectRoot","children","rest","createElement","Root","SelectTrigger","className","placeholder","Trigger","_extends","osdkSelectTrigger","Fragment","osdkSelectValueContainer","Value","osdkSelectValue","osdkSelectPlaceholder","Icon","osdkSelectIcon","color","SelectValue","props","SelectPositioner","Positioner","osdkSelectPositioner","sideOffset","SelectPopup","Popup","osdkSelectPopup","SelectItem","Item","osdkSelectItem","ItemText","Portal"],"sources":["Select.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 {\n  Select as BaseUISelect,\n  type SelectItemProps,\n  type SelectPopupProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n} from \"@base-ui/react/select\";\nimport { CaretDown } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectProps<Value, Multiple extends boolean = false>\n  extends Omit<SelectRootProps<Value, Multiple>, \"className\">\n{}\n\nfunction SelectRoot<Value, Multiple extends boolean = false>({\n  children,\n  ...rest\n}: SelectProps<Value, Multiple>): React.ReactElement {\n  return (\n    <BaseUISelect.Root<Value, Multiple> {...rest}>{children}</BaseUISelect.Root>\n  );\n}\n\ninterface SelectTriggerComponentProps\n  extends Omit<SelectTriggerProps, \"className\">\n{\n  className?: string;\n  placeholder?: string;\n}\n\nfunction SelectTrigger({\n  className,\n  placeholder,\n  children,\n  ...rest\n}: SelectTriggerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Trigger\n      className={classnames(styles.osdkSelectTrigger, className)}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          <div className={styles.osdkSelectValueContainer}>\n            <BaseUISelect.Value className={styles.osdkSelectValue} />\n            {placeholder != null && (\n              <span className={styles.osdkSelectPlaceholder}>\n                {placeholder}\n              </span>\n            )}\n          </div>\n          <BaseUISelect.Icon className={styles.osdkSelectIcon}>\n            <CaretDown color=\"currentColor\" />\n          </BaseUISelect.Icon>\n        </>\n      )}\n    </BaseUISelect.Trigger>\n  );\n}\n\nfunction SelectValue(\n  props: Omit<SelectValueProps, \"className\"> & { className?: string },\n): React.ReactElement {\n  const { className, ...rest } = props;\n  return (\n    <BaseUISelect.Value\n      className={classnames(styles.osdkSelectValue, className)}\n      {...rest}\n    />\n  );\n}\n\ninterface SelectPositionerComponentProps\n  extends Omit<SelectPositionerProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPositioner({\n  className,\n  children,\n  ...rest\n}: SelectPositionerComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Positioner\n      className={classnames(styles.osdkSelectPositioner, className)}\n      sideOffset={4}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Positioner>\n  );\n}\n\ninterface SelectPopupComponentProps\n  extends Omit<SelectPopupProps, \"className\">\n{\n  className?: string;\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  ...rest\n}: SelectPopupComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Popup\n      className={classnames(styles.osdkSelectPopup, className)}\n      {...rest}\n    >\n      {children}\n    </BaseUISelect.Popup>\n  );\n}\n\ninterface SelectItemComponentProps extends Omit<SelectItemProps, \"className\"> {\n  className?: string;\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...rest\n}: SelectItemComponentProps): React.ReactElement {\n  return (\n    <BaseUISelect.Item\n      className={classnames(styles.osdkSelectItem, className)}\n      {...rest}\n    >\n      <BaseUISelect.ItemText>{children}</BaseUISelect.ItemText>\n    </BaseUISelect.Item>\n  );\n}\n\nexport const Select: {\n  Root: typeof SelectRoot;\n  Trigger: typeof SelectTrigger;\n  Value: typeof SelectValue;\n  Portal: typeof BaseUISelect.Portal;\n  Positioner: typeof SelectPositioner;\n  Popup: typeof SelectPopup;\n  Item: typeof SelectItem;\n} = {\n  Root: SelectRoot,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Portal: BaseUISelect.Portal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  Item: SelectItem,\n};\n"],"mappings":"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","ignoreList":[]}

package/build/browser/base-components/select/Select.module.css

@@ -25,31 +25,68 @@
     calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
   box-sizing: border-box;
   cursor: pointer;
-  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid
+  border-radius: var(
+    --osdk-select-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width))
+    solid
     var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var(--osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest));
-  color: var(--osdk-select-trigger-color, var(--osdk-typography-color-default-rest));
-  font-family: var(--osdk-select-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-select-font-size, var(--osdk-typography-size-body-medium));
-  line-height: var(--osdk-select-line-height, var(--osdk-typography-line-height-default));
-  transition: background-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+  background-color: var(
+    --osdk-select-trigger-bg,
+    var(--osdk-surface-background-color-default-rest)
+  );
+  color: var(
+    --osdk-select-trigger-color,
+    var(--osdk-typography-color-default-rest)
+  );
+  font-family: var(
+    --osdk-select-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-select-font-size,
+    var(--osdk-typography-size-body-medium)
+  );
+  line-height: var(
+    --osdk-select-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  transition:
+    background-color
+      var(
+        --osdk-select-transition-duration,
+        var(--osdk-emphasis-transition-duration)
+      )
       var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)),
-    border-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+    border-color
+      var(
+        --osdk-select-transition-duration,
+        var(--osdk-emphasis-transition-duration)
+      )
       var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
 
   &:hover {
-    background-color: var(--osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover));
+    background-color: var(
+      --osdk-select-trigger-bg-hover,
+      var(--osdk-surface-background-color-default-hover)
+    );
   }
 
   &:active {
-    background-color: var(--osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active));
+    background-color: var(
+      --osdk-select-trigger-bg-active,
+      var(--osdk-surface-background-color-default-active)
+    );
   }
 
   &:focus-visible {
-    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid
-      var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var(--osdk-select-focus-offset, var(--osdk-emphasis-focus-offset));
+    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width))
+      solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var(
+      --osdk-select-focus-offset,
+      var(--osdk-emphasis-focus-offset)
+    );
   }
 
   &[data-disabled] {
@@ -58,20 +95,41 @@
   }
 
   &[data-popup-open] {
-    border-color: var(--osdk-select-border-color-active, var(--osdk-intent-primary-rest));
+    border-color: var(
+      --osdk-select-border-color-active,
+      var(--osdk-intent-primary-rest)
+    );
   }
 }
 
-.osdkSelectValue {
+.osdkSelectValueContainer {
   flex: 1;
+  display: grid;
+  min-width: 0;
+
+  & > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.osdkSelectValue {
   text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
 
-  &[data-placeholder] {
-    color: var(--osdk-select-placeholder-color, var(--osdk-typography-color-muted));
-  }
+.osdkSelectPlaceholder {
+  text-align: left;
+  color: var(
+    --osdk-select-placeholder-color,
+    var(--osdk-typography-color-muted)
+  );
+  pointer-events: none;
+}
+
+.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
+  display: none;
 }
 
 .osdkSelectIcon {
@@ -80,7 +138,11 @@
   justify-content: center;
   color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
   flex-shrink: 0;
-  transition: transform var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+  transition: transform
+    var(
+      --osdk-select-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
     var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
 
   [data-popup-open] > & {
@@ -100,10 +162,17 @@
   overflow-y: auto;
   padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
   box-sizing: border-box;
-  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid
+  border-radius: var(
+    --osdk-select-border-radius,
+    var(--osdk-surface-border-radius)
+  );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width))
+    solid
     var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var(--osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest));
+  background-color: var(
+    --osdk-select-popup-bg,
+    var(--osdk-surface-background-color-default-rest)
+  );
   box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
 }
 
@@ -112,23 +181,51 @@
   align-items: center;
   padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5)
     calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
-  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  border-radius: var(
+    --osdk-select-border-radius,
+    var(--osdk-surface-border-radius)
+  );
   cursor: pointer;
-  font-family: var(--osdk-select-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-select-font-size, var(--osdk-typography-size-body-medium));
-  line-height: var(--osdk-select-line-height, var(--osdk-typography-line-height-default));
-  color: var(--osdk-select-item-color, var(--osdk-typography-color-default-rest));
-  transition: background-color var(--osdk-select-transition-duration, var(--osdk-emphasis-transition-duration))
+  font-family: var(
+    --osdk-select-font-family,
+    var(--osdk-typography-family-default)
+  );
+  font-size: var(
+    --osdk-select-font-size,
+    var(--osdk-typography-size-body-medium)
+  );
+  line-height: var(
+    --osdk-select-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  color: var(
+    --osdk-select-item-color,
+    var(--osdk-typography-color-default-rest)
+  );
+  transition: background-color
+    var(
+      --osdk-select-transition-duration,
+      var(--osdk-emphasis-transition-duration)
+    )
     var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
 
   &[data-highlighted] {
-    background-color: var(--osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover));
+    background-color: var(
+      --osdk-select-item-bg-highlighted,
+      var(--osdk-surface-background-color-default-hover)
+    );
     outline: none;
   }
 
   &[data-selected] {
-    background-color: var(--osdk-select-item-bg-selected, var(--osdk-surface-layer-primary));
-    color: var(--osdk-select-item-color-selected, var(--osdk-intent-primary-rest));
+    background-color: var(
+      --osdk-select-item-bg-selected,
+      var(--osdk-surface-layer-primary)
+    );
+    color: var(
+      --osdk-select-item-color-selected,
+      var(--osdk-intent-primary-rest)
+    );
   }
 
   &[data-disabled] {

package/build/browser/base-components/select/Select.module.css.js

@@ -1,7 +1,9 @@
 // CSS Module proxy for Select.module.css
 const styles = {
   "osdkSelectTrigger": "Select-module__osdkSelectTrigger___Gvh4NMeE",
+  "osdkSelectValueContainer": "Select-module__osdkSelectValueContainer___kLgKidnQ",
   "osdkSelectValue": "Select-module__osdkSelectValue___RVgvlerI",
+  "osdkSelectPlaceholder": "Select-module__osdkSelectPlaceholder___uKSMvXUy",
   "osdkSelectIcon": "Select-module__osdkSelectIcon___wBYDb-yy",
   "osdkSelectPositioner": "Select-module__osdkSelectPositioner___isn6y3d0",
   "osdkSelectPopup": "Select-module__osdkSelectPopup___mKufWAKp",