@osdk/react-components 0.12.0 → 0.13.0

package/build/cjs/public/experimental/action-form.d.cts

@@ -4,70 +4,74 @@ import { ActionValidationError } from '@osdk/client';
 
 type PortalContainer = HTMLElement | ShadowRoot | null | React__default.RefObject<HTMLElement | ShadowRoot | null>;
 /**
- * A form field definition specifies configuration for a single field
- */
-interface FormFieldDefinition<Q extends ActionDefinition<unknown>, K extends FieldKey<Q> = FieldKey<Q>> {
-    /**
-     * The field's unique key
-     */
-    fieldKey: K;
-    /**
-     * Display label for the field
-     */
-    label: string;
-    /**
-     * Default value of the field
-     */
-    defaultValue?: FieldValueType<Q, K>;
-    /**
-     * The form field component type to render
-     */
-    fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;
-    /**
-     * Whether the field is required
-     */
-    isRequired?: boolean;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Additional information to display on this field.
-     * Accepts plain text or rich content (e.g. JSX with links or formatting).
-     * Rendered as a tooltip icon next to the label by default, or below the
-     * label when helperTextPlacement is "bottom".
-     */
-    helperText?: React__default.ReactNode;
-    /**
-     * The placement of the helper text either below the field or in a tooltip
-     *
-     * @default "tooltip"
-     */
-    helperTextPlacement?: "bottom" | "tooltip";
-    /**
-     * Whether the field is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * A callback to customize error messages when a built-in validation rule fails.
-     * Receives a discriminated union with the constraint data (e.g., the min value
-     * that was exceeded) so the message can reference the threshold.
-     *
-     * Return a string to override the default message, or `undefined` to keep it.
-     */
-    onValidationError?: (error: ValidationError) => string | undefined;
-    /**
-     * Additional function to validate the field.
-     *
-     * Return `undefined` if valid, or an error message string if invalid.
-     */
-    validate?: (value: FieldValueType<Q, K>) => Promise<string | undefined>;
-    /**
-     * The component props for the form field.
-     * Excludes runtime props (value, onChange) which are managed by ActionForm.
-     */
-    fieldComponentProps: Omit<FormFieldPropsByType[ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>], FormManagedProps<ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>>>;
-}
+ * A form field definition specifies configuration for a single field.
+ * Implemented as a distributed mapped type so `fieldComponent` narrows
+ * `fieldComponentProps` to the matching component prop type.
+ */
+type FormFieldDefinition<Q extends ActionDefinition<unknown>, K extends FieldKey<Q> = FieldKey<Q>> = K extends unknown ? {
+    [C in ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>]: {
+        /**
+         * The field's unique key
+         */
+        fieldKey: K;
+        /**
+         * Display label for the field
+         */
+        label: string;
+        /**
+         * Default value of the field
+         */
+        defaultValue?: FieldValueType<Q, K>;
+        /**
+         * Whether the field is required
+         */
+        isRequired?: boolean;
+        /**
+         * Placeholder text
+         */
+        placeholder?: string;
+        /**
+         * Additional information to display on this field.
+         * Accepts plain text or rich content (e.g. JSX with links or formatting).
+         * Rendered as a tooltip icon next to the label by default, or below the
+         * label when helperTextPlacement is "bottom".
+         */
+        helperText?: React__default.ReactNode;
+        /**
+         * The placement of the helper text either below the field or in a tooltip
+         *
+         * @default "tooltip"
+         */
+        helperTextPlacement?: "bottom" | "tooltip";
+        /**
+         * Whether the field is disabled
+         */
+        isDisabled?: boolean;
+        /**
+         * A callback to customize error messages when a built-in validation rule fails.
+         * Receives a discriminated union with the constraint data (e.g., the min value
+         * that was exceeded) so the message can reference the threshold.
+         *
+         * Return a string to override the default message, or `undefined` to keep it.
+         */
+        onValidationError?: (error: ValidationError) => string | undefined;
+        /**
+         * Additional function to validate the field.
+         *
+         * Return `undefined` if valid, or an error message string if invalid.
+         */
+        validate?: (value: FieldValueType<Q, K>) => Promise<string | undefined>;
+        /**
+         * The form field component type to render
+         */
+        fieldComponent: C;
+        /**
+         * The component props for the form field.
+         * Excludes runtime props (value, onChange) which are managed by ActionForm.
+         */
+        fieldComponentProps: Omit<FormFieldPropsByType[C], FormManagedProps<C>>;
+    };
+}[ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>] : never;
 /**
  * A discriminated union describing which validation rule failed and the
  * constraint data the user needs to build a meaningful error message.
@@ -105,6 +109,7 @@ interface FormFieldPropsByType {
     OBJECT_SELECT: ObjectSelectFieldProps<ObjectTypeDefinition>;
     OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;
     RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;
+    SWITCH: SwitchFieldProps;
     TEXT_AREA: TextAreaFieldProps;
     TEXT_INPUT: TextInputFieldProps;
     CUSTOM: CustomFieldProps<unknown>;
@@ -367,6 +372,10 @@ interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {
      */
     orientation?: "horizontal" | "vertical";
 }
