@amazon-devices/vega-carousel 0.1.3 → 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# Vega Carousel
+
+For complete documentation, installation instructions, and examples, see [Get Started with Vega Carousel](https://developer.integ.amazon.com/docs/vega-api/latest/vega-carousel.html).
+
+**Important**: The Carousel component is available as a separate package that is not included in the Vega UI Component Library. If you previously used Carousel as part of the Vega UI Component Library, we recommend you [migrate to the latest version](https://developer.integ.amazon.com/docs/vega-api/latest/vega-carousel-migrate.html).

package/dist/Carousel/Carousel.js

@@ -89,11 +89,11 @@ function Scrollable({ dataAdapter: { getItem, getItemCount, getItemKey, notifyDa
     const notifyDataErrorScrollable = react_1.default.useCallback((error) => {
         return notifyDataError(error);
     }, [notifyDataError]);
-    return (react_1.default.createElement(CarouselScrollable_1.CarouselScrollable, { ref: carouselRef, getItem: getItemScrollable, getItemCount: getItemCount, getItemKey: getItemKey, notifyDataError: notifyDataErrorScrollable, renderItem: renderItem, testID: testID, uniqueId: uniqueId, orientation: orientation === 'horizontal'
+    return (<CarouselScrollable_1.CarouselScrollable ref={carouselRef} getItem={getItemScrollable} getItemCount={getItemCount} getItemKey={getItemKey} notifyDataError={notifyDataErrorScrollable} renderItem={renderItem} testID={testID} uniqueId={uniqueId} orientation={orientation === 'horizontal'
             ? CarouselScrollable_1.ListOrientation.HORIZONTAL
-            : CarouselScrollable_1.ListOrientation.VERTICAL, renderedItemsCount: renderedItemsCount, numOffsetItems: numOffsetItems, navigableScrollOffset: navigableScrollAreaMargin, hasPreferredFocus: hasPreferredFocus, initialStartIndex: initialStartIndex, hideItemsBeforeSelection: hideItemsBeforeSelection, trapFocusOnOrientation: trapSelectionOnOrientation, style: containerStyle, itemPadding: itemPadding, itemPaddingOnFocus: itemPaddingOnSelection, pressedItemScaleFactor: pressedItemScaleFactor, focusedItemScaleFactor: selectedItemScaleFactor, getSelectedItemOffset: getSelectedItemOffset, itemPressedDuration: itemPressedDuration, itemScrollDuration: itemScrollDuration, containerFocusChangeDuration: containerSelectionChangeDuration, selectionStrategy: listSelectionStrategy, pinnedFocusOffset: selectionStrategy === 'pinned'
+            : CarouselScrollable_1.ListOrientation.VERTICAL} renderedItemsCount={renderedItemsCount} numOffsetItems={numOffsetItems} navigableScrollOffset={navigableScrollAreaMargin} hasPreferredFocus={hasPreferredFocus} initialStartIndex={initialStartIndex} hideItemsBeforeSelection={hideItemsBeforeSelection} trapFocusOnOrientation={trapSelectionOnOrientation} style={containerStyle} itemPadding={itemPadding} itemPaddingOnFocus={itemPaddingOnSelection} pressedItemScaleFactor={pressedItemScaleFactor} focusedItemScaleFactor={selectedItemScaleFactor} getSelectedItemOffset={getSelectedItemOffset} itemPressedDuration={itemPressedDuration} itemScrollDuration={itemScrollDuration} containerFocusChangeDuration={containerSelectionChangeDuration} selectionStrategy={listSelectionStrategy} pinnedFocusOffset={selectionStrategy === 'pinned'
             ? (0, Utils_1.percentageStringToNumber)(pinnedSelectedItemOffset)
-            : 0, onSelectionChanged: onSelectionChanged, showSelectionBorder: selectionBorder !== undefined, selectionBorderStyle: borderStyleProps, selectionBorderStrategy: borderStrategy }));
+            : 0} onSelectionChanged={onSelectionChanged} showSelectionBorder={selectionBorder !== undefined} selectionBorderStyle={borderStyleProps} selectionBorderStrategy={borderStrategy}/>);
 }
 /**
  * Carousel is used to implement a single row of content metadata tiles in a

package/dist/CarouselScrollable/CarouselSimple.js

@@ -58,7 +58,7 @@ function CarouselSimpleInner(props, ref) {
     const getItemCount = react_1.default.useCallback(() => data.length, [data]);
     const getItemKey = react_1.default.useCallback((item, index) => getItemKeyProp?.(item, index) ?? index, [getItemKeyProp]);
     const notifyDataError = react_1.default.useCallback(() => false, []);
-    return (react_1.default.createElement(CarouselScrollable_1.CarouselScrollable, { ...props, getItem: getItem, getItemCount: getItemCount, getItemKey: getItemKey, notifyDataError: notifyDataError, ref: hostRef }));
+    return (<CarouselScrollable_1.CarouselScrollable {...props} getItem={getItem} getItemCount={getItemCount} getItemKey={getItemKey} notifyDataError={notifyDataError} ref={hostRef}/>);
 }
 /**
  * `CarouselSimple` is a wrapper around the {@link CarouselScrollable} component that

package/dist/CarouselScrollable/native/CarouselNativeItemWrapper.js

@@ -166,7 +166,7 @@ class CarouselNativeItemWrapper extends react_1.default.Component {
                     this.itemElement = this.props.initialElement;
                 }
                 else {
-                    this.itemElement = react_1.default.createElement(react_1.default.Fragment, null);
+                    this.itemElement = <></>;
                     this.useInitialElement = false;
                 }
             }
@@ -237,7 +237,7 @@ class CarouselNativeItemWrapper extends react_1.default.Component {
         // We need to update all undefined elements with an empty view in order to account for the loading state
         // TODO : Update this logic once Scrollable getItem APIs support a loading state instead of just valid and invalid cases
         if (!element) {
-            element = react_1.default.createElement(react_1.default.Fragment, null);
+            element = <></>;
         }
         return element;
     };
@@ -246,23 +246,25 @@ class CarouselNativeItemWrapper extends react_1.default.Component {
      * {@link itemElement} as its child component.
      */
     renderStateItem = () => {
-        return (react_1.default.createElement(CarouselNativeItemHostComponent_1.CarouselNativeItemHost, { testID: this.props.testID, parentId: this.state.parentId, dataIndex: this.state.dataIndex, showSelectionBorder: this.props.showSelectionBorder ?? false, selectionBorderColor: this.props.showSelectionBorder
+        return (<CarouselNativeItemHostComponent_1.CarouselNativeItemHost testID={this.props.testID} parentId={this.state.parentId} dataIndex={this.state.dataIndex} showSelectionBorder={this.props.showSelectionBorder ?? false} selectionBorderColor={this.props.showSelectionBorder
                 ? (0, react_native_1.processColor)(this.props.selectionBorderStyle?.borderColor ??
                     defaultBorderStyle.borderColor)
-                : 0, selectionBorderWidth: this.props.selectionBorderStyle?.borderWidth ??
-                defaultBorderStyle.borderWidth, selectionBorderRadius: this.props.selectionBorderStyle?.borderRadius ??
-                defaultBorderStyle.borderRadius, selectionBorderStrokeColor: this.props.showSelectionBorder
+                : 0} selectionBorderWidth={this.props.selectionBorderStyle?.borderWidth ??
+                defaultBorderStyle.borderWidth} selectionBorderRadius={this.props.selectionBorderStyle?.borderRadius ??
+                defaultBorderStyle.borderRadius} selectionBorderStrokeColor={this.props.showSelectionBorder
                 ? (0, react_native_1.processColor)(this.props.selectionBorderStyle?.borderStrokeColor ??
                     defaultBorderStyle.borderStrokeColor)
-                : 0, selectionBorderStrokeWidth: this.props.selectionBorderStyle?.borderStrokeWidth ??
-                defaultBorderStyle.borderStrokeWidth, selectionBorderStrokeRadius: this.props.selectionBorderStyle?.borderStrokeRadius ??
-                defaultBorderStyle.borderStrokeRadius, selectionBorderStrategy: this.props.selectionBorderStrategy
+                : 0} selectionBorderStrokeWidth={this.props.selectionBorderStyle?.borderStrokeWidth ??
+                defaultBorderStyle.borderStrokeWidth} selectionBorderStrokeRadius={this.props.selectionBorderStyle?.borderStrokeRadius ??
+                defaultBorderStyle.borderStrokeRadius} selectionBorderStrategy={this.props.selectionBorderStrategy
                 ? (0, CarouselScrollableTypes_1.selectionBorderStrategyToBorderStrategy)(this.props.selectionBorderStrategy)
-                : 0, pressedItemScaleFactor: this.props.pressedItemScaleFactor, focusedItemScaleFactor: this.props.focusedItemScaleFactor, shiftItemsWidthScaleFactor: this.state.itemShift
+                : 0} pressedItemScaleFactor={this.props.pressedItemScaleFactor} focusedItemScaleFactor={this.props.focusedItemScaleFactor} shiftItemsWidthScaleFactor={this.state.itemShift
                 ? this.state.itemShift.width
-                : this.props.shiftItemsScaleFactor.width, shiftItemsHeightScaleFactor: this.state.itemShift
+                : this.props.shiftItemsScaleFactor.width} shiftItemsHeightScaleFactor={this.state.itemShift
                 ? this.state.itemShift.height
-                : this.props.shiftItemsScaleFactor.height, onBind: this.onBind }, this.itemElement));
+                : this.props.shiftItemsScaleFactor.height} onBind={this.onBind}>
+        {this.itemElement}
+      </CarouselNativeItemHostComponent_1.CarouselNativeItemHost>);
     };
     ////////////////////////////////////////
     /// Private attributes

package/dist/CarouselScrollable/native/CarouselNativeWrapper.js

@@ -107,10 +107,12 @@ function CarouselNativeInner(rawProps, ref) {
         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 })))));
