@kubit-ui-web/react-components 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/esm/components/calendar/selector/yearSelector/yearSelector.js

@@ -1,3 +1,61 @@
-import{j as t}from"../../../../_virtual/jsx-runtime.js";import{useMemo as e}from"react";import{Text as r}from"../../../text/text.js";import{CustomComponent as s}from"../../../../lib/components/customComponent/customComponent.js";import{useRoveFocus as o}from"../../../../lib/hooks/useRoveFocus/useRoveFocus.js";import{useUtilsProvider as i}from"../../../../lib/provider/utilsProvider/utilsProvider.js";import{pickCustomAttributes as a}from"../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{getYearList as l}from"../../utils/getYearList.js";import{setYear as n}from"../../utils/setYear.js";import{keyUpMove as m,keyTabMove as u,keyRightMove as c,keyLeftMove as d,keyDownMove as p}from"./utils/yearSelector.utils.js";const f=({cssClasses:f,currentDate:j,maxDate:y,minDate:b,onYearClick:x,setCurrentDate:g,today:v,...k})=>{const{transformDate:h}=i(),C=k["data-testid"],D=e(()=>({currentFocusSelected:l(b,y).indexOf(j?j.getFullYear():/* @__PURE__ */(new Date).getFullYear()),keyDownMove:p(l(b,y)),keyLeftMove:d(l(b,y)),keyRightMove:c(l(b,y)),keyTabMove:u,keyUpMove:m(l(b,y)),size:l(b,y).length}),[l(b,y).length,j,b,y]),[F,,Y]=o(D);/* @__PURE__ */
-return t.jsx("ul",{ref:Y,className:f?.yearslist,"data-testid":"tbody-years-list",children:l(b,y).map((e,o)=>{const i=((t,e)=>{let r;return r=t.getFullYear()===e?"selected":e===v.getFullYear()?"current":"default",r})(j,e),l={"data-state":i};/* @__PURE__ */
-return t.jsx("li",{className:f?.yearlistitem,...a(l),children:/* @__PURE__ */t.jsx(s,{"aria-label":String(e),className:f?.yearelement,component:"button",focus:F===o,index:o,type:"button",...a(l),onSelectItem:()=>{const t=new Date(j);g(h(n(t,e))),x?.(e.toString())},children:/* @__PURE__ */t.jsx(r,{additionalClasses:{text:f?.year},component:"span",customAttributes:l,"data-testid":C,children:e})})},String(e))})})};export{f as YearSelector};
+import { pickCustomAttributes } from "../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { useUtilsProvider } from "../../../../lib/provider/utilsProvider/utilsProvider.js";
+import { CustomComponent } from "../../../../lib/components/customComponent/customComponent.js";
+import { Text } from "../../../text/text2.js";
+import { useRoveFocus } from "../../../../lib/hooks/useRoveFocus/useRoveFocus.js";
+import { getYearList } from "../../utils/getYearList.js";
+import { setYear } from "../../utils/setYear.js";
+import { keyDownMove, keyLeftMove, keyRightMove, keyTabMove, keyUpMove } from "./utils/yearSelector.utils.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+const YearSelector = ({ cssClasses: o, currentDate: s, maxDate: c, minDate: l, onYearClick: u, setCurrentDate: d, today: f, ...p }) => {
+	let { transformDate: m } = useUtilsProvider(), h = p["data-testid"], [g, , _] = useRoveFocus(useMemo(() => ({
+		currentFocusSelected: getYearList(l, c).indexOf(s ? s.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear()),
+		keyDownMove: keyDownMove(getYearList(l, c)),
+		keyLeftMove: keyLeftMove(getYearList(l, c)),
+		keyRightMove: keyRightMove(getYearList(l, c)),
+		keyTabMove,
+		keyUpMove: keyUpMove(getYearList(l, c)),
+		size: getYearList(l, c).length
+	}), [
+		getYearList(l, c).length,
+		s,
+		l,
+		c
+	])), v = (e, t) => {
+		let n;
+		return n = e.getFullYear() === t ? "selected" : t === f.getFullYear() ? "current" : "default", n;
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		ref: _,
+		className: o?.yearslist,
+		"data-testid": "tbody-years-list",
+		children: getYearList(l, c).map((t, r) => {
+			let i = v(s, t), a = { "data-state": i };
+			return /* @__PURE__ */ jsx("li", {
+				className: o?.yearlistitem,
+				...pickCustomAttributes(a),
+				children: /* @__PURE__ */ jsx(CustomComponent, {
+					"aria-label": String(t),
+					className: o?.yearelement,
+					component: "button",
+					focus: g === r,
+					index: r,
+					type: "button",
+					...pickCustomAttributes(a),
+					onSelectItem: () => {
+						d(m(setYear(new Date(s), t))), u?.(t.toString());
+					},
+					children: /* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: o?.year },
+						component: "span",
+						customAttributes: a,
+						"data-testid": h,
+						children: t
+					})
+				})
+			}, String(t));
+		})
+	});
+};
+export { YearSelector };

package/dist/esm/components/calendar/utils/getAllDaysInMonth.js

@@ -1 +1,2 @@
-const e=(e,t)=>Array.from({length:new Date(t,e,0).getDate()},(a,n)=>new Date(t,e-1,n+1));export{e as getAllDaysInMonth};
+const getAllDaysInMonth = (e, t) => Array.from({ length: new Date(t, e, 0).getDate() }, (n, r) => new Date(t, e - 1, r + 1));
+export { getAllDaysInMonth };

package/dist/esm/components/calendar/utils/getFirstDayOfMonth.js

@@ -1 +1,2 @@
-const e=(e,t)=>new Date(e,t,1).getDay();export{e as getFirstDayOfMonth};
+const getFirstDayOfMonth = (e, t) => new Date(e, t, 1).getDay();
+export { getFirstDayOfMonth };

package/dist/esm/components/calendar/utils/getState.js

@@ -1 +1,7 @@
-import{STATES as e}from"../../../lib/types/states/states.js";const t="ddMMyyyy",s=({dayFormatted:s,formatDate:E,hasRange:a,isGhostSelected:o,isSelectedToLeft:D,isSelectedToRight:T,selectedDate:d,today:A})=>{let R=e.DEFAULT;return D(s)?R=e.END_DATE_RANGE:T(s)?R=e.START_DATE_RANGE:o(s)?R=e.MIDLE_DATE_RANGE:d[0]&&s&&!a&&E(d[0],t)===E(s,t)?R=e.SELECTED:s&&A===E(s,t)&&(R=e.CURRENT_DAY),R};export{s as getStateDay};
+import { STATES } from "../../../lib/types/states/states.js";
+var NEUTRAL_DATE = "ddMMyyyy";
+const getStateDay = ({ dayFormatted: e, formatDate: t, hasRange: n, isGhostSelected: r, isSelectedToLeft: i, isSelectedToRight: a, selectedDate: o, today: s }) => {
+	let c = STATES.DEFAULT;
+	return i(e) ? c = STATES.END_DATE_RANGE : a(e) ? c = STATES.START_DATE_RANGE : r(e) ? c = STATES.MIDLE_DATE_RANGE : o[0] && e && !n && t(o[0], NEUTRAL_DATE) === t(e, NEUTRAL_DATE) ? c = STATES.SELECTED : e && s === t(e, NEUTRAL_DATE) && (c = STATES.CURRENT_DAY), c;
+};
+export { getStateDay };

package/dist/esm/components/calendar/utils/getYearList.js

@@ -1 +1,6 @@
-const e=(e,t)=>{const r=t.getFullYear(),l=e.getFullYear(),o=[];for(let u=r;u>=l;u--)o.push(u);return o};export{e as getYearList};
+const getYearList = (e, t) => {
+	let n = t.getFullYear(), r = e.getFullYear(), i = [];
+	for (let e = n; e >= r; e--) i.push(e);
+	return i;
+};
+export { getYearList };

package/dist/esm/components/calendar/utils/groupDaysByWeeks.js

@@ -1 +1,6 @@
-const t=t=>{const e=[];for(let n=0;n<t.length;n+=7)e.push(t.slice(n,n+7));return e};export{t as groupDaysByWeeks};
+const groupDaysByWeeks = (e) => {
+	let t = [];
+	for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
+	return t;
+};
+export { groupDaysByWeeks };

package/dist/esm/components/calendar/utils/handleKeysmoves.js

@@ -1 +1,10 @@
-const t=(t,e)=>t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear(),e=(e,a,n)=>t(a,n)?e.length+a.getDate()-1:e.length,a=(e,a,n)=>t(a,n)?e.length+a.getDate()-1:e.length,n=({currentDate:e,dayList:a,daysAndEmptyDaysUntilMaxDate:n,firstEmptyAndDisabledDays:D,maxDate:s,minDate:y})=>l=>t(y,e)&&l===D?a.length-1:l===D?t(s,e)?n:a.length-1:l<=D+7?D:l-7,D=({currentDate:e,dayList:a,daysAndEmptyDaysUntilMaxDate:n,firstEmptyAndDisabledDays:D,maxDate:s,minDate:y})=>l=>{if(t(y,e)&&l===a.length-1)return D;if(t(s,e)){if(l===n)return D;if(l+D+1>=s.getDate()-7&&l!==n)return s.getDate()+D-1}return l===a.length-1?D:l>=a.length-7?a.length-1:l+7},s=({currentDate:e,dayList:a,daysAndEmptyDaysUntilMaxDate:n,firstEmptyAndDisabledDays:D,maxDate:s,minDate:y})=>l=>l===D?t(y,e)?a.length-1:t(s,e)?n:a.length-1:l-1,y=({currentDate:e,dayList:a,daysAndEmptyDaysUntilMaxDate:n,firstEmptyAndDisabledDays:D,maxDate:s,minDate:y})=>l=>t(y,e)&&l===a.length-1||t(s,e)&&l===n||l===a.length-1?D:l+1,l=t=>t,i=({firstEmptyAndDisabledDays:t})=>()=>t,r=({currentDate:e,dayList:a,daysAndEmptyDaysUntilMaxDate:n,maxDate:D})=>()=>t(D,e)?n:a.length-1;export{a as getDaysAndEmptyDaysUntilMaxDate,e as getFirstEmptyAndDisabledDays,D as handleKeyDownMove,s as handleKeyLeftMove,r as handleKeyPageDownMove,i as handleKeyPageUpMove,y as handleKeyRightMove,l as handleKeyTabMove,n as handleKeyUpMove};
+var ONE_DAY = 1, DAYS_PER_WEEK = 7, isSameMonthAndYear = (e, t) => e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+const getFirstEmptyAndDisabledDays = (e, t, n) => isSameMonthAndYear(t, n) ? e.length + t.getDate() - 1 : e.length, getDaysAndEmptyDaysUntilMaxDate = (e, t, n) => isSameMonthAndYear(t, n) ? e.length + t.getDate() - 1 : e.length, handleKeyUpMove = ({ currentDate: e, dayList: n, daysAndEmptyDaysUntilMaxDate: r, firstEmptyAndDisabledDays: i, maxDate: a, minDate: o }) => (s) => isSameMonthAndYear(o, e) && s === i ? n.length - 1 : s === i ? isSameMonthAndYear(a, e) ? r : n.length - 1 : s <= i + 7 ? i : s - DAYS_PER_WEEK, handleKeyDownMove = ({ currentDate: e, dayList: n, daysAndEmptyDaysUntilMaxDate: r, firstEmptyAndDisabledDays: i, maxDate: a, minDate: o }) => (s) => {
+	if (isSameMonthAndYear(o, e) && s === n.length - 1) return i;
+	if (isSameMonthAndYear(a, e)) {
+		if (s === r) return i;
+		if (s + i + 1 >= a.getDate() - 7 && s !== r) return a.getDate() + i - 1;
+	}
+	return s === n.length - 1 ? i : s >= n.length - 7 ? n.length - 1 : s + DAYS_PER_WEEK;
+}, handleKeyLeftMove = ({ currentDate: t, dayList: n, daysAndEmptyDaysUntilMaxDate: r, firstEmptyAndDisabledDays: i, maxDate: a, minDate: o }) => (s) => s === i ? isSameMonthAndYear(o, t) ? n.length - 1 : isSameMonthAndYear(a, t) ? r : n.length - 1 : s - ONE_DAY, handleKeyRightMove = ({ currentDate: t, dayList: n, daysAndEmptyDaysUntilMaxDate: r, firstEmptyAndDisabledDays: i, maxDate: a, minDate: o }) => (s) => isSameMonthAndYear(o, t) && s === n.length - 1 || isSameMonthAndYear(a, t) && s === r || s === n.length - 1 ? i : s + ONE_DAY, handleKeyTabMove = (e) => e, handleKeyPageUpMove = ({ firstEmptyAndDisabledDays: e }) => () => e, handleKeyPageDownMove = ({ currentDate: e, dayList: t, daysAndEmptyDaysUntilMaxDate: n, maxDate: r }) => () => isSameMonthAndYear(r, e) ? n : t.length - 1;
+export { getDaysAndEmptyDaysUntilMaxDate, getFirstEmptyAndDisabledDays, handleKeyDownMove, handleKeyLeftMove, handleKeyPageDownMove, handleKeyPageUpMove, handleKeyRightMove, handleKeyTabMove, handleKeyUpMove };

package/dist/esm/components/calendar/utils/setMonth.js

@@ -1 +1,2 @@
-const t=(t,o)=>t.setMonth(o);export{t as setMonth};
+const setMonth = (e, t) => e.setMonth(t);
+export { setMonth };

package/dist/esm/components/calendar/utils/setYear.js

@@ -1 +1,2 @@
-const e=(e,t)=>e.setFullYear(t);export{e as setYear};
+const setYear = (e, t) => e.setFullYear(t);
+export { setYear };

package/dist/esm/components/card/card.js

@@ -0,0 +1,17 @@
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { CardStandAlone } from "./cardStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Card = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "CARD",
+		variant: t
+	});
+	return /* @__PURE__ */ jsx(CardStandAlone, {
+		ref: r,
+		...n,
+		cssClasses: i
+	});
+});
+export { Card };

package/dist/esm/components/card/cardStandAlone.js

@@ -0,0 +1,43 @@
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CardStandAlone = forwardRef(({ content: t, cssClasses: n, footer: r, header: i, onClick: a, onMouseEnter: o, onMouseLeave: s, state: c, ...l }, u) => {
+	let d = { "data-state": c }, f = pickCustomAttributes(l), p = (e, t) => e ? isValidElement(e) ? /* @__PURE__ */ jsx("div", {
+		className: t,
+		children: e
+	}) : /* @__PURE__ */ jsx("div", {
+		className: t,
+		children: /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: t },
+			...processTextProp(e)
+		})
+	}) : null, m = a ? {
+		onClick: a,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a?.(e));
+		},
+		onMouseEnter: o,
+		onMouseLeave: s,
+		role: "button",
+		tabIndex: 0
+	} : {
+		onMouseEnter: o,
+		onMouseLeave: s
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: u,
+		className: n?.card,
+		"data-testid": "card",
+		...d,
+		...f,
+		...m,
+		children: [
+			p(i, n?.header),
+			p(t, n?.content),
+			p(r, n?.footer)
+		]
+	});
+});
+export { CardStandAlone };

