@amazon-devices/vega-carousel 0.1.3

package/dist/CarouselScrollable/native/CarouselNativeWrapper.js

@@ -0,0 +1,164 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselNativeWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const CarouselScrollableProps_1 = require("../CarouselScrollableProps");
+const CarouselNativeHostComponent_1 = require("./CarouselNativeHostComponent");
+const CarouselNativeItemWrapper_1 = require("./CarouselNativeItemWrapper");
+const CarouselNativeLogic_1 = require("./CarouselNativeLogic");
+const utils_1 = require("../../utils");
+/**
+ * Internal implementation of the {@link CarouselNativeWrapper} component.
+ *
+ * Check the {@link CarouselNativeWrapper} documentation for details on this component.
+ *
+ * @template ItemT The type of data items the list will use to render its items.
+ * @template KeyT The type used as items unique identifiers (also called _keys_,
+ *           or _stable IDs_) in the list;
+ *
+ * @see {@link CarouselNativeWrapper}
+ */
+function CarouselNativeInner(rawProps, ref) {
+    const props = (0, CarouselScrollableProps_1.useDefaults)(rawProps);
+    const dataAdapter = (0, CarouselScrollableProps_1.getDataAdapter)(props);
+    const hostRef = react_1.default.useRef(null);
+    const [childrenStates] = react_1.default.useState(new Map());
+    const { style, uniqueId, initialStartIndex, orientation, renderedItemsCount, numOffsetItems, showSelectionBorder, selectionBorderStyle, selectionBorderStrategy, focusedItemScaleFactor, pressedItemScaleFactor, shiftItemsOnSelection, renderItem, onItemBind, onItemUnbind, onSelectionChanged, } = props;
+    const initialStartIndexInternal = react_1.default.useMemo(() => initialStartIndex < dataAdapter.getItemCount()
+        ? initialStartIndex
+        : Math.max(0, dataAdapter.getItemCount() - 1), [initialStartIndex, dataAdapter]);
+    // Activation animations on the native layer assume pressedItemScaleFactor is based on the unselected dimensions of an item.
+    // However, the prop for this wrapper is documented to be based on the selected dimensions to better align with specs given by BXT.
+    // This means that if a partner passes an pressedItemScaleFactor of 0.94 and a focusedItemScaleFactor of 1.4, when an item is pressed it should
+    // scale down to 94% of its selected dimensions.
+    // To conform to the logic on the native layer and to accomplish the same behavior we multiple the two scale factors together to yield 1.316. Instead of applying this adjusted scale factor to the selected dimensions
+    // we apply this scale factor to the unselected dimensions which the user perceives as the item shrinking when the item is pressed
+    const adjustedPressedItemScaleFactor = focusedItemScaleFactor * pressedItemScaleFactor;
+    const renderedFrames = react_1.default.useRef(renderedItemsCount);
+    const lastInitialData = react_1.default.useRef(undefined);
+    const lastParentId = react_1.default.useRef(undefined);
+    const onNativeSelectionChanged = react_1.default.useCallback(event => {
+        (0, CarouselNativeLogic_1.triggerOnSelectionChangeCallback)(onSelectionChanged, event);
+    }, [onSelectionChanged]);
+    const unbindCallback = react_1.default.useCallback(index => (0, CarouselNativeLogic_1.triggerOnItemUnbindCallback)(onItemUnbind, dataAdapter, childrenStates, index), [childrenStates, dataAdapter, onItemUnbind]);
+    const bindCallback = react_1.default.useCallback(index => (0, CarouselNativeLogic_1.triggerOnItemBindCallback)(onItemBind, dataAdapter, childrenStates, index), [childrenStates, dataAdapter, onItemBind]);
+    const onDataChangeCallback = react_1.default.useCallback((changes, animated) => {
+        utils_1.Log.d('The CarouselNative component received a notification about a data change on the backing system.');
+        (0, CarouselNativeLogic_1.callNativeNotifyDataChange)(hostRef.current, changes, animated ?? true);
+    }, [hostRef]);
+    react_1.default.useImperativeHandle(ref, () => {
+        return {
+            enableInputEvents: enable => (0, CarouselNativeLogic_1.callNativeEnableInputEvents)(hostRef.current, enable),
+            setSelectedItem: (index, animated) => (0, CarouselNativeLogic_1.callNativeSetSelectedItem)(hostRef.current, index, animated),
+            setOverflowItemsVisible: (visible, animated) => (0, CarouselNativeLogic_1.callNativeSetOverflowItemsVisible)(hostRef.current, visible, animated),
+            notifyDataChange: (changes, animated) => onDataChangeCallback(changes, animated),
+            reset: () => (0, CarouselNativeLogic_1.callReset)(hostRef.current),
+        };
+    });
+    const styleWithFlexDirection = react_1.default.useMemo(() => (0, CarouselNativeLogic_1.addFlexDirectionStyle)(style, orientation), [style, orientation]);
+    let initialData = lastInitialData.current && lastInitialData.current.length !== 0
+        ? lastInitialData.current
+        : (0, CarouselNativeLogic_1.getInitialData)(dataAdapter, renderItem, initialStartIndexInternal, numOffsetItems, renderedFrames.current);
+    if (!lastParentId.current || !lastInitialData.current) {
+        lastParentId.current = uniqueId;
+        lastInitialData.current = initialData;
+    }
+    if (lastParentId.current !== uniqueId) {
+        initialData = (0, CarouselNativeLogic_1.getInitialData)(dataAdapter, renderItem, initialStartIndexInternal, numOffsetItems, renderedFrames.current);
+        lastParentId.current = uniqueId;
+        lastInitialData.current = initialData;
+    }
+    (0, react_1.useEffect)(() => {
+        dataAdapter.registerDataChangeCallback?.(onDataChangeCallback);
+    }, [dataAdapter, onDataChangeCallback]);
+    const startIndex = 0;
+    const endIndex = dataAdapter.getItemCount();
+    const indices = initialData.map(data => data.index);
+    const relativeInitialStartIndex = react_1.default.useMemo(() => {
+        const relativeIndex = indices.indexOf(initialStartIndexInternal);
+        return relativeIndex < 0 ? 0 : relativeIndex;
+    }, [indices, initialStartIndexInternal]);
+    utils_1.Log.i(`[CarouselScrollable] Rendering Carousel Native Wrapper "${uniqueId || ''}", startIndex = ${startIndex}, endIndex = ${endIndex}, initialSelectedIndex : ${initialStartIndexInternal}, initialData Length : ${initialData.length}, initialData Indices : ${JSON.stringify(indices)}`);
+    return (react_1.default.createElement(CarouselNativeHostComponent_1.CarouselNativeHostComponent, { ...props, initialStartIndex: initialStartIndexInternal, relativeInitialStartIndex: relativeInitialStartIndex, dataStartIndex: startIndex, dataLimitIndex: endIndex, style: styleWithFlexDirection, scaleItemOnPress: pressedItemScaleFactor != 1.0, scaleItemOnSelection: focusedItemScaleFactor !== 1.0, shiftItemsOnSelection: shiftItemsOnSelection.width !== 1.0 ||
+            shiftItemsOnSelection.height !== 1.0, onSelectionChanged: onNativeSelectionChanged, ref: hostRef }, Array(renderedFrames.current)
+        .fill({})
+        .map((_, index) => (react_1.default.createElement(CarouselNativeItemWrapper_1.CarouselNativeItemWrapper, { key: index, parentId: uniqueId, dataIndex: initialData[index]?.index, itemShift: initialData[index]?.shift, initialElement: initialData[index]?.element, initialKey: initialData[index]?.key, showSelectionBorder: showSelectionBorder, selectionBorderStyle: selectionBorderStyle, selectionBorderStrategy: selectionBorderStrategy, focusedItemScaleFactor: focusedItemScaleFactor, pressedItemScaleFactor: adjustedPressedItemScaleFactor, shiftItemsScaleFactor: shiftItemsOnSelection, dataAdapter: dataAdapter, renderItem: renderItem, bindCallback: bindCallback, unbindCallback: unbindCallback })))));
+}
+/**
+ * The Kepler {@link CarouselScrollable} definition.
+ *
+ * This implementation of the list uses a Native Turbo Module to control user
+ * interaction, animations, and native frame recycling.
+ *
+ * This native layer only has information about indexes; therefore, when it
+ * initially renders, it will have the knowledge about its rendered items and
+ * nothing more.
+ *
+ * As the user interacts with the component, the native layer will send messages
+ * to the JS components, and expect updates from it about any change occurring
+ * on the data backing the scrollable list.
+ *
+ * Check the documentation of {@link CarouselScrollableRef} for details about the
+ * information that the user can send to the native side.
+ *
+ * If you're required to have an encapsulated object to handle the data side of
+ * your application, check the {@link CarouselDataAdapter} documentation for a
+ * contract you can implement and use with this component.
+ *
+ * To avoid problems when using the list component, you need to understand its
+ * relation with your data.
+ *
+ * At no point, the scrollable will have any information about the _things_ your
+ * application is displaying in it, and it will never try to infer any change on
+ * your data.
+ *
+ * The user of this component is the sole owner of the data backing it, and as
+ * such, is responsible for any data change on the data set, together with the
+ * notification to the list informing it about them.
+ *
+ * With this concept, one can implement a variety of composable components
+ * taking full advantage of the scrollable list one.
+ *
+ * @template ItemT The type of data items the list will use to render its items.
+ * @template KeyT The type used as items unique identifiers (also called _keys_,
+ *           or _stable IDs_) in the list;
+ *
+ * @param {CarouselScrollableProps<ItemT, KeyT>} props All of the configuration
+ *        attributes one can change in the scrollable list.
+ * @param {React.Ref<CarouselScrollableRef>} ref An optional {@link React.Ref} object
+ *        that allows one to access the imperative functions from the
+ *        {@link CarouselScrollableRef.}
+ *
+ * @see {@link CarouselScrollableProps}
+ * @see {@link CarouselScrollableRef}
+ * @see {@link CarouselDataAdapter}
+ */
+exports.CarouselNativeWrapper = react_1.default.memo(react_1.default.forwardRef(CarouselNativeInner));