+    return (<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) => (<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}/>))}
+    </CarouselNativeHostComponent_1.CarouselNativeHostComponent>);
 }
 /**
  * The Kepler {@link CarouselScrollable} definition.

package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.js

@@ -125,7 +125,7 @@ function JSRecyclerViewListInner(props, _ref) {
         minHeight: 1,
         minWidth: 1,
     };
-    return (React.createElement(recyclerlistview_1.RecyclerListView, { testID: testID, ref: scrollableRef, style: minStyle, scrollViewProps: {
+    return (<recyclerlistview_1.RecyclerListView testID={testID} ref={scrollableRef} style={minStyle} scrollViewProps={{
             style: [
                 orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL
                     ? { paddingRight: 1000 }
@@ -134,9 +134,9 @@ function JSRecyclerViewListInner(props, _ref) {
             scrollEnabled: false,
             showsHorizontalScrollIndicator: false,
             showsVerticalScrollIndicator: false,
-        }, dataProvider: dataDataProvider, rowRenderer: rowRenderer, initialRenderIndex: 0, isHorizontal: orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL, renderAheadOffset: orientation === CarouselScrollableTypes_1.ListOrientation.HORIZONTAL
+        }} 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 }));
+            : SCREEN_DP.height * 0.2}/>);
 }
 /**
  * The `JSRecyclerViewList` component is a wrapper around `RecyclerListView`

package/package.json

@@ -1 +1 @@
-{"name": "@amazon-devices/vega-carousel", "version": "0.1.3", "main": "dist/index.js", "types": "dist/index.d.ts", "files": ["dist", "react-native.config.js", "THIRD_PARTY_NOTICES.txt"], "scripts": {"clean": "rm -rf build dist generated logs node_modules", "test:snapshot": "jest --colors --updateSnapshot", "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest --colors", "lint": "eslint src --ext .ts,.tsx", "lint:fix": "eslint src --ext .ts,.tsx --fix", "lint-staged": "lint-staged --allow-empty", "format": "clang-format -i --glob=\"native/**/*.{cpp,h}\"", "git-commit-template": "git-commit-template .git-commit-template", "compile": "tsc -p tsconfig-build.json", "build": "npm-run-all format compile"}, "dependencies": {"@amazon-devices/react-native-kepler": "^2.0.0", "ansi-colors": "^4.1.3", "react": "^18.2.0", "react-native": "^0.72.0", "recyclerlistview": "4.2.1"}, "devDependencies": {"@babel/core": "^7.20.0", "@babel/plugin-transform-private-methods": "^7.23.3", "@babel/runtime": "^7.20.0", "@bam.tech/jest-junit-reports-merger": "^1.1.0", "@react-native-community/eslint-config": "^3.2.0", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "^11.5.4", "@types/jest": "^28.0.0", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^5.18.0", "babel-jest": "^28.0.0", "clang-format": "^1.8.0", "eslint": "^8.19.0", "eslint-plugin-react-native": "^4.1.0", "git-commit-template": "^1.0.5", "lint-staged": "^12.3.7", "jest": "^28.0.0", "jest-junit": "^16.0.0", "metro-react-native-babel-preset": "^0.76.5", "npm-run-all": "^4.1.5", "prettier": "^3.0.0", "react": "^18.2.0", "react-native": "^0.72.0", "react-test-renderer": "18.2.0", "ts-jest": "^28.0.0", "typedoc": "^0.25.7", "typescript": "4.9.5", "@amazon-devices/kepler-cli-platform": "^0", "@react-native-community/cli": "^11.2.0"}, "resolutions": {"@types/react": "^18"}, "peerDependencies": {"react": "^18.2.0", "react-native": "^0.72.0"}, "kepler": {"projectType": "turbomodule", "toolchain": "clang", "targets": ["tv"], "os": ["vega"]}, "eslintConfig": {"extends": "@react-native-community", "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "root": true}, "prettier": {"arrowParens": "avoid", "bracketSameLine": true, "bracketSpacing": false, "singleQuote": true, "trailingComma": "all"}, "npm-pretty-much": {"allowUnsafeName": "reason for using a unsafe name"}, "license": "See license in LICENSE"}
+{"name": "@amazon-devices/vega-carousel", "version": "1.0.0", "main": "dist/index.js", "types": "dist/index.d.ts", "files": ["dist", "react-native.config.js", "THIRD_PARTY_NOTICES.txt"], "scripts": {"clean": "rm -rf build dist generated logs node_modules", "test:snapshot": "jest --colors --updateSnapshot", "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest --colors", "lint": "eslint src --ext .ts,.tsx", "lint:fix": "eslint src --ext .ts,.tsx --fix", "lint-staged": "lint-staged --allow-empty", "format": "clang-format -i --glob=\"native/**/*.{cpp,h}\"", "git-commit-template": "git-commit-template .git-commit-template", "compile": "tsc -p tsconfig-build.json", "release": "npm-run-all format build", "build:js": "tsc -p tsconfig-build.json", "build:native:debug": "vega build -b Debug", "build:native:release": "vega build -b Release", "build:debug": "npm-run-all build:js build:native:debug", "build": "npm-run-all build:js build:native:debug build:native:release"}, "dependencies": {"ansi-colors": "^4.1.3"}, "devDependencies": {"@amazon-devices/react-native-kepler": "^4.0.0", "@babel/core": "^7.20.0", "@babel/plugin-transform-private-methods": "^7.23.3", "@babel/runtime": "^7.20.0", "@bam.tech/jest-junit-reports-merger": "^1.1.0", "@react-native-community/eslint-config": "^3.2.0", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "^13.0.0", "@types/jest": "^28.0.0", "@types/react": "^19.0.0", "@types/react-test-renderer": "^19.0.0", "@typescript-eslint/eslint-plugin": "^5.18.0", "babel-jest": "^29.0.0", "clang-format": "^1.8.0", "eslint": "^8.19.0", "eslint-plugin-react-native": "^4.1.0", "git-commit-template": "^1.0.5", "lint-staged": "^12.3.7", "jest": "^29.0.0", "jest-junit": "^16.0.0", "metro-react-native-babel-preset": "^0.76.5", "npm-run-all": "^4.1.5", "prettier": "^3.0.0", "react": "^19.0.0", "react-native": "^0.83.0", "react-test-renderer": "^19.0.0", "recyclerlistview": "4.2.1", "ts-jest": "^29.0.0", "typedoc": "^0.25.7", "typescript": "4.9.5", "@amazon-devices/kepler-cli-platform": "^0", "@react-native-community/cli": "^11.2.0"}, "peerDependencies": {"@amazon-devices/react-native-kepler": "^4.0.0", "react": "^19.0.0", "react-native": "^0.83.0"}, "kepler": {"projectType": "turbomodule", "toolchain": "clang", "targets": ["tv"], "os": ["vega"]}, "eslintConfig": {"extends": "@react-native-community", "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "root": true}, "prettier": {"arrowParens": "avoid", "bracketSameLine": true, "bracketSpacing": false, "singleQuote": true, "trailingComma": "all"}, "npm-pretty-much": {"allowUnsafeName": "reason for using a unsafe name"}, "license": "See license in LICENSE"}

package/react-native.config.js

@@ -9,8 +9,6 @@ module.exports = {
             provider: 'application',
             turbomodules: [],
             components: [
-              'KeplerScrollable',
-              'KeplerScrollableItemFrame',
               'CarouselNative',
               'CarouselNativeItem',
             ],