@janrankenhohn/react-thumbnail-list 0.5.2 → 0.5.4

package/dist/index.cjs.js

@@ -29,10 +29,10 @@ const useThumbnailListItemContext = () => {
   return context;
 };
 
-/**
- * Creates a ellipies text with webkit css styles
- * @param props lineClamp: lines till ellipses
- * @returns component
+/**
+ * Creates a ellipies text with webkit css styles
+ * @param props lineClamp: lines till ellipses
+ * @returns component
  */
 function EllipsisContainer(props) {
   const EllipsisContainer = material.styled('div')(p => ({
@@ -140,6 +140,7 @@ var ThumbnailListItem$1 = /*#__PURE__*/React__default["default"].memo(ThumbnailL
 const RatioWrapper = material.styled('div')(() => ({
   // Assuming a 16:9 aspect ratio
   paddingTop: '27.75%',
+  // 9 / 16 = 0.5625
   position: 'relative',
   width: '100%',
   '& > *': {
@@ -205,11 +206,11 @@ ThumbnailListMainContent.defaultProps = {
   }
 };
 
-/**
- * Generic method that sorts an array of items based on an item key
- * @param values The array that should be sorted
- * @param orderType The key of the entity that the array should be sorted by
- * @returns A new reference of the ordered array
+/**
+ * Generic method that sorts an array of items based on an item key
+ * @param values The array that should be sorted
+ * @param orderType The key of the entity that the array should be sorted by
+ * @returns A new reference of the ordered array
  */
 function orderByArray(values, orderType) {
   return [...values].sort((a, b) => {
@@ -272,11 +273,11 @@ const useTagFilteredThumbnailListItems = _ref => {
   };
 };
 
-/**
- * Filters a list of event by a search term
- * @param allEvents event list that will be formatted
- * @param initialSearchTerm
- * @returns
+/**
+ * Filters a list of event by a search term
+ * @param allEvents event list that will be formatted
+ * @param initialSearchTerm
+ * @returns
  */
 const useFilteredThumbnailListItems = function (allItems) {
   let initialSearchTerm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -426,15 +427,15 @@ ThumbnailListFilterTags.defaultProps = {
   muiCollapseBreakpoint: 'md'
 };
 
-/**
- * Displays a generic MUI select dropdown.
- * Optinal collapses to a sort icon at a certain breakpoint
- * @param props.label Select Label
- * @param props.width * Width of the input field
- * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
- * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
- * @param props.items * Array of items (name-value-pairs) that will be the select options
- * @returns Drowpdown Input Component
+/**
+ * Displays a generic MUI select dropdown.
+ * Optinal collapses to a sort icon at a certain breakpoint
+ * @param props.label Select Label
+ * @param props.width * Width of the input field
+ * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
+ * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
+ * @param props.items * Array of items (name-value-pairs) that will be the select options
+ * @returns Drowpdown Input Component
  */
 function DropdownInput(props) {
   var _props$defaultValue, _props$collapseBreakp;
@@ -564,11 +565,11 @@ ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
 ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
 ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
 
-/**
- * Main Component: Renders all sub components
- * Includes ThumbnailList Provider for context data
- * @param props react children, items
- * @returns component
+/**
+ * Main Component: Renders all sub components
+ * Includes ThumbnailList Provider for context data
+ * @param props react children, items
+ * @returns component
  */
 function ThumbnailList(props) {
   const combinedConfig = {

package/dist/index.esm.js

@@ -17,10 +17,10 @@ const useThumbnailListItemContext = () => {
   return context;
 };
 
-/**
- * Creates a ellipies text with webkit css styles
- * @param props lineClamp: lines till ellipses
- * @returns component
+/**
+ * Creates a ellipies text with webkit css styles
+ * @param props lineClamp: lines till ellipses
+ * @returns component
  */
 function EllipsisContainer(props) {
   const EllipsisContainer = styled('div')(p => ({
@@ -128,6 +128,7 @@ var ThumbnailListItem$1 = /*#__PURE__*/React.memo(ThumbnailListItem);
 const RatioWrapper = styled('div')(() => ({
   // Assuming a 16:9 aspect ratio
   paddingTop: '27.75%',
+  // 9 / 16 = 0.5625
   position: 'relative',
   width: '100%',
   '& > *': {
@@ -193,11 +194,11 @@ ThumbnailListMainContent.defaultProps = {
   }
 };
 
-/**
- * Generic method that sorts an array of items based on an item key
- * @param values The array that should be sorted
- * @param orderType The key of the entity that the array should be sorted by
- * @returns A new reference of the ordered array
+/**
+ * Generic method that sorts an array of items based on an item key
+ * @param values The array that should be sorted
+ * @param orderType The key of the entity that the array should be sorted by
+ * @returns A new reference of the ordered array
  */
 function orderByArray(values, orderType) {
   return [...values].sort((a, b) => {
@@ -260,11 +261,11 @@ const useTagFilteredThumbnailListItems = _ref => {
   };
 };
 
-/**
- * Filters a list of event by a search term
- * @param allEvents event list that will be formatted
- * @param initialSearchTerm
- * @returns
+/**
+ * Filters a list of event by a search term
+ * @param allEvents event list that will be formatted
+ * @param initialSearchTerm
+ * @returns
  */
 const useFilteredThumbnailListItems = function (allItems) {
   let initialSearchTerm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -414,15 +415,15 @@ ThumbnailListFilterTags.defaultProps = {
   muiCollapseBreakpoint: 'md'
 };
 
-/**
- * Displays a generic MUI select dropdown.
- * Optinal collapses to a sort icon at a certain breakpoint
- * @param props.label Select Label
- * @param props.width * Width of the input field
- * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
- * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
- * @param props.items * Array of items (name-value-pairs) that will be the select options
- * @returns Drowpdown Input Component
+/**
+ * Displays a generic MUI select dropdown.
+ * Optinal collapses to a sort icon at a certain breakpoint
+ * @param props.label Select Label
+ * @param props.width * Width of the input field
+ * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
+ * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
+ * @param props.items * Array of items (name-value-pairs) that will be the select options
+ * @returns Drowpdown Input Component
  */
 function DropdownInput(props) {
   var _props$defaultValue, _props$collapseBreakp;
@@ -552,11 +553,11 @@ ThumbnailListHeader.SearchField = ThumbnailListSearchField$1;
 ThumbnailListHeader.FilterTags = ThumbnailListFilterTags;
 ThumbnailListHeader.Sort = ThumbnailListHeaderSort;
 
-/**
- * Main Component: Renders all sub components
- * Includes ThumbnailList Provider for context data
- * @param props react children, items
- * @returns component
+/**
+ * Main Component: Renders all sub components
+ * Includes ThumbnailList Provider for context data
+ * @param props react children, items
+ * @returns component
  */
 function ThumbnailList(props) {
   const combinedConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janrankenhohn/react-thumbnail-list",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "rollup -c",
     "build-watch": "rollup -c -w",
-    "start-playground": "cd playground && npm run start",
+    "play": "cd playground && npm run dev",
     "i-all": "npm i && cd playground && npm i",
     "dev": "npm-run-all --parallel build-watch start-playground",
     "start": "react-scripts start",
@@ -77,7 +77,9 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
+  },
+  "overrides": {
+    "typescript": "^5.3.2"
   }
 }