+/**
+ * Switch field props for boolean values.
+ */
+type SwitchFieldProps = BaseFormFieldProps<boolean>;
 /**
  * Option interface for radio button options
  */
@@ -459,7 +468,7 @@ type FieldDescriptorType<Q extends ActionDefinition<unknown> = ActionDefinition<
 /**
  * Available form field component types
  */
-type FieldComponent = "DATE_RANGE_INPUT" | "DATETIME_PICKER" | "DROPDOWN" | "FILE_PICKER" | "NUMBER_INPUT" | "OBJECT_SELECT" | "OBJECT_SET" | "RADIO_BUTTONS" | "TEXT_AREA" | "TEXT_INPUT" | "CUSTOM";
+type FieldComponent = "DATE_RANGE_INPUT" | "DATETIME_PICKER" | "DROPDOWN" | "FILE_PICKER" | "NUMBER_INPUT" | "OBJECT_SELECT" | "OBJECT_SET" | "RADIO_BUTTONS" | "SWITCH" | "TEXT_AREA" | "TEXT_INPUT" | "CUSTOM";
 /**
  * Describes the data type of a form field, independent of OSDK.
  * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.
@@ -510,11 +519,11 @@ type RendererFieldDefinition = {
 /**
  * Gets valid form field types for a given property type
  */
-type ValidFormFieldForPropertyType<P extends FieldDescriptorType> = P extends {
+type ValidFormFieldForPropertyType<P extends FieldDescriptorType> = "CUSTOM" | (P extends {
     type: "objectSet";
 } ? "OBJECT_SET" : P extends {
     type: "object";
-} ? "OBJECT_SELECT" : P extends "mediaReference" | "attachment" ? "FILE_PICKER" : P extends "boolean" ? "RADIO_BUTTONS" | "DROPDOWN" : P extends "string" ? "TEXT_INPUT" | "TEXT_AREA" : P extends "datetime" | "timestamp" ? "DATETIME_PICKER" : P extends "double" | "integer" | "long" | "float" | "short" | "byte" | "decimal" ? "NUMBER_INPUT" : never;
+} ? "OBJECT_SELECT" : P extends "mediaReference" | "attachment" ? "FILE_PICKER" : P extends "boolean" ? "RADIO_BUTTONS" | "DROPDOWN" | "SWITCH" : P extends "string" ? "TEXT_INPUT" | "TEXT_AREA" : P extends "datetime" | "timestamp" ? "DATETIME_PICKER" : P extends "double" | "integer" | "long" | "float" | "short" | "byte" | "decimal" ? "NUMBER_INPUT" : never);
 
 /**
  * Props for the ActionForm component.
@@ -529,8 +538,14 @@ type ActionFormProps<Q extends ActionDefinition<unknown>> = (ActionFormConfigPro
     formState?: undefined;
     onFormStateChange?: (updater: (prevState: FormState<Q>) => FormState<Q>) => void;
 });
-interface ActionFormConfigProps<Q extends ActionDefinition<unknown>> extends Pick<BaseFormProps, "formTitle" | "isSubmitDisabled" | "portalContainer"> {
+interface ActionFormConfigProps<Q extends ActionDefinition<unknown>> extends Pick<BaseFormProps, "formTitle" | "isSubmitDisabled"> {
     actionDefinition: Q;
+    /**
+     * Whether to show the form title.
+     *
+     * @default false
+     */
+    showFormTitle?: boolean;
     /**
      * If not supplied, field definitions are constructed from `ActionParameters`.
      */