package/dist/CarouselScrollable/native/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CarouselNativeWrapper';
+export * from './CarouselNativeHostComponent';
+export * from './CarouselNativeItemWrapper';
+export * from './CarouselNativeItemHostComponent';
+export * from './CarouselNativeLogic';

package/dist/CarouselScrollable/native/index.js

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CarouselNativeWrapper"), exports);
+__exportStar(require("./CarouselNativeHostComponent"), exports);
+__exportStar(require("./CarouselNativeItemWrapper"), exports);
+__exportStar(require("./CarouselNativeItemHostComponent"), exports);
+__exportStar(require("./CarouselNativeLogic"), exports);

package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CarouselScrollableProps } from '../CarouselScrollableProps';
+import { CarouselScrollableRef } from '../CarouselScrollableRef';
+/**
+ * This Component is mainly used to allow us to maintain our Stock React Native
+ * use case, so we can continue to compare an existing stock solution against
+ * our Vega Script counterpart.
+ *
+ * This scrollable will try to provide the minimum functionality for navigating
+ * the list of objects, and should never be used in production.
+ */
+declare function JSRecyclerViewListInner<ItemT, KeyT = React.Key>(props: CarouselScrollableProps<ItemT, KeyT>, _ref?: React.Ref<CarouselScrollableRef>): React.JSX.Element;
+/**
+ * The `JSRecyclerViewList` component is a wrapper around `RecyclerListView`
+ * that provides the same API used by our {@link CarouselScrollable}.
+ *
+ * Refer to the {@link CarouselScrollable} documentation for details and usage.
+ *
+ * @see {@link CarouselScrollable}
+ * @see {@link CarouselScrollableProps}
+ */
+export declare const JSRecyclerViewList: <ItemT, KeyT = React.Key>(props: CarouselScrollableProps<ItemT, KeyT> & {
+    ref?: React.Ref<CarouselScrollableRef> | undefined;
+}) => React.JSX.Element;
+export {};

