@procore/core-react 10.26.0 → 10.26.1-rc.2

package/dist/esm/components/Thumbnail/Thumbnail.types.d.ts

@@ -0,0 +1,203 @@
+import { ReactNode } from 'react';
+import { DocumentIconVariant } from './DocumentIcon';
+export declare type SizeVariant = 'sm' | 'lg';
+export declare type LayoutVariant = 'row' | 'column';
+export interface QaTags {
+    /**
+     * @since 10.19.0
+     */
+    caption?: string;
+}
+export interface ThumbnailProps {
+    /**
+     * An image URL or a <Code>File</Code> to generate a preview for
+     * @since 10.19.0
+     */
+    src?: File | string;
+    /**
+     * Thumbnail size
+     * @default 'lg'
+     * @since 10.19.0
+     */
+    size?: SizeVariant;
+    /**
+     * Use "focused" view
+     * @default false
+     * @since 10.19.0
+     */
+    focused?: boolean;
+    /**
+     * Use "selected" view
+     * @default false
+     * @since 10.19.0
+     */
+    selected?: boolean;
+    /**
+     * Use "disabled" view
+     * @default false
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    clickable?: boolean;
+    /**
+     * Thumbnail caption
+     * @default ''
+     * @since 10.19.0
+     */
+    caption?: string;
+    /**
+     * Show placeholder for caption if it is empty
+     * @default false
+     * @since 10.19.0
+     */
+    hasCaptionPlaceholder?: boolean;
+    /**
+     * Thumbnail label
+     * @default ''
+     * @since 10.19.0
+     */
+    label?: string;
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * @since 10.19.0
+     */
+    qa?: QaTags;
+}
+export interface FilePreviewProps {
+    /**
+     * @since 10.19.0
+     */
+    file: File;
+}
+export declare type PlaceholderProps = Omit<ThumbnailProps, 'src'> & {
+    /**
+     * Unless variant is provided, filename is used
+     * to choose a placeholder icon based on extension.
+     * E.g. for 'filename="panda.png"', image {' '}
+     * variant will be used
+     * @since 10.19.0
+     * */
+    filename?: string;
+    /**
+     * @since 10.19.0
+     */
+    variant?: DocumentIconVariant;
+};
+export interface MultilineCaptionProps {
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    caption: string;
+    /**
+     * @since 10.19.0
+     */
+    error: boolean;
+    /**
+     * @since 10.19.0
+     */
+    layout: 'row' | 'column';
+    /**
+     * @since 10.19.0
+     */
+    qa: string;
+}
+export interface SinglelineCaptionProps {
+    /**
+     * @since 10.19.0
+     */
+    caption: string;
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error: boolean;
+    /**
+     * @since 10.19.0
+     */
+    layout: 'row' | 'column';
+    /**
+     * @since 10.19.0
+     */
+    qa: string;
+}
+export interface CaptionTooltipProps {
+    /**
+     * @since 10.19.0
+     */
+    overlay: string;
+    /**
+     * @since 10.19.0
+     */
+    isVisible: boolean;
+    /**
+     * @since 10.19.0
+     */
+    children: ReactNode;
+}
+export interface CaptionProps {
+    /**
+     * @since 10.19.0
+     */
+    layout: LayoutVariant;
+    /**
+     * @since 10.19.0
+     */
+    caption: string;
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error: boolean;
+    /**
+     * @since 10.19.0
+     */
+    hasCaptionPlaceholder: boolean;
+    /**
+     * @since 10.19.0
+     */
+    multiline: boolean;
+    /**
+     * @since 10.19.0
+     */
+    qa?: string;
+}
+export interface LabelProps {
+    /**
+     * @since 10.19.0
+     */
+    label: string;
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+}
+export interface TickIconProps {
+    /**
+     * @since 10.19.0
+     */
+    size: SizeVariant;
+    /**
+     * @since 10.19.0
+     */
+    selected: boolean;
+}

package/dist/esm/components/Thumbnail/Thumbnail.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Thumbnail.types.js.map

