expose Skeleton publicly

.changeset/empty-laws-chew.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added a new `Skeleton` component.

packages/itwinui-react/src/core/Typography/Skeleton.test.tsx

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { Skeleton } from './Skeleton.js';
+
+it('should work', () => {
+  const { container } = render(<Skeleton />);
+  const skeleton = container.querySelector('div') as HTMLElement;
+  expect(skeleton).toHaveClass('iui-skeleton');
+});

packages/itwinui-react/src/core/Typography/Skeleton.tsx

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+
+// ----------------------------------------------------------------------------
+
+const SkeletonContext = React.createContext<boolean | undefined>(undefined);
+
+// ----------------------------------------------------------------------------
+
+const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
+  const isGrouped = React.useContext(SkeletonContext);
+
+  return (
+    <Box
+      as='div'
+      ref={forwardedRef}
+      {...props}
+      className={cx('iui-skeleton', props?.className)}
+    >
+      <div aria-hidden {...{ inert: '' }}>
+        {props.children}
+      </div>
+      {!isGrouped && <VisuallyHidden>Loading</VisuallyHidden>}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div'>;
+
+// ----------------------------------------------------------------------------
+
+const SkeletonGroup = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SkeletonContext.Provider value={true}>
+      {children}
+      <VisuallyHidden>Loading</VisuallyHidden>
+    </SkeletonContext.Provider>
+  );
+};
+SkeletonGroup.displayName = 'Skeleton.Group';
+
+// ----------------------------------------------------------------------------
+
+/**
+ * A placeholder displayed while the content is loading.
+ */
+export const Skeleton = Object.assign(SkeletonComponent, {
+  Group: SkeletonGroup,
+});
+Skeleton.displayName = 'Skeleton';

packages/itwinui-react/src/core/Typography/Text.tsx

@@ -29,6 +29,8 @@ type TextProps = {
   /**
    * Use it if you are still loading the content.
    * @default false
+   *
+   * @deprecated Use the `Skeleton` component instead
    */
   isSkeleton?: boolean;
 };

packages/itwinui-react/src/index.ts

@@ -213,3 +213,5 @@ export { Flex } from './core/Flex/Flex.js';
 export { Popover } from './core/Popover/Popover.js';
 
 export { Divider } from './core/Divider/Divider.js';
+
+export { Skeleton } from './core/Typography/Skeleton.js';