oolib 2.226.2 → 2.227.0

package/dist/index.d.ts

@@ -88,3 +88,4 @@ export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2,
 export { colors as colors2, typo as typoV2_CSS } from "./v2/themes";
 export { RadioInput, RadioButton } from "./v2/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/index";
 export { SwitchSingle, SwitchDouble } from "./v2/components/Switches";
+export { useFloatingPosition, FloatingFocusManager, FloatingPortal } from "./utils/customHooks/useFloatingPosition";

package/dist/index.js

@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.applyBlackOverlayOnHover = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 exports.List = exports.SwitchDouble = exports.SwitchSingle = exports.RadioButton = exports.RadioInput = exports.RadioList = exports.CheckboxButton = exports.CheckboxInput = exports.CheckboxList = exports.AccordionV2 = exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.typoV2_CSS = exports.colors2 = exports.TabBarV2 = exports.ButtonUpload = exports.ButtonGhostCompact = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.generateOptions = exports.genTagComp = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.HintsProvider = exports.BlockLabel = exports.ListContent = exports.CardContent = exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
-exports.baseStyling = exports.TooltipV2 = exports.ListItem = void 0;
+exports.FloatingPortal = exports.FloatingFocusManager = exports.useFloatingPosition = exports.baseStyling = exports.TooltipV2 = exports.ListItem = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -252,3 +252,8 @@ Object.defineProperty(exports, "ListItem", { enumerable: true, get: function ()
 var Tooltip_2 = require("./v2/components/Tooltip");
 Object.defineProperty(exports, "TooltipV2", { enumerable: true, get: function () { return __importDefault(Tooltip_2).default; } });
 exports.baseStyling = __importStar(require("./v2/themes/utils/baseStyling"));
+// Floating UI hooks and utilities
+var useFloatingPosition_1 = require("./utils/customHooks/useFloatingPosition");
+Object.defineProperty(exports, "useFloatingPosition", { enumerable: true, get: function () { return useFloatingPosition_1.useFloatingPosition; } });
+Object.defineProperty(exports, "FloatingFocusManager", { enumerable: true, get: function () { return useFloatingPosition_1.FloatingFocusManager; } });
+Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return useFloatingPosition_1.FloatingPortal; } });

package/dist/utils/customHooks/useFloatingPosition.d.ts

@@ -1,5 +1,22 @@
 import { type UseFloatingOptions, type OpenChangeReason, type UseHoverProps, type UseClickProps, type UseDismissProps, type UseFocusProps, type UseRoleProps, type ArrowOptions, type OffsetOptions, type ShiftOptions, type FlipOptions, type AutoPlacementOptions, type HideOptions, type UseTransitionStylesProps, type Middleware } from "@floating-ui/react";
