@osdk/react-components 0.12.0 → 0.13.0

package/build/cjs/public/experimental/object-table.css

@@ -206,13 +206,64 @@
   outline: none;
 }
 .osdkDatetimeTimeFooter {
-  padding-top: var(--osdk-time-picker-padding-top);
-  padding-left: var(--osdk-datetime-popover-padding);
-  padding-right: var(--osdk-datetime-popover-padding);
-  margin-top: var(--osdk-time-picker-margin-top);
-  margin-left: calc(var(--osdk-datetime-popover-padding) * -1);
-  margin-right: calc(var(--osdk-datetime-popover-padding) * -1);
-  border-top: var(--osdk-time-picker-border-top);
+  display: flex;
+  justify-content: center;
+}
+
+/* src/base-components/action-button/ActionButton.module.css */
+.button {
+  min-height: var(--osdk-button-min-height);
+  padding: calc(var(--osdk-surface-spacing) * 1.5) calc(var(--osdk-surface-spacing) * 1.75);
+  border: var(--osdk-button-border);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-button-shadow);
+  font-size: var(--osdk-typography-size-body-medium);
+  cursor: pointer;
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+.secondaryButton {
+  background-color: var(--osdk-button-secondary-bg);
+  border-color: var(--osdk-button-secondary-border-color);
+  color: var(--osdk-button-secondary-color);
+  &:hover:not(:disabled) {
+    background-color: var(--osdk-button-secondary-bg-hover);
+  }
+  &:active:not(:disabled) {
+    background-color: var(--osdk-button-secondary-bg-active);
+  }
+}
+.primaryButton {
+  background-color: var(--osdk-button-primary-bg);
+  border-color: var(--osdk-button-primary-border-color);
+  color: var(--osdk-button-primary-color);
+  &:hover:not(:disabled) {
+    background-color: var(--osdk-button-primary-bg-hover);
+  }
+  &:active:not(:disabled) {
+    background-color: var(--osdk-button-primary-bg-active);
+  }
+}
+.minimalButton {
+  background-color: var(--osdk-button-minimal-bg);
+  border: var(--osdk-button-minimal-border);
+  box-shadow: var(--osdk-button-minimal-shadow);
+  color: var(--osdk-button-secondary-minimal-color);
+  &:hover:not(:disabled) {
+    background-color: var(--osdk-button-minimal-bg-hover);
+  }
+  &:active:not(:disabled) {
+    background-color: var(--osdk-button-minimal-bg-active);
+  }
+}
+.primaryButton.minimalButton {
+  color: var(--osdk-button-primary-minimal-color);
 }
 
 /* src/action-form/fields/DateCalendar.module.css */
@@ -238,6 +289,7 @@
   width: var(--osdk-datetime-calendar-cell-size);
 }
 .calendarDay {
+  position: relative;
   padding: var(--osdk-datetime-calendar-gap);
   text-align: center;
 }
@@ -302,19 +354,48 @@
     color: var(--osdk-datetime-calendar-selected-color);
   }
 }
-.calendarDayButton.calendarRangeMiddle {
+.calendarDay:has(.calendarRangeStart)::before,
+.calendarDay:has(.calendarRangeMiddle)::before,
+.calendarDay:has(.calendarRangeEnd)::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--osdk-datetime-calendar-gap);
   background: var(--osdk-datetime-calendar-range-middle-bg);
+  pointer-events: none;
+}
+.calendarDay:has(.calendarRangeStart)::before {
+  inset-inline-start: 50%;
+  inset-inline-end: 0;
+}
+.calendarDay:has(.calendarRangeMiddle)::before {
+  inset-inline: 0;
+}
+.calendarDay:has(.calendarRangeEnd)::before {
+  inset-inline-start: 0;
+  inset-inline-end: 50%;
+}
+.calendarDay:has(.calendarRangeStart.calendarRangeEnd)::before {
+  content: none;
+}
+.calendarDayButton.calendarRangeMiddle {
+  background: transparent;
   color: var(--osdk-datetime-calendar-day-color);
   border-radius: 0;
   &:hover {
-    background: var(--osdk-datetime-calendar-range-middle-bg);
+    background: transparent;
     color: var(--osdk-datetime-calendar-day-hover-color);
-    filter: brightness(0.95);
   }
   &:active {
     color: var(--osdk-datetime-calendar-day-hover-color);
   }
 }