@@ -639,12 +654,6 @@ interface BaseFormCommonProps {
     submitButtonText?: string;
     /** Visual variant of the submit button. Default `"primary"`. */
     submitButtonVariant?: "primary" | "secondary";
-    /**
-     * Element that receives popover/dropdown portals for fields rendered by this
-     * form. Use this when rendering inside modal dialogs so popups stay in the
-     * dialog's stacking and focus context.
-     */
-    portalContainer?: PortalContainer;
 }
 
 declare const ActionForm$1: <Q extends ActionDefinition<unknown>>(props: ActionFormProps<Q>) => React__default.ReactElement;

package/build/cjs/public/experimental/filter-list.cjs

@@ -1,30 +1,31 @@
 'use strict';
 
-var chunkL5LPFCXT_cjs = require('../../chunk-L5LPFCXT.cjs');
-require('../../chunk-UCTQICPR.cjs');
+var chunkW2IASYE4_cjs = require('../../chunk-W2IASYE4.cjs');
+require('../../chunk-X337DNCW.cjs');
 require('../../chunk-OHKKNZZS.cjs');
-require('../../chunk-SB2VTP67.cjs');
+require('../../chunk-Z7VHLTKD.cjs');
+require('../../chunk-MQYOHGPY.cjs');
 require('../../chunk-7LXS66DW.cjs');
-require('../../chunk-SZXVBDSA.cjs');
+require('../../chunk-6UDBHYSO.cjs');
 require('../../chunk-Q2W6GYRK.cjs');
 
 
 
 Object.defineProperty(exports, "BaseFilterList", {
   enumerable: true,
-  get: function () { return chunkL5LPFCXT_cjs.BaseFilterList; }
+  get: function () { return chunkW2IASYE4_cjs.BaseFilterList; }
 });
 Object.defineProperty(exports, "FilterList", {
   enumerable: true,
-  get: function () { return chunkL5LPFCXT_cjs.FilterList; }
+  get: function () { return chunkW2IASYE4_cjs.FilterList; }
 });
 Object.defineProperty(exports, "deserializeFilterStates", {
   enumerable: true,
-  get: function () { return chunkL5LPFCXT_cjs.deserializeFilterStates; }
+  get: function () { return chunkW2IASYE4_cjs.deserializeFilterStates; }
 });
 Object.defineProperty(exports, "serializeFilterStates", {
   enumerable: true,
-  get: function () { return chunkL5LPFCXT_cjs.serializeFilterStates; }
+  get: function () { return chunkW2IASYE4_cjs.serializeFilterStates; }
 });
 //# sourceMappingURL=filter-list.cjs.map
 //# sourceMappingURL=filter-list.cjs.map

package/build/cjs/public/experimental/filter-list.css