package/dist/esm/components/card/index.js

@@ -0,0 +1,2 @@
+export {  Card  } from './card.js';
+export {  CardStandAlone  } from './cardStandAlone.js';

package/dist/esm/components/carousel/carousel.js

@@ -1,2 +1,54 @@
-import{j as e}from"../../_virtual/jsx-runtime.js";import{forwardRef as n,useState as a,useRef as r,useCallback as t,useImperativeHandle as o}from"react";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{CarouselStandAlone as s}from"./carouselStandAlone.js";import{useCarousel as i}from"./hooks/useCarousel.js";import{buildScreenReaderOnly as m}from"./utils/carousel.utils.js";const u=n(({additionalClasses:n,allowModifySliceWidth:u=!1,autoFitContainer:c=!1,centerExtremesWhenExtraPadding:g=!1,centerMode:d=!1,circular:P,defaultPage:f=0,disabled:C=!1,extraPadding:h,numElementsPerPage:R,numElementsToSlide:E,onePageAlign:x="center",onNumElementsPerPageChange:S,onNumPagesChange:j,onPageChange:p,screenReaderOnly:w,variant:M,...N},y)=>{const[v,W]=a(f),[b,A]=a(0),O=r(null),k=r(null),F=r(null),T=l({additionalClassNames:n,component:"CAROUSEL",variant:M}),L=t(e=>{A(e),j?.(e)},[j]),U=t(e=>{W(e),p?.(e)},[p]),_=R?Math.min(N.elements.length,R):R,q=u&&!!R&&!c,{allowShiftRef:z,changePage:B,currentPageRef:D,numElementsPerPageRef:G,numPagesRef:H}=i({allowModifySliceWidth:q,autoFitContainer:c,centerExtremesWhenExtraPadding:g,centerMode:d,circular:P,contentContainerRef:F,defaultPage:f,disabled:C,elements:N.elements,extraPadding:h,numElementsPerPage:_,numElementsToSlide:E,onePageAlign:x,onNumElementsPerPageChange:S,onNumPagesChange:L,onPageChange:U,rootContainerRef:O,viewerContainerRef:k});o(y,()=>(O.current&&(O.current.changePage=B,O.current.allowShiftRef=z,O.current.currentPageRef=D,O.current.numElementsPerPageRef=G,O.current.numPagesRef=H),O.current),[B]);const I=m({currentPage:v,numPages:b,screenReaderOnly:w});/* @__PURE__ */
-return e.jsx(s,{ref:O,allowModifySliceWidth:q,centerMode:d,contentContainerRef:F,cssClasses:T,disabled:C||b<=1,screenReaderOnly:I,viewerContainerRef:k,...N})});export{u as Carousel};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { CarouselStandAlone } from "./carouselStandAlone.js";
+import { useCarousel } from "./hooks/useCarousel.js";
+import { buildScreenReaderOnly } from "./utils/carousel.utils.js";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const Carousel = forwardRef(({ additionalClasses: t, allowModifySliceWidth: n = !1, autoFitContainer: r = !1, centerExtremesWhenExtraPadding: i = !1, centerMode: a = !1, circular: o, defaultPage: s = 0, disabled: c = !1, extraPadding: l, numElementsPerPage: u, numElementsToSlide: d, onePageAlign: f = "center", onNumElementsPerPageChange: p, onNumPagesChange: m, onPageChange: h, screenReaderOnly: g, variant: _, ...v }, y) => {
+	let [b, x] = useState(s), [S, C] = useState(0), w = useRef(null), T = useRef(null), E = useRef(null), D = useClassName({
+		additionalClassNames: t,
+		component: "CAROUSEL",
+		variant: _
+	}), O = useCallback((e) => {
+		C(e), m?.(e);
+	}, [m]), k = useCallback((e) => {
+		x(e), h?.(e);
+	}, [h]), A = u && Math.min(v.elements.length, u), j = n && !!u && !r, { allowShiftRef: M, changePage: N, currentPageRef: P, numElementsPerPageRef: F, numPagesRef: I } = useCarousel({
+		allowModifySliceWidth: j,
+		autoFitContainer: r,
+		centerExtremesWhenExtraPadding: i,
+		centerMode: a,
+		circular: o,
+		contentContainerRef: E,
+		defaultPage: s,
+		disabled: c,
+		elements: v.elements,
+		extraPadding: l,
+		numElementsPerPage: A,
+		numElementsToSlide: d,
+		onePageAlign: f,
+		onNumElementsPerPageChange: p,
+		onNumPagesChange: O,
+		onPageChange: k,
+		rootContainerRef: w,
+		viewerContainerRef: T
+	});
+	useImperativeHandle(y, () => (w.current && (w.current.changePage = N, w.current.allowShiftRef = M, w.current.currentPageRef = P, w.current.numElementsPerPageRef = F, w.current.numPagesRef = I), w.current), [N]);
+	let L = buildScreenReaderOnly({
+		currentPage: b,
+		numPages: S,
+		screenReaderOnly: g
+	});
+	return /* @__PURE__ */ jsx(CarouselStandAlone, {
+		ref: w,
+		allowModifySliceWidth: j,
+		centerMode: a,
+		contentContainerRef: E,
+		cssClasses: D,
+		disabled: c || S <= 1,
+		screenReaderOnly: L,
+		viewerContainerRef: T,
+		...v
+	});
+});
+export { Carousel };

