npm - @alfalab/core-components-tabs - Versions diffs - 10.0.7 → 10.0.8 - Mend

@alfalab/core-components-tabs 10.0.7 → 10.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (196) hide show

package/esm/components/title/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/title/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { type Styles, type TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n Styles &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'title'> & {\n focused?: boolean;\n isOption?: boolean;\n showSkeleton?: boolean;\n skeletonProps?: Omit<SkeletonProps, 'visible'>;\n onResize?: () => void;\n };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n (\n {\n id,\n toggleClassName,\n title,\n styles = {},\n rightAddons = null,\n hidden = false,\n selected = false,\n disabled = false,\n collapsed = false,\n focused = false,\n isOption = false,\n showSkeleton = false,\n skeletonProps,\n onResize,\n dataTestId,\n className,\n ...restProps\n },\n ref,\n ) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const titleClassName = cn(styles.content, {\n [styles.focused]: focused,\n });\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (onResize) {\n onResize();\n }\n });\n\n const button = buttonRef.current;\n\n if (button) {\n resizeObserver.observe(button);\n }\n\n return () => {\n if (button) {\n resizeObserver.unobserve(button);\n }\n };\n }, [onResize]);\n\n return hidden ? null : (\n <button\n {...restProps}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, buttonRef])}\n disabled={disabled \|\| showSkeleton}\n type='button'\n id={String(id)}\n className={cn(\n styles.title,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.collapsed]: collapsed && !isOption,\n [styles.option]: isOption,\n },\n toggleClassName,\n className,\n )}\n >\n {showSkeleton ? (\n <Skeleton\n {...skeletonProps}\n className={cn(titleClassName, skeletonProps?.className)}\n visible={true}\n >\n {title}\n </Skeleton>\n ) : (\n <span className={titleClassName}>{title}</span>\n )}\n\n {rightAddons && (\n <span\n className={cn(styles.rightAddons, {\n [styles.rightAddonsMarginZero]: !title,\n })}\n >\n {rightAddons}\n </span>\n )}\n </button>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;IAkBa,KAAK,GAAG,UAAU,CAC3B,UACI,EAkBC,EACD,GAAG,EAAA;;AAlBC,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACX,EAAA,GAAA,EAAA,CAAA,WAAkB,EAAlB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAClB,EAAc,GAAA,EAAA,CAAA,MAAA,EAAd,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,KAAA,EACd,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,eAAe,EAAf,OAAO,mBAAG,KAAK,GAAA,EAAA,EACf,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,KAAA,EAChB,EAAA,GAAA,EAAA,CAAA,YAAoB,EAApB,YAAY,mBAAG,KAAK,GAAA,EAAA,EACpB,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAjBhB,yMAkBC,CADe;AAIhB,IAAA,IAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,IAAM,cAAc,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;AACpC,QAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;YAC3B;AAEF,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,IAAM,cAAc,GAAG,IAAI,cAAc,CAAC,YAAA;~~AACtC~~,~~YAAA,~~IAAI,QAAQ,EAAE;AACV,gBAAA,QAAQ,EAAE~~;AACb;AACL~~,SAAC,CAAC;AAEF,QAAA,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO;~~AAEhC~~,~~QAAA,~~IAAI,MAAM,EAAE;AACR,YAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC~~;AACjC;QAED~~,OAAO,YAAA;~~AACH~~,~~YAAA,~~IAAI,MAAM,EAAE;AACR,gBAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC~~;AACnC;AACL~~,SAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAO,MAAM,GAAG,IAAI,IAChB,KACQ,CAAA,aAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAA,SAAS,oBACC,UAAU,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,YAAY,EAClC,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,EACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA;AAER,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,IAAG,SAAS,IAAI,CAAC,QAAQ;AAC1C,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;iBAE7B,eAAe,EACf,SAAS,CACZ,EAAA,CAAA;AAEA,QAAA,YAAY,IACT,KAAC,CAAA,aAAA,CAAA,QAAQ,eACD,aAAa,EAAA,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,EACvD,OAAO,EAAE,IAAI,EAEZ,CAAA,EAAA,KAAK,CACC,KAEX,8BAAM,SAAS,EAAE,cAAc,EAAG,EAAA,KAAK,CAAQ,CAClD;QAEA,WAAW,KACR,KACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAAC,MAAM,CAAC,qBAAqB,CAAA,GAAG,CAAC,KAAK;AACxC,gBAAA,EAAA,EAAA,EAAA,EAED,WAAW,CACT,CACV,CACI,CACZ;AACL,CAAC;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/title/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { type Styles, type TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n Styles &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' \| 'title'> & {\n focused?: boolean;\n isOption?: boolean;\n showSkeleton?: boolean;\n skeletonProps?: Omit<SkeletonProps, 'visible'>;\n onResize?: () => void;\n };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n (\n {\n id,\n toggleClassName,\n title,\n styles = {},\n rightAddons = null,\n hidden = false,\n selected = false,\n disabled = false,\n collapsed = false,\n focused = false,\n isOption = false,\n showSkeleton = false,\n skeletonProps,\n onResize,\n dataTestId,\n className,\n ...restProps\n },\n ref,\n ) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n\n const titleClassName = cn(styles.content, {\n [styles.focused]: focused,\n });\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (onResize) {\n onResize();\n }\n });\n\n const button = buttonRef.current;\n\n if (button) {\n resizeObserver.observe(button);\n }\n\n return () => {\n if (button) {\n resizeObserver.unobserve(button);\n }\n };\n }, [onResize]);\n\n return hidden ? null : (\n <button\n {...restProps}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, buttonRef])}\n disabled={disabled \|\| showSkeleton}\n type='button'\n id={String(id)}\n className={cn(\n styles.title,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.collapsed]: collapsed && !isOption,\n [styles.option]: isOption,\n },\n toggleClassName,\n className,\n )}\n >\n {showSkeleton ? (\n <Skeleton\n {...skeletonProps}\n className={cn(titleClassName, skeletonProps?.className)}\n visible={true}\n >\n {title}\n </Skeleton>\n ) : (\n <span className={titleClassName}>{title}</span>\n )}\n\n {rightAddons && (\n <span\n className={cn(styles.rightAddons, {\n [styles.rightAddonsMarginZero]: !title,\n })}\n >\n {rightAddons}\n </span>\n )}\n </button>\n );\n },\n);\n"],"names":[],"mappings":"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"}

package/esm/hooks/use-collapsible-elements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-collapsible-elements.js","sources":["../../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { type DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n ContainerType extends HTMLElement,\n AddonType extends HTMLElement,\n>(\n selectors: string,\n deps: DependencyList = [],\n) => {\n const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n const containerRef = useRef<ContainerType>(null);\n const addonRef = useRef<AddonType>(null);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const collapseElements = (inlineSize?: number) => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const addon = addonRef.current;\n const containerWidth =\n (inlineSize \|\| container.clientWidth) - (addon?.scrollWidth \|\| 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));\n\n const collapsedIds = elements.reduce<string[]>((acc, element) => {\n const { offsetLeft, scrollWidth, id } = element;\n const elementOffset = offsetLeft + scrollWidth;\n const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n const maxWidth =\n addon && !isCollapsedElement\n ? containerWidth -\n (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n : containerWidth;\n\n if (elementOffset >= maxWidth) acc.push(id);\n\n return acc;\n }, []);\n\n setIdsCollapsedElements(collapsedIds);\n };\n\n const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n if (Array.isArray(entries[0].contentBoxSize)) {\n const [{ inlineSize }] = entries[0].contentBoxSize;\n\n collapseElements(inlineSize);\n } else {\n // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n collapseElements(entries[0].contentRect.width);\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(handleElementsResize);\n\n if (containerRef.current) {\n collapseElements();\n observer.observe(containerRef.current);\n }\n\n return () => observer.disconnect();\n }, [selectors, ...deps]);\n\n return {\n containerRef,\n addonRef,\n idsCollapsedElements,\n };\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":";;;;;AAKa,IAAA,sBAAsB,GAAG,UAIlC,SAAiB,EACjB,IAAyB,EAAA;AAAzB,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAyB,GAAA,EAAA,CAAA;IAEnB,IAAA,EAAA,GAAkD,QAAQ,CAAW,EAAE,CAAC,EAAvE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAA0B;AAE9E,IAAA,IAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC;AAChD,IAAA,IAAM,QAAQ,GAAG,MAAM,CAAY,IAAI,CAAC;AAExC,IAAA,4BAA4B,CAAC,YAAA;QACzB,IAAM,gBAAgB,GAAG,UAAC,UAAmB,EAAA;AACzC,YAAA,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAEtC,YAAA,IAAI,CAAC,SAAS;gBAAE;AAEhB,YAAA,IAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;YAC9B,IAAM,cAAc,GAChB,CAAC,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,WAAW,KAAI,CAAC,IAAI,GAAG,CAAC;AAC5E,YAAA,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAc,SAAS,CAAC,CAAC;YAE/E,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAW,UAAC,GAAG,EAAE,OAAO,EAAA;AAChD,gBAAA,IAAA,UAAU,GAAsB,OAAO,CAAA,UAA7B,EAAE,WAAW,GAAS,OAAO,CAAA,WAAhB,EAAE,EAAE,GAAK,OAAO,GAAZ;AACnC,gBAAA,IAAM,aAAa,GAAG,UAAU,GAAG,WAAW;gBAC9C,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU;AAC9E,gBAAA,IAAM,QAAQ,GACV,KAAK,IAAI,CAAC;AACN,sBAAE,cAAc;AACd,yBAAC,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;sBACnE,cAAc;gBAExB,IAAI,aAAa,IAAI,QAAQ;AAAE,oBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAE3C,gBAAA,OAAO,GAAG;aACb,EAAE,EAAE,CAAC;YAEN,uBAAuB,CAAC,YAAY,CAAC;AACzC,SAAC;QAED,IAAM,oBAAoB,GAAG,UAAC,OAA8B,EAAA;~~YACxD~~,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;gBACjC,IAAA,UAAU,GAAM,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA,CAAA,CAAA,CAAA,UAA/B;gBAEnB,gBAAgB,CAAC,UAAU,CAAC~~;AAC/B;AAAM,iBAAA~~;;gBAEH,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC~~;AACjD;AACL~~,SAAC;AAED,QAAA,IAAMA,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,cAAsB;AACtE,QAAA,IAAM,QAAQ,GAAG,IAAID,gBAAc,CAAC,oBAAoB,CAAC;~~QAEzD~~,IAAI,YAAY,CAAC,OAAO,EAAE;AACtB,YAAA,gBAAgB,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC~~;AACzC;QAED~~,OAAO,YAAA,EAAM,OAAA,QAAQ,CAAC,UAAU,EAAE,CAAA,EAAA;AACtC,KAAC,EAAG,aAAA,CAAA,CAAA,SAAS,CAAK,EAAA,IAAI,QAAE;IAExB,OAAO;AACH,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,oBAAoB,EAAA,oBAAA;KACvB;AACL;;;;"}
1	+ {"version":3,"file":"use-collapsible-elements.js","sources":["../../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { type DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n ContainerType extends HTMLElement,\n AddonType extends HTMLElement,\n>(\n selectors: string,\n deps: DependencyList = [],\n) => {\n const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n const containerRef = useRef<ContainerType>(null);\n const addonRef = useRef<AddonType>(null);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const collapseElements = (inlineSize?: number) => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const addon = addonRef.current;\n const containerWidth =\n (inlineSize \|\| container.clientWidth) - (addon?.scrollWidth \|\| 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));\n\n const collapsedIds = elements.reduce<string[]>((acc, element) => {\n const { offsetLeft, scrollWidth, id } = element;\n const elementOffset = offsetLeft + scrollWidth;\n const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n const maxWidth =\n addon && !isCollapsedElement\n ? containerWidth -\n (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n : containerWidth;\n\n if (elementOffset >= maxWidth) acc.push(id);\n\n return acc;\n }, []);\n\n setIdsCollapsedElements(collapsedIds);\n };\n\n const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n if (Array.isArray(entries[0].contentBoxSize)) {\n const [{ inlineSize }] = entries[0].contentBoxSize;\n\n collapseElements(inlineSize);\n } else {\n // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n collapseElements(entries[0].contentRect.width);\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(handleElementsResize);\n\n if (containerRef.current) {\n collapseElements();\n observer.observe(containerRef.current);\n }\n\n return () => observer.disconnect();\n }, [selectors, ...deps]);\n\n return {\n containerRef,\n addonRef,\n idsCollapsedElements,\n };\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":"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"}

package/esm/hooks/use-tablist-titles.d.ts CHANGED Viewed

@@ -1,33 +1,32 @@
-/// <reference types="react" />
 import { type TabListProps } from '../typings';
-export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, onChange, breakpoint, client, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue' | 'breakpoint' | 'client'>) => {
+export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, onChange, breakpoint, client, defaultMatchMediaValue, }: Pick<TabListProps, "titles" | "selectedId" | "collapsedTabsIds" | "onChange" | "defaultMatchMediaValue" | "breakpoint" | "client">) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {
         collapsed: boolean;
         selected: boolean;
-        title: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
+        title: NonNullable<import("react").ReactNode>;
         id: import("../typings").SelectedId;
-        disabled?: boolean | undefined;
+        disabled?: boolean;
         rightAddons?: import("react").ReactNode;
-        hidden?: boolean | undefined;
-        toggleClassName?: string | undefined;
-        dataTestId?: string | undefined;
-        toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
-        titleProps?: import("../typings").TitleProps | undefined;
+        hidden?: boolean;
+        toggleClassName?: string;
+        dataTestId?: string;
+        toggleRef?: import("react").Ref<HTMLDivElement>;
+        titleProps?: import("../typings").TitleProps;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -37,9 +36,9 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
@@ -52,7 +51,7 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
@@ -71,15 +70,15 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
     }[];
     selectedTab: HTMLButtonElement | null;
     focusedTab: HTMLButtonElement | null;
-    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement>) => {
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
         selected: boolean;
         dataTestId: string | undefined;
         disabled: boolean | undefined;
-        ref: (instance: HTMLElement | null) => void;
+        ref: (instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
         onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
-        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+        onClick: (event?: import("react").MouseEvent) => void;
     };
 };

package/esm/hooks/use-tablist-titles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tablist-titles.js","sources":["../../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n titles = [],\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n TabListProps,\n \| 'titles'\n \| 'selectedId'\n \| 'collapsedTabsIds'\n \| 'onChange'\n \| 'defaultMatchMediaValue'\n \| 'breakpoint'\n \| 'client'\n>) => {\n const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n HTMLDivElement,\n HTMLInputElement\n >('[role=tab]', [titles, collapsedTabsIds]);\n\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const tablistTitles = useMemo(() => {\n const idsCollapsedTitles: string[] = [];\n const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds \|\| []);\n\n if (isDesktop) {\n const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n const lastVisibleTitle = collapsedTabsIds\n ? null\n : visibleTitles[visibleTitles.length - 1];\n\n idsCollapsed.forEach((id) => {\n if (selectedId === id && lastVisibleTitle) {\n idsCollapsedTitles.push(String(lastVisibleTitle.id));\n }\n if (selectedId !== id) {\n idsCollapsedTitles.push(id);\n }\n });\n }\n\n const titlesMapped = titles.map((title) => ({\n ...title,\n collapsed: idsCollapsedTitles.includes(String(title.id)),\n selected: title.id === selectedId,\n }));\n\n if (collapsedTabsIds?.length) {\n titlesMapped.sort((a, b) => {\n const hasA = collapsedTabsIds.includes(String(a.id));\n const hasB = collapsedTabsIds.includes(String(b.id));\n\n if (hasA === hasB) {\n return 0;\n }\n\n return hasA ? 1 : -1;\n });\n }\n\n return titlesMapped.sort((a, b) => {\n if (a.collapsed === b.collapsed) {\n return 0;\n }\n\n return a.collapsed ? 1 : -1;\n });\n }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles: tablistTitles,\n selectedId,\n onChange,\n });\n\n return {\n containerRef,\n addonRef,\n tablistTitles,\n selectedTab,\n focusedTab,\n getTabListItemProps,\n };\n};\n"],"names":[],"mappings":";;;;;;AASO,IAAM,gBAAgB,GAAG,UAAC,EAiBhC,EAAA;AAhBG,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,MAAW,EAAX,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,8BAAgF,EAAhF,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA;IAW1E,IAAA,EAAA,GAAmD,sBAAsB,CAG7E,YAAY,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,EAHnC,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,oBAAoB,0BAGT;IAE3C,IAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,IAAM,aAAa,GAAG,OAAO,CAAC,YAAA;QAC1B,IAAM,kBAAkB,GAAa,EAAE;QACvC,IAAM,YAAY,GAAG,oBAAoB,CAAC,MAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC;~~AAExE~~,~~QAAA,~~IAAI,SAAS,EAAE;AACX,YAAA,IAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,EAAM,EAAA;AAAJ,gBAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA;gBAAO,OAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAAlC,aAAkC,CAAC;YACnF,IAAM,kBAAgB,GAAG;AACrB,kBAAE;kBACA,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;AAE7C,YAAA,YAAY,CAAC,OAAO,CAAC,UAAC,EAAE,EAAA;AACpB,gBAAA,IAAI,UAAU,KAAK,EAAE,IAAI,kBAAgB,EAAE;oBACvC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAgB,CAAC,EAAE,CAAC,CAAC~~;AACvD;gBACD~~,IAAI,UAAU,KAAK,EAAE,EAAE;AACnB,oBAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC~~;AAC9B;AACL~~,aAAC,CAAC~~;AACL;AAED~~,QAAA,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAK,EAAA,8BACpC,KAAK,CAAA,EAAA,EACR,SAAS,EAAE,kBAAkB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EACxD,QAAQ,EAAE,KAAK,CAAC,EAAE,KAAK,UAAU,KAHM,EAIzC,CAAC;~~AAEH~~,~~QAAA,~~IAAI,gBAAgB,~~KAAhB~~,~~IAAA~~,~~IAAA~~,~~gBAAgB~~,~~uBAAhB~~,gBAAgB,CAAE,MAAM,EAAE;AAC1B,YAAA,YAAY,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,EAAA;AACnB,gBAAA,IAAM,IAAI,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACpD,gBAAA,IAAM,IAAI,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;~~gBAEpD~~,IAAI,IAAI,KAAK,IAAI,EAAE;AACf,oBAAA,OAAO,CAAC~~;AACX;gBAED~~,OAAO,IAAI,GAAG,CAAC,GAAG,EAAE;AACxB,aAAC,CAAC~~;AACL;AAED~~,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,EAAA;~~AAC1B~~,~~YAAA,~~IAAI,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,EAAE;AAC7B,gBAAA,OAAO,CAAC~~;AACX;AAED~~,YAAA,OAAO,CAAC,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE;AAC/B,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;IAErE,IAAA,EAAA,GAAmD,OAAO,CAAC;AAC7D,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,QAAQ,EAAA,QAAA;KACX,CAAC,EAJM,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,mBAIlD;IAEF,OAAO;AACH,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,mBAAmB,EAAA,mBAAA;KACtB;AACL;;;;"}
1	+ {"version":3,"file":"use-tablist-titles.js","sources":["../../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n titles = [],\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n TabListProps,\n \| 'titles'\n \| 'selectedId'\n \| 'collapsedTabsIds'\n \| 'onChange'\n \| 'defaultMatchMediaValue'\n \| 'breakpoint'\n \| 'client'\n>) => {\n const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n HTMLDivElement,\n HTMLInputElement\n >('[role=tab]', [titles, collapsedTabsIds]);\n\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const tablistTitles = useMemo(() => {\n const idsCollapsedTitles: string[] = [];\n const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds \|\| []);\n\n if (isDesktop) {\n const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n const lastVisibleTitle = collapsedTabsIds\n ? null\n : visibleTitles[visibleTitles.length - 1];\n\n idsCollapsed.forEach((id) => {\n if (selectedId === id && lastVisibleTitle) {\n idsCollapsedTitles.push(String(lastVisibleTitle.id));\n }\n if (selectedId !== id) {\n idsCollapsedTitles.push(id);\n }\n });\n }\n\n const titlesMapped = titles.map((title) => ({\n ...title,\n collapsed: idsCollapsedTitles.includes(String(title.id)),\n selected: title.id === selectedId,\n }));\n\n if (collapsedTabsIds?.length) {\n titlesMapped.sort((a, b) => {\n const hasA = collapsedTabsIds.includes(String(a.id));\n const hasB = collapsedTabsIds.includes(String(b.id));\n\n if (hasA === hasB) {\n return 0;\n }\n\n return hasA ? 1 : -1;\n });\n }\n\n return titlesMapped.sort((a, b) => {\n if (a.collapsed === b.collapsed) {\n return 0;\n }\n\n return a.collapsed ? 1 : -1;\n });\n }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles: tablistTitles,\n selectedId,\n onChange,\n });\n\n return {\n containerRef,\n addonRef,\n tablistTitles,\n selectedTab,\n focusedTab,\n getTabListItemProps,\n };\n};\n"],"names":[],"mappings":"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"}

