@integration-app/react 2.1.2 → 2.1.4

package/dist/styles.css

@@ -9300,22 +9300,214 @@
 @layer iap_utilities{
   @layer compositions{
 
-    .iap-textStyle_sm {
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-}
-
     .iap-textStyle_md {
       font-size: var(--iap-font-sizes-md);
       line-height: 1.5rem;
 }
 
+    .iap-textStyle_sm {
+      font-size: var(--iap-font-sizes-sm);
+      line-height: 1.25rem;
+}
+
     .iap-textStyle_xs {
       font-size: var(--iap-font-sizes-xs);
       line-height: 1.125rem;
 }
 }
 
+  .iap-ring_none {
+    outline: var(--iap-borders-none);
+}
+
+  .iap-d_flex {
+    display: flex;
+}
+
+  .iap-ov_hidden {
+    overflow: hidden;
+}
+
+  .iap-bg_white {
+    background: var(--iap-colors-white);
+}
+
+  .iap-bx-sh_xl {
+    box-shadow: var(--iap-shadows-xl);
+}
+
+  .iap-bdr_lg {
+    border-radius: var(--iap-radii-lg);
+}
+
+  .iap-p_0 {
+    padding: var(--iap-spacing-0);
+}
+
+  .iap-max-w_none {
+    max-width: none;
+}
+
+  .iap-max-h_var\(--available-height\) {
+    max-height: var(--available-height);
+}
+
+  .iap-h_full {
+    height: var(--iap-sizes-full);
+}
+
+  .iap-w_fit-content {
+    width: fit-content;
+}
+
+  .iap-p_1\.5 {
+    padding: var(--iap-spacing-1\.5);
+}
+
+  .iap-w_full {
+    width: var(--iap-sizes-full);
+}
+
+  .iap-min-w_56 {
+    min-width: var(--iap-sizes-56);
+}
+
+  .iap-max-w_min\(65em\,_90vw\) {
+    max-width: min(65em, 90vw);
+}
+
+  .iap-max-h_inherit {
+    max-height: inherit;
+}
+
+  .iap-min-h_8 {
+    min-height: var(--iap-sizes-8);
+}
+
+  .iap-bdr_none {
+    border-radius: var(--iap-radii-none);
+}
+
+  .iap-bd_none {
+    border: var(--iap-borders-none);
+}
+
+  .iap-px_2 {
+    padding-inline: var(--iap-spacing-2);
+}
+
+  .iap-py_1\.5 {
+    padding-block: var(--iap-spacing-1\.5);
+}
+
+  .iap-pos_relative {
+    position: relative;
+}
+
+  .iap-max-w_md {
+    max-width: var(--iap-sizes-md);
+}
+
+  .iap-p_2 {
+    padding: var(--iap-spacing-2);
+}
+
+  .iap-c_slate\.11 {
+    color: var(--iap-colors-slate-11);
+}
+
+  .iap-tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .iap-ls_wide {
+    letter-spacing: var(--iap-letter-spacings-wide);
+}
+
+  .iap-pos_sticky {
+    position: sticky;
+}
+
+  .iap-z_docked {
+    z-index: var(--iap-z-index-docked);
+}
+
+  .iap-min-h_auto {
+    min-height: auto;
+}
+
+  .iap-pointer-events_none {
+    pointer-events: none;
+}
+
+  .iap-gap_1\.5 {
+    gap: var(--iap-spacing-1\.5);
+}
+
+  .iap-py_1 {
+    padding-block: var(--iap-spacing-1);
+}
+
+  .iap-cursor_pointer {
+    cursor: pointer;
+}
+
+  .iap-min-h_6 {
+    min-height: var(--iap-sizes-6);
+}
+
+  .iap-bdr_md {
+    border-radius: var(--iap-radii-md);
+}
+
+  .iap-gap_1 {
+    gap: var(--iap-spacing-1);
+}
+
+  .iap-max-w_full {
+    max-width: var(--iap-sizes-full);
+}
+
+  .iap-ov-wrap_break-word {
+    overflow-wrap: break-word;
+}
+
+  .iap-c_slate\.10 {
+    color: var(--iap-colors-slate-10);
+}
+
+  .iap-c_tomato\.10 {
+    color: var(--iap-colors-tomato-10);
+}
+
+  .iap-h_7 {
+    height: var(--iap-sizes-7);
+}
+
+  .iap-w_7 {
+    width: var(--iap-sizes-7);
+}
+
+  .iap-c_fg\.default {
+    color: var(--iap-colors-fg-default);
+}
+
+  .iap-h_6 {
+    height: var(--iap-sizes-6);
+}
+
+  .iap-w_6 {
+    width: var(--iap-sizes-6);
+}
+
+  .iap-h_5 {
+    height: var(--iap-sizes-5);
+}
+
+  .iap-w_3\/5 {
+    width: 60%;
+}
+
   .iap-op_0 {
     opacity: 0;
 }
@@ -9471,30 +9663,10 @@
     padding-inline: var(--iap-spacing-1\.5);
 }
 