package/dist/esm/components/carousel/carouselStandAlone.js

@@ -1,3 +1,36 @@
-import{j as e}from"../../_virtual/jsx-runtime.js";import{forwardRef as t}from"react";const a=t(({allowModifySliceWidth:t,centerMode:a,contentContainer:r,contentContainerRef:i,cssClasses:n,disabled:s,elements:o,rootContainer:d,screenReaderOnly:l,viewerContainer:c,viewerContainerRef:f,...m},v)=>{const j=m["data-testid"]??"carousel";/* @__PURE__ */
-return e.jsxs("div",{ref:v,"aria-roledescription":"carousel",className:n?.carousel,"data-testid":j,...m,...d,children:[
-/* @__PURE__ */e.jsx("div",{ref:f,className:n?.viewer,"data-allow-modify-slice-width":t,"data-disabled":s,"data-testid":`${j}-viewer`,...c,children:/* @__PURE__ */e.jsx("div",{ref:i,"aria-live":"polite",className:n?.content,"data-center-mode":a,"data-testid":`${j}-content`,...r,children:o})}),l&&/* @__PURE__ */e.jsx("screen-reader-only",{"aria-live":"off",...l,children:l.content})]})});export{a as CarouselStandAlone};
+import { ScreenReaderOnly } from "../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CarouselStandAlone = forwardRef(({ allowModifySliceWidth: e, centerMode: t, contentContainer: n, contentContainerRef: r, cssClasses: i, disabled: a, elements: o, rootContainer: s, screenReaderOnly: c, viewerContainer: l, viewerContainerRef: u, ...d }, f) => {
+	let p = d["data-testid"] ?? "carousel";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: f,
+		"aria-roledescription": "carousel",
+		className: i?.carousel,
+		"data-testid": p,
+		...d,
+		...s,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: u,
+			className: i?.viewer,
+			"data-allow-modify-slice-width": e,
+			"data-disabled": a,
+			"data-testid": `${p}-viewer`,
+			...l,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: r,
+				"aria-live": "polite",
+				className: i?.content,
+				"data-center-mode": t,
+				"data-testid": `${p}-content`,
+				...n,
+				children: o
+			})
+		}), c && /* @__PURE__ */ jsx(ScreenReaderOnly, {
+			ariaLive: "off",
+			...c,
+			children: c.content
+		})]
+	});
+});
+export { CarouselStandAlone };