+.calendarRangeFooter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--osdk-datetime-calendar-months-gap);
+  justify-items: center;
+  padding-block-start: var(--osdk-time-picker-padding-top);
+}
 .calendarHidden {
   visibility: hidden;
 }
@@ -376,6 +457,7 @@
   gap: var(--osdk-datetime-calendar-caption-gap);
 }
 .calendarDropdown {
+  field-sizing: content;
   font-family: var(--osdk-datetime-calendar-font-family);
   font-size: var(--osdk-datetime-calendar-caption-font-size);
   font-weight: var(--osdk-datetime-calendar-caption-font-weight);
@@ -390,10 +472,20 @@
     outline-offset: 1px;
   }
 }
-.calendarFooter {
-  padding-top: var(--osdk-time-picker-padding-top);
-  margin-top: var(--osdk-time-picker-margin-top);
-  border-top: var(--osdk-time-picker-border-top);
+.calendarTimeFooter {
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--osdk-time-picker-padding-top);
+}
+.calendarActionBar {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--osdk-surface-spacing);
+  padding-block-start: var(--osdk-time-picker-padding-top);
+  padding-inline: var(--osdk-datetime-popover-padding);
+  margin-block-start: var(--osdk-time-picker-margin-top);
+  margin-inline: calc(var(--osdk-datetime-popover-padding) * -1);
+  border-block-start: var(--osdk-time-picker-border-top);
 }
 
 /* src/action-form/fields/PortalDismissLayer.module.css */
@@ -408,10 +500,17 @@
 }
 
 /* src/action-form/fields/TimePicker.module.css */
+.osdkTimePickerRoot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
 .osdkTimePickerInput {
-  width: 100%;
+  width: calc(var(--osdk-surface-spacing) * 10);
   font-family: var(--osdk-time-picker-input-font-family);
   font-size: var(--osdk-time-picker-input-font-size);
+  line-height: var( --osdk-input-line-height, var(--osdk-typography-line-height-default) );
+  text-align: center;
   padding: var(--osdk-time-picker-input-padding);
   border: var(--osdk-time-picker-input-border);
   border-radius: var(--osdk-time-picker-input-border-radius);
@@ -423,6 +522,15 @@
     outline: var(--osdk-time-picker-input-focus-outline);
     outline-offset: var(--osdk-time-picker-input-focus-offset);
   }
+  &[aria-invalid] {
+    border-color: var(--osdk-input-border-color-error);
+  }
+}
+.osdkTimePickerSeparator {
+  color: var(--osdk-typography-color-muted);
+  font-family: var(--osdk-time-picker-input-font-family);
+  font-size: var(--osdk-time-picker-input-font-size);
+  line-height: var( --osdk-input-line-height, var(--osdk-typography-line-height-default) );
 }
 
 /* src/object-table/EditableCell.module.css */
@@ -527,6 +635,9 @@
 .readonlyDisplayCell {
   padding: calc(var(--osdk-surface-spacing) * 0.5) 0;
 }
