@orfium/ictinus 4.86.0 → 4.87.0

package/dist/components/utils/PositionInScreen/hooks.js

@@ -6,6 +6,7 @@ var _head = _interopRequireDefault(require("lodash/head"));
 var _react = require("react");
 var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var useHeights = function useHeights(parentRef, itemRef) {
   var _useState = (0, _react.useState)(0),
     parentHeight = _useState[0],
@@ -50,73 +51,129 @@ var useHeights = function useHeights(parentRef, itemRef) {
 };
 var usePositionInScreen = exports.usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
   var _useState3 = (0, _react.useState)({
-      x: -1,
-      y: -1
+      x: 0,
+      y: 0
     }),
     position = _useState3[0],
     setPosition = _useState3[1];
-  var _useHeights = useHeights(parentRef, itemRef),
-    parentHeight = _useHeights.parentHeight,
-    childHeight = _useHeights.childHeight;
-  (0, _react.useLayoutEffect)(function () {
-    // x,y are cordinates in screen
-    // width is wrapper elements dimensions
-    var _ref = parentRef ? parentRef == null ? void 0 : parentRef.getBoundingClientRect() : {
-        x: 0,
-        y: 0,
-        width: 0
-      },
-      parentX = _ref.x,
-      parentY = _ref.y,
-      parentWidth = _ref.width;
+  var _useState4 = (0, _react.useState)(0),
+    triggerWidth = _useState4[0],
+    setTriggerWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    maxHeight = _useState5[0],
+    setMaxHeight = _useState5[1];
+  var _useState6 = (0, _react.useState)(0),
+    maxWidth = _useState6[0],
+    setMaxWidth = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    isPositioned = _useState7[0],
+    setIsPositioned = _useState7[1];
+  var _useState8 = (0, _react.useState)('bottom'),
+    placement = _useState8[0],
+    setPlacement = _useState8[1];
+  var animationFrameRef = (0, _react.useRef)(0);
+  var calculatePosition = (0, _react.useCallback)(function () {
+    var _itemRef$children$, _childRect$width, _childRect$height;
+    // Define a small buffer for screen edge detection
+    var SCREEN_EDGE_BUFFER = 8;
 
-    // width is the element's that's going to be positioned dimensions
-    var _ref2 = itemRef && itemRef.children[0] ? itemRef.children[0].getBoundingClientRect() : {
-        width: 0
-      },
-      width = _ref2.width;
+    // Get parent element dimensions and position
+    var parentRect = parentRef == null ? void 0 : parentRef.getBoundingClientRect();
+    if (!parentRect) return;
 
-    // If the item-to-be-positioned is out of screen height
-    var itemYOutOfScreenHeight = parentY + parentHeight + childHeight > window.innerHeight;
+    // Get viewport-relative coordinates (without scroll offset)
+    var parentX = parentRect.left;
+    var parentY = parentRect.top;
+    var parentWidth = parentRect.width;
+    var parentHeight = parentRect.height;
 
-    // The element that we are positioning is absolutely positioned inside the relative
-    // container. So x,y are zero means the element will be positioned exactly on top
-    // of the parent element.
-    var x = 0;
-    var y = 0;
-    if (itemYOutOfScreenHeight) {
-      // We place the element height+offsetY (px) above the parent
-      y = y - childHeight - offsetY;
-      if (parentY + y < 0) {
-        // Rare case where client height is super small. We don't exactly support this.
-        // So we render it as if it was inside the screen height
-        y = parentHeight + offsetY;
-      }
+    // Get positioned element dimensions
+    var childRect = itemRef == null || (_itemRef$children$ = itemRef.children[0]) == null ? void 0 : _itemRef$children$.getBoundingClientRect();
+    var childWidth = (_childRect$width = childRect == null ? void 0 : childRect.width) != null ? _childRect$width : 0;
+    var childHeight = (_childRect$height = childRect == null ? void 0 : childRect.height) != null ? _childRect$height : 0;
+
+    // Calculate positions (viewport-relative, without scroll)
+    var x = parentX + offsetX;
+    var y;
+    var currentPlacement = 'bottom';
+
+    // Check if element would overflow screen bounds (with buffer) when placed below
+    var spaceBelow = window.innerHeight - (parentRect.bottom + offsetY) - SCREEN_EDGE_BUFFER;
+    var spaceAbove = parentRect.top - offsetY - SCREEN_EDGE_BUFFER;
+
+    // First try to place it below, if there's not enough space, try above
+    if (childHeight <= spaceBelow) {
+      // Place below - enough space
+      y = parentY + parentHeight + offsetY;
+      currentPlacement = 'bottom';
+    } else if (childHeight <= spaceAbove) {
+      // Place above - enough space above
+      y = parentY - childHeight - offsetY;
+      currentPlacement = 'top';
     } else {
-      // We place the element offsetY (px) under the parent
-      y = parentHeight + offsetY;
+      // Not enough space either way, place where there's more space and allow scrolling
+      if (spaceBelow >= spaceAbove) {
+        y = parentY + parentHeight + offsetY;
+        currentPlacement = 'bottom';
+      } else {
+        y = parentY - childHeight - offsetY;
+        currentPlacement = 'top';
+      }
     }
 
-    // If the item-to-be-positioned is out of screen width
-    var itemXOutOfScreenWidth = parentX + width > window.innerWidth;
+    // Check if element would overflow screen bounds horizontally (with buffer)
+    var itemXOutOfScreenWidth = x + childWidth > window.innerWidth - SCREEN_EDGE_BUFFER;
     if (itemXOutOfScreenWidth) {
-      // We place the element parentWidth-width-offsetX (px) at the left of the parent
-      x = x + parentWidth - width - offsetX;
+      // Align to right edge of parent if would overflow right
+      x = parentX + parentWidth - childWidth - offsetX;
+      // Ensure we don't position outside the left edge
+      if (x < SCREEN_EDGE_BUFFER) {
+        x = SCREEN_EDGE_BUFFER;
+      }
+    }
+
+    // Calculate maxHeight - space available from y position to bottom/top of screen based on placement
+    var availableHeight;
+    if (currentPlacement === 'top') {
+      availableHeight = parentY - SCREEN_EDGE_BUFFER;
     } else {
-      // We place the element offset (px) at the right of the parent
-      x = offsetX;
+      availableHeight = window.innerHeight - (parentY + parentHeight + offsetY) - SCREEN_EDGE_BUFFER;
     }
+
+    // Calculate maxWidth - space available from x position to right edge of screen
+    var availableRightSpace = window.innerWidth - x - SCREEN_EDGE_BUFFER;
     setPosition({
       x: x,
       y: y
     });
-  }, [parentRef, itemRef, visible, offsetY, offsetX, parentHeight, childHeight]);
-  return position;
+    setMaxHeight(availableHeight);
+    setMaxWidth(availableRightSpace);
+    setIsPositioned(true);
+    setPlacement(currentPlacement);
+    setTriggerWidth(parentWidth);
+  }, [parentRef, itemRef, offsetY, offsetX]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!visible) return;
+    animationFrameRef.current = requestAnimationFrame(function () {
+      calculatePosition();
+    });
+    return function () {
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [calculatePosition, visible]);
+  return _extends({}, position, {
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    isPositioned: isPositioned,
+    calculatePosition: calculatePosition,
+    placement: placement,
+    triggerWidth: triggerWidth
+  });
 };
 var useWrapperWidth = exports.useWrapperWidth = function useWrapperWidth(hasWrapperWidth, wrapperRef) {
-  var _useState4 = (0, _react.useState)(),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState9 = (0, _react.useState)(),
+    width = _useState9[0],
+    setWidth = _useState9[1];
   (0, _react.useLayoutEffect)(function () {
     if (hasWrapperWidth) {
       var _wrapperRef$getBoundi;

package/dist/hooks/useOverlayStack.d.ts

@@ -0,0 +1,4 @@
+import { RefObject, DOMAttributes } from 'react';
+export declare function useOverlayStack(visible: boolean, ref: RefObject<Element | null>, onClose?: () => void): {
+    overlayProps: DOMAttributes<Element>;
+};

package/dist/hooks/useOverlayStack.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useOverlayStack = useOverlayStack;
+var _react = require("react");
+var visibleOverlays = [];
+function useOverlayStack(visible, ref, onClose) {
+  (0, _react.useEffect)(function () {
+    if (visible && !visibleOverlays.includes(ref)) {
+      visibleOverlays.push(ref);
+    }
+    return function () {
+      var index = visibleOverlays.indexOf(ref);
+      if (index >= 0) {
+        visibleOverlays.splice(index, 1);
+      }
+    };
+  }, [ref, visible]);
+  var onHide = (0, _react.useCallback)(function () {
+    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
+      onClose();
+    }
+  }, [onClose, ref]);
+  (0, _react.useEffect)(function () {
+    if (!visible) return;
+    var handleClickOutside = function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+        onHide();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [visible, onHide, ref]);
+  var onKeyDown = function onKeyDown(e) {
+    if (e.key === 'Escape' && !e.nativeEvent.isComposing) {
+      e.stopPropagation();
+      e.preventDefault();
+      onHide();
+    }
+  };
+  return {
+    overlayProps: {
+      onKeyDown: onKeyDown
+    }
+  };
+}

package/dist/hooks/useTypeColorToColorMatch.js

@@ -68,7 +68,7 @@ var TypeColorToColorMatchProvider = exports.TypeColorToColorMatchProvider = func
   var calculateColorBetweenColorAndType = React.useCallback(function (color, type) {
     var calculatedColor = color ? (0, _themeFunctions.calculateActualColorFromComponentProp)(color) : undefined;
     return calculatedColor ? calculatedColor : typesShadesColor[type];
-  }, [types, theme, typesShadesColor]);
+  }, [typesShadesColor]);
   return (0, _react2.jsx)(TypeColorToColorMatchContext.Provider, {
     value: {
       typesShadesColor: typesShadesColor,

package/dist/test/utils.d.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
 import React from 'react';
 export declare const selectDropdownOption: (dropdownInput: HTMLInputElement, option: string) => Promise<void>;
-declare const renderWithThemeProvider: (children: React.ReactElement) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement>;
+declare const renderWithThemeProvider: (children: React.ReactElement) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { renderHook, renderWithThemeProvider as render };

package/dist/theme/palette.d.ts

@@ -28,9 +28,9 @@ export declare const MAX_SHADE = 950;
  * Each color has again the above variations (shades)
  **/
 export declare const mainTypes: readonly ["primary", "secondary", "success", "error", "warning", "info", "light", "link"];
-export declare type flatPalette = Record<typeof flatColors[number], generatedColorShades>;
-export declare type palePalette = Record<typeof paleColors[number], string>;
-export declare type generatedColorShades = Record<typeof colorShades[number], string>;
+export declare type flatPalette = Record<(typeof flatColors)[number], generatedColorShades>;
+export declare type palePalette = Record<(typeof paleColors)[number], string>;
+export declare type generatedColorShades = Record<(typeof colorShades)[number], string>;
 /**
  * Palette is end output of what is produced and exported to the client projects
  **/
@@ -44,14 +44,14 @@ export declare type Palette = {
     pale: palePalette;
     white: string;
     black: string;
-} & Record<typeof mainTypes[number], generatedColorShades>;
+} & Record<(typeof mainTypes)[number], generatedColorShades>;
 export declare type formFieldStyles = 'filled' | 'outlined' | 'elevated';
 export declare type GetColor = {
-    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
-    (color: typeof flatColors[number], variant: typeof colorShades[number], scope: 'flat'): string;
-    (color: TextColorTypes, variant: typeof colorShades[number], scope: 'text'): string;
-    (color: typeof mainTypes[number], variant: typeof colorShades[number], scope: 'normal'): string;
-    (color: typeof paleColors[number], variant: null, scope: 'pale'): string;
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number]): string;
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number], scope: 'flat'): string;
+    (color: TextColorTypes, variant: (typeof colorShades)[number], scope: 'text'): string;
+    (color: (typeof mainTypes)[number], variant: (typeof colorShades)[number], scope: 'normal'): string;
+    (color: (typeof paleColors)[number], variant: null, scope: 'pale'): string;
 };
 export declare const getColor: (palette: Palette) => GetColor;
 /**
@@ -59,7 +59,7 @@ export declare const getColor: (palette: Palette) => GetColor;
  * swatches are calculated based on accessibility by getAAColor function and splited to those two colors
  **/
 export declare type GetAAColorFromSwatches = {
-    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number]): string;
 };
 export declare const getAAColorFromSwatches: (palette: Palette) => GetAAColorFromSwatches;
 export declare type GetAAColor = {

package/dist/theme/palette.js

@@ -50,11 +50,14 @@ var getColor = exports.getColor = function getColor(palette) {
     var endColor;
     if (variant === null) {
       var _palette$scope;
+      //@ts-ignore
       endColor = palette == null || (_palette$scope = palette[scope]) == null ? void 0 : _palette$scope[color];
     } else if (scope === 'normal') {
+      //@ts-ignore
       endColor = palette[color][variant];
     } else {
       var _palette$scope2;
+      //@ts-ignore
       endColor = palette == null || (_palette$scope2 = palette[scope]) == null || (_palette$scope2 = _palette$scope2[color]) == null ? void 0 : _palette$scope2[variant];
     }
     (0, _helpers.errorHandler)(_utils.getColorErrors, endColor);

package/dist/theme/utils.js

@@ -39,6 +39,7 @@ var colorShadesCreator = exports.colorShadesCreator = function colorShadesCreato
     return [].concat(tints(weight).reverse(), [base], shades(weight));
   };
   return all().reduce(function (acc, _, index) {
+    //@ts-ignore
     acc["" + (index + 1) * 50] = _;
     return acc;
   }, {});
@@ -57,16 +58,23 @@ var colorShadesCreator = exports.colorShadesCreator = function colorShadesCreato
  * a complete palette.
  */
 var iterateObject = exports.iterateObject = function iterateObject(obj, func) {
-  return Object.keys(obj).reduce(function (acc, value) {
-    if (typeof obj[value] !== 'object') {
-      acc[value] = func(obj[value], value);
-    } else if (EXCLUDED.includes(value)) {
-      acc[value] = obj[value];
-    } else {
-      acc[value] = iterateObject(obj[value], func);
-    }
-    return acc;
-  }, {});
+  return (
+    //@ts-ignore
+    Object.keys(obj).reduce(function (acc, value) {
+      //@ts-ignore
+      if (typeof obj[value] !== 'object') {
+        //@ts-ignore
+        acc[value] = func(obj[value], value);
+      } else if (EXCLUDED.includes(value)) {
+        //@ts-ignore
+        acc[value] = obj[value];
+      } else {
+        //@ts-ignore
+        acc[value] = iterateObject(obj[value], func);
+      }
+      return acc;
+    }, {})
+  );
 };
 var enhancePaletteWithShades = exports.enhancePaletteWithShades = function enhancePaletteWithShades(obj) {
   return iterateObject(obj, function (value, name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.86.0",
+  "version": "4.87.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@storybook/react": "^6.5.16",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "^5.1.2",
     "@testing-library/user-event": "^13.1.8",
     "@types/events": "^3.0.0",