package/dist/esm/components/Thumbnail/Thumbnail.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.types.js","sourceRoot":"","sources":["../../../../src/components/Thumbnail/Thumbnail.types.ts"],"names":[],"mappings":""}

package/dist/esm/components/Thumbnail/Thumbnail.utils.d.ts

@@ -0,0 +1,3 @@
+import { DocumentIconVariant } from './DocumentIcon';
+export declare function getIsFilePreviewableAsImage(src: File | string | undefined): boolean;
+export declare function getVariantForFilename(filename: string): DocumentIconVariant;

package/dist/esm/components/Thumbnail/Thumbnail.utils.js

@@ -0,0 +1,63 @@
+var _a;
+import { getFileExtension } from '../../utils/filename';
+export function getIsFilePreviewableAsImage(src) {
+    return (src instanceof File &&
+        src.type.startsWith('image/') &&
+        // not allow previewing vendor image mime types, such as "image/vnd.adobe.photoshop"
+        !src.type.startsWith('image/vnd.') &&
+        // not allow previewing .tiff images, as a not browser-compatible format
+        src.type !== 'image/tiff');
+}
+var extensions = (_a = {
+        image: ['png', 'jpg', 'jpeg', 'gif', 'psd', 'tiff', 'tif', 'bmp'],
+        drawing: ['cad', 'dwg', 'dwf', 'dwfx'],
+        email: ['msg', 'eml'],
+        gantt: ['mpp', 'p6', 'xer'],
+        zip: ['zip', 'rar', '7zip'],
+        xml: ['rtf', 'txt'],
+        word: ['doc', 'docx'],
+        ini: ['ini', 'xml', 'exe'],
+        mov: ['mov', 'avi'],
+        pdf: ['pdf'],
+        powerpoint: ['ppt', 'pptx'],
+        excel: ['csv', 'xls', 'xlsx']
+    },
+    _a['3d'] = [
+        'stl',
+        'obj',
+        'ma',
+        'fbx',
+        'dae',
+        '3ds',
+        'iges',
+        'step',
+        'wrl',
+        'rvt',
+        'ifc',
+        'nwc',
+        'nwd',
+        'nwf',
+    ],
+    _a.unknown = [],
+    _a);
+var extensionsByVariant = Object.entries(extensions);
+var variantByExtension = extensionsByVariant.reduce(function (acc, _a) {
+    var type = _a[0], exts = _a[1];
+    exts.forEach(function (ext) {
+        acc[ext] = type;
+    });
+    return acc;
+}, {});
+export function getVariantForFilename(filename) {
+    var defaultUnknownName = 'unknown';
+    try {
+        var ext = getFileExtension(filename);
+        return ext
+            ? variantByExtension[ext] || defaultUnknownName
+            : defaultUnknownName;
+    }
+    catch (_a) {
+        return defaultUnknownName;
+    }
+}
+//# sourceMappingURL=Thumbnail.utils.js.map

package/dist/esm/components/Thumbnail/Thumbnail.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.utils.js","sourceRoot":"","sources":["../../../../src/components/Thumbnail/Thumbnail.utils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGvD,MAAM,UAAU,2BAA2B,CAAC,GAA8B;IACxE,OAAO,CACL,GAAG,YAAY,IAAI;QACnB,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC7B,oFAAoF;QACpF,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;QAClC,wEAAwE;QACxE,GAAG,CAAC,IAAI,KAAK,YAAY,CAC1B,CAAA;AACH,CAAC;AAED,IAAM,UAAU;QACd,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC;QACjE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;QACtC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;QACrB,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC;QAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;QAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;QACnB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;QACrB,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAC1B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;QACnB,GAAG,EAAE,CAAC,KAAK,CAAC;QACZ,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;QAC3B,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;;IAC7B,GAAC,IAAI,IAAG;QACN,KAAK;QACL,KAAK;QACL,IAAI;QACJ,KAAK;QACL,KAAK;QACL,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;KACN;IACD,UAAO,GAAE,EAAE;OACZ,CAAA;AAED,IAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAGlD,CAAA;AAEH,IAAM,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAY;QAAX,IAAI,QAAA,EAAE,IAAI,QAAA;IACrE,IAAI,CAAC,OAAO,CAAC,UAAC,GAAG;QACf,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IACjB,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAA;AACZ,CAAC,EAAE,EAAyC,CAAC,CAAA;AAE7C,MAAM,UAAU,qBAAqB,CAAC,QAAgB;IACpD,IAAM,kBAAkB,GAAG,SAAS,CAAA;IAEpC,IAAI;QACF,IAAM,GAAG,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QACtC,OAAO,GAAG;YACR,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,kBAAkB;YAC/C,CAAC,CAAC,kBAAkB,CAAA;KACvB;IAAC,WAAM;QACN,OAAO,kBAAkB,CAAA;KAC1B;AACH,CAAC"}