-  .iap-py_1 {
-    padding-block: var(--iap-spacing-1);
-}
-
-  .iap-h_6 {
-    height: var(--iap-sizes-6);
-}
-
-  .iap-w_6 {
-    width: var(--iap-sizes-6);
-}
-
   .iap-min-w_unset {
     min-width: unset;
 }
 
-  .iap-bdr_md {
-    border-radius: var(--iap-radii-md);
-}
-
-  .iap-c_slate\.11 {
-    color: var(--iap-colors-slate-11);
-}
-
   .iap-w_4 {
     width: var(--iap-sizes-4);
 }
@@ -9503,14 +9675,6 @@
     height: var(--iap-sizes-4);
 }
 
-  .iap-d_flex {
-    display: flex;
-}
-
-  .iap-bdr_lg {
-    border-radius: var(--iap-radii-lg);
-}
-
   .iap-p_1 {
     padding: var(--iap-spacing-1);
 }
@@ -9519,160 +9683,8 @@
     background: var(--iap-colors-gray-3);
 }
 
-  .iap-ring_none {
-    outline: var(--iap-borders-none);
-}
-
-  .iap-ov_hidden {
-    overflow: hidden;
-}
-
-  .iap-bg_white {
-    background: var(--iap-colors-white);
-}
-
-  .iap-bx-sh_xl {
-    box-shadow: var(--iap-shadows-xl);
-}
-
-  .iap-p_0 {
-    padding: var(--iap-spacing-0);
-}
-
-  .iap-max-w_none {
-    max-width: none;
-}
-
-  .iap-max-h_var\(--available-height\,_100\%\) {
-    max-height: var(--available-height, 100%);
-}
-
-  .iap-h_full {
-    height: var(--iap-sizes-full);
-}
-
-  .iap-w_fit-content {
-    width: fit-content;
-}
-
-  .iap-p_1\.5 {
-    padding: var(--iap-spacing-1\.5);
-}
-
-  .iap-w_full {
-    width: var(--iap-sizes-full);
-}
-
-  .iap-min-w_56 {
-    min-width: var(--iap-sizes-56);
-}
-
-  .iap-max-w_min\(65em\,_90vw\) {
-    max-width: min(65em, 90vw);
-}
-
-  .iap-min-h_8 {
-    min-height: var(--iap-sizes-8);
-}
-
-  .iap-bdr_none {
-    border-radius: var(--iap-radii-none);
-}
-
-  .iap-bd_none {
-    border: var(--iap-borders-none);
-}
-
-  .iap-px_2 {
-    padding-inline: var(--iap-spacing-2);
-}
-
-  .iap-py_1\.5 {
-    padding-block: var(--iap-spacing-1\.5);
-}
-
-  .iap-pos_relative {
-    position: relative;
-}
-
-  .iap-max-w_md {
-    max-width: var(--iap-sizes-md);
-}
-
-  .iap-gap_1\.5 {
-    gap: var(--iap-spacing-1\.5);
-}
-
-  .iap-cursor_pointer {
-    cursor: pointer;
-}
-
-  .iap-min-h_6 {
-    min-height: var(--iap-sizes-6);
-}
-
-  .iap-c_slate\.10 {
-    color: var(--iap-colors-slate-10);
-}
-
-  .iap-c_tomato\.10 {
-    color: var(--iap-colors-tomato-10);
-}
-
-  .iap-h_7 {
-    height: var(--iap-sizes-7);
-}
-
-  .iap-w_7 {
-    width: var(--iap-sizes-7);
-}
-
-  .iap-h_5 {
-    height: var(--iap-sizes-5);
-}
-
-  .iap-w_3\/5 {
-    width: 60%;
-}
-
-  .iap-p_2 {
-    padding: var(--iap-spacing-2);
-}
-
-  .iap-tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .iap-ls_wide {
-    letter-spacing: var(--iap-letter-spacings-wide);
-}
-
-  .iap-pos_sticky {
-    position: sticky;
-}
-
-  .iap-z_docked {
-    z-index: var(--iap-z-index-docked);
-}
-
-  .iap-min-h_auto {
-    min-height: auto;
-}
-
-  .iap-pointer-events_none {
-    pointer-events: none;
-}
-
-  .iap-gap_1 {
-    gap: var(--iap-spacing-1);
-}
-
-  .iap-max-w_full {
-    max-width: var(--iap-sizes-full);
-}
-
-  .iap-ov-wrap_break-word {
-    overflow-wrap: break-word;
+  .iap-bg_linear-gradient\(\#ffffff_33\%\,_rgba\(255\,_255\,_255\,_0\)\)\,_linear-gradient\(rgba\(255\,_255\,_255\,_0\)\,_\#ffffff_66\%\)_0_100\%\,_radial-gradient\(farthest-side_at_50\%_0\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)\,_radial-gradient\(farthest-side_at_50\%_100\%\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)_0_100\% {
+    background: linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%;
 }
 
   .iap-p_3 {
@@ -9711,10 +9723,6 @@
     offset: -4px;
 }
 
-  .iap-z_600 {
-    z-index: 600;
-}
-
   .iap-px_4 {
     padding-inline: var(--iap-spacing-4);
 }
@@ -9797,6 +9805,14 @@
     animation: var(--iap-animations-fade-in);
 }
 
