@telus-uds/components-base 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 08 Sep 2022 15:35:51 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Sep 2022 20:03:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.16.0
+
+Mon, 12 Sep 2022 20:03:12 GMT
+
+### Minor changes
+
+- Support React ^18.1 (alan.slater@nearform.com)
+- Add tabs prop to Carousel, deprecating CarouselTabs (alan.slater@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.5.0
+
+### Patches
+
+- fix: correct ToggleSwitch regressions (ruslan.bredikhin@nearform.com)
+- fix Skeleton animation to work with RNW 0.18 (ruslan.bredikhin@nearform.com)
+- fix: docs button & buttonlink a11yprops build crash (srikanthkhari@gmail.com)
+
 ## 1.15.0
 
-Thu, 08 Sep 2022 15:35:51 GMT
+Thu, 08 Sep 2022 15:38:07 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -89,6 +89,7 @@
         "previousIcon": "icon",
         "showPreviousNextNavigation": "show",
         "showPanelNavigation": "show",
+        "showPanelTabs": "show",
         "spaceBetweenSlideAndPreviousNextNavigation": "size",
         "spaceBetweenSlideAndPanelNavigation": "size",
         "thumbnailBorderColor": "color",
@@ -5553,7 +5554,7 @@
             }
           },
           "attributes": {
-            "acceptsRNA11yProps": false
+            "acceptsRNA11yProps": true
           }
         }
       }
@@ -8141,6 +8142,154 @@
         }
       }
     },