package/dist/esm/components/carousel/hooks/useCarousel.js

@@ -1 +1,184 @@
-import{useRef as e,useCallback as n,useEffect as t}from"react";import{ResizeObserver as r}from"../../../lib/utils/resizeObserver/resizeObserver.js";import{useCarouselKeyNavigation as a}from"./useCarouselKeyNavigation.js";import{useCarouselSwipe as i}from"./useCarouselSwipe.js";import c from"./utils/calc.utils.js";import o from"./utils/constants.js";import s from"./utils/dom.utils.js";const u=({allowModifySliceWidth:u=!1,autoFitContainer:l=!1,centerExtremesWhenExtraPadding:d=!1,centerMode:m=!1,circular:g=!0,contentContainerRef:P,defaultPage:f=0,disabled:C=!1,elements:h,extraPadding:w=0,numElementsPerPage:E,numElementsToSlide:I,onePageAlign:x="center",onNumElementsPerPageChange:R,onNumPagesChange:p,onPageChange:v,rootContainerRef:L,viewerContainerRef:N})=>{const V=e(!0),S=e(f),y=e(f),T=e(E),A=e(0),b=n(e=>{const n=P.current;if(!n||!T.current||e.propertyName!==o.PROPERTY_TO_HANDLE_TRANSITION_END||A.current<1)return;n.setAttribute("data-shifting","false");const{newPage:t}=s.udpateCarouselPositionOnEdge({contentContainer:n,currentPage:y.current,elementsLength:h.length,extraPadding:w,numElementsPerPage:T.current,numPages:A.current});y.current=t,S.current!==y.current&&(S.current=y.current,v?.(y.current));const{firstIndexInView:r,lastIndexInView:a}=c.calcFirstAndLastIndexInCarouselView({currentPage:y.current,elementsLength:h.length,isCircular:g,numElementsPerPage:T.current,numElementsToSlide:I});s.updateContentElementsAriaVisibility({contentContainer:n,firstIndexInView:r,lastIndexInView:a}),m&&s.applyCenterMode({contentContainer:n,firstIndexInView:r,lastIndexInView:a,numElementsPerPage:T.current}),V.current=!0},[h,w,I,g,m,v]),O=n(({animated:e=!0,newPage:n})=>{const t=N.current,r=P.current;if(!t||!r||!V.current||!T.current||!h.length||A.current<1||(g?n<-1:n<0)||(g?n>A.current:n>A.current-1))return;e&&r.setAttribute("data-shifting","true"),s.deleteCenterMode({contentContainer:r}),y.current=n;const{firstIndexInView:a,lastIndexInView:i}=c.calcFirstAndLastIndexInCarouselView({currentPage:y.current,elementsLength:h.length,isCircular:g,numElementsPerPage:T.current,numElementsToSlide:I});u||s.updateViewerWidth({contentContainer:r,extraPadding:w,firstIndexInView:a,lastIndexInView:i,viewerContainer:t});const l=r.style.left,m=c.calcContentContainerLeftPosition({centerExtremesWhenExtraPadding:d,circular:g,contentContainer:r,currentPage:y.current,extraPadding:w,firstIndexInView:a,numPages:A.current});r.style.left=m,e&&l!==m?V.current=!1:b({propertyName:o.PROPERTY_TO_HANDLE_TRANSITION_END})},[h,I,g,u,w,d,b]),M=n(()=>{const e=N.current,n=P.current;e&&n&&T.current&&(u&&(e.style.width="100%",s.updateSlicesWidth({centerMode:m,contentContainer:n,extraPadding:w,numElementsPerPage:T.current,viewerContainer:e})),s.manageCircularClones({circular:g,contentContainer:n,elementsLength:h.length,numElementsPerPage:T.current}),O({animated:!1,newPage:y.current}))},[u,m,g,h,w,O]),_=n(()=>{const e=L.current,n=N.current,t=P.current;if(!e||!n||!t)return;e.style.width="100%";const r=E||c.calcNumElementsPerPage({contentContainer:t,elementsLength:h.length,extraPadding:w,rootContainer:e,viewerContainer:n})||1;l&&(e.style.width="fit-content"),r!==T.current&&(T.current=r,R?.(r));const a=c.calcNumPages({elementsLength:h.length,numElementsPerPage:r,numElementsToSlide:I});A.current!==a&&(A.current=a,p?.(a),y.current=Math.min(Math.max(0,f),a-1)),a<=1&&s.alignOnePageCarousel({allowModifySliceWidth:u,contentContainer:t,onePageAlign:x,rootContainer:e})},[u,h,w,E,I,x,l,R,p,v]),W=n(()=>{_(),M()},[_,M]);return t(()=>{const e=P.current;if(!e)return;W(),window.addEventListener("resize",W);const n=new r(W);return n.observe(e),()=>{window.removeEventListener("resize",W),n.disconnect()}},[W]),t(()=>{const e=P.current;return e?.addEventListener("transitionend",b),()=>{e?.removeEventListener("transitionend",b)}},[b]),i({allowShiftRef:V,centerExtremesWhenExtraPadding:d,changePage:O,circular:g,contentContainerRef:P,currentPageRef:y,disabled:C,elements:h,extraPadding:w,numElementsPerPageRef:T,numPagesRef:A,viewerContainerRef:N}),a({allowShiftRef:V,changePage:O,circular:g,currentPageRef:y,disabled:C,numPagesRef:A,rootContainerRef:L}),{allowShiftRef:V,changePage:O,currentPageRef:y,numElementsPerPageRef:T,numPagesRef:A}};export{u as useCarousel};
+import { useCarouselKeyNavigation } from "./useCarouselKeyNavigation.js";
+import calc_utils_default from "./utils/calc.utils.js";
+import constants_default from "./utils/constants.js";
+import { useCarouselSwipe } from "./useCarouselSwipe.js";
+import dom_utils_default from "./utils/dom.utils.js";
+import { useCallback, useEffect, useRef } from "react";
+const useCarousel = ({ allowModifySliceWidth: s = !1, autoFitContainer: c = !1, centerExtremesWhenExtraPadding: l = !1, centerMode: u = !1, circular: d = !0, contentContainerRef: f, defaultPage: p = 0, disabled: m = !1, elements: h, extraPadding: g = 0, numElementsPerPage: _, numElementsToSlide: v, onePageAlign: y = "center", onNumElementsPerPageChange: b, onNumPagesChange: x, onPageChange: S, rootContainerRef: C, viewerContainerRef: w }) => {
+	let T = useRef(!0), E = useRef(p), D = useRef(p), O = useRef(_), k = useRef(0), A = useCallback((e) => {
+		let r = f.current;
+		if (!r || !O.current || e.propertyName !== constants_default.PROPERTY_TO_HANDLE_TRANSITION_END || k.current < 1) return;
+		r.setAttribute("data-shifting", "false");
+		let { newPage: i } = dom_utils_default.udpateCarouselPositionOnEdge({
+			contentContainer: r,
+			currentPage: D.current,
+			elementsLength: h.length,
+			extraPadding: g,
+			numElementsPerPage: O.current,
+			numPages: k.current
+		});
+		D.current = i, E.current !== D.current && (E.current = D.current, S?.(D.current));
+		let { firstIndexInView: a, lastIndexInView: o } = calc_utils_default.calcFirstAndLastIndexInCarouselView({
+			currentPage: D.current,
+			elementsLength: h.length,
+			isCircular: d,
+			numElementsPerPage: O.current,
+			numElementsToSlide: v
+		});
+		dom_utils_default.updateContentElementsAriaVisibility({
+			contentContainer: r,
+			firstIndexInView: a,
+			lastIndexInView: o
+		}), u && dom_utils_default.applyCenterMode({
+			contentContainer: r,
+			firstIndexInView: a,
+			lastIndexInView: o,
+			numElementsPerPage: O.current
+		}), T.current = !0;
+	}, [
+		h,
+		g,
+		v,
+		d,
+		u,
+		S
+	]), j = useCallback(({ animated: e = !0, newPage: r }) => {
+		let i = w.current, a = f.current;
+		if (!i || !a || !T.current || !O.current || !h.length || k.current < 1 || (d ? r < -1 : r < 0) || (d ? r > k.current : r > k.current - 1)) return;
+		e && a.setAttribute("data-shifting", "true"), dom_utils_default.deleteCenterMode({ contentContainer: a }), D.current = r;
+		let { firstIndexInView: o, lastIndexInView: c } = calc_utils_default.calcFirstAndLastIndexInCarouselView({
+			currentPage: D.current,
+			elementsLength: h.length,
+			isCircular: d,
+			numElementsPerPage: O.current,
+			numElementsToSlide: v
+		});
+		s || dom_utils_default.updateViewerWidth({
+			contentContainer: a,
+			extraPadding: g,
+			firstIndexInView: o,
+			lastIndexInView: c,
+			viewerContainer: i
+		});
+		let u = a.style.left, p = calc_utils_default.calcContentContainerLeftPosition({
+			centerExtremesWhenExtraPadding: l,
+			circular: d,
+			contentContainer: a,
+			currentPage: D.current,
+			extraPadding: g,
+			firstIndexInView: o,
+			numPages: k.current
+		});
+		a.style.left = p, e && u !== p ? T.current = !1 : A({ propertyName: constants_default.PROPERTY_TO_HANDLE_TRANSITION_END });
+	}, [
+		h,
+		v,
+		d,
+		s,
+		g,
+		l,
+		A
+	]), M = useCallback(() => {
+		let e = w.current, t = f.current;
+		!e || !t || !O.current || (s && (e.style.width = "100%", dom_utils_default.updateSlicesWidth({
+			centerMode: u,
+			contentContainer: t,
+			extraPadding: g,
+			numElementsPerPage: O.current,
+			viewerContainer: e
+		})), dom_utils_default.manageCircularClones({
+			circular: d,
+			contentContainer: t,
+			elementsLength: h.length,
+			numElementsPerPage: O.current
+		}), j({
+			animated: !1,
+			newPage: D.current
+		}));
+	}, [
+		s,
+		u,
+		d,
+		h,
+		g,
+		j
+	]), N = useCallback(() => {
+		let e = C.current, n = w.current, r = f.current;
+		if (!e || !n || !r) return;
+		e.style.width = "100%";
+		let i = _ || calc_utils_default.calcNumElementsPerPage({
+			contentContainer: r,
+			elementsLength: h.length,
+			extraPadding: g,
+			rootContainer: e,
+			viewerContainer: n
+		}) || 1;
+		c && (e.style.width = "fit-content"), i !== O.current && (O.current = i, b?.(i));
+		let a = calc_utils_default.calcNumPages({
+			elementsLength: h.length,
+			numElementsPerPage: i,
+			numElementsToSlide: v
+		});
+		k.current !== a && (k.current = a, x?.(a), D.current = Math.min(Math.max(0, p), a - 1)), a <= 1 && dom_utils_default.alignOnePageCarousel({
+			allowModifySliceWidth: s,
+			contentContainer: r,
+			onePageAlign: y,
+			rootContainer: e
+		});
+	}, [
+		s,
+		h,
+		g,
+		_,
+		v,
+		y,
+		c,
+		b,
+		x,
+		S
+	]), P = useCallback(() => {
+		N(), M();
+	}, [N, M]);
+	return useEffect(() => {
+		let e = f.current;
+		if (!e) return;
+		P(), window.addEventListener("resize", P);
+		let t = new ResizeObserver(P);
+		return t.observe(e), () => {
+			window.removeEventListener("resize", P), t.disconnect();
+		};
+	}, [P]), useEffect(() => {
+		let e = f.current;
+		return e?.addEventListener("transitionend", A), () => {
+			e?.removeEventListener("transitionend", A);
+		};
+	}, [A]), useCarouselSwipe({
+		allowShiftRef: T,
+		centerExtremesWhenExtraPadding: l,
+		changePage: j,
+		circular: d,
+		contentContainerRef: f,
+		currentPageRef: D,
+		disabled: m,
+		elements: h,
+		extraPadding: g,
+		numElementsPerPageRef: O,
+		numPagesRef: k,
+		viewerContainerRef: w
+	}), useCarouselKeyNavigation({
+		allowShiftRef: T,
+		changePage: j,
+		circular: d,
+		currentPageRef: D,
+		disabled: m,
+		numPagesRef: k,
+		rootContainerRef: C
+	}), {
+		allowShiftRef: T,
+		changePage: j,
+		currentPageRef: D,
+		numElementsPerPageRef: O,
+		numPagesRef: k
+	};
+};
+export { useCarousel };