+  .iap-z_popover {
+    z-index: var(--iap-z-index-popover);
+}
+
+  .iap-isolation_isolate {
+    isolation: isolate;
+}
+
   .iap-d_inline {
     display: inline;
 }
@@ -9956,10 +9972,30 @@
     gap: var(--iap-spacing-4);
 }
 
+  .iap-min-h_16 {
+    min-height: var(--iap-sizes-16);
+}
+
   .iap-gap_2\.5 {
     gap: var(--iap-spacing-2\.5);
 }
 
+  .iap-min-h_10 {
+    min-height: var(--iap-sizes-10);
+}
+
+  .iap-w_5\/6 {
+    width: 83.333333%;
+}
+
+  .iap-op_0\.1 {
+    opacity: 0.1;
+}
+
+  .iap-trs_opacity_0\.1s {
+    transition: opacity 0.1s;
+}
+
   .iap-max-h_full {
     max-height: var(--iap-sizes-full);
 }
@@ -9976,14 +10012,14 @@
     flex: 1 1 0%;
 }
 
-  .iap-min-h_0 {
-    min-height: var(--iap-sizes-0);
-}
-
   .iap-w_min\(30rem\,_70vw\) {
     width: min(30rem, 70vw);
 }
 
+  .iap-min-h_14 {
+    min-height: var(--iap-sizes-14);
+}
+
   .iap-py_0\.5 {
     padding-block: var(--iap-spacing-0\.5);
 }
@@ -14259,10 +14295,58 @@
     padding-inline: var(--iap-spacing-4\.5);
 }
 
+  .iap-bd-c_gray\.2 {
+    border-color: var(--iap-colors-gray-2);
+}
+
+  .iap-bd-w_0\.5 {
+    border-width: 0.5px;
+}
+
+  .iap-flex-d_column {
+    flex-direction: column;
+}
+
+  .iap-pb_1\.5 {
+    padding-bottom: var(--iap-spacing-1\.5);
+}
+
+  .iap-fw_medium {
+    font-weight: var(--iap-font-weights-medium);
+}
+
+  .iap-pt_0\.5 {
+    padding-top: var(--iap-spacing-0\.5);
+}
+
+  .iap-ov-y_auto {
+    overflow-y: auto;
+}
+
+  .iap-flex-g_1 {
+    flex-grow: 1;
+}
+
+  .iap-fs_xs {
+    font-size: var(--iap-font-sizes-xs);
+}
+
+  .iap-top_0 {
+    top: var(--iap-spacing-0);
+}
+
+  .iap-flex-d_row {
+    flex-direction: row;
+}
+
   .iap-ai_center {
     align-items: center;
 }
 
+  .iap-ai_baseline {
+    align-items: baseline;
+}
+
   .iap-jc_center {
     justify-content: center;
 }
@@ -14287,10 +14371,6 @@
     line-height: 1.2;
 }
 
-  .iap-fw_medium {
-    font-weight: var(--iap-font-weights-medium);
-}
-
   .iap-fs_sm {
     font-size: var(--iap-font-sizes-sm);
 }
@@ -14307,48 +14387,20 @@
     border-color: var(--iap-colors-gray-5);
 }
 