package/esm/hooks/use-tabs.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export declare function useTabs({ titles, selectedId, onChange }: UseTabsProps):
         selected: boolean;
         dataTestId: string | undefined;
         disabled: boolean | undefined;
-        ref: (instance: HTMLElement | null) => void;
+        ref: (instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
         onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
         onClick: (event?: MouseEvent) => void;
     };

package/esm/hooks/use-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tabs.js","sources":["../../src/hooks/use-tabs.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type TabListTitle, type UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n const [selectedTab, setSelectedTab] = useState<HTMLButtonElement \| null>(null);\n const [focusedTab, setFocusedTab] = useState<HTMLButtonElement \| null>(null);\n const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n const handleItemRef = useCallback(\n (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n if (node && item.id === selectedId) setSelectedTab(node);\n itemRefs.current[index] = node;\n },\n [selectedId],\n );\n\n const handleItemClick = useCallback(\n (event: MouseEvent, item: TabListTitle) => {\n if (onChange && item.id !== selectedId) {\n onChange(event, { selectedId: item.id });\n }\n },\n [onChange, selectedId],\n );\n\n const focusTab = useCallback(\n (position: 'prev' \| 'next' \| 'start' \| 'end') => {\n const refs = itemRefs.current;\n\n const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n if (refs.every((ref) => !tabAvailable(ref))) return;\n\n let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n if (focusedTabIndex === -1) {\n focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n }\n\n let newFocusIndex;\n\n switch (position) {\n case 'prev':\n newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n break;\n case 'next':\n newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n break;\n case 'start':\n newFocusIndex = 0;\n break;\n case 'end':\n newFocusIndex = refs.length - 1;\n break;\n }\n\n const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n while (!tabAvailable(refs[newFocusIndex])) {\n newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n }\n\n refs[newFocusIndex].focus();\n\n setFocusedTab(refs[newFocusIndex]);\n },\n [selectedTab, itemRefs],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n focusTab('prev');\n\n event.preventDefault();\n break;\n case 'ArrowRight':\n focusTab('next');\n\n event.preventDefault();\n break;\n case 'Home':\n focusTab('start');\n\n event.preventDefault();\n break;\n case 'End':\n focusTab('end');\n\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [focusTab],\n );\n\n const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n const item = titles[index];\n const itemSelected = item.id === selectedId;\n\n const refs: Array<Ref<HTMLElement>> = [\n (node: HTMLButtonElement) => {\n // eslint-disable-next-line no-param-reassign\n if (outerRef) outerRef.current = node;\n handleItemRef(node, item, index);\n },\n ];\n\n if (item.toggleRef) {\n refs.push(item.toggleRef);\n }\n\n return {\n role: 'tab',\n tabIndex: itemSelected ? 0 : -1,\n 'aria-selected': itemSelected,\n selected: itemSelected,\n dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n disabled: item.disabled,\n ref: mergeRefs(refs),\n onKeyDown: handleKeyDown,\n onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n };\n };\n\n return {\n getTabListItemProps,\n selectedTab,\n focusedTab,\n };\n}\n"],"names":[],"mappings":";;;;AAeM,SAAU,OAAO,CAAC,EAAmD,EAAA;QAAjD,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA;IACjD,IAAA,EAAA,GAAgC,QAAQ,CAA2B,IAAI,CAAC,EAAvE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAA4C;IACxE,IAAA,EAAA,GAA8B,QAAQ,CAA2B,IAAI,CAAC,EAArE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA4C;AAC5E,IAAA,IAAM,QAAQ,GAAG,MAAM,CAAsB,EAAE,CAAC;IAEhD,IAAM,aAAa,GAAG,WAAW,CAC7B,UAAC,IAAuB,EAAE,IAAkB,EAAE,KAAa,EAAA;AACvD,QAAA,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU;YAAE,cAAc,CAAC,IAAI,CAAC;AACxD,QAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI;AAClC,KAAC,EACD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,IAAM,eAAe,GAAG,WAAW,CAC/B,UAAC,KAAiB,EAAE,IAAkB,EAAA;~~AAClC~~,~~QAAA,~~IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU,EAAE;YACpC,QAAQ,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC~~;AAC3C;AACL~~,KAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACzB;AAED,IAAA,IAAM,QAAQ,GAAG,WAAW,CACxB,UAAC,QAA2C,EAAA;AACxC,QAAA,IAAM,IAAI,GAAG,QAAQ,CAAC,OAAO;AAE7B,QAAA,IAAM,YAAY,GAAG,UAAC,GAAsB,IAAK,OAAA,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAA,EAAA;AAErE,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAC,GAAG,EAAA,EAAK,OAAA,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;YAAE;AAE7C,QAAA,IAAI,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,QAAQ,CAAC,aAAa,KAAK,IAAI,CAA/B,EAA+B,CAAC;AAE/E,QAAA,IAAI,eAAe,KAAK,EAAE,EAAE;AACxB,YAAA,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,UAAC,IAAI,EAAK,EAAA,OAAA,IAAI,KAAK,WAAW,CAApB,EAAoB,CAAC~~;AACnE;AAED~~,QAAA,IAAI,aAAa;~~AAEjB~~,~~QAAA,~~QAAQ,QAAQ;AACZ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,OAAO;gBACR,aAAa,GAAG,CAAC;gBACjB;AACJ,YAAA,KAAK,KAAK;AACN,gBAAA,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC/B~~;AACP;QAED~~,IAAM,KAAK,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;QAEzD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;AACvC,YAAA,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,KAAK,IAAI,IAAI,CAAC,MAAM~~;AACtE;AAED~~,QAAA,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE;AAE3B,QAAA,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtC,KAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CAC1B;AAED,IAAA,IAAM,aAAa,GAAG,WAAW,CAC7B,UAAC,KAAuC,EAAA;~~QACpC~~,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,WAAW;gBACZ,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,YAAY;gBACb,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,MAAM;gBACP,QAAQ,CAAC,OAAO,CAAC;gBAEjB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,KAAK;gBACN,QAAQ,CAAC,KAAK,CAAC;gBAEf,KAAK,CAAC,cAAc,EAAE;gBACtB~~;AAGP;AACL~~,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,QAAwC,EAAA;AAChF,QAAA,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,KAAK,UAAU;AAE3C,QAAA,IAAM,IAAI,GAA4B;AAClC,YAAA,UAAC,IAAuB,EAAA;;AAEpB,gBAAA,IAAI,QAAQ;AAAE,oBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;AACrC,gBAAA,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;aACnC;SACJ;~~QAED~~,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC~~;AAC5B;QAED~~,OAAO;AACH,YAAA,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,YAAY,GAAG,CAAC,GAAG,EAAE;AAC/B,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,QAAQ,EAAE,YAAY;YACtB,UAAU,EAAE,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;YACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC;AACpB,YAAA,SAAS,EAAE,aAAa;AACxB,YAAA,OAAO,EAAE,UAAC,KAAkB,EAAA,EAAK,OAAA,eAAe,CAAC,KAAmB,EAAE,IAAI,CAAC,CAAA,EAAA;SAC9E;AACL,KAAC;IAED,OAAO;AACH,QAAA,mBAAmB,EAAA,mBAAA;AACnB,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}
1	+ {"version":3,"file":"use-tabs.js","sources":["../../src/hooks/use-tabs.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type TabListTitle, type UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n const [selectedTab, setSelectedTab] = useState<HTMLButtonElement \| null>(null);\n const [focusedTab, setFocusedTab] = useState<HTMLButtonElement \| null>(null);\n const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n const handleItemRef = useCallback(\n (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n if (node && item.id === selectedId) setSelectedTab(node);\n itemRefs.current[index] = node;\n },\n [selectedId],\n );\n\n const handleItemClick = useCallback(\n (event: MouseEvent, item: TabListTitle) => {\n if (onChange && item.id !== selectedId) {\n onChange(event, { selectedId: item.id });\n }\n },\n [onChange, selectedId],\n );\n\n const focusTab = useCallback(\n (position: 'prev' \| 'next' \| 'start' \| 'end') => {\n const refs = itemRefs.current;\n\n const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n if (refs.every((ref) => !tabAvailable(ref))) return;\n\n let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n if (focusedTabIndex === -1) {\n focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n }\n\n let newFocusIndex;\n\n switch (position) {\n case 'prev':\n newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n break;\n case 'next':\n newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n break;\n case 'start':\n newFocusIndex = 0;\n break;\n case 'end':\n newFocusIndex = refs.length - 1;\n break;\n }\n\n const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n while (!tabAvailable(refs[newFocusIndex])) {\n newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n }\n\n refs[newFocusIndex].focus();\n\n setFocusedTab(refs[newFocusIndex]);\n },\n [selectedTab, itemRefs],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n focusTab('prev');\n\n event.preventDefault();\n break;\n case 'ArrowRight':\n focusTab('next');\n\n event.preventDefault();\n break;\n case 'Home':\n focusTab('start');\n\n event.preventDefault();\n break;\n case 'End':\n focusTab('end');\n\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [focusTab],\n );\n\n const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n const item = titles[index];\n const itemSelected = item.id === selectedId;\n\n const refs: Array<Ref<HTMLElement>> = [\n (node: HTMLButtonElement) => {\n // eslint-disable-next-line no-param-reassign\n if (outerRef) outerRef.current = node;\n handleItemRef(node, item, index);\n },\n ];\n\n if (item.toggleRef) {\n refs.push(item.toggleRef);\n }\n\n return {\n role: 'tab',\n tabIndex: itemSelected ? 0 : -1,\n 'aria-selected': itemSelected,\n selected: itemSelected,\n dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n disabled: item.disabled,\n ref: mergeRefs(refs),\n onKeyDown: handleKeyDown,\n onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n };\n };\n\n return {\n getTabListItemProps,\n selectedTab,\n focusedTab,\n };\n}\n"],"names":[],"mappings":"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"}

package/esm/typings.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ import { type AriaAttributes, type FC, type HTMLAttributes, type MouseEvent, typ
 import { type SkeletonProps } from '@alfalab/core-components-skeleton/esm';
 import { type TagProps } from '@alfalab/core-components-tag/esm';
 import { type TypographyType } from '@alfalab/core-components-types/esm';
-export declare type SelectedId = string | number;
-export declare type TitleProps = Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'className' | 'disabled' | 'id' | 'role' | 'tabIndex' | 'aria-selected'> & AriaAttributes;
+export type SelectedId = string | number;
+export type TitleProps = Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'className' | 'disabled' | 'id' | 'role' | 'tabIndex' | 'aria-selected'> & AriaAttributes;
 export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>, AriaAttributes {
     /**
      * Дополнительный класс
@@ -192,12 +192,12 @@ export interface SecondaryTabListProps extends TabListProps {
     tagSize?: TagProps['size'];
     TagComponent?: FC<Omit<TagProps, 'breakpoint'>>;
 }
-export declare type UseTabsProps = TabListProps;
-export declare type Styles = {
+export type UseTabsProps = TabListProps;
+export type Styles = {
     styles?: {
         [key: string]: string;
     };
 };
-export declare type PlatformProps = {
+export type PlatformProps = {
     platform: 'desktop' | 'mobile';
 };

package/hooks/use-collapsible-elements.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-collapsible-elements.js","sources":["../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { type DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n ContainerType extends HTMLElement,\n AddonType extends HTMLElement,\n>(\n selectors: string,\n deps: DependencyList = [],\n) => {\n const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n const containerRef = useRef<ContainerType>(null);\n const addonRef = useRef<AddonType>(null);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const collapseElements = (inlineSize?: number) => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const addon = addonRef.current;\n const containerWidth =\n (inlineSize \|\| container.clientWidth) - (addon?.scrollWidth \|\| 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));\n\n const collapsedIds = elements.reduce<string[]>((acc, element) => {\n const { offsetLeft, scrollWidth, id } = element;\n const elementOffset = offsetLeft + scrollWidth;\n const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n const maxWidth =\n addon && !isCollapsedElement\n ? containerWidth -\n (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n : containerWidth;\n\n if (elementOffset >= maxWidth) acc.push(id);\n\n return acc;\n }, []);\n\n setIdsCollapsedElements(collapsedIds);\n };\n\n const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n if (Array.isArray(entries[0].contentBoxSize)) {\n const [{ inlineSize }] = entries[0].contentBoxSize;\n\n collapseElements(inlineSize);\n } else {\n // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n collapseElements(entries[0].contentRect.width);\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(handleElementsResize);\n\n if (containerRef.current) {\n collapseElements();\n observer.observe(containerRef.current);\n }\n\n return () => observer.disconnect();\n }, [selectors, ...deps]);\n\n return {\n containerRef,\n addonRef,\n idsCollapsedElements,\n };\n};\n"],"names":["useState","useRef","useLayoutEffect_SAFE_FOR_SSR","ResizeObserverPolyfill","__spreadArray"],"mappings":";;;;;;;;;AAKa,IAAA,sBAAsB,GAAG,UAIlC,SAAiB,EACjB,IAAyB,EAAA;AAAzB,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAyB,GAAA,EAAA,CAAA;IAEnB,IAAA,EAAA,GAAkDA,cAAQ,CAAW,EAAE,CAAC,EAAvE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAA0B;AAE9E,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAgB,IAAI,CAAC;AAChD,IAAA,IAAM,QAAQ,GAAGA,YAAM,CAAY,IAAI,CAAC;AAExC,IAAAC,kCAA4B,CAAC,YAAA;QACzB,IAAM,gBAAgB,GAAG,UAAC,UAAmB,EAAA;AACzC,YAAA,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAEtC,YAAA,IAAI,CAAC,SAAS;gBAAE;AAEhB,YAAA,IAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;YAC9B,IAAM,cAAc,GAChB,CAAC,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,WAAW,KAAI,CAAC,IAAI,GAAG,CAAC;AAC5E,YAAA,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAc,SAAS,CAAC,CAAC;YAE/E,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAW,UAAC,GAAG,EAAE,OAAO,EAAA;AAChD,gBAAA,IAAA,UAAU,GAAsB,OAAO,CAAA,UAA7B,EAAE,WAAW,GAAS,OAAO,CAAA,WAAhB,EAAE,EAAE,GAAK,OAAO,GAAZ;AACnC,gBAAA,IAAM,aAAa,GAAG,UAAU,GAAG,WAAW;gBAC9C,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU;AAC9E,gBAAA,IAAM,QAAQ,GACV,KAAK,IAAI,CAAC;AACN,sBAAE,cAAc;AACd,yBAAC,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;sBACnE,cAAc;gBAExB,IAAI,aAAa,IAAI,QAAQ;AAAE,oBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAE3C,gBAAA,OAAO,GAAG;aACb,EAAE,EAAE,CAAC;YAEN,uBAAuB,CAAC,YAAY,CAAC;AACzC,SAAC;QAED,IAAM,oBAAoB,GAAG,UAAC,OAA8B,EAAA;~~YACxD~~,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;gBACjC,IAAA,UAAU,GAAM,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAA,CAAA,CAAA,CAAA,UAA/B;gBAEnB,gBAAgB,CAAC,UAAU,CAAC~~;AAC/B;AAAM,iBAAA~~;;gBAEH,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC~~;AACjD;AACL~~,SAAC;AAED,QAAA,IAAM,cAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,6BAAsB;AACtE,QAAA,IAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,oBAAoB,CAAC;~~QAEzD~~,IAAI,YAAY,CAAC,OAAO,EAAE;AACtB,YAAA,gBAAgB,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC~~;AACzC;QAED~~,OAAO,YAAA,EAAM,OAAA,QAAQ,CAAC,UAAU,EAAE,CAAA,EAAA;AACtC,KAAC,EAAGC,mBAAA,CAAA,CAAA,SAAS,CAAK,EAAA,IAAI,QAAE;IAExB,OAAO;AACH,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,oBAAoB,EAAA,oBAAA;KACvB;AACL;;;;"}
1	+ {"version":3,"file":"use-collapsible-elements.js","sources":["../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { type DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n ContainerType extends HTMLElement,\n AddonType extends HTMLElement,\n>(\n selectors: string,\n deps: DependencyList = [],\n) => {\n const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n const containerRef = useRef<ContainerType>(null);\n const addonRef = useRef<AddonType>(null);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const collapseElements = (inlineSize?: number) => {\n const container = containerRef.current;\n\n if (!container) return;\n\n const addon = addonRef.current;\n const containerWidth =\n (inlineSize \|\| container.clientWidth) - (addon?.scrollWidth \|\| 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));\n\n const collapsedIds = elements.reduce<string[]>((acc, element) => {\n const { offsetLeft, scrollWidth, id } = element;\n const elementOffset = offsetLeft + scrollWidth;\n const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n const maxWidth =\n addon && !isCollapsedElement\n ? containerWidth -\n (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n : containerWidth;\n\n if (elementOffset >= maxWidth) acc.push(id);\n\n return acc;\n }, []);\n\n setIdsCollapsedElements(collapsedIds);\n };\n\n const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n if (Array.isArray(entries[0].contentBoxSize)) {\n const [{ inlineSize }] = entries[0].contentBoxSize;\n\n collapseElements(inlineSize);\n } else {\n // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n collapseElements(entries[0].contentRect.width);\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(handleElementsResize);\n\n if (containerRef.current) {\n collapseElements();\n observer.observe(containerRef.current);\n }\n\n return () => observer.disconnect();\n }, [selectors, ...deps]);\n\n return {\n containerRef,\n addonRef,\n idsCollapsedElements,\n };\n};\n"],"names":["useState","useRef","useLayoutEffect_SAFE_FOR_SSR","ResizeObserverPolyfill","__spreadArray"],"mappings":"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"}

package/hooks/use-tablist-titles.d.ts CHANGED Viewed

@@ -1,32 +1,32 @@
 import { type TabListProps } from '../typings';
-export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, onChange, breakpoint, client, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue' | 'breakpoint' | 'client'>) => {
+export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, onChange, breakpoint, client, defaultMatchMediaValue, }: Pick<TabListProps, "titles" | "selectedId" | "collapsedTabsIds" | "onChange" | "defaultMatchMediaValue" | "breakpoint" | "client">) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {
         collapsed: boolean;
         selected: boolean;
-        title: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
+        title: NonNullable<import("react").ReactNode>;
         id: import("../typings").SelectedId;
-        disabled?: boolean | undefined;
+        disabled?: boolean;
         rightAddons?: import("react").ReactNode;
-        hidden?: boolean | undefined;
-        toggleClassName?: string | undefined;
-        dataTestId?: string | undefined;
-        toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
-        titleProps?: import("../typings").TitleProps | undefined;
+        hidden?: boolean;
+        toggleClassName?: string;
+        dataTestId?: string;
+        toggleRef?: import("react").Ref<HTMLDivElement>;
+        titleProps?: import("../typings").TitleProps;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -36,9 +36,9 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
@@ -51,7 +51,7 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
@@ -70,15 +70,15 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
     }[];
     selectedTab: HTMLButtonElement | null;
     focusedTab: HTMLButtonElement | null;
-    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement>) => {
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
         selected: boolean;
         dataTestId: string | undefined;
         disabled: boolean | undefined;
-        ref: (instance: HTMLElement | null) => void;
+        ref: (instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
         onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
-        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+        onClick: (event?: import("react").MouseEvent) => void;
     };
 };

package/hooks/use-tablist-titles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tablist-titles.js","sources":["../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n titles = [],\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n TabListProps,\n \| 'titles'\n \| 'selectedId'\n \| 'collapsedTabsIds'\n \| 'onChange'\n \| 'defaultMatchMediaValue'\n \| 'breakpoint'\n \| 'client'\n>) => {\n const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n HTMLDivElement,\n HTMLInputElement\n >('[role=tab]', [titles, collapsedTabsIds]);\n\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const tablistTitles = useMemo(() => {\n const idsCollapsedTitles: string[] = [];\n const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds \|\| []);\n\n if (isDesktop) {\n const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n const lastVisibleTitle = collapsedTabsIds\n ? null\n : visibleTitles[visibleTitles.length - 1];\n\n idsCollapsed.forEach((id) => {\n if (selectedId === id && lastVisibleTitle) {\n idsCollapsedTitles.push(String(lastVisibleTitle.id));\n }\n if (selectedId !== id) {\n idsCollapsedTitles.push(id);\n }\n });\n }\n\n const titlesMapped = titles.map((title) => ({\n ...title,\n collapsed: idsCollapsedTitles.includes(String(title.id)),\n selected: title.id === selectedId,\n }));\n\n if (collapsedTabsIds?.length) {\n titlesMapped.sort((a, b) => {\n const hasA = collapsedTabsIds.includes(String(a.id));\n const hasB = collapsedTabsIds.includes(String(b.id));\n\n if (hasA === hasB) {\n return 0;\n }\n\n return hasA ? 1 : -1;\n });\n }\n\n return titlesMapped.sort((a, b) => {\n if (a.collapsed === b.collapsed) {\n return 0;\n }\n\n return a.collapsed ? 1 : -1;\n });\n }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles: tablistTitles,\n selectedId,\n onChange,\n });\n\n return {\n containerRef,\n addonRef,\n tablistTitles,\n selectedTab,\n focusedTab,\n getTabListItemProps,\n };\n};\n"],"names":["useCollapsibleElements","useIsDesktop","useMemo","useTabs"],"mappings":";;;;;;;;;;AASO,IAAM,gBAAgB,GAAG,UAAC,EAiBhC,EAAA;AAhBG,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,MAAW,EAAX,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,8BAAgF,EAAhF,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA;IAW1E,IAAA,EAAA,GAAmDA,6CAAsB,CAG7E,YAAY,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,EAHnC,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,oBAAoB,0BAGT;IAE3C,IAAM,SAAS,GAAGC,6BAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,IAAM,aAAa,GAAGC,aAAO,CAAC,YAAA;QAC1B,IAAM,kBAAkB,GAAa,EAAE;QACvC,IAAM,YAAY,GAAG,oBAAoB,CAAC,MAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC;~~AAExE~~,~~QAAA,~~IAAI,SAAS,EAAE;AACX,YAAA,IAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,EAAM,EAAA;AAAJ,gBAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA;gBAAO,OAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAAlC,aAAkC,CAAC;YACnF,IAAM,kBAAgB,GAAG;AACrB,kBAAE;kBACA,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;AAE7C,YAAA,YAAY,CAAC,OAAO,CAAC,UAAC,EAAE,EAAA;AACpB,gBAAA,IAAI,UAAU,KAAK,EAAE,IAAI,kBAAgB,EAAE;oBACvC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAgB,CAAC,EAAE,CAAC,CAAC~~;AACvD;gBACD~~,IAAI,UAAU,KAAK,EAAE,EAAE;AACnB,oBAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC~~;AAC9B;AACL~~,aAAC,CAAC~~;AACL;AAED~~,QAAA,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAK,EAAA,0CACpC,KAAK,CAAA,EAAA,EACR,SAAS,EAAE,kBAAkB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EACxD,QAAQ,EAAE,KAAK,CAAC,EAAE,KAAK,UAAU,KAHM,EAIzC,CAAC;~~AAEH~~,~~QAAA,~~IAAI,gBAAgB,~~KAAhB~~,~~IAAA~~,~~IAAA~~,~~gBAAgB~~,~~uBAAhB~~,gBAAgB,CAAE,MAAM,EAAE;AAC1B,YAAA,YAAY,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,EAAA;AACnB,gBAAA,IAAM,IAAI,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACpD,gBAAA,IAAM,IAAI,GAAG,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;~~gBAEpD~~,IAAI,IAAI,KAAK,IAAI,EAAE;AACf,oBAAA,OAAO,CAAC~~;AACX;gBAED~~,OAAO,IAAI,GAAG,CAAC,GAAG,EAAE;AACxB,aAAC,CAAC~~;AACL;AAED~~,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,EAAA;~~AAC1B~~,~~YAAA,~~IAAI,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,EAAE;AAC7B,gBAAA,OAAO,CAAC~~;AACX;AAED~~,YAAA,OAAO,CAAC,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE;AAC/B,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;IAErE,IAAA,EAAA,GAAmDC,eAAO,CAAC;AAC7D,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,QAAQ,EAAA,QAAA;KACX,CAAC,EAJM,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,mBAIlD;IAEF,OAAO;AACH,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,mBAAmB,EAAA,mBAAA;KACtB;AACL;;;;"}
1	+ {"version":3,"file":"use-tablist-titles.js","sources":["../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n titles = [],\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n TabListProps,\n \| 'titles'\n \| 'selectedId'\n \| 'collapsedTabsIds'\n \| 'onChange'\n \| 'defaultMatchMediaValue'\n \| 'breakpoint'\n \| 'client'\n>) => {\n const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n HTMLDivElement,\n HTMLInputElement\n >('[role=tab]', [titles, collapsedTabsIds]);\n\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const tablistTitles = useMemo(() => {\n const idsCollapsedTitles: string[] = [];\n const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds \|\| []);\n\n if (isDesktop) {\n const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n const lastVisibleTitle = collapsedTabsIds\n ? null\n : visibleTitles[visibleTitles.length - 1];\n\n idsCollapsed.forEach((id) => {\n if (selectedId === id && lastVisibleTitle) {\n idsCollapsedTitles.push(String(lastVisibleTitle.id));\n }\n if (selectedId !== id) {\n idsCollapsedTitles.push(id);\n }\n });\n }\n\n const titlesMapped = titles.map((title) => ({\n ...title,\n collapsed: idsCollapsedTitles.includes(String(title.id)),\n selected: title.id === selectedId,\n }));\n\n if (collapsedTabsIds?.length) {\n titlesMapped.sort((a, b) => {\n const hasA = collapsedTabsIds.includes(String(a.id));\n const hasB = collapsedTabsIds.includes(String(b.id));\n\n if (hasA === hasB) {\n return 0;\n }\n\n return hasA ? 1 : -1;\n });\n }\n\n return titlesMapped.sort((a, b) => {\n if (a.collapsed === b.collapsed) {\n return 0;\n }\n\n return a.collapsed ? 1 : -1;\n });\n }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles: tablistTitles,\n selectedId,\n onChange,\n });\n\n return {\n containerRef,\n addonRef,\n tablistTitles,\n selectedTab,\n focusedTab,\n getTabListItemProps,\n };\n};\n"],"names":["useCollapsibleElements","useIsDesktop","useMemo","useTabs"],"mappings":"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"}

package/hooks/use-tabs.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export declare function useTabs({ titles, selectedId, onChange }: UseTabsProps):
         selected: boolean;
         dataTestId: string | undefined;
         disabled: boolean | undefined;
-        ref: (instance: HTMLElement | null) => void;
+        ref: (instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
         onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
         onClick: (event?: MouseEvent) => void;
     };

package/hooks/use-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tabs.js","sources":["../src/hooks/use-tabs.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type TabListTitle, type UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n const [selectedTab, setSelectedTab] = useState<HTMLButtonElement \| null>(null);\n const [focusedTab, setFocusedTab] = useState<HTMLButtonElement \| null>(null);\n const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n const handleItemRef = useCallback(\n (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n if (node && item.id === selectedId) setSelectedTab(node);\n itemRefs.current[index] = node;\n },\n [selectedId],\n );\n\n const handleItemClick = useCallback(\n (event: MouseEvent, item: TabListTitle) => {\n if (onChange && item.id !== selectedId) {\n onChange(event, { selectedId: item.id });\n }\n },\n [onChange, selectedId],\n );\n\n const focusTab = useCallback(\n (position: 'prev' \| 'next' \| 'start' \| 'end') => {\n const refs = itemRefs.current;\n\n const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n if (refs.every((ref) => !tabAvailable(ref))) return;\n\n let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n if (focusedTabIndex === -1) {\n focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n }\n\n let newFocusIndex;\n\n switch (position) {\n case 'prev':\n newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n break;\n case 'next':\n newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n break;\n case 'start':\n newFocusIndex = 0;\n break;\n case 'end':\n newFocusIndex = refs.length - 1;\n break;\n }\n\n const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n while (!tabAvailable(refs[newFocusIndex])) {\n newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n }\n\n refs[newFocusIndex].focus();\n\n setFocusedTab(refs[newFocusIndex]);\n },\n [selectedTab, itemRefs],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n focusTab('prev');\n\n event.preventDefault();\n break;\n case 'ArrowRight':\n focusTab('next');\n\n event.preventDefault();\n break;\n case 'Home':\n focusTab('start');\n\n event.preventDefault();\n break;\n case 'End':\n focusTab('end');\n\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [focusTab],\n );\n\n const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n const item = titles[index];\n const itemSelected = item.id === selectedId;\n\n const refs: Array<Ref<HTMLElement>> = [\n (node: HTMLButtonElement) => {\n // eslint-disable-next-line no-param-reassign\n if (outerRef) outerRef.current = node;\n handleItemRef(node, item, index);\n },\n ];\n\n if (item.toggleRef) {\n refs.push(item.toggleRef);\n }\n\n return {\n role: 'tab',\n tabIndex: itemSelected ? 0 : -1,\n 'aria-selected': itemSelected,\n selected: itemSelected,\n dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n disabled: item.disabled,\n ref: mergeRefs(refs),\n onKeyDown: handleKeyDown,\n onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n };\n };\n\n return {\n getTabListItemProps,\n selectedTab,\n focusedTab,\n };\n}\n"],"names":["useState","useRef","useCallback","getDataTestId","mergeRefs"],"mappings":";;;;;;;;;;;;AAeM,SAAU,OAAO,CAAC,EAAmD,EAAA;QAAjD,EAAW,GAAA,EAAA,CAAA,MAAA,EAAX,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA;IACjD,IAAA,EAAA,GAAgCA,cAAQ,CAA2B,IAAI,CAAC,EAAvE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,cAAc,GAAA,EAAA,CAAA,CAAA,CAA4C;IACxE,IAAA,EAAA,GAA8BA,cAAQ,CAA2B,IAAI,CAAC,EAArE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA4C;AAC5E,IAAA,IAAM,QAAQ,GAAGC,YAAM,CAAsB,EAAE,CAAC;IAEhD,IAAM,aAAa,GAAGC,iBAAW,CAC7B,UAAC,IAAuB,EAAE,IAAkB,EAAE,KAAa,EAAA;AACvD,QAAA,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU;YAAE,cAAc,CAAC,IAAI,CAAC;AACxD,QAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI;AAClC,KAAC,EACD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,IAAM,eAAe,GAAGA,iBAAW,CAC/B,UAAC,KAAiB,EAAE,IAAkB,EAAA;~~AAClC~~,~~QAAA,~~IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU,EAAE;YACpC,QAAQ,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC~~;AAC3C;AACL~~,KAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACzB;AAED,IAAA,IAAM,QAAQ,GAAGA,iBAAW,CACxB,UAAC,QAA2C,EAAA;AACxC,QAAA,IAAM,IAAI,GAAG,QAAQ,CAAC,OAAO;AAE7B,QAAA,IAAM,YAAY,GAAG,UAAC,GAAsB,IAAK,OAAA,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAA,EAAA;AAErE,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAC,GAAG,EAAA,EAAK,OAAA,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;YAAE;AAE7C,QAAA,IAAI,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,QAAQ,CAAC,aAAa,KAAK,IAAI,CAA/B,EAA+B,CAAC;AAE/E,QAAA,IAAI,eAAe,KAAK,EAAE,EAAE;AACxB,YAAA,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,UAAC,IAAI,EAAK,EAAA,OAAA,IAAI,KAAK,WAAW,CAApB,EAAoB,CAAC~~;AACnE;AAED~~,QAAA,IAAI,aAAa;~~AAEjB~~,~~QAAA,~~QAAQ,QAAQ;AACZ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,OAAO;gBACR,aAAa,GAAG,CAAC;gBACjB;AACJ,YAAA,KAAK,KAAK;AACN,gBAAA,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC/B~~;AACP;QAED~~,IAAM,KAAK,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;QAEzD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;AACvC,YAAA,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,KAAK,IAAI,IAAI,CAAC,MAAM~~;AACtE;AAED~~,QAAA,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE;AAE3B,QAAA,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtC,KAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CAC1B;AAED,IAAA,IAAM,aAAa,GAAGA,iBAAW,CAC7B,UAAC,KAAuC,EAAA;~~QACpC~~,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,WAAW;gBACZ,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,YAAY;gBACb,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,MAAM;gBACP,QAAQ,CAAC,OAAO,CAAC;gBAEjB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,KAAK;gBACN,QAAQ,CAAC,KAAK,CAAC;gBAEf,KAAK,CAAC,cAAc,EAAE;gBACtB~~;AAGP;AACL~~,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,QAAwC,EAAA;AAChF,QAAA,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,KAAK,UAAU;AAE3C,QAAA,IAAM,IAAI,GAA4B;AAClC,YAAA,UAAC,IAAuB,EAAA;;AAEpB,gBAAA,IAAI,QAAQ;AAAE,oBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;AACrC,gBAAA,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;aACnC;SACJ;~~QAED~~,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC~~;AAC5B;QAED~~,OAAO;AACH,YAAA,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,YAAY,GAAG,CAAC,GAAG,EAAE;AAC/B,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,QAAQ,EAAE,YAAY;YACtB,UAAU,EAAEC,kCAAa,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;YACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,GAAG,EAAEC,0BAAS,CAAC,IAAI,CAAC;AACpB,YAAA,SAAS,EAAE,aAAa;AACxB,YAAA,OAAO,EAAE,UAAC,KAAkB,EAAA,EAAK,OAAA,eAAe,CAAC,KAAmB,EAAE,IAAI,CAAC,CAAA,EAAA;SAC9E;AACL,KAAC;IAED,OAAO;AACH,QAAA,mBAAmB,EAAA,mBAAA;AACnB,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}
1	+ {"version":3,"file":"use-tabs.js","sources":["../src/hooks/use-tabs.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type TabListTitle, type UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n const [selectedTab, setSelectedTab] = useState<HTMLButtonElement \| null>(null);\n const [focusedTab, setFocusedTab] = useState<HTMLButtonElement \| null>(null);\n const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n const handleItemRef = useCallback(\n (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n if (node && item.id === selectedId) setSelectedTab(node);\n itemRefs.current[index] = node;\n },\n [selectedId],\n );\n\n const handleItemClick = useCallback(\n (event: MouseEvent, item: TabListTitle) => {\n if (onChange && item.id !== selectedId) {\n onChange(event, { selectedId: item.id });\n }\n },\n [onChange, selectedId],\n );\n\n const focusTab = useCallback(\n (position: 'prev' \| 'next' \| 'start' \| 'end') => {\n const refs = itemRefs.current;\n\n const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n if (refs.every((ref) => !tabAvailable(ref))) return;\n\n let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n if (focusedTabIndex === -1) {\n focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n }\n\n let newFocusIndex;\n\n switch (position) {\n case 'prev':\n newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n break;\n case 'next':\n newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n break;\n case 'start':\n newFocusIndex = 0;\n break;\n case 'end':\n newFocusIndex = refs.length - 1;\n break;\n }\n\n const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n while (!tabAvailable(refs[newFocusIndex])) {\n newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n }\n\n refs[newFocusIndex].focus();\n\n setFocusedTab(refs[newFocusIndex]);\n },\n [selectedTab, itemRefs],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'ArrowLeft':\n focusTab('prev');\n\n event.preventDefault();\n break;\n case 'ArrowRight':\n focusTab('next');\n\n event.preventDefault();\n break;\n case 'Home':\n focusTab('start');\n\n event.preventDefault();\n break;\n case 'End':\n focusTab('end');\n\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n [focusTab],\n );\n\n const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n const item = titles[index];\n const itemSelected = item.id === selectedId;\n\n const refs: Array<Ref<HTMLElement>> = [\n (node: HTMLButtonElement) => {\n // eslint-disable-next-line no-param-reassign\n if (outerRef) outerRef.current = node;\n handleItemRef(node, item, index);\n },\n ];\n\n if (item.toggleRef) {\n refs.push(item.toggleRef);\n }\n\n return {\n role: 'tab',\n tabIndex: itemSelected ? 0 : -1,\n 'aria-selected': itemSelected,\n selected: itemSelected,\n dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n disabled: item.disabled,\n ref: mergeRefs(refs),\n onKeyDown: handleKeyDown,\n onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n };\n };\n\n return {\n getTabListItemProps,\n selectedTab,\n focusedTab,\n };\n}\n"],"names":["useState","useRef","useCallback","getDataTestId","mergeRefs"],"mappings":"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"}

package/modern/components/primary-tablist/Component.collapsible.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { type Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n PickerButtonDesktop,\n type PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { type TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n size = 'm',\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n collapsedTabsIds,\n fullWidthScroll,\n onChange,\n dataTestId,\n breakpoint,\n client,\n defaultMatchMediaValue,\n textStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n useTablistTitles({\n titles,\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n });\n\n useEffect(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab, tablistTitles]);\n\n const collapsedOptions = useMemo(\n () =>\n tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n (options, { toggleRef, ...title }) => {\n if (title.collapsed) {\n options.push({\n key: String(title.id),\n value: title.id,\n content: (\n <Title\n {...title}\n ref={toggleRef as Ref<HTMLButtonElement>}\n styles={styles}\n isOption={true}\n className={styles.noTextStyle}\n />\n ),\n });\n }\n\n return options;\n },\n [],\n ),\n [tablistTitles],\n );\n\n const collapsedAddonsLength = tablistTitles.filter(\n (title) => title.collapsed && title.rightAddons,\n ).length;\n\n const handleOptionsChange = (\n payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n ) => {\n if (payload.selected?.value && onChange) {\n const nativeMouseEvent = new MouseEvent('change');\n const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n }\n };\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n {collapsedOptions.length ? (\n <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n <PickerButtonDesktop\n fieldClassName={styles.title}\n optionClassName={cn(size && styles[size])}\n options={collapsedOptions}\n onChange={handleOptionsChange}\n rightAddons={\n collapsedAddonsLength ? (\n <Badge view='count' content={collapsedAddonsLength} />\n ) : null\n }\n size={56}\n view='text'\n label='Ещё'\n popoverPosition='bottom-end'\n disabled={showSkeleton}\n />\n </span>\n ) : null}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n return (\n <div\n ref={containerRef}\n className={cn(\n styles.container,\n textStyle && styles[textStyle],\n styles.desktop,\n containerClassName,\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;AAiBa,MAAA,yBAAyB,GAAG,CAAC,EACtC,IAAI,GAAG,GAAG,EACV,SAAS,EACT,kBAAkB,EAClB,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACrD,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,YAAY,EACZ,aAAa,GACF,KAAI;AACf,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAC7E,gBAAgB,CAAC;QACb,MAAM;QACN,UAAU;QACV,gBAAgB;QAChB,QAAQ;QACR,UAAU;QACV,MAAM;QACN,sBAAsB;AACzB,KAAA,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK~~;AAC9E;AACL~~,KAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAEhC,MAAM,gBAAgB,GAAG,OAAO,CAC5B,MACI,aAAa,CAAC,MAAM,CAChB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KAAI;~~QACjC~~,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,OAAO,CAAC,IAAI,CAAC;AACT,gBAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,KAAK,EAAE,KAAK,CAAC,EAAE;gBACf,OAAO,GACH,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,GACE,KAAK,EACT,GAAG,EAAE,SAAmC,EACxC,MAAM,EAAEA,YAAM,EACd,QAAQ,EAAE,IAAI,EACd,SAAS,EAAEA,YAAM,CAAC,WAAW,EAAA,CAC/B,CACL;AACJ,aAAA,CAAC~~;AACL;AAED~~,QAAA,OAAO,OAAO;KACjB,EACD,EAAE,CACL,EACL,CAAC,aAAa,CAAC,CAClB;IAED,MAAM,qBAAqB,GAAG,aAAa,CAAC,MAAM,CAC9C,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,WAAW,CAClD,CAAC,MAAM;AAER,IAAA,MAAM,mBAAmB,GAAG,CACxB,OAAsE,KACtE;~~AACA~~,~~QAAA,~~IAAI,OAAO,CAAC,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE;AACrC,YAAA,MAAM,gBAAgB,GAAG,IAAI,UAAU,CAAC,QAAQ,CAAC;AACjD,YAAA,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,gBAAgB,CAAC;AAEvE,YAAA,QAAQ,CAAC,mBAAmB,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC~~;AACxE;AACL~~,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,SAAS,EAAA,cAAA,EACA,UAAU,EACxB,SAAS,EAAE,EAAE,CAACA,YAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAIA,YAAM,CAAC,IAAI,CAAC,EAAE;AAC3E,YAAA,CAACA,YAAM,CAAC,eAAe,GAAG,eAAe;SAC5C,CAAC,EAAA;AAED,QAAA,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,KAAK,MAC1E,oBAAC,iBAAiB,EAAA,EAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAA,EACpC,CAAC,GAAG,EAAE,OAAO,MACV,KAAA,CAAA,aAAA,CAAC,KAAK,EACE,EAAA,GAAA,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,KAC/B,cAAc,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAEA,YAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,EAAE,CAAC,EAAE,CAACA,YAAM,CAAC,WAAW,GAAG,CAAC,SAAS,EAAE,CAAC,GACrD,CACL,CACe,CACvB,CAAC;AAED,QAAA,gBAAgB,CAAC,MAAM,IACpB,8BAAM,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAEA,YAAM,CAAC,aAAa,EAAA;AAC5D,YAAA,KAAA,CAAA,aAAA,CAAC,mBAAmB,EAChB,EAAA,cAAc,EAAEA,YAAM,CAAC,KAAK,EAC5B,eAAe,EAAE,EAAE,CAAC,IAAI,IAAIA,YAAM,CAAC,IAAI,CAAC,CAAC,EACzC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EACP,qBAAqB,IACjB,oBAAC,KAAK,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,qBAAqB,GAAI,IACtD,IAAI,EAEZ,IAAI,EAAE,EAAE,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,oBAAK,EACX,eAAe,EAAC,YAAY,EAC5B,QAAQ,EAAE,YAAY,EACxB,CAAA,CACC,IACP,IAAI;AAER,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEA,YAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,CAAI,CAC3C,CACT;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACTA,YAAM,CAAC,SAAS,EAChB,SAAS,IAAIA,YAAM,CAAC,SAAS,CAAC,EAC9BA,YAAM,CAAC,OAAO,EACd,kBAAkB,CACrB,EAEA,EAAA,aAAa,EAAE,CACd;AAEd;;;;"}
1	+ {"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { type Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n PickerButtonDesktop,\n type PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { type TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n size = 'm',\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n collapsedTabsIds,\n fullWidthScroll,\n onChange,\n dataTestId,\n breakpoint,\n client,\n defaultMatchMediaValue,\n textStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n useTablistTitles({\n titles,\n selectedId,\n collapsedTabsIds,\n onChange,\n breakpoint,\n client,\n defaultMatchMediaValue,\n });\n\n useEffect(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab, tablistTitles]);\n\n const collapsedOptions = useMemo(\n () =>\n tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n (options, { toggleRef, ...title }) => {\n if (title.collapsed) {\n options.push({\n key: String(title.id),\n value: title.id,\n content: (\n <Title\n {...title}\n ref={toggleRef as Ref<HTMLButtonElement>}\n styles={styles}\n isOption={true}\n className={styles.noTextStyle}\n />\n ),\n });\n }\n\n return options;\n },\n [],\n ),\n [tablistTitles],\n );\n\n const collapsedAddonsLength = tablistTitles.filter(\n (title) => title.collapsed && title.rightAddons,\n ).length;\n\n const handleOptionsChange = (\n payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n ) => {\n if (payload.selected?.value && onChange) {\n const nativeMouseEvent = new MouseEvent('change');\n const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n }\n };\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n {collapsedOptions.length ? (\n <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n <PickerButtonDesktop\n fieldClassName={styles.title}\n optionClassName={cn(size && styles[size])}\n options={collapsedOptions}\n onChange={handleOptionsChange}\n rightAddons={\n collapsedAddonsLength ? (\n <Badge view='count' content={collapsedAddonsLength} />\n ) : null\n }\n size={56}\n view='text'\n label='Ещё'\n popoverPosition='bottom-end'\n disabled={showSkeleton}\n />\n </span>\n ) : null}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n return (\n <div\n ref={containerRef}\n className={cn(\n styles.container,\n textStyle && styles[textStyle],\n styles.desktop,\n containerClassName,\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["styles"],"mappings":"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"}

package/modern/components/primary-tablist/Component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type Styles, type TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n size,\n styles = {},\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n scrollable = true,\n fullWidthScroll,\n onChange,\n dataTestId,\n platform,\n textStyle,\n inlineStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles,\n selectedId,\n onChange,\n });\n\n // расчет размера и положения нижней полосы\n useEffect(() => {\n if (selectedTab) {\n const updateLineWidth = () => {\n if (lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(updateLineWidth);\n\n observer.observe(selectedTab);\n\n return () => observer.disconnect();\n }\n\n return fnUtils.noop;\n }, [selectedTab, titles]);\n\n const handleTitleResize = useCallback(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab]);\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n onResize={handleTitleResize}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n return scrollable ? (\n <ScrollableContainer\n containerWrapperClassName={wrapperClassName}\n activeChild={focusedTab \|\| selectedTab}\n containerClassName={containerClassName}\n scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n fullWidthScroll={fullWidthScroll}\n view='primary'\n size={textStyle ? undefined : size}\n platform={platform}\n inlineStyle={inlineStyle}\n showSkeleton={showSkeleton}\n >\n {renderContent()}\n </ScrollableContainer>\n ) : (\n <div\n className={cn(styles.container, wrapperClassName, containerClassName)}\n style={inlineStyle}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":";;;;;;;;;AAYO,MAAM,cAAc,GAAG,CAAC,EAC3B,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,kBAAkB,EAClB,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACrD,UAAU,GAAG,IAAI,EACjB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,GACuB,KAAI;AACxC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE5C,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC;QAC7D,MAAM;QACN,UAAU;QACV,QAAQ;AACX,KAAA,CAAC;;IAGF,SAAS,CAAC,MAAK;~~AACX~~,~~QAAA,~~IAAI,WAAW,EAAE;YACb,MAAM,eAAe,GAAG,MAAK;~~gBACzB~~,IAAI,OAAO,CAAC,OAAO,EAAE;AACjB,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK~~;AAC9E;AACL~~,aAAC;AAED,YAAA,MAAMA,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,cAAsB;AACtE,YAAA,MAAM,QAAQ,GAAG,IAAID,gBAAc,CAAC,eAAe,CAAC;AAEpD,YAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;AAE7B,YAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE~~;AACrC;QAED~~,OAAO,OAAO,CAAC,IAAI;AACvB,KAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEzB,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK~~;AAC9E;AACL~~,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,SAAS,EAAA,cAAA,EACA,UAAU,EACxB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;AAC3E,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe;SAC5C,CAAC,EAAA;AAED,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,KAAK,MACnE,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAAC,GAAG,EAAE,cAAc,CAAC,EAAE,IACpC,CAAC,GAAG,EAAE,OAAO,MACV,oBAAC,KAAK,EAAA,EAAA,GACE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,EAC/B,GAAA,cAAc,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,SAAS,EAAE,CAAC,GACrD,CACL,CACe,CACvB,CAAC;AAEF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,CAAI,CAC3C,CACT;AAED,IAAA,MAAM,gBAAgB,GAAG,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE7E,OAAO,UAAU,IACb,KAAC,CAAA,aAAA,CAAA,mBAAmB,IAChB,yBAAyB,EAAE,gBAAgB,EAC3C,WAAW,EAAE,UAAU,IAAI,WAAW,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EAC/D,eAAe,EAAE,eAAe,EAChC,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,EAClC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAAA,EAEzB,aAAa,EAAE,CACE,KAEtB,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EACrE,KAAK,EAAE,WAAW,IAEjB,aAAa,EAAE,CACd,CACT;AACL;;;;"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type Styles, type TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n size,\n styles = {},\n className,\n containerClassName,\n titles = [],\n selectedId = titles.length ? titles[0].id : undefined,\n scrollable = true,\n fullWidthScroll,\n onChange,\n dataTestId,\n platform,\n textStyle,\n inlineStyle,\n showSkeleton,\n skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n const lineRef = useRef<HTMLDivElement>(null);\n\n const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n titles,\n selectedId,\n onChange,\n });\n\n // расчет размера и положения нижней полосы\n useEffect(() => {\n if (selectedTab) {\n const updateLineWidth = () => {\n if (lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n };\n\n const ResizeObserver = window.ResizeObserver \|\| ResizeObserverPolyfill;\n const observer = new ResizeObserver(updateLineWidth);\n\n observer.observe(selectedTab);\n\n return () => observer.disconnect();\n }\n\n return fnUtils.noop;\n }, [selectedTab, titles]);\n\n const handleTitleResize = useCallback(() => {\n if (selectedTab && lineRef.current) {\n lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n }\n }, [selectedTab]);\n\n const renderContent = () => (\n <div\n role='tablist'\n data-test-id={dataTestId}\n className={cn(styles.component, className, !textStyle && size && styles[size], {\n [styles.fullWidthScroll]: fullWidthScroll,\n })}\n >\n {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n <KeyboardFocusable key={restTitleProps.id}>\n {(ref, focused) => (\n <Title\n {...getTabListItemProps(index, ref)}\n {...restTitleProps}\n focused={focused}\n styles={styles}\n showSkeleton={showSkeleton}\n skeletonProps={skeletonProps}\n onResize={handleTitleResize}\n className={cn({ [styles.noTextStyle]: !textStyle })}\n />\n )}\n </KeyboardFocusable>\n ))}\n\n <div className={styles.line} ref={lineRef} />\n </div>\n );\n\n const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n return scrollable ? (\n <ScrollableContainer\n containerWrapperClassName={wrapperClassName}\n activeChild={focusedTab \|\| selectedTab}\n containerClassName={containerClassName}\n scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n fullWidthScroll={fullWidthScroll}\n view='primary'\n size={textStyle ? undefined : size}\n platform={platform}\n inlineStyle={inlineStyle}\n showSkeleton={showSkeleton}\n >\n {renderContent()}\n </ScrollableContainer>\n ) : (\n <div\n className={cn(styles.container, wrapperClassName, containerClassName)}\n style={inlineStyle}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":"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"}

package/modern/components/primary-tablist/Component.mobile.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TabListProps } from '../../typings';
-export declare type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
+export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 export declare const PrimaryTabListMobile: (props: PrimaryTabListMobileProps) => React.JSX.Element;