package/dist/esm/components/carousel/hooks/useCarouselKeyNavigation.js

@@ -1 +1,23 @@
-import{useEffect as e}from"react";import{isArrowLeftPressed as r,isArrowRightPressed as n}from"../../../lib/utils/keyboard/keyboard.js";const t=({allowShiftRef:t,changePage:c,circular:o,currentPageRef:u,disabled:a=!1,numPagesRef:i,rootContainerRef:d})=>{e(()=>{if(a)return;const e=e=>{!t.current||i.current<=1||(r(e.key)?t.current&&(o||0!==u.current)&&c({newPage:u.current-1}):n(e.key)&&t.current&&(o||u.current!==i.current-1)&&c({newPage:u.current+1}))},f=d.current;return f?.addEventListener("keydown",e),()=>{f?.removeEventListener("keydown",e)}},[o,c,a])};export{t as useCarouselKeyNavigation};
+import { ARROW_LEFT, ARROW_RIGHT } from "../../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../../lib/utils/keyboard/keyboard.js";
+import { useEffect } from "react";
+const useCarouselKeyNavigation = ({ allowShiftRef: t, changePage: n, circular: r, currentPageRef: i, disabled: a = !1, numPagesRef: o, rootContainerRef: s }) => {
+	useEffect(() => {
+		if (a) return;
+		let e = () => {
+			t.current && (r || i.current !== 0) && n({ newPage: i.current - 1 });
+		}, c = () => {
+			t.current && (r || i.current !== o.current - 1) && n({ newPage: i.current + 1 });
+		}, l = (n) => {
+			!t.current || o.current <= 1 || (isKeyPressed(n.key, ARROW_LEFT.key) ? e() : isKeyPressed(n.key, ARROW_RIGHT.key) && c());
+		}, u = s.current;
+		return u?.addEventListener("keydown", l), () => {
+			u?.removeEventListener("keydown", l);
+		};
+	}, [
+		r,
+		n,
+		a
+	]);
+};
+export { useCarouselKeyNavigation };