+    "Button": {
+      "docs": {
+        "description": "",
+        "props": {
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "children": {
+            "type": {
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
+            },
+            "required": false,
+            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
+          },
+          "onPress": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when the button is pressed. Required unless the button has a href."
+          },
+          "iconProps": {
+            "type": {
+              "name": "exact",
+              "value": {
+                "variant": {
+                  "name": "custom",
+                  "raw": "variantProp.propType",
+                  "required": false
+                },
+                "tokens": {
+                  "name": "custom",
+                  "raw": "getTokensPropType('Icon')",
+                  "required": false
+                },
+                "accessibilityLabel": {
+                  "name": "string",
+                  "description": "Descriptive label used in web SVG title tag for accessibility",
+                  "required": false
+                },
+                "scalesWithText": {
+                  "name": "bool",
+                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
+          },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": true
+        }
+      }
+    },
     "ButtonGroup": {
       "docs": {
         "description": "",
@@ -8382,6 +8531,214 @@
         }
       }
     },
+    "ButtonLink": {
+      "docs": {
+        "description": "`ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.\nButtonLink is a block-level component and should not be used inline.",
+        "props": {
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "borderColor": "color",
+                "borderWidth": "border",
+                "borderRadius": "radius",
+                "shadow": "shadow",
+                "fontSize": "fontSize",
+                "color": "color",
+                "lineHeight": "lineHeight",
+                "textAlign": "flexJustifyContent",
+                "alignSelf": "flexAlign",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "backgroundColor": "color",
+                "opacity": "opacity",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "width": "size",
+                "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBackgroundColor": "color"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Alias for `inactive`"
+          },
+          "children": {
+            "type": {
+              "name": "custom",
+              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
+            },
+            "required": false,
+            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
+          },
+          "onPress": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Function called when the button is pressed. Required unless the button has a href."
+          },
+          "iconProps": {
+            "type": {
+              "name": "exact",
+              "value": {
+                "variant": {
+                  "name": "custom",
+                  "raw": "variantProp.propType",
+                  "required": false
+                },
+                "tokens": {
+                  "name": "custom",
+                  "raw": "getTokensPropType('Icon')",
+                  "required": false
+                },
+                "accessibilityLabel": {
+                  "name": "string",
+                  "description": "Descriptive label used in web SVG title tag for accessibility",
+                  "required": false
+                },
+                "scalesWithText": {
+                  "name": "bool",
+                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
+          },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPressIn": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPressOut": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "href": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": ""
+          },
+          "hrefAttrs": {
+            "type": {
+              "name": "shape",
+              "value": {
+                "download": {
+                  "name": "string",
+                  "required": false
+                },
+                "rel": {
+                  "name": "string",
+                  "required": false
+                },
+                "target": {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'_self'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_blank'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_parent'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_top'",
+                      "computed": false
+                    }
+                  ],
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": true
+        }
+      }
+    },
     "Carousel": {
       "docs": {
         "description": "Carousel is a general-purpose content slider that can be used to render content in terms of slides.\n\n  ## Usage\n  - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel\n  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide\n  - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout\n  - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content\n  - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need\n\n  ## `useCarousel` custom hook\n\n  ```jsx\n  import { useCarousel } from '@telus-uds/components-base'\n\n  const SomeComponentWithinCarouselItem = () => {\n    const {\n      activeIndex,\n      totalItems,\n      width,\n      goTo\n    } = useCarousel()\n    return <Text>Hi!</Text>\n  }\n  ```\n\n  You can use `useCarousel` to hook into internal state of the Carousel component like:\n  - `activeIndex`: Index of the current slide\n  - `totalItems`: Total number of items/slides passed to the Carousel\n  - `width`: Width of the individual carousel slide\n  - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide\n\n  ## Accessibility\n\n  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props\n  - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides\n\n  ## Platform considerations\n  The component is available on both native platforms and web.\n\n  ## Other considerations\n  - You may want to use the same kind of layout in all your slides to avoid visual and height differences\n  - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality\n\n  ## Tokens\n\n  You can override the following tokens in exceptional circumstances:\n  - `previousIcon` - Icon of the previous button\n  - `nextIcon` - Icon of the next button\n  - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation\n  - `showPanelNavigation` - If you want to show/hide the panel navigation\n  - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons\n  - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area",
@@ -8469,6 +8826,17 @@
             "required": false,
             "description": "Minimal part of slide width must be swiped for changing index.\nOtherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index"
           },
+          "refocus": {
+            "defaultValue": {
+              "value": "Boolean(tabs)",
+              "computed": true
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+          },
           "title": {
             "defaultValue": {
               "value": "'carousel'",
@@ -8641,6 +9009,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",
@@ -8710,12 +9079,17 @@
             "required": false,
             "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
           },
-          "refocus": {
+          "tabs": {
             "type": {
-              "name": "bool"
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": "CarouselTabsPanelItem.propTypes || {}",
+                "computed": true
+              }
             },
             "required": false,
-            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+            "description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
           },
           "onAnimationStart": {
             "type": {
@@ -8906,7 +9280,7 @@
     },
     "CarouselTabs": {
       "docs": {
-        "description": "",
+        "description": "@deprecated Please use Carousel and pass the `tabs` prop.",
         "props": {
           "refocus": {
             "defaultValue": {
@@ -8947,6 +9321,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",
@@ -9110,6 +9485,18 @@
             "required": false,
             "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
           },
+          "tabs": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": "CarouselTabsPanelItem.propTypes || {}",
+                "computed": true
+              }
+            },
+            "required": false,
+            "description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
+          },
           "panelNavigation": {
             "type": {
               "name": "element"
@@ -9326,6 +9713,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",

package/lib/Carousel/Carousel.js

@@ -41,6 +41,10 @@ var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker
 
 var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThumbnailNavigation"));
 
+var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanel"));
+
+var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanelItem"));
+
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -166,7 +170,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     skipLinkHref,
-    refocus,
+    tabs,
+    refocus = Boolean(tabs),
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
@@ -189,6 +194,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
+    showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
 
@@ -442,6 +448,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
 
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
+    items: tabs
+  }) : panelNavigation;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -517,7 +526,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? panelNavigation : null]
+    }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
 
@@ -599,6 +608,13 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   skipLinkHref: _propTypes.default.string,
 
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/lib/Carousel/CarouselTabs/CarouselTabs.js

@@ -13,8 +13,6 @@ var _utils = require("../../utils");
 
 var _Carousel = _interopRequireDefault(require("../Carousel"));
 
-var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabsPanel"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
@@ -25,22 +23,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
 const CarouselTabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     items,
     refocus = true,
     ...carouselProps
   } = _ref;
-  const panelNavigation = (0, _utils.useResponsiveProp)({
-    md: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
-      items: items
-    })
+  const tabs = (0, _utils.useResponsiveProp)({
+    md: items
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
     refocus: refocus,
     ...carouselProps,
     ref: ref,
-    panelNavigation: panelNavigation,
+    tabs: tabs,
     children: items.map(_ref2 => {
       let {
         title,

package/lib/Skeleton/Skeleton.js

@@ -11,6 +11,10 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -36,14 +40,12 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectSkeletonStyles = _ref => {
   let {
     color,
-    radius,
-    fadeAnimation
+    radius
   } = _ref;
   return {
     backgroundColor: color,
     borderRadius: radius,
-    maxWidth: '100%',
-    ...fadeAnimation
+    maxWidth: '100%'
   };
 };
 
@@ -101,12 +103,15 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
-  const getAnimationBaseOnPlatform = () => {
-    if (_Platform.default.OS !== 'web') {
-      return nativeAnimation;
-    }
+  const getAnimationBasedOnPlatform = () => {
+    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
+
+    const styles = _StyleSheet.default.create({
+      animation
+    });
 
-    return _skeletonWebAnimation.default;
+    return styles.animation;
   };
 
   const getLineWidth = () => {
@@ -140,11 +145,11 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
 
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = _Platform.default.OS === 'web' ? _View.default : _Animated.default.View;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       testID: "skeleton",
-      style: [selectSkeletonStyles({ ...themeTokens,
-        fadeAnimation: getAnimationBaseOnPlatform()
-      }), getStyledBasedOnShape()]
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, "skeleton-".concat(index + 1));
   };