package/dist/esm/components/Thumbnail/ThumbnailCaption.d.ts

@@ -0,0 +1,2 @@
+import { CaptionProps } from './Thumbnail.types';
+export declare function ThumbnailCaption({ layout, disabled, error, caption, hasCaptionPlaceholder, multiline, qa, ...props }: CaptionProps): JSX.Element | null;

package/dist/esm/components/Thumbnail/ThumbnailCaption.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useOverflowObserver } from '../../effects/OverflowObserver';
+import { parseFilename } from '../../utils/filename';
+import Tooltip from '../Tooltip';
+import { StyledCaptionText, StyledMultilineCaption, StyledPlaceholderCaption, StyledSingleLineCaption, StyledSinglelineCaptionBody, StyledSinglelineCaptionEnding, } from './Thumbnail.styles';
+function CaptionTooltip(_a) {
+    var children = _a.children, overlay = _a.overlay, isVisible = _a.isVisible;
+    return (React.createElement(Tooltip, { overlay: React.createElement(Tooltip.Content, null, overlay), placement: "bottom", trigger: isVisible ? 'hover' : 'none' }, children));
+}
+function MultilineCaption(_a) {
+    var disabled = _a.disabled, caption = _a.caption, error = _a.error, layout = _a.layout, qa = _a.qa, props = __rest(_a, ["disabled", "caption", "error", "layout", "qa"]);
+    var _b = useOverflowObserver(), ref = _b.ref, isOverflowing = _b.isOverflowing;
+    return (React.createElement(CaptionTooltip, { overlay: caption, isVisible: isOverflowing },
+        React.createElement("span", { "data-qa": qa },
+            React.createElement(StyledMultilineCaption, __assign({ ref: ref, disabled: disabled, error: error, layout: layout }, props),
+                React.createElement(StyledCaptionText, null, caption)))));
+}
+function SinglelineCaption(_a) {
+    var caption = _a.caption, error = _a.error, disabled = _a.disabled, layout = _a.layout, qa = _a.qa, props = __rest(_a, ["caption", "error", "disabled", "layout", "qa"]);
+    var _b = useOverflowObserver(), ref = _b.ref, isOverflowing = _b.isOverflowing;
+    var _c = parseFilename(caption), filename = _c.filename, extension = _c.extension, isFilename = _c.isFilename;
+    return (React.createElement(CaptionTooltip, { overlay: caption, isVisible: isOverflowing },
+        React.createElement(StyledSingleLineCaption, __assign({ error: error, disabled: disabled, layout: layout, "data-qa": qa }, props),
+            React.createElement(StyledSinglelineCaptionBody, { ref: ref }, isFilename ? "".concat(filename, ".") : caption),
+            isFilename && (React.createElement(StyledSinglelineCaptionEnding, null, extension)))));
+}
+export function ThumbnailCaption(_a) {
+    var layout = _a.layout, disabled = _a.disabled, error = _a.error, caption = _a.caption, hasCaptionPlaceholder = _a.hasCaptionPlaceholder, multiline = _a.multiline, _b = _a.qa, qa = _b === void 0 ? '' : _b, props = __rest(_a, ["layout", "disabled", "error", "caption", "hasCaptionPlaceholder", "multiline", "qa"]);
+    if (!caption) {
+        var captionPlaceholder = hasCaptionPlaceholder && '- -';
+        if (captionPlaceholder) {
+            return (React.createElement(StyledPlaceholderCaption, __assign({}, props, { disabled: disabled, error: error, layout: layout, "data-qa": qa }),
+                React.createElement(StyledCaptionText, null, captionPlaceholder)));
+        }
+        return null;
+    }
+    if (multiline) {
+        return (React.createElement(MultilineCaption, __assign({ disabled: disabled, caption: caption, error: error, layout: layout, qa: qa }, props)));
+    }
+    return (React.createElement(SinglelineCaption, __assign({ caption: caption, disabled: disabled, error: error, layout: layout, qa: qa }, props)));
+}
+//# sourceMappingURL=ThumbnailCaption.js.map