-import { type CSSProperties } from "react";
+import { type CSSProperties, type MutableRefObject } from "react";
+export { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
+export interface ListNavigationOptions {
+    enabled?: boolean;
+    listRef: MutableRefObject<(HTMLElement | null)[]>;
+    activeIndex: number | null;
+    onNavigate?: (index: number | null) => void;
+    loop?: boolean;
+    virtual?: boolean;
+    orientation?: "vertical" | "horizontal" | "both";
+    focusItemOnOpen?: boolean | "auto";
+    focusItemOnHover?: boolean;
+    openOnArrowKeyDown?: boolean;
+    disabledIndices?: number[];
+    allowEscape?: boolean;
+    cols?: number;
+    scrollItemIntoView?: boolean | ScrollIntoViewOptions;
+}
 interface UseFloatingPositionPropsBase {
     placement?: UseFloatingOptions["placement"];
     strategy?: UseFloatingOptions["strategy"];
@@ -38,6 +55,7 @@ interface UseFloatingPositionPropsBase {
             config?: HideOptions;
         };
     };
+    listNavigationOptions?: ListNavigationOptions;
 }
 interface UseFloatingPositionPropsHover extends UseFloatingPositionPropsBase {
     enableTriggerOnClick?: false;
@@ -49,7 +67,7 @@ interface UseFloatingPositionPropsClick extends UseFloatingPositionPropsBase {
     clickOptions?: Omit<UseClickProps, "enabled">;
 }
 export type UseFloatingPositionProps = UseFloatingPositionPropsHover | UseFloatingPositionPropsClick;
-export declare const useFloatingPosition: ({ placement, strategy, transform, open, onOpenChange, enableTriggerOnClick, dismissOptions, focusOptions, roleOptions, showArrow, arrowRef, arrowPadding, enableDelayGroups, transitionOptions, customMiddleware, disableAutoUpdate, middlewareOptions, ...options }: UseFloatingPositionProps) => {
+export declare const useFloatingPosition: ({ placement, strategy, transform, open, onOpenChange, enableTriggerOnClick, dismissOptions, focusOptions, roleOptions, showArrow, arrowRef, arrowPadding, enableDelayGroups, transitionOptions, customMiddleware, disableAutoUpdate, middlewareOptions, listNavigationOptions, ...options }: UseFloatingPositionProps) => {
     getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
@@ -61,7 +79,7 @@ export declare const useFloatingPosition: ({ placement, strategy, transform, ope
     x: number;
     floatingStyles: React.CSSProperties;
     refs: {
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType>;
+        reference: MutableRefObject<import("@floating-ui/react-dom").ReferenceType>;
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import("@floating-ui/react-dom").ReferenceType) => void;
         setFloating: (node: HTMLElement | null) => void;
@@ -96,4 +114,3 @@ export declare const useFloatingPosition: ({ placement, strategy, transform, ope
     transitionStyles: CSSProperties;
     update: () => void;
 };
-export {};

package/dist/utils/customHooks/useFloatingPosition.js

@@ -22,12 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFloatingPosition = void 0;
+exports.useFloatingPosition = exports.FloatingPortal = exports.FloatingFocusManager = void 0;
 var react_1 = require("@floating-ui/react");
 var react_2 = require("react");
+// Re-export FloatingFocusManager and FloatingPortal for consumers
+var react_3 = require("@floating-ui/react");
+Object.defineProperty(exports, "FloatingFocusManager", { enumerable: true, get: function () { return react_3.FloatingFocusManager; } });
+Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return react_3.FloatingPortal; } });
 var useFloatingPosition = function (_a) {
-    var placement = _a.placement, strategy = _a.strategy, transform = _a.transform, open = _a.open, onOpenChange = _a.onOpenChange, _b = _a.enableTriggerOnClick, enableTriggerOnClick = _b === void 0 ? false : _b, dismissOptions = _a.dismissOptions, focusOptions = _a.focusOptions, roleOptions = _a.roleOptions, _c = _a.showArrow, showArrow = _c === void 0 ? false : _c, arrowRef = _a.arrowRef, arrowPadding = _a.arrowPadding, _d = _a.enableDelayGroups, enableDelayGroups = _d === void 0 ? true : _d, transitionOptions = _a.transitionOptions, customMiddleware = _a.customMiddleware, _e = _a.disableAutoUpdate, disableAutoUpdate = _e === void 0 ? false : _e, _f = _a.middlewareOptions, middlewareOptions = _f === void 0 ? {} : _f, options = __rest(_a, ["placement", "strategy", "transform", "open", "onOpenChange", "enableTriggerOnClick", "dismissOptions", "focusOptions", "roleOptions", "showArrow", "arrowRef", "arrowPadding", "enableDelayGroups", "transitionOptions", "customMiddleware", "disableAutoUpdate", "middlewareOptions"]);
-    var _g = (0, react_2.useState)("unmounted"), state = _g[0], setState = _g[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var placement = _a.placement, strategy = _a.strategy, transform = _a.transform, open = _a.open, onOpenChange = _a.onOpenChange, _k = _a.enableTriggerOnClick, enableTriggerOnClick = _k === void 0 ? false : _k, dismissOptions = _a.dismissOptions, focusOptions = _a.focusOptions, roleOptions = _a.roleOptions, _l = _a.showArrow, showArrow = _l === void 0 ? false : _l, arrowRef = _a.arrowRef, arrowPadding = _a.arrowPadding, _m = _a.enableDelayGroups, enableDelayGroups = _m === void 0 ? true : _m, transitionOptions = _a.transitionOptions, customMiddleware = _a.customMiddleware, _o = _a.disableAutoUpdate, disableAutoUpdate = _o === void 0 ? false : _o, _p = _a.middlewareOptions, middlewareOptions = _p === void 0 ? {} : _p, listNavigationOptions = _a.listNavigationOptions, options = __rest(_a, ["placement", "strategy", "transform", "open", "onOpenChange", "enableTriggerOnClick", "dismissOptions", "focusOptions", "roleOptions", "showArrow", "arrowRef", "arrowPadding", "enableDelayGroups", "transitionOptions", "customMiddleware", "disableAutoUpdate", "middlewareOptions", "listNavigationOptions"]);
+    var _q = (0, react_2.useState)("unmounted"), state = _q[0], setState = _q[1];
     var middlewares = [];
     var offsetConfig = middlewareOptions.offset;
     if ((offsetConfig === null || offsetConfig === void 0 ? void 0 : offsetConfig.enabled) !== false) {
@@ -57,7 +62,7 @@ var useFloatingPosition = function (_a) {
     if ((hideConfig === null || hideConfig === void 0 ? void 0 : hideConfig.enabled) === true) {
         middlewares.push((0, react_1.hide)(hideConfig === null || hideConfig === void 0 ? void 0 : hideConfig.config));
     }
-    var _h = (0, react_1.useFloating)({
+    var _r = (0, react_1.useFloating)({
         placement: placement,
         strategy: strategy,
         transform: transform,
@@ -71,7 +76,7 @@ var useFloatingPosition = function (_a) {
         },
         whileElementsMounted: disableAutoUpdate ? undefined : react_1.autoUpdate,
         middleware: middlewares,
-    }), context = _h.context, middlewareData = _h.middlewareData, isPositioned = _h.isPositioned, computedPlacement = _h.placement, update = _h.update, rest = __rest(_h, ["context", "middlewareData", "isPositioned", "placement", "update"]);
+    }), context = _r.context, middlewareData = _r.middlewareData, isPositioned = _r.isPositioned, computedPlacement = _r.placement, update = _r.update, rest = __rest(_r, ["context", "middlewareData", "isPositioned", "placement", "update"]);
     var delayGroupContext = (0, react_1.useDelayGroup)(context, {
         enabled: enableDelayGroups,
     });
@@ -107,14 +112,32 @@ var useFloatingPosition = function (_a) {
     var focus = (0, react_1.useFocus)(context, focusOptions);
     var role = (0, react_1.useRole)(context, roleOptions);
     var dismiss = (0, react_1.useDismiss)(context, dismissOptions);
+    // List navigation for keyboard support (arrow keys)
+    var listNavigation = (0, react_1.useListNavigation)(context, {
+        listRef: (_b = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.listRef) !== null && _b !== void 0 ? _b : { current: [] },
+        activeIndex: (_c = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.activeIndex) !== null && _c !== void 0 ? _c : null,
+        onNavigate: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.onNavigate,
+        loop: (_d = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.loop) !== null && _d !== void 0 ? _d : true,
+        virtual: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.virtual,
+        orientation: (_e = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.orientation) !== null && _e !== void 0 ? _e : "vertical",
+        focusItemOnOpen: (_f = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.focusItemOnOpen) !== null && _f !== void 0 ? _f : "auto",
+        focusItemOnHover: (_g = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.focusItemOnHover) !== null && _g !== void 0 ? _g : true,
+        openOnArrowKeyDown: (_h = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.openOnArrowKeyDown) !== null && _h !== void 0 ? _h : true,
+        disabledIndices: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.disabledIndices,
+        allowEscape: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.allowEscape,
+        cols: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.cols,
+        scrollItemIntoView: listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.scrollItemIntoView,
+        enabled: (_j = listNavigationOptions === null || listNavigationOptions === void 0 ? void 0 : listNavigationOptions.enabled) !== null && _j !== void 0 ? _j : false,
+    });
     var interactionProps = (0, react_1.useInteractions)([
         hover,
         click,
         focus,
         role,
         dismiss,
+        listNavigation,
     ]);
-    var _j = (0, react_1.useTransitionStyles)(context, transitionOptions), isMounted = _j.isMounted, transitionStyles = _j.styles;
+    var _s = (0, react_1.useTransitionStyles)(context, transitionOptions), isMounted = _s.isMounted, transitionStyles = _s.styles;
     (0, react_2.useLayoutEffect)(function () {
         if (isPositioned && state !== "positioned") {
             setState("positioned");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.226.2",
+  "version": "2.227.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",