@ostack.tech/ui-kform 0.11.3 → 0.12.1

package/dist/ostack-ui-kform.css

@@ -48,7 +48,7 @@
   border-bottom-color: transparent;
   background-color: var(--o-ui-background-color) !important;
   position: relative;
-  z-index: 1001;
+  z-index: calc(var(--o-ui-layer-z-index, 0) + var(--o-ui-z-index-dropdown) + 1);
 }
 .o-ui-kform-annexes__menu {
   width: 270px;
@@ -157,7 +157,7 @@
   padding-right: calc(var(--o-ui-space) * 2 * 2 + var(--o-ui-font-size-md) + (32px - var(--o-ui-font-size-md) - 2px) / 2);
 }
 .o-ui-kform-annexes__tab-issues-popover-button-container {
-  z-index: calc(var(--o-ui-z-index-focused) + 1);
+  z-index: 2;
   margin-left: calc(-32px - var(--o-ui-tabs-tab-list-gap-x) - (32px - var(--o-ui-font-size-md) - 2px) / 2 / 2);
   padding-right: calc(var(--o-ui-tabs-tab-list-gap-x) + (32px - var(--o-ui-font-size-md) - 2px) / 2 / 2);
 }
@@ -372,7 +372,6 @@
 .o-ui-kform-form-pages__sidebar {
   position: sticky;
   top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
-  z-index: calc(var(--o-ui-z-index-sticky) + 1);
   max-height: calc(100dvh - var(--o-ui-kform-top-bar-height));
   overflow: auto;
 }