package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.js

@@ -0,0 +1,150 @@
+"use strict";
+/*
+ * Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSRecyclerViewList = void 0;
+// This file is to keep stockRN functioning and hence ignoring coverage
+// istanbul ignore file
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const recyclerlistview_1 = require("recyclerlistview");
+const CarouselScrollableProps_1 = require("../CarouselScrollableProps");
+const CarouselScrollableTypes_1 = require("../CarouselScrollableTypes");
+const SCREEN_DP = (() => react_native_1.Dimensions.get('window'))();
+/**
+ * Determines if an object has the given property.
+ *
+ * This function works around TypeScript errors by indicating the incoming `obj`
+ * is an object which has key `prop`.
+ *
+ * ```
+ *   'prop' in obj && obj.prop === 'value'          // Property 'prop' does not exist on type 'object'.
+ *   hasProperty(obj, prop) && obj.pop === 'value'  // No errors or warnings
+ * ```
+ *
+ * @param obj object to check for property
+ * @param prop property name to check on object
+ * @typeParam X - type of `obj` which extends {@see object}
+ * @typeParam Y type of `prop` which extends {@see PropertyKey} - string | number | symbol
+ * @return true if `obj` has property `prop`; otherwise, false.
+ */
+function hasProperty(obj, prop) {
+    try {
+        return prop in obj;
+    }
+    catch (e) {
+        console.warn('hasProperty threw an exception, defaulting to false: {}', e);
+        return false;
+    }
+}
+/**
+ * This Component is mainly used to allow us to maintain our Stock React Native
+ * use case, so we can continue to compare an existing stock solution against
+ * our Vega Script counterpart.
+ *
+ * This scrollable will try to provide the minimum functionality for navigating
+ * the list of objects, and should never be used in production.
+ */
+function JSRecyclerViewListInner(props, _ref) {
+    const dataAdapter = (0, CarouselScrollableProps_1.getDataAdapter)(props);
+    const { testID, renderItem, orientation } = props;
+    // If keyProvider is undefined, then compare the two items directly
+    const dataDataProvider = React.useMemo(() => {
+        const rowHasChanged = (r1, r2) => {
+            const key1 = dataAdapter.getItemKey(r1, 0);
+            const key2 = dataAdapter.getItemKey(r2, 0);
+            return key1 !== key2;
+        };
+        const getStableId = index => {
+            const item = dataAdapter.getItem(index);
+            if (item) {
+                const key = dataAdapter.getItemKey(item, index);
+                return key;
+            }
+            return String(index);
+        };
+        return new recyclerlistview_1.DataProvider(rowHasChanged, getStableId);
+    }, [dataAdapter]);
+    const scrollableRef = React.useRef(null);
+    const rowRenderer = React.useCallback((_layoutId, _item, index) => {
+        const actualItem = dataAdapter.getItem(index);
+        if (!actualItem) {
+            return null;
+        }
+        const c = renderItem(actualItem, index);
+        if (!c || !c.props) {
+            return c;
+        }
+        if (hasProperty(c.props, 'onFocusChanged')) {
+            const { onFocusChanged } = c.props;
+            c.props.onFocusChanged = (event) => {
+                if (event.focused) {
+                    scrollableRef.current?.scrollToIndex(index, true);
+                }
+                onFocusChanged(event);
+            };
+        }
+        if (hasProperty(c.props, 'onItemFocusChanged')) {
+            const { onItemFocusChanged } = c.props;
+            c.props.onItemFocusChanged = (childItem) => {
+                if (childItem.childEvent.focused) {
+                    scrollableRef.current?.scrollToIndex(index, true);
+                }
+                onItemFocusChanged(childItem);
+            };
+        }
+        return c;
+    }, [dataAdapter, renderItem]);
+    const minStyle = {
+        minHeight: 1,
+        minWidth: 1,
+    };
+    return (React.createElement(recyclerlistview_1.RecyclerListView, { testID: testID, ref: scrollableRef, style: minStyle, scrollViewProps: {
+            style: [
+                orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL
+                    ? { paddingRight: 1000 }
+                    : { paddingBottom: 1000 },
+            ],
+            scrollEnabled: false,
+            showsHorizontalScrollIndicator: false,
+            showsVerticalScrollIndicator: false,
+        }, dataProvider: dataDataProvider, rowRenderer: rowRenderer, initialRenderIndex: 0, isHorizontal: orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL, renderAheadOffset: orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL
+            ? SCREEN_DP.width * 0.2
+            : SCREEN_DP.height * 0.2 }));
+}
+/**
+ * The `JSRecyclerViewList` component is a wrapper around `RecyclerListView`
+ * that provides the same API used by our {@link CarouselScrollable}.
+ *
+ * Refer to the {@link CarouselScrollable} documentation for details and usage.
+ *
+ * @see {@link CarouselScrollable}
+ * @see {@link CarouselScrollableProps}
+ */
+exports.JSRecyclerViewList = React.forwardRef(JSRecyclerViewListInner);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CarouselScrollable';
+export * from './CarouselData';
+export * from './Carousel';

package/dist/index.js

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Copyright (c) 2023 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CarouselScrollable"), exports);
+__exportStar(require("./CarouselData"), exports);
+__exportStar(require("./Carousel"), exports);

package/dist/kepler/tm-manifest.json

@@ -0,0 +1 @@
+{"schema":1,"fileSets":{"native":[{"arch":"aarch64","variant":"release","directoryPath":"aarch64-release"},{"arch":"armv7","variant":"release","directoryPath":"armv7-release"},{"arch":"x86_64","variant":"release","directoryPath":"x86_64-release"},{"arch":"aarch64","variant":"debug","directoryPath":"aarch64-debug"},{"arch":"armv7","variant":"debug","directoryPath":"armv7-debug"},{"arch":"x86_64","variant":"debug","directoryPath":"x86_64-debug"}]}}