@seeqdev/qomponents 0.0.126 → 0.0.128

package/dist/index.js

@@ -18978,6 +18978,260 @@ function useSpring(props, deps) {
   );
   return isFn || arguments.length == 2 ? [values, ref] : values;
 }
+function useTransition(data, props, deps) {
+  const propsFn = is.fun(props) && props;
+  const {
+    reset,
+    sort,
+    trail = 0,
+    expires = true,
+    exitBeforeEnter = false,
+    onDestroyed,
+    ref: propsRef,
+    config: propsConfig
+  } = propsFn ? propsFn() : props;
+  const ref = React.useMemo(
+    () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
+    []
+  );
+  const items = toArray(data);
+  const transitions = [];
+  const usedTransitions = React.useRef(null);
+  const prevTransitions = reset ? null : usedTransitions.current;
+  useIsomorphicLayoutEffect(() => {
+    usedTransitions.current = transitions;
+  });
+  useOnce(() => {
+    each(transitions, (t) => {
+      ref?.add(t.ctrl);
+      t.ctrl.ref = ref;
+    });
+    return () => {
+      each(usedTransitions.current, (t) => {
+        if (t.expired) {
+          clearTimeout(t.expirationId);
+        }
+        detachRefs(t.ctrl, ref);
+        t.ctrl.stop(true);
+      });
+    };
+  });
+  const keys = getKeys(items, propsFn ? propsFn() : props, prevTransitions);
+  const expired = reset && usedTransitions.current || [];
+  useIsomorphicLayoutEffect(
+    () => each(expired, ({ ctrl, item, key }) => {
+      detachRefs(ctrl, ref);
+      callProp(onDestroyed, item, key);
+    })
+  );
+  const reused = [];
+  if (prevTransitions)
+    each(prevTransitions, (t, i) => {
+      if (t.expired) {
+        clearTimeout(t.expirationId);
+        expired.push(t);
+      } else {
+        i = reused[i] = keys.indexOf(t.key);
+        if (~i)
+          transitions[i] = t;
+      }
+    });
+  each(items, (item, i) => {
+    if (!transitions[i]) {
+      transitions[i] = {
+        key: keys[i],
+        item,
+        phase: "mount" /* MOUNT */,
+        ctrl: new Controller()
+      };
+      transitions[i].ctrl.item = item;
+    }
+  });
+  if (reused.length) {
+    let i = -1;
+    const { leave } = propsFn ? propsFn() : props;
+    each(reused, (keyIndex, prevIndex) => {
+      const t = prevTransitions[prevIndex];
+      if (~keyIndex) {
+        i = transitions.indexOf(t);
+        transitions[i] = { ...t, item: items[keyIndex] };
+      } else if (leave) {
+        transitions.splice(++i, 0, t);
+      }
+    });
+  }
+  if (is.fun(sort)) {
+    transitions.sort((a, b) => sort(a.item, b.item));
+  }
+  let delay = -trail;
+  const forceUpdate = useForceUpdate();
+  const defaultProps = getDefaultProps(props);
+  const changes = /* @__PURE__ */ new Map();
+  const exitingTransitions = React.useRef(/* @__PURE__ */ new Map());
+  const forceChange = React.useRef(false);
+  each(transitions, (t, i) => {
+    const key = t.key;
+    const prevPhase = t.phase;
+    const p = propsFn ? propsFn() : props;
+    let to2;
+    let phase;
+    const propsDelay = callProp(p.delay || 0, key);
+    if (prevPhase == "mount" /* MOUNT */) {
+      to2 = p.enter;
+      phase = "enter" /* ENTER */;
+    } else {
+      const isLeave = keys.indexOf(key) < 0;
+      if (prevPhase != "leave" /* LEAVE */) {
+        if (isLeave) {
+          to2 = p.leave;
+          phase = "leave" /* LEAVE */;
+        } else if (to2 = p.update) {
+          phase = "update" /* UPDATE */;
+        } else
+          return;
+      } else if (!isLeave) {
+        to2 = p.enter;
+        phase = "enter" /* ENTER */;
+      } else
+        return;
+    }
+    to2 = callProp(to2, t.item, i);
+    to2 = is.obj(to2) ? inferTo(to2) : { to: to2 };
+    if (!to2.config) {
+      const config2 = propsConfig || defaultProps.config;
+      to2.config = callProp(config2, t.item, i, phase);
+    }
+    delay += trail;
+    const payload = {
+      ...defaultProps,
+      // we need to add our props.delay value you here.
+      delay: propsDelay + delay,
+      ref: propsRef,
+      immediate: p.immediate,
+      // This prevents implied resets.
+      reset: false,
+      // Merge any phase-specific props.
+      ...to2
+    };
+    if (phase == "enter" /* ENTER */ && is.und(payload.from)) {
+      const p2 = propsFn ? propsFn() : props;
+      const from = is.und(p2.initial) || prevTransitions ? p2.from : p2.initial;
+      payload.from = callProp(from, t.item, i);
+    }
+    const { onResolve } = payload;
+    payload.onResolve = (result) => {
+      callProp(onResolve, result);
+      const transitions2 = usedTransitions.current;
+      const t2 = transitions2.find((t3) => t3.key === key);
+      if (!t2)
+        return;
+      if (result.cancelled && t2.phase != "update" /* UPDATE */) {
+        return;
+      }
+      if (t2.ctrl.idle) {
+        const idle = transitions2.every((t3) => t3.ctrl.idle);
+        if (t2.phase == "leave" /* LEAVE */) {
+          const expiry = callProp(expires, t2.item);
+          if (expiry !== false) {
+            const expiryMs = expiry === true ? 0 : expiry;
+            t2.expired = true;
+            if (!idle && expiryMs > 0) {
+              if (expiryMs <= 2147483647)
+                t2.expirationId = setTimeout(forceUpdate, expiryMs);
+              return;
+            }
+          }
+        }
+        if (idle && transitions2.some((t3) => t3.expired)) {
+          exitingTransitions.current.delete(t2);
+          if (exitBeforeEnter) {
+            forceChange.current = true;
+          }
+          forceUpdate();
+        }
+      }
+    };
+    const springs = getSprings(t.ctrl, payload);
+    if (phase === "leave" /* LEAVE */ && exitBeforeEnter) {
+      exitingTransitions.current.set(t, { phase, springs, payload });
+    } else {
+      changes.set(t, { phase, springs, payload });
+    }
+  });
+  const context = React.useContext(SpringContext);
+  const prevContext = usePrev(context);
+  const hasContext = context !== prevContext && hasProps(context);
+  useIsomorphicLayoutEffect(() => {
+    if (hasContext) {
+      each(transitions, (t) => {
+        t.ctrl.start({ default: context });
+      });
+    }
+  }, [context]);
+  each(changes, (_, t) => {
+    if (exitingTransitions.current.size) {
+      const ind = transitions.findIndex((state) => state.key === t.key);
+      transitions.splice(ind, 1);
+    }
+  });
+  useIsomorphicLayoutEffect(
+    () => {
+      each(
+        exitingTransitions.current.size ? exitingTransitions.current : changes,
+        ({ phase, payload }, t) => {
+          const { ctrl } = t;
+          t.phase = phase;
+          ref?.add(ctrl);
+          if (hasContext && phase == "enter" /* ENTER */) {
+            ctrl.start({ default: context });
+          }
+          if (payload) {
+            replaceRef(ctrl, payload.ref);
+            if ((ctrl.ref || ref) && !forceChange.current) {
+              ctrl.update(payload);
+            } else {
+              ctrl.start(payload);
+              if (forceChange.current) {
+                forceChange.current = false;
+              }
+            }
+          }
+        }
+      );
+    },
+    reset ? void 0 : deps
+  );
+  const renderTransitions = (render) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, transitions.map((t, i) => {
+    const { springs } = changes.get(t) || t.ctrl;
+    const elem = render({ ...springs }, t.item, t, i);
+    return elem && elem.type ? /* @__PURE__ */ React__namespace.createElement(
+      elem.type,
+      {
+        ...elem.props,
+        key: is.str(t.key) || is.num(t.key) ? t.key : t.ctrl.id,
+        ref: elem.ref
+      }
+    ) : elem;
+  }));
+  return ref ? [renderTransitions, ref] : renderTransitions;
+}
+var nextKey = 1;
+function getKeys(items, { key, keys = key }, prevTransitions) {
+  if (keys === null) {
+    const reused = /* @__PURE__ */ new Set();
+    return items.map((item) => {
+      const t = prevTransitions && prevTransitions.find(
+        (t2) => t2.item === item && t2.phase !== "leave" /* LEAVE */ && !reused.has(t2)
+      );
+      if (t) {
+        reused.add(t);
+        return t.key;
+      }
+      return nextKey++;
+    });
+  }
+  return is.und(keys) ? items : is.fun(keys) ? items.map(keys) : toArray(keys);
+}
 var Interpolation = class extends FrameValue {
   constructor(source, args) {
     super();
@@ -20733,12 +20987,76 @@ const ButtonGroup = (props) => {
             : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
 };
 
+/**
+ * Carousel:
+ *  - Easily create a carousel with custom slides.
+ *  - Supports automatic sliding, navigation arrows, and slide indicators.
+ */
+const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw-rotate-90', nextIcon = 'fc-arrow-dropdown -tw-rotate-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
+    const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
+    const changeSlide = (nextIndex) => {
+        const newIndex = nextIndex % carouselItems.length;
+        setCurrentIndex(newIndex);
+        onSlide(newIndex, newIndex > currentIndex ? 'right' : 'left');
+    };
+    React.useEffect(() => {
+        if (autoSlide) {
+            const currentInterval = setInterval(() => {
+                if (continuous) {
+                    setCurrentIndex((prevCurrentIndex) => {
+                        onSlide((prevCurrentIndex + 1) % carouselItems.length, (prevCurrentIndex + 1) % carouselItems.length > prevCurrentIndex ? 'right' : 'left');
+                        return (prevCurrentIndex + 1) % carouselItems.length;
+                    });
+                }
+                else if (currentIndex === carouselItems.length - 1) {
+                    clearInterval(currentInterval);
+                }
+                else {
+                    changeSlide(currentIndex + 1);
+                }
+            }, interval);
+            return () => clearInterval(currentInterval);
+        }
+    }, [autoSlide]);
+    React.useEffect(() => {
+        if (activeIndex && activeIndex !== currentIndex) {
+            setCurrentIndex(activeIndex);
+        }
+    }, [activeIndex]);
+    const transitions = useTransition([currentIndex], {
+        keys: null,
+        exitBeforeEnter: true,
+        from: { transform: 'translate3d(100%,0,0)' },
+        enter: { transform: 'translate3d(0%,0,0)' },
+        leave: { transform: 'translate3d(0%,0,0)' },
+    });
+    const onBackClick = () => {
+        if (currentIndex === 0 && !continuous) {
+            return;
+        }
+        changeSlide((currentIndex - 1) % carouselItems.length);
+    };
+    const onForwardClick = () => {
+        if (currentIndex === carouselItems.length - 1 && !continuous) {
+            return;
+        }
+        changeSlide((currentIndex + 1) % carouselItems.length);
+    };
+    return (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full ${extraClassNames}` },
+        React.createElement("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1" },
+            showArrows && (React.createElement(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })),
+            transitions((style, i) => (React.createElement(animated.div, { "data-testid": `${testId}-${currentIndex}`, style: style }, carouselItems[currentIndex]))),
+            showArrows && (React.createElement(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 && (React.createElement("div", { className: "tw-flex tw-gap-1 tw-mt-2" }, carouselItems.map((_, i) => (React.createElement("div", { key: i, 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) })))))));
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonWithDropdown = ButtonWithDropdown;
 exports.ButtonWithPopover = ButtonWithPopover;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Collapse = Collapse;
 exports.Icon = Icon;