+.nonEditableCellInEditMode {
+  padding-left: calc(var(--osdk-surface-spacing) * 3);
+}
 .osdkEditableInput {
   width: 100%;
   overflow: hidden;
@@ -581,10 +692,16 @@
   &:active {
     background-color: var( --osdk-combobox-trigger-bg-active, var(--osdk-button-secondary-bg-active) );
   }
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
   &:focus-visible {
     outline: var( --osdk-combobox-trigger-focus-width, var(--osdk-emphasis-focus-width) ) solid var(--osdk-combobox-trigger-focus-color, var(--osdk-emphasis-focus-color));
     outline-offset: var( --osdk-combobox-trigger-focus-offset, var(--osdk-emphasis-focus-offset) );
   }
+  &[data-popup-open]:focus-visible {
+    outline: none;
+  }
   &[data-disabled] {
     cursor: not-allowed;
     opacity: var(--osdk-disabled-opacity, 0.5);
@@ -688,18 +805,22 @@
 }
 .osdkComboboxPositioner {
   z-index: var(--osdk-combobox-z-index, var(--osdk-surface-z-index-3));
+  outline: none;
 }
 .osdkComboboxPopup {
   display: flex;
   flex-direction: column;
   min-width: var(--anchor-width);
-  max-height: var(--available-height);
+  max-height: min(var(--osdk-combobox-popup-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));
+  &:focus {
+    outline: none;
+  }
 }
 .osdkComboboxPopup:has(> .osdkComboboxPopupSearchInput) {
   overflow: hidden;
@@ -757,7 +878,7 @@
   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) );
+  background-color: var( --osdk-combobox-chip-bg, var(--osdk-custom-color-gray-4) );
   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) );
@@ -799,6 +920,9 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  &:focus {
+    outline: none;
+  }
 }
 .osdkComboboxEmpty {
   padding: var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
@@ -841,7 +965,7 @@
   gap: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1);
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1) 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) );
+  background-color: var( --osdk-combobox-chip-bg, var(--osdk-custom-color-gray-4) );
   font-size: var( --osdk-combobox-chip-font-size, var(--osdk-typography-size-body-small) );
   line-height: 1;
   color: var( --osdk-combobox-chip-color, var(--osdk-typography-color-default-rest) );
@@ -895,10 +1019,16 @@
   &:active {
     background-color: var( --osdk-select-trigger-bg-active, var(--osdk-button-secondary-bg-active) );
   }
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
   &: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) );
   }
+  &[data-popup-open]:focus-visible {
+    outline: none;
+  }
   &[data-disabled] {
     cursor: not-allowed;
     opacity: var(--osdk-disabled-opacity, 0.5);
@@ -962,6 +1092,7 @@
 }
 .osdkSelectPositioner {
   z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
+  outline: none;
 }
 .osdkSelectPopup {
   display: flex;
@@ -974,6 +1105,9 @@
   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) );
   box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
+  &:focus {
+    outline: none;
+  }
 }
 .osdkSelectItem {
   display: flex;
@@ -1106,47 +1240,6 @@
   min-width: 100%;
 }
 
-/* src/base-components/action-button/ActionButton.module.css */
-.button {
-  min-height: var(--osdk-button-min-height);
-  padding: calc(var(--osdk-surface-spacing) * 1.5) calc(var(--osdk-surface-spacing) * 1.75);
-  border: var(--osdk-button-border);
-  border-radius: var(--osdk-surface-border-radius);
-  box-shadow: var(--osdk-button-shadow);
-  font-size: var(--osdk-typography-size-body-medium);
-  cursor: pointer;
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: var(--osdk-focus-visible-outline-offset);
-  }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-.secondaryButton {
-  background-color: var(--osdk-button-secondary-bg);
-  border-color: var(--osdk-button-secondary-border-color);
-  color: var(--osdk-button-secondary-color);
-  &:hover:not(:disabled) {
-    background-color: var(--osdk-button-secondary-bg-hover);
-  }
-  &:active:not(:disabled) {
-    background-color: var(--osdk-button-secondary-bg-active);
-  }
-}
-.primaryButton {
-  background-color: var(--osdk-button-primary-bg);
-  border-color: var(--osdk-button-primary-border-color);
-  color: var(--osdk-button-primary-color);
-  &:hover:not(:disabled) {
-    background-color: var(--osdk-button-primary-bg-hover);
-  }
-  &:active:not(:disabled) {
-    background-color: var(--osdk-button-primary-bg-active);
-  }
-}
-
 /* src/base-components/dialog/Dialog.module.css */
 .backdrop {
   position: fixed;