@@ -417,7 +416,6 @@
 .o-ui-kform-form-pages__navigation[data-navigation-mode=select] {
   position: sticky;
   top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
-  z-index: calc(var(--o-ui-z-index-sticky) + 2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 .o-ui-kform-form-pages__select-container[data-variant=default] {
@@ -501,7 +499,6 @@
 .o-ui-kform-form-pages__page-header {
   position: sticky;
   top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height));
-  z-index: 1101;
   display: flex;
   align-items: center;
   padding: calc(var(--o-ui-space) * 2) calc(var(--o-ui-space) * 4);
@@ -578,9 +575,6 @@
   padding: calc(var(--o-ui-space) * 1.5) calc(var(--o-ui-space) * 2);
 }
 .o-ui-kform-form-pages__page-content {
-  position: sticky;
-  top: calc(var(--o-ui-kform-form-app-base-sticky-top, 0px) + var(--o-ui-kform-top-bar-height) + var(--o-ui-kform-form-pages-page-header-height));
-  z-index: 1100;
   padding: calc(var(--o-ui-space) * 4);
 }
 @media (min-width: 576px) {
@@ -615,7 +609,6 @@
 .o-ui-kform-issues-panel__container {
   position: sticky;
   bottom: 0;
-  z-index: 1101;
   display: flex;
   justify-content: center;
   pointer-events: none;
@@ -643,7 +636,6 @@
   padding: 0 calc(var(--o-ui-space) * 4) calc(var(--o-ui-space) * 2) !important;
   position: sticky;
   top: 0;
-  z-index: 1100;
 }
 .o-ui-kform-issues-panel__header[data-stuck]::before {
   content: "";
@@ -737,9 +729,8 @@
   justify-content: space-between;
   position: sticky;
   top: var(--o-ui-kform-form-app-base-sticky-top, 0px);
-  z-index: 1103;
   padding: var(--o-ui-space) var(--o-ui-space) 0;
-  border-bottom: 2px solid #3e63dd;
+  border-bottom: 2px solid var(--o-ui-primary-9);
   background-color: var(--o-ui-background-color);
 }
 .o-ui-kform-top-bar .o-ui-kform-annexes__menu-container, .o-ui-kform-top-bar .o-ui-kform-annexes__tab-list-root {

package/dist/ostack-ui-kform.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { usePrefix as usePrefix$1, useControllableState, useLatestValues, LocalizationProvider as LocalizationProvider$1, combineEventHandlers, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, VisuallyHidden, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, IconButton, controlStatusToAccent, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, StepperFinishTrigger, StepperNextTrigger, StepperPreviousTrigger, useKeyboardShortcut, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
+import { usePrefix as usePrefix$1, useControllableState, useLatestValues, LocalizationProvider as LocalizationProvider$1, combineEventHandlers, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, VisuallyHidden, Feedback, FeedbackList, FeedbackPopover, usePrintClassNames, useMeasure, Layer, Stack, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, IconButton, controlStatusToAccent, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Popover, PopoverTrigger, PopoverContent, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, StepperFinishTrigger, StepperNextTrigger, StepperPreviousTrigger, useKeyboardShortcut, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea } from "@ostack.tech/ui";
 import { AbsolutePath, AbsolutePathFragment, PathMultimap, sliceTable, listableSize, Path, ValidationFailure, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
 import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, toFileList, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
 import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, useId, createElement, memo } from "react";
@@ -684,7 +684,7 @@ const FormAppElement = forwardRef(function FormAppElement2({
   const formTitle = useFormTitle();
   useEffect(
     () => store.subscribe(
-      (state) => state.topBarHeight,
+      ({ topBarHeight }) => topBarHeight,
       (height) => formAppElement?.style.setProperty(
         cssVarName("top-bar-height"),
         `${height}px`
@@ -695,7 +695,7 @@ const FormAppElement = forwardRef(function FormAppElement2({
   );
   useEffect(
     () => store.subscribe(
-      (state) => state.leftSidebarWidth,
+      ({ leftSidebarWidth }) => leftSidebarWidth,
       (width) => formAppElement?.style.setProperty(
         cssVarName("left-sidebar-width"),
         `${width}px`
@@ -706,7 +706,7 @@ const FormAppElement = forwardRef(function FormAppElement2({
   );
   useEffect(
     () => store.subscribe(
-      (state) => state.bottomPanelHeight,
+      ({ bottomPanelHeight }) => bottomPanelHeight,
       (height) => formAppElement?.style.setProperty(
         cssVarName("bottom-panel-height"),
         `${height}px`
@@ -765,6 +765,7 @@ const FormApp = forwardRef(function FormApp2({
   toastsDuration,
   toastsSwipeDirection,
   toastsSwipeThreshold,
+  toastViewportPosition,
   toastViewportHotkey,
   toastViewportLabel,
   toastViewportProps,
@@ -833,6 +834,7 @@ const FormApp = forwardRef(function FormApp2({
     toastsDuration,
     toastsSwipeDirection,
     toastsSwipeThreshold,
+    toastViewportPosition,
     toastViewportHotkey,
     toastViewportLabel,
     toastViewportProps,
@@ -2070,6 +2072,48 @@ function displayStatusToColor(displayStatus) {
       return void 0;
   }
 }
+const TopBarContext = createContext(null);
+function useTopBarElement() {
+  return useContext(TopBarContext)?.topBarEl ?? null;
+}
+const TopBar = forwardRef(
+  function TopBar2({ className, ...otherProps }, forwardedRef) {
+    const prefix = usePrefix();
+    const { printHidden } = usePrintClassNames();
+    const setTopBarHeight = useSetTopBarHeight();
+    const [topBarEl, setTopBarEl] = useState(null);
+    useMeasure(
+      topBarEl,
+      useCallback(
+        (measurement) => setTopBarHeight(measurement?.height),
+        [setTopBarHeight]
+      )
+    );
+    const combinedTopBarRef = useCombinedRef(setTopBarEl, forwardedRef);
+    return /* @__PURE__ */ jsx(TopBarContext.Provider, { value: { topBarEl }, children: /* @__PURE__ */ jsx(Layer, { zIndex: "sticky", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(prefix("top-bar"), printHidden, className),
+        ...otherProps,
+        ref: combinedTopBarRef
+      }
+    ) }) });
+  }
+);
+const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherProps }, forwardedRef) {
+  const prefix = usePrefix();
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      className: cx(prefix("top-bar__actions"), className),
+      direction: "row",
+      gap: 2,
+      justifyContent: "flex-end",
+      ...otherProps,
+      ref: forwardedRef
+    }
+  );
+});
 function AnnexesMenu({
   menuButtonText,
   menuButtonLabel,
@@ -2094,6 +2138,7 @@ function AnnexesMenu({
   const issuesDisplayMode = useIssuesDisplayMode();
   const [open, setOpen] = useControllableState(defaultOpen, controlledOpen);
   const menuTriggerRef = useRef(null);
+  const topBarEl = useTopBarElement();
   const activeAnnex = useStore(store, (state) => state.activeAnnex);
   const handleRadioGroupValueChange = useCallback(
     (value) => store.getState().actions.setActiveAnnex(new AbsolutePath(value)),
@@ -2183,6 +2228,10 @@ function AnnexesMenu({
               // eslint-disable-next-line react-hooks/refs
               handleCloseAutoFocus
             ),
+            portalProps: {
+              container: topBarEl ?? void 0,
+              ...menuContentProps?.portalProps
+            },
             children: [
               /* @__PURE__ */ jsx(
                 DropdownMenuRadioGroup,
@@ -3968,7 +4017,7 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
     currentPath,
     (state) => state?.visuallyHiddenCodePrefix ?? locale7.FormPage.visuallyHiddenCodePrefix
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Layer, { zIndex: ["sticky", -1], children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx(prefix("form-pages__page-header"), className),
@@ -3983,13 +4032,19 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
           {
             tabIndex: -1,
             ...titleProps,
-            className: cx(prefix("form-pages__page-title"), titleProps?.className),
+            className: cx(
+              prefix("form-pages__page-title"),
+              titleProps?.className
+            ),
             children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   ...codeProps,
-                  className: cx(prefix("form-pages__page-code"), codeProps?.className),
+                  className: cx(
+                    prefix("form-pages__page-code"),
+                    codeProps?.className
+                  ),
                   "data-status": displayStatusToControlStatus(deferredDisplayStatus),
                   "data-accent": controlStatusToAccent(
                     displayStatusToControlStatus(deferredDisplayStatus)
@@ -4078,7 +4133,7 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
         )
       ]
     }
-  );
+  ) });
 });
 const FormPage = forwardRef(
   function FormPage2({
@@ -4342,7 +4397,7 @@ const FormPages = forwardRef(
     );
     useEffect(
       () => store.subscribe(
-        (state) => state.navigationSelectHeight,
+        ({ navigationSelectHeight }) => navigationSelectHeight,
         (height) => formPagesRef.current?.style.setProperty(
           cssVarName("form-pages-navigation-select-height"),
           `${height}px`
@@ -4599,7 +4654,7 @@ const FormPagesNavigation = forwardRef(function FormPagesNavigation2({
   ariaLabel ??= locale7.FormPagesNavigation["aria-label"];
   const { printHidden } = usePrintClassNames();
   const isLargeScreen = useMediaBreakpointUp("sm");
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Layer, { zIndex: isLargeScreen ? void 0 : ["sticky", -1], children: /* @__PURE__ */ jsx(
     "nav",
     {
       className: cx(prefix("form-pages__navigation"), printHidden, className),
@@ -4607,9 +4662,9 @@ const FormPagesNavigation = forwardRef(function FormPagesNavigation2({
       "aria-label": ariaLabel,
       ...otherProps,
       ref: forwardedRef,
-      children: isLargeScreen ? /* @__PURE__ */ jsx(FormPagesSidebar, { ...sidebarProps }) : /* @__PURE__ */ jsx(FormPagesSelect, { ...selectProps })
+      children: isLargeScreen ? /* @__PURE__ */ jsx(Layer, { zIndex: "docked", children: /* @__PURE__ */ jsx(FormPagesSidebar, { ...sidebarProps }) }) : /* @__PURE__ */ jsx(FormPagesSelect, { ...selectProps })
     }
-  );
+  ) });
 });
 const FormStepperContext = createContext(
   null
@@ -5368,7 +5423,7 @@ const IssuesPanelMessagesCard = forwardRef(function IssuesPanelMessagesCard2({
       color: relevantColor ?? "neutral",
       ref: combinedCardRef,
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Layer, { zIndex: "sticky", children: /* @__PURE__ */ jsxs(
           CardHeader,
           {
             ...headerProps,
@@ -5394,7 +5449,10 @@ const IssuesPanelMessagesCard = forwardRef(function IssuesPanelMessagesCard2({
                     color: relevantColor,
                     size: "lg",
                     ...iconProps,
-                    className: cx(prefix("issues-panel__icon"), iconProps?.className),
+                    className: cx(
+                      prefix("issues-panel__icon"),
+                      iconProps?.className
+                    ),
                     icon: relevantIcon
                   }
                 ),
@@ -5422,7 +5480,7 @@ const IssuesPanelMessagesCard = forwardRef(function IssuesPanelMessagesCard2({
               ] })
             ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxs(
           CardBody,
           {
@@ -5477,7 +5535,7 @@ const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
       ...otherProps,
       color: initialized ? relevantColor : "neutral",
       ref: forwardedRef,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(Layer, { zIndex: "sticky", children: /* @__PURE__ */ jsxs(
         CardHeader,
         {
           ...headerProps,
@@ -5501,7 +5559,10 @@ const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
                   color: relevantColor,
                   size: "lg",
                   ...iconProps,
-                  className: cx(prefix("issues-panel__icon"), iconProps?.className),
+                  className: cx(
+                    prefix("issues-panel__icon"),
+                    iconProps?.className
+                  ),
                   icon: relevantIcon
                 }
               ),
@@ -5528,7 +5589,7 @@ const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
             renderControls(relevantColor)
           ]
         }
-      )
+      ) })
     }
   );
 });
@@ -5788,7 +5849,7 @@ const IssuesPanel = forwardRef(function ValidationPanel({
     setContainerEl,
     containerProps?.ref
   );
-  return open && !printing && /* @__PURE__ */ jsx(
+  return open && !printing && /* @__PURE__ */ jsx(Layer, { zIndex: ["docked", 1], children: /* @__PURE__ */ jsx(
     "div",
     {
       ...containerProps,
@@ -5838,7 +5899,7 @@ const IssuesPanel = forwardRef(function ValidationPanel({
         }
       ) })
     }
-  );
+  ) });
 });
 function mostRelevantIssuePath(info, latestInteraction, formSchema, issuesOrderCompareFn) {
   if (issuesOrderCompareFn) {
@@ -7753,44 +7814,6 @@ const TextControl = forwardRef(function TextControl2({
 function parseText(formattedValue, state) {
   return state.schema.typeInfo.nullable ? formattedValue || null : formattedValue;
 }
-const TopBar = forwardRef(
-  function TopBar2({ className, ...otherProps }, forwardedRef) {
-    const prefix = usePrefix();
-    const { printHidden } = usePrintClassNames();
-    const setTopBarHeight = useSetTopBarHeight();
-    const [topBarEl, setTopBarEl] = useState(null);
-    useMeasure(
-      topBarEl,
-      useCallback(
-        (measurement) => setTopBarHeight(measurement?.height),
-        [setTopBarHeight]
-      )
-    );
-    const combinedTopBarRef = useCombinedRef(setTopBarEl, forwardedRef);
-    return /* @__PURE__ */ jsx(PortalContext.Provider, { value: { container: topBarEl }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(prefix("top-bar"), printHidden, className),
-        ...otherProps,
-        ref: combinedTopBarRef
-      }
-    ) });
-  }
-);
-const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherProps }, forwardedRef) {
-  const prefix = usePrefix();
-  return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      className: cx(prefix("top-bar__actions"), className),
-      direction: "row",
-      gap: 2,
-      justifyContent: "flex-end",
-      ...otherProps,
-      ref: forwardedRef
-    }
-  );
-});
 const DEFAULT_VALIDATE_KEYBINDS = "Alt+Shift+V";
 function ValidateAction({
   label,
@@ -7834,6 +7857,66 @@ function ValidateAction({
     }
   );
 }
+const ALWAYS_RESET = () => true;
+function useResetOnChange(toReset, {
+  when = ALWAYS_RESET,
+  exclude,
+  confirmation,
+  setUntouched = true,
+  setPristine = true
+} = {}) {
+  const { confirm } = useAlertDialog();
+  const formManager = useFormManager();
+  const currentPath = useCurrentPath();
+  const resettingValue = useRef(false);
+  return async function handleValueChange(event) {
+    if (!resettingValue.current && when(event)) {
+      let resolvedToReset = (Array.isArray(toReset) ? toReset : [toReset]).map(
+        (path) => currentPath.resolve(path)
+      );
+      if (exclude) {
+        const resolvedExclude = (Array.isArray(exclude) ? exclude : [exclude]).map((path) => currentPath.resolve(path));
+        resolvedToReset = excludePaths(
+          formManager,
+          resolvedToReset,
+          resolvedExclude
+        );
+      }
+      if (confirmation) {
+        const { message, ...confirmOptions } = confirmation;
+        if (await someIsDirty(formManager, resolvedToReset) && !await confirm(message, { color: "warning", ...confirmOptions })) {
+          resettingValue.current = true;
+          setTimeout(
+            () => formManager.set(event.path, event.oldValue).finally(() => resettingValue.current = false)
+          );
+          return;
+        }
+      }
+      void resetAll(formManager, resolvedToReset, setUntouched, setPristine);
+    }
+  };
+}
+function excludePaths(formManager, paths, exclude) {
+  return paths.flatMap(
+    (path) => Array.from(formManager.schemaInfo(path)).map((info) => info.path)
+  ).filter((path) => !exclude.some((toIgnore) => path.matches(toIgnore)));
+}
+async function someIsDirty(formManager, paths) {
+  const dirtyStatuses = await Promise.all(
+    paths.map((path) => formManager.isDirty(path))
+  );
+  return dirtyStatuses.some((isDirty) => isDirty);
+}
+async function resetAll(formManager, toReset, setPristine, setUntouched) {
+  await Promise.all(
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    toReset.flatMap((path) => [
+      formManager.reset(path),
+      setPristine && formManager.setPristine(path),
+      setUntouched && formManager.setUntouched(path)
+    ])
+  );
+}
 export {
   ActivePathContext,
   ActivePathProvider,
@@ -7940,10 +8023,12 @@ export {
   useRegisterIssueMessages,
   useRegisterLabel,
   useRegisteredIssueMessage,
+  useResetOnChange,
   useSetBottomPanelHeight,
   useSetLeftSidebarWidth,
   useSetTopBarHeight,
   useStartIssuesNavigation,
-  useTableControlApiRef
+  useTableControlApiRef,
+  useTopBarElement
 };
 //# sourceMappingURL=ostack-ui-kform.js.map