package/dist/esm/components/Thumbnail/ThumbnailCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailCaption.js","sourceRoot":"","sources":["../../../../src/components/Thumbnail/ThumbnailCaption.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Thumbnail/ThumbnailPreview.d.ts

@@ -0,0 +1,2 @@
+import { FilePreviewProps } from './Thumbnail.types';
+export declare function ThumbnailPreview({ file }: FilePreviewProps): JSX.Element | null;

package/dist/esm/components/Thumbnail/ThumbnailPreview.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyledImageThumbnailPreview } from './Thumbnail.styles';
+export function ThumbnailPreview(_a) {
+    var file = _a.file;
+    var _b = React.useState(''), fileUrl = _b[0], setFileUrl = _b[1];
+    React.useEffect(function () {
+        var _a;
+        if (!file) {
+            setFileUrl('');
+            return;
+        }
+        setFileUrl(((_a = URL.createObjectURL(file)) !== null && _a !== void 0 ? _a : '').toString());
+    }, [file]);
+    React.useEffect(function () {
+        return function () {
+            if (fileUrl) {
+                URL.revokeObjectURL(fileUrl);
+            }
+        };
+    }, [fileUrl]);
+    return fileUrl ? React.createElement(StyledImageThumbnailPreview, { "$bgImage": fileUrl }) : null;
+}
+//# sourceMappingURL=ThumbnailPreview.js.map

package/dist/esm/components/Thumbnail/ThumbnailPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailPreview.js","sourceRoot":"","sources":["../../../../src/components/Thumbnail/ThumbnailPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAA;AAGhE,MAAM,UAAU,gBAAgB,CAAC,EAA0B;QAAxB,IAAI,UAAA;IAC/B,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAzC,OAAO,QAAA,EAAE,UAAU,QAAsB,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC;;QACd,IAAI,CAAC,IAAI,EAAE;YACT,UAAU,CAAC,EAAE,CAAC,CAAA;YACd,OAAM;SACP;QAED,UAAU,CAAC,CAAC,MAAA,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,KAAK,CAAC,SAAS,CAAC;QACd,OAAO;YACL,IAAI,OAAO,EAAE;gBACX,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;aAC7B;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,OAAO,CAAC,CAAC,CAAC,oBAAC,2BAA2B,gBAAW,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAAA;AAC5E,CAAC"}

package/dist/esm/components/Thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+export { Thumbnail as default, Thumbnail } from './Thumbnail';
+export { ThumbnailProps } from './Thumbnail.types';

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

@@ -0,0 +1,2 @@
+export { Thumbnail as default, Thumbnail } from './Thumbnail';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Thumbnail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.constants.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=ThumbnailGrid.constants.js.map

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailGrid.constants.js","sourceRoot":"","sources":["../../../../src/components/ThumbnailGrid/ThumbnailGrid.constants.ts"],"names":[],"mappings":""}

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DivAttributes } from '../../utils/types';
+import { ThumbnailGridItem, ThumbnailGridProps } from './ThumbnailGrid.types';
+export declare const ThumbnailGrid: React.ForwardRefExoticComponent<Omit<DivAttributes, "onSelect"> & ThumbnailGridProps<ThumbnailGridItem> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.hooks.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const useGridNavigation: ({ indicesRows: initialIndicesRows, }: {
+    indicesRows: number[][];
+}) => {
+    index: number;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setIndicesRows: React.Dispatch<React.SetStateAction<number[][]>>;
+    up: (e: React.KeyboardEvent) => number;
+    down: (e: React.KeyboardEvent) => number;
+    left: (e: React.KeyboardEvent) => number;
+    right: (e: React.KeyboardEvent) => number;
+};

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.hooks.js