@@ -620,17 +620,17 @@
 
 /* src/base-components/switch/Switch.module.css */
 .osdkSwitchRoot {
-  --osdk-switch-track-width: var(--osdk-switch-track-width-override, 28px);
-  --osdk-switch-track-height: var(--osdk-switch-track-height-override, 16px);
-  --osdk-switch-thumb-size: var(--osdk-switch-thumb-size-override, 12px);
-  --osdk-switch-thumb-offset: var(--osdk-switch-thumb-offset-override, 2px);
+  --osdk-switch-track-width: var( --osdk-switch-track-width-override, calc(var(--osdk-surface-spacing) * 9) );
+  --osdk-switch-track-height: var( --osdk-switch-track-height-override, calc(var(--osdk-surface-spacing) * 5) );
+  --osdk-switch-thumb-size: var( --osdk-switch-thumb-size-override, calc(var(--osdk-surface-spacing) * 4) );
+  --osdk-switch-thumb-offset: var( --osdk-switch-thumb-offset-override, calc(var(--osdk-surface-spacing) * 0.5) );
   display: inline-flex;
   align-items: center;
   width: var(--osdk-switch-track-width);
   height: var(--osdk-switch-track-height);
   padding: 0;
   cursor: pointer;
-  border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
+  border-radius: var(--osdk-switch-border-radius, 9999px);
   position: relative;
   border: none;
   transition: background-color var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-switch-transition-ease, var(--osdk-emphasis-ease-default));
@@ -654,7 +654,7 @@
   }
   &[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--osdk-switch-disabled-opacity, var(--osdk-input-disabled-opacity));
   }
   &:focus-visible {
     outline: var(--osdk-switch-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-switch-focus-color, var(--osdk-emphasis-focus-color));
@@ -897,6 +897,10 @@
   flex-direction: column;
   transition: opacity var(--osdk-filter-content-fade-duration);
 }
+.noValueLabel {
+  color: var( --osdk-filter-listogram-empty-label-color, var(--osdk-filter-no-value-color) );
+  font-style: var( --osdk-filter-listogram-empty-label-font-style, var(--osdk-filter-no-value-font-style) );
+}
 .listogram[data-loading=true] {
   opacity: 0.5;
 }
@@ -945,10 +949,6 @@
 .label[data-excluding] {
   text-decoration: line-through;
 }
-.emptyLabel {
-  color: var(--osdk-filter-listogram-empty-label-color);
-  font-style: var(--osdk-filter-listogram-empty-label-font-style);
-}
 .bar {
   width: var(--osdk-filter-listogram-bar-width);
   flex-shrink: 0;
@@ -1039,6 +1039,12 @@
   flex: 1;
 }
 
+/* src/filter-list/base/inputs/NoValueLabel.module.css */
+.noValue {
+  color: var(--osdk-filter-no-value-color);
+  font-style: var(--osdk-filter-no-value-font-style);
+}
+
 /* src/filter-list/base/inputs/MultiDateInput.module.css */
 .multiDate {
   display: flex;
@@ -1101,10 +1107,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);
@@ -1208,18 +1220,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;
@@ -1277,7 +1293,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) );
@@ -1319,6 +1335,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));
@@ -1361,7 +1380,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) );
@@ -1417,6 +1436,12 @@
   flex-direction: column;
   gap: var(--osdk-filter-null-wrapper-gap);
 }
+.noValueLabel {
+  color: var( --osdk-filter-null-label-color, var(--osdk-filter-no-value-color) );
+  font-family: var(--osdk-filter-null-label-font-family, inherit);
+  font-size: var(--osdk-filter-null-label-font-size, inherit);
+  line-height: var(--osdk-filter-null-label-line-height, inherit);
+}
 .nullValueRow {
   display: flex;
   align-items: center;
@@ -1430,12 +1455,6 @@
   gap: var(--osdk-filter-null-label-gap);
   cursor: pointer;
 }
-.nullLabelText {
-  font-family: var(--osdk-filter-null-label-font-family);
-  font-size: var(--osdk-filter-null-label-font-size);
-  line-height: var(--osdk-filter-null-label-line-height);
-  color: var(--osdk-filter-null-label-color);
-}
 .count {
   font-family: var(--osdk-filter-null-count-font-family);
   font-size: var(--osdk-filter-null-count-font-size);