-  .iap-bd-w_0\.5 {
-    border-width: 0.5px;
+  .iap-bg-c_transparent {
+    background-color: var(--iap-colors-transparent);
 }
 
-  .iap-bd-c_gray\.2 {
-    border-color: var(--iap-colors-gray-2);
+  .iap-bg-r_no-repeat {
+    background-repeat: no-repeat;
 }
 
-  .iap-flex-d_column {
-    flex-direction: column;
+  .iap-bg-a_local\,_local\,_scroll\,_scroll {
+    background-attachment: local, local, scroll, scroll;
 }
 
-  .iap-pb_1\.5 {
-    padding-bottom: var(--iap-spacing-1\.5);
-}
-
-  .iap-pt_0\.5 {
-    padding-top: var(--iap-spacing-0\.5);
-}
-
-  .iap-ov-y_auto {
-    overflow-y: auto;
-}
-
-  .iap-flex-g_1 {
-    flex-grow: 1;
-}
-
-  .iap-flex-d_row {
-    flex-direction: row;
-}
-
-  .iap-fs_xs {
-    font-size: var(--iap-font-sizes-xs);
-}
-
-  .iap-top_0 {
-    top: var(--iap-spacing-0);
-}
-
-  .iap-ai_baseline {
-    align-items: baseline;
+  .iap-bg-s_100\%_15px\,_100\%_15px\,_100\%_2px\,_100\%_2px {
+    background-size: 100% 15px, 100% 15px, 100% 2px, 100% 2px;
 }
 
   .iap-jc_start {
@@ -14411,6 +14463,10 @@
     padding-left: var(--iap-spacing-2);
 }
 
+  .iap-ov-y_scroll {
+    overflow-y: scroll;
+}
+
   .iap-ov-x_auto {
     overflow-x: auto;
 }
@@ -14493,14 +14549,14 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_neutral\.3:is(:hover, [data-hover]) {
-      background: var(--iap-colors-neutral-3);
+    .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
+      background: var(--iap-colors-slate-3);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
-      background: var(--iap-colors-slate-3);
+    .hover\:iap-bg_neutral\.3:is(:hover, [data-hover]) {
+      background: var(--iap-colors-neutral-3);
 }
 }
 

package/dist/types/components/ComboBox/Dropdown/NavigationContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComboBoxOption } from '../types';
+type Context = {
+    currentItem: ComboBoxOption | 'drill-up' | null;
+    moveToNextItem: (options: ComboBoxOption[], currentItem: Context['currentItem']) => void;
+    moveToPreviousItem: (options: ComboBoxOption[], currentItem: Context['currentItem']) => void;
+    onOptionsListChange: (options: ComboBoxOption[]) => void;
+};
+export declare function NavigationContextProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNavigationContext(): Context;
+export {};

package/dist/types/components/ComboBox/DropdownPopover/DropdownPositioner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DropdownPositioner: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/types/components/ComboBox/DropdownPortal/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function DropdownPortalBoundary({ children, id, }: {
+    children?: React.ReactNode;
+    id?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownPortal({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ComboBox/options-factories/formula.d.ts

@@ -1,5 +1,5 @@
-import { ComboBoxOptionsFactory } from './index';
 import { ComboBoxOption } from '../types';
+import { ComboBoxOptionsFactory } from './index';
 export declare class FormulaListOptionsFactory implements ComboBoxOptionsFactory {
     getOptions({ input, spec }: {
         input: any;

package/dist/types/components/ComboBox/options-factories/types.d.ts

@@ -1,7 +1,7 @@
-import { ComboBoxOption } from '../types';
-import { ValueSpecType } from '../value-spec';
 import { DataSchema } from '@integration-app/sdk';
 import { IDataBuilderContext } from '../../../components/DataBuilder/types';
+import { ComboBoxOption } from '../types';
+import { ValueSpecType } from '../value-spec';
 export type GetOptionsArgs = {
     input: string;
     spec?: ValueSpecType;

package/dist/types/components/ComboBox/tests/Combobox.stories.helpers.d.ts

@@ -32,4 +32,7 @@ export declare const Utils: {
     ClickChangeSchemaTypeByIndex: {
         play: (context: any, idx: any) => Promise<void>;
     };
+    Wait: {
+        play: (ms?: number) => Promise<void>;
+    };
 };

package/dist/types/components/ComboBoxElements/ComboBoxTag.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ComboBoxTagProps } from '../ComboBox/types';
 import { DataSchema } from '@integration-app/sdk';
+import { ComboBoxTagProps } from '../ComboBox/types';
 export declare const ComboBoxTag: import("react").ForwardRefExoticComponent<ComboBoxTagProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare function getClassFromSchema(schema: DataSchema): string;