@seeqdev/qomponents 0.0.159-patch-package-alternative → 0.0.160

package/dist/index.esm.js

@@ -33,6 +33,7 @@ browserId && parseInt(browserId.split(' ', 2)[1], 10);
 const browserIsFirefox = browserId && browserName === 'Firefox';
 
 const DEFAULT_TOOL_TIP_DELAY = 500;
+const tooltipPositions = ['top', 'left', 'right', 'bottom'];
 
 const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
     ? {
@@ -1312,7 +1313,7 @@ const arrow$4 = options => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$3 = function (options) {
+const flip$4 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -1598,7 +1599,7 @@ const offset$2 = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$2 = function (options) {
+const shift$3 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -2652,7 +2653,7 @@ const offset$1 = offset$2;
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$1 = shift$2;
+const shift$2 = shift$3;
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -2660,7 +2661,7 @@ const shift$1 = shift$2;
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$2 = flip$3;
+const flip$3 = flip$4;
 
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -2999,8 +3000,8 @@ const offset = (options, deps) => ({
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = (options, deps) => ({
-  ...shift$1(options),
+const shift$1 = (options, deps) => ({
+  ...shift$2(options),
   options: [options, deps]
 });
 
@@ -3018,8 +3019,8 @@ const limitShift = (options, deps) => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$1 = (options, deps) => ({
-  ...flip$2(options),
+const flip$2 = (options, deps) => ({
+  ...flip$3(options),
   options: [options, deps]
 });
 
@@ -3186,13 +3187,13 @@ var PopperContent = React.forwardRef(
       },
       middleware: [
         offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
-        avoidCollisions && shift({
+        avoidCollisions && shift$1({
           mainAxis: true,
           crossAxis: false,
           limiter: sticky === "partial" ? limitShift() : void 0,
           ...detectOverflowOptions
         }),
-        avoidCollisions && flip$1({ ...detectOverflowOptions }),
+        avoidCollisions && flip$2({ ...detectOverflowOptions }),
         size({
           ...detectOverflowOptions,
           apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -6880,6 +6881,21 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$3;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = flip$4;
+
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -7401,8 +7417,8 @@ const QTip = () => {
                 if (tooltipRef.current && tooltipTarget.current) {
                     computePosition(tooltipTarget.current, tooltipRef.current, {
                         placement: position,
-                        middleware: [offset$2(10), arrow({ element: tooltipArrowRef.current })],
-                    }).then(({ x, y, middlewareData }) => {
+                        middleware: [offset$2(10), flip$1(), shift({ padding: 8 }), arrow({ element: tooltipArrowRef.current })],
+                    }).then(({ x, y, middlewareData, placement: finalPlacement }) => {
                         Object.assign(tooltipRef.current?.style, {
                             left: `${x}px`,
                             top: `${y}px`,
@@ -7412,7 +7428,7 @@ const QTip = () => {
                             const arrowWidth = tooltipArrowRef.current?.offsetHeight / 2;
                             const tooltipHeight = tooltipRef.current?.offsetHeight;
                             const tooltipWidth = tooltipRef.current?.offsetWidth;
-                            const style = getArrowStyle(position, x || y, arrowWidth, tooltipHeight, tooltipWidth);
+                            const style = getArrowStyle(finalPlacement, x || y, arrowWidth, tooltipHeight, tooltipWidth);
                             Object.assign(tooltipArrowRef.current.style, style);
                         }
                         setShow(true);
@@ -7426,7 +7442,7 @@ const QTip = () => {
                 : positionTooltip();
         }
     };
-    return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
+    return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-max-w-96 tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
                 (show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef })] }) }));
 };
 
@@ -28766,5 +28782,30 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
     return (jsxs("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-overflow-hidden ${extraClassNames}`, children: [jsxs("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1", children: [showArrows && (jsx$1(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })), jsx$1(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full", children: carouselItems[currentIndex] }, currentIndex), showArrows && (jsx$1(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onForwardClick }))] }), showIndicators && (jsx$1("div", { className: "tw-flex tw-gap-1 tw-mt-2", children: carouselItems.map((_, i) => (jsx$1("div", { className: `tw-w-2 tw-h-2 tw-rounded-full tw-cursor-pointer ${i === currentIndex ? 'tw-bg-sq-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
 };
 
-export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+const buttonTypes = ['button', 'reset', 'submit', 'link'];
+const buttonSizes = ['sm', 'lg'];
+const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+const iconPositions = ['left', 'right'];
+
+const iconTypes = [
+    'theme',
+    'white',
+    'dark-gray',
+    'darkish-gray',
+    'gray',
+    'color',
+    'info',
+    'text',
+    'warning',
+    'inherit',
+    'danger',
+    'theme-light',
+    'success',
+];
+
+const svgIconTypes = [...iconTypes, 'default'];
+
+const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
 //# sourceMappingURL=index.esm.js.map