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

package/build/browser/styles.css

@@ -1,5 +1,178 @@
 /* @osdk/react-components - Combined styles */
 
+/* action-form/BaseForm.module.css */
+/*
+ * 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.
+ */
+
+.BaseForm-module__osdkForm___76UCas8f {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.BaseForm-module__osdkFormFields___3DthDz5L {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-form-field-gap);
+  padding: var(--osdk-form-content-padding);
+}
+
+.BaseForm-module__osdkFormFooter___ZRbu-oda {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  border-top: var(--osdk-surface-border-width) solid
+    var(--osdk-form-footer-border-color);
+  padding-block: var(--osdk-form-content-padding);
+  padding-inline: var(--osdk-form-content-padding);
+}
+
+
+/* action-form/FormField.module.css */
+/*
+ * 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.
+ */
+
+.FormField-module__osdkFormField___K4BpO5Sn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-form-label-field-gap);
+}
+
+.FormField-module__osdkFormFieldLabel___S9J-yCFD {
+  font-size: var(--osdk-form-label-font-size);
+  font-weight: var(--osdk-form-label-font-weight);
+  color: var(--osdk-form-label-color);
+}
+
+.FormField-module__osdkFormFieldRequired___O0-L5TM8 {
+  color: var(--osdk-form-required-color);
+}
+
+.FormField-module__osdkFormFieldError___VYf8-K5I {
+  font-size: var(--osdk-form-error-font-size);
+  color: var(--osdk-form-error-color);
+}
+
+.FormField-module__osdkFormFieldHelperText___awLgHOsQ {
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+}
+
+
+/* action-form/FormHeader.module.css */
+/*
+ * 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.
+ */
+
+.FormHeader-module__osdkFormHeader___CkEkQTWh {
+  margin: 0;
+  padding-block: var(--osdk-form-header-block-padding);
+  padding-inline: var(--osdk-form-header-inline-padding);
+  border-bottom: var(--osdk-surface-border-width) solid
+    var(--osdk-form-header-border-color);
+  font-size: var(--osdk-form-header-font-size);
+  font-weight: var(--osdk-form-header-font-weight);
+  color: var(--osdk-form-header-color);
+}
+
+
+/* action-form/fields/TextInputField.module.css */
+/*
+ * 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.
+ */
+
+.TextInputField-module__osdkTextInput___Mm2e5yAE {
+  display: block;
+  width: 100%;
+  min-height: var(--osdk-input-min-height);
+  padding: var(--osdk-input-padding);
+  border-radius: var(--osdk-input-border-radius);
+  border: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  background-color: var(--osdk-input-bg);
+  color: var(--osdk-input-color);
+  font-family: var(--osdk-input-font-family);
+  font-size: var(--osdk-input-font-size);
+  line-height: var(
+    --osdk-input-line-height,
+    var(--osdk-typography-line-height-default)
+  );
+  transition:
+    background-color var(--osdk-input-transition-duration)
+      var(--osdk-input-transition-ease),
+    border-color var(--osdk-input-transition-duration)
+      var(--osdk-input-transition-ease);
+
+  &::placeholder {
+    color: var(--osdk-input-placeholder-color);
+  }
+
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-input-focus-width) solid var(--osdk-input-focus-color);
+    outline-offset: var(--osdk-input-focus-offset);
+    border-color: var(--osdk-input-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--osdk-input-disabled-opacity);
+  }
+}
+
+
 /* base-components/action-button/ActionButton.module.css */
 /*
  * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
@@ -97,7 +270,6 @@
     var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2
   );
   padding: var(--osdk-checkbox-padding);
-  box-sizing: border-box;
   cursor: pointer;
   border-radius: var(--osdk-surface-border-radius);
   border: var(--osdk-checkbox-border);
@@ -134,9 +306,6 @@
 }
 
 .Checkbox-module__osdkCheckboxIndicator___WOhQM8rb {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   color: var(--osdk-checkbox-checked-foreground);
   width: var(--osdk-checkbox-icon-size);
   height: var(--osdk-checkbox-icon-size);
@@ -173,7 +342,6 @@
   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)
@@ -215,7 +383,6 @@
   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(
@@ -300,7 +467,6 @@
   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)
@@ -726,8 +892,8 @@
 .SearchBar-module__searchBar___kiAvod6c {
   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);
 
@@ -788,7 +954,6 @@
   min-height: var(--osdk-select-min-height, 30px);
   padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5)
     calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
-  box-sizing: border-box;
   cursor: pointer;
   border-radius: var(
     --osdk-select-border-radius,
@@ -926,7 +1091,6 @@
   max-height: var(--available-height);
   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)
@@ -1070,7 +1234,6 @@
   width: var(--osdk-switch-track-width);
   height: var(--osdk-switch-track-height);
   padding: 0;
-  box-sizing: border-box;
   cursor: pointer;
   border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
   position: relative;
@@ -1295,6 +1458,103 @@
 }
 
 
+/* filter-list/base/ExcludeDropdown.module.css */
+/*
+ * 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.
+ */
+
+.ExcludeDropdown-module__excludeDropdownContainer___16Eyv1BU {
+  display: flex;
+  align-items: center;
+}
+
+.ExcludeDropdown-module__trigger___346CrPQn {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 0.5);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  padding: calc(var(--osdk-surface-spacing) * 0.5)
+    calc(var(--osdk-surface-spacing) * 1);
+  border-radius: var(--osdk-filter-item-header-action-border-radius);
+
+  &:hover {
+    background: var(--osdk-filter-item-header-action-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.ExcludeDropdown-module__triggerLabel___OBppf5WL {
+  white-space: nowrap;
+}
+
+.ExcludeDropdown-module__positioner___LVlsNlR4 {
+  z-index: var(--osdk-surface-z-index-3);
+}
+
+.ExcludeDropdown-module__popup___Svl-sCH5 {
+  background: var(--osdk-filter-item-menu-bg);
+  border: var(--osdk-filter-item-menu-border);
+  border-radius: var(--osdk-filter-item-menu-border-radius);
+  box-shadow: var(--osdk-filter-item-menu-shadow);
+  padding: var(--osdk-filter-item-menu-padding);
+  min-width: var(--osdk-filter-item-exclude-dropdown-min-width);
+}
+
+.ExcludeDropdown-module__menuItem___w59fRAgh {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  padding: var(--osdk-filter-item-menu-item-padding);
+  font-family: var(--osdk-filter-item-menu-item-font-family);
+  font-size: var(--osdk-filter-item-menu-item-font-size);
+  color: var(--osdk-filter-item-menu-item-color);
+  border-radius: var(--osdk-filter-item-menu-item-border-radius);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+
+  &:hover,
+  &[data-highlighted] {
+    background: var(--osdk-filter-item-menu-item-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.ExcludeDropdown-module__menuItemCheck___kQ1o9GJk {
+  display: flex;
+  align-items: center;
+  width: var(--osdk-filter-item-menu-check-size);
+  flex-shrink: 0;
+}
+
+
 /* filter-list/base/FilterList.module.css */
 /*
  * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
@@ -1613,6 +1873,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-item-gap);
+  border-radius: var(--osdk-filter-item-border-radius);
+  padding: var(--osdk-filter-item-padding);
 }
 
 .FilterListItem-module__itemHeader___jp4epXg- {
@@ -1631,6 +1893,8 @@
 .FilterListItem-module__itemContent___PfVHHhIy {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .FilterListItem-module__dragHandle___BwFrILWs {
@@ -1661,59 +1925,131 @@
   }
 }
 
-.FilterListItem-module__excludeToggle___nWNDvntP {
+.FilterListItem-module__headerActionButton___x10Z2Kx0 {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--osdk-filter-item-exclude-toggle-padding);
-  margin-left: auto;
+  padding: var(--osdk-filter-item-header-action-padding);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
-  color: var(--osdk-filter-item-exclude-toggle-color);
+  border-radius: var(--osdk-filter-item-header-action-border-radius);
+  color: var(--osdk-filter-item-header-action-color);
+  opacity: 0;
+  transition: opacity var(--osdk-filter-header-button-transition),
+    background-color var(--osdk-filter-header-button-transition);
 
   &:hover {
-    color: var(--osdk-filter-item-exclude-toggle-color-hover);
-    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+    color: var(--osdk-typography-color-default-rest);
+    background: var(--osdk-filter-item-header-action-bg-hover);
   }
 
   &:focus-visible {
+    opacity: 1;
     outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
     outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.FilterListItem-module__filterItem___fDBkbb7u:hover .FilterListItem-module__headerActionButton___x10Z2Kx0 {
+  opacity: 1;
 }
 
-.FilterListItem-module__excludeToggle___nWNDvntP[aria-pressed="true"] {
-  color: var(--osdk-filter-item-exclude-toggle-color-active);
+.FilterListItem-module__headerActionButton___x10Z2Kx0[data-popup-open],
+.FilterListItem-module__headerActionButton___x10Z2Kx0[aria-pressed="true"] {
+  opacity: 1;
 }
 
-.FilterListItem-module__removeButton___72cjHbqK {
+.FilterListItem-module__searchRow___4fUrAgAm {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: var(--osdk-filter-item-exclude-toggle-padding);
-  margin-left: var(--osdk-surface-spacing);
+  background: var(--osdk-filter-input-bg);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  padding: var(--osdk-filter-input-padding);
+  gap: var(--osdk-filter-input-gap);
+
+  &:focus-within {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.FilterListItem-module__searchInput___v-qwznpk {
+  flex: 1;
   border: none;
   background: transparent;
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  color: var(--osdk-filter-input-color);
+  outline: none;
+
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
+  }
+}
+
+.FilterListItem-module__searchClearButton___HXHweIEa {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-input-clear-padding);
+  border: none;
+  background: var(--osdk-filter-input-clear-bg);
+  color: var(--osdk-filter-input-icon-color);
   cursor: pointer;
-  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
-  color: var(--osdk-filter-item-exclude-toggle-color);
+  border-radius: var(--osdk-filter-input-clear-border-radius);
+  transition: background-color var(--osdk-filter-input-transition);
 
   &:hover {
-    color: var(--osdk-filter-item-exclude-toggle-color-hover);
-    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+    background: var(--osdk-filter-input-clear-bg-hover);
+  }
+
+  &:active {
+    background: var(--osdk-filter-input-clear-bg-active);
   }
 
   &:focus-visible {
     outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
     outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
-.FilterListItem-module__filterItem___fDBkbb7u[data-excluding] {
-  border-left: var(--osdk-filter-item-exclude-border-width) solid var(--osdk-filter-item-exclude-border-color);
-  padding-left: var(--osdk-filter-item-gap);
+.FilterListItem-module__excludeRow___6hctgE28 {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity var(--osdk-filter-header-button-transition),
+    height var(--osdk-filter-header-button-transition);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.FilterListItem-module__filterItem___fDBkbb7u:hover [data-exclude-row],
+.FilterListItem-module__excludeRowVisible___whT6lGyR {
+  opacity: 1;
+  height: auto;
+  overflow: visible;
+}
+
+.FilterListItem-module__excludeCountLabel___7IQFUJIY {
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
 }
 
 .FilterListItem-module__dragging___S5-LGyfS {
@@ -3077,7 +3413,6 @@
   background-clip: padding-box;
   border-color: var(--osdk-table-skeleton-color-from);
   border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
-  border: 1px solid var(--osdk-table-skeleton-border-color);
   box-shadow: none;
   color: transparent;
   cursor: default;
@@ -3200,7 +3535,6 @@
 .MultiColumnSortDialog-module__addIcon___RN4RnncD {
   width: var(--osdk-iconography-size-small);
   height: var(--osdk-iconography-size-small);
-  color: currentColor;
 }
 
 .MultiColumnSortDialog-module__addColumnText___odD8TcY0 {
@@ -3409,7 +3743,7 @@
   }
 
   &:last-child {
-    border-right: var(--osdk-table-border);
+    border-right: none;
   }
 }
 
@@ -3565,6 +3899,7 @@
   display: flex;
   width: max-content;
   min-width: 100%;
+  border-top: var(--osdk-table-border);
   border-bottom: var(--osdk-table-border);
 }
 
@@ -3577,7 +3912,6 @@
   font-weight: var(--osdk-table-header-fontWeight);
   font-size: var(--osdk-table-header-fontSize);
   color: var(--osdk-table-header-color);
-  border-top: var(--osdk-table-border);
   border-right: var(--osdk-table-header-divider);
   background-color: inherit;
 
@@ -3586,7 +3920,7 @@
   }
 
   &:last-child {
-    border-right: var(--osdk-table-border);
+    border-right: none;
   }
 }
 
@@ -3756,6 +4090,7 @@
 .TableHeaderWithPopover-module__osdkHeaderIcon___lgyu9GmV {
   width: var(--osdk-iconography-size-small);
   height: var(--osdk-iconography-size-small);
+  color: var(--osdk-table-header-menu-icon-color);
 }
 
 .TableHeaderWithPopover-module__osdkHeaderPopup___TMO39wLW {
@@ -3984,7 +4319,6 @@
   position: absolute;
   pointer-events: auto;
   cursor: pointer;
-  box-sizing: border-box;
   transition: opacity var(--osdk-emphasis-transition-duration)
     var(--osdk-emphasis-ease-default);
 }