@@ -0,0 +1,86 @@
+import React from 'react';
+export var useGridNavigation = function (_a) {
+    var initialIndicesRows = _a.indicesRows;
+    var _b = React.useState(0), index = _b[0], setIndex = _b[1];
+    var _c = React.useState(initialIndicesRows), indicesRows = _c[0], setIndicesRows = _c[1];
+    var _d = React.useState(0), gridSize = _d[0], setGridSize = _d[1];
+    React.useEffect(function () {
+        setGridSize(indicesRows.flat().length);
+    }, [indicesRows]);
+    React.useEffect(function () {
+        setIndex(function (prev) { return (prev < gridSize ? prev : 0); });
+    }, [gridSize]);
+    var finalIndex = gridSize - 1;
+    var up = function (e) {
+        e.preventDefault();
+        var getNextIndex = function () {
+            var rowIndex = indicesRows.findIndex(function (rowCells) {
+                return rowCells.includes(index);
+            });
+            var nextRowIndex = rowIndex - 1;
+            if (nextRowIndex < 0) {
+                return indicesRows[rowIndex][0];
+            }
+            var nextRow = indicesRows[nextRowIndex];
+            var nextCellIndex = indicesRows[rowIndex].findIndex(function (navigationIndex) { return navigationIndex === index; });
+            var nextNavigationIndex = nextRow[nextCellIndex];
+            return nextNavigationIndex !== null && nextNavigationIndex !== void 0 ? nextNavigationIndex : nextRow[nextRow.length - 1];
+        };
+        var nextIndex = getNextIndex();
+        setIndex(nextIndex);
+        return nextIndex;
+    };
+    var down = function (e) {
+        e.preventDefault();
+        var getNextIndex = function () {
+            var rowIndex = indicesRows.findIndex(function (rowCells) {
+                return rowCells.includes(index);
+            });
+            var nextRowIndex = rowIndex + 1;
+            var finalRowIndex = indicesRows.length - 1;
+            if (nextRowIndex > finalRowIndex) {
+                var row = indicesRows[rowIndex];
+                return row[row.length - 1];
+            }
+            var nextRow = indicesRows[nextRowIndex];
+            var nextCellIndex = indicesRows[rowIndex].findIndex(function (navigationIndex) { return navigationIndex === index; });
+            var nextNavigationIndex = nextRow[nextCellIndex];
+            return nextNavigationIndex !== null && nextNavigationIndex !== void 0 ? nextNavigationIndex : nextRow[nextRow.length - 1];
+        };
+        var nextIndex = getNextIndex();
+        setIndex(nextIndex);
+        return nextIndex;
+    };
+    var right = function (e) {
+        if (index === finalIndex) {
+            return index;
+        }
+        e.preventDefault();
+        var nextIndex = index + 1;
+        if (nextIndex <= finalIndex) {
+            setIndex(nextIndex);
+        }
+        return nextIndex;
+    };
+    var left = function (e) {
+        if (index === 0) {
+            return index;
+        }
+        e.preventDefault();
+        var nextIndex = index - 1;
+        if (nextIndex >= 0) {
+            setIndex(nextIndex);
+        }
+        return nextIndex;
+    };
+    return {
+        index: index,
+        setIndex: setIndex,
+        setIndicesRows: setIndicesRows,
+        up: up,
+        down: down,
+        left: left,
+        right: right,
+    };
+};
+//# sourceMappingURL=ThumbnailGrid.hooks.js.map

package/dist/esm/components/ThumbnailGrid/ThumbnailGrid.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailGrid.hooks.js","sourceRoot":"","sources":["../../../../src/components/ThumbnailGrid/ThumbnailGrid.hooks.ts"],"names":[],"mappings":"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"}