package/dist/esm/components/carousel/hooks/useCarouselSwipe.js

@@ -1 +1,58 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import{useScrollBlock as n}from"../../../lib/hooks/useScrollBlock/useScrollBlock.js";import c from"./utils/calc.utils.js";import u from"./utils/constants.js";const s=({allowShiftRef:s,centerExtremesWhenExtraPadding:o,changePage:l,circular:i,contentContainerRef:a,currentPageRef:m,disabled:v=!1,elements:E,extraPadding:d,numElementsPerPageRef:h,numPagesRef:f,viewerContainerRef:L})=>{const p=e(!1),_=e(!1),D=e(!1),R=e(),g=e(0),X=e(0),P=e(0),S=e(0),y=t(()=>{s.current&&(i||m.current!==f.current-1)&&l({newPage:m.current+1})},[i,l]),I=t(()=>{s.current&&(i||0!==m.current)&&l({newPage:m.current-1})},[i,l]),{allowScroll:O,blockScroll:w}=n(),x=t(e=>{const t=a.current;!t||f.current<=1||(R.current=parseFloat(t.style.left||"0"),"touchstart"===e.type?(g.current=e.touches[0].clientX,P.current=e.touches[0].clientX,S.current=e.touches[0].clientY):(g.current=e.clientX,P.current=e.clientX,S.current=e.clientY),p.current=!0)},[]),G=t(e=>{const t=a.current;if(!t||!p.current||!h?.current||f.current<=1)return;let r,n;"touchmove"===e.type?(X.current=g.current-e.touches[0].clientX,g.current=e.touches[0].clientX,r=e.touches[0].clientX-P.current,n=e.touches[0].clientY-S.current):(X.current=g.current-e.clientX,g.current=e.clientX,r=e.clientX-P.current,n=e.clientY-S.current);const s=parseFloat(t.style.left||"0")-X.current;if(_.current||D.current||(Math.abs(r)>u.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING?(_.current=!0,w()):Math.abs(n)>u.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING&&(D.current=!0)),_.current)if(i&&E.length>h.current)t.style.left=`${s}px`;else{const e=c.calcXDistanceBetween2Elements(t.firstChild,t.children[t.children.length-h.current]);if(o)s-d<0&&-s<e-d&&(t.style.left=`${s}px`);else{let r=i?d:0;!i&&d&&m.current===f.current-1&&(r=2*d),s-r<0&&-s<e-r&&(t.style.left=`${s}px`)}}},[w,o,i,E,d]),C=t(()=>{const e=a.current;if(D.current=!1,_.current&&O(),_.current=!1,!e||!p.current||void 0===R.current||f.current<=1)return;p.current=!1;const t=parseFloat(e.style.left||"0");t-R.current<-0?y():t-R.current>u.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?I():e.style.left=`${R.current}px`},[O,y,I]);r(()=>{if(v)return;const e=L.current,t={passive:!0};return e?.addEventListener("touchstart",x,t),e?.addEventListener("touchend",C,t),e?.addEventListener("touchmove",G,t),e?.addEventListener("mousedown",x,t),e?.addEventListener("mouseup",C,t),e?.addEventListener("mousemove",G,t),e?.addEventListener("mouseleave",C,t),()=>{e?.removeEventListener("touchstart",x,t),e?.removeEventListener("touchend",C,t),e?.removeEventListener("touchmove",G,t),e?.removeEventListener("mousedown",x,t),e?.removeEventListener("mouseup",C,t),e?.removeEventListener("mousemove",G,t),e?.removeEventListener("mouseleave",C,t)}},[x,C,G,v])};export{s as useCarouselSwipe};
+import { useScrollBlock } from "../../../lib/hooks/useScrollBlock/useScrollBlock.js";
+import calc_utils_default from "./utils/calc.utils.js";
+import constants_default from "./utils/constants.js";
+import { useCallback, useEffect, useRef } from "react";
+const useCarouselSwipe = ({ allowShiftRef: a, centerExtremesWhenExtraPadding: o, changePage: s, circular: c, contentContainerRef: l, currentPageRef: u, disabled: d = !1, elements: f, extraPadding: p, numElementsPerPageRef: m, numPagesRef: h, viewerContainerRef: g }) => {
+	let _ = useRef(!1), v = useRef(!1), y = useRef(!1), b = useRef(), x = useRef(0), S = useRef(0), C = useRef(0), w = useRef(0), T = useCallback(() => {
+		a.current && (c || u.current !== h.current - 1) && s({ newPage: u.current + 1 });
+	}, [c, s]), E = useCallback(() => {
+		a.current && (c || u.current !== 0) && s({ newPage: u.current - 1 });
+	}, [c, s]), { allowScroll: D, blockScroll: O } = useScrollBlock(), k = useCallback((e) => {
+		let t = l.current;
+		!t || h.current <= 1 || (b.current = parseFloat(t.style.left || "0"), e.type === "touchstart" ? (x.current = e.touches[0].clientX, C.current = e.touches[0].clientX, w.current = e.touches[0].clientY) : (x.current = e.clientX, C.current = e.clientX, w.current = e.clientY), _.current = !0);
+	}, []), A = useCallback((e) => {
+		let n = l.current;
+		if (!n || !_.current || !m?.current || h.current <= 1) return;
+		let r, i;
+		e.type === "touchmove" ? (S.current = x.current - e.touches[0].clientX, x.current = e.touches[0].clientX, r = e.touches[0].clientX - C.current, i = e.touches[0].clientY - w.current) : (S.current = x.current - e.clientX, x.current = e.clientX, r = e.clientX - C.current, i = e.clientY - w.current);
+		let a = parseFloat(n.style.left || "0") - S.current;
+		if (!v.current && !y.current && (Math.abs(r) > constants_default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING ? (v.current = !0, O()) : Math.abs(i) > constants_default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING && (y.current = !0)), v.current) if (c && f.length > m.current) n.style.left = `${a}px`;
+		else {
+			let e = calc_utils_default.calcXDistanceBetween2Elements(n.firstChild, n.children[n.children.length - m.current]);
+			if (o) a - p < 0 && -a < e - p && (n.style.left = `${a}px`);
+			else {
+				let t = c ? p : 0;
+				!c && p && u.current === h.current - 1 && (t = p * 2), a - t < 0 && -a < e - t && (n.style.left = `${a}px`);
+			}
+		}
+	}, [
+		O,
+		o,
+		c,
+		f,
+		p
+	]), j = useCallback(() => {
+		let e = l.current;
+		if (y.current = !1, v.current && D(), v.current = !1, !e || !_.current || b.current === void 0 || h.current <= 1) return;
+		_.current = !1;
+		let t = parseFloat(e.style.left || "0");
+		t - b.current < -constants_default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS ? T() : t - b.current > constants_default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS ? E() : e.style.left = `${b.current}px`;
+	}, [
+		D,
+		T,
+		E
+	]);
+	useEffect(() => {
+		if (d) return;
+		let e = g.current, t = { passive: !0 };
+		return e?.addEventListener("touchstart", k, t), e?.addEventListener("touchend", j, t), e?.addEventListener("touchmove", A, t), e?.addEventListener("mousedown", k, t), e?.addEventListener("mouseup", j, t), e?.addEventListener("mousemove", A, t), e?.addEventListener("mouseleave", j, t), () => {
+			e?.removeEventListener("touchstart", k, t), e?.removeEventListener("touchend", j, t), e?.removeEventListener("touchmove", A, t), e?.removeEventListener("mousedown", k, t), e?.removeEventListener("mouseup", j, t), e?.removeEventListener("mousemove", A, t), e?.removeEventListener("mouseleave", j, t);
+		};
+	}, [
+		k,
+		j,
+		A,
+		d
+	]);
+};
+export { useCarouselSwipe };