@zendeskgarden/container-scrollregion - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.1.4](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-scrollregion@0.1.3...@zendeskgarden/container-scrollregion@0.1.4) (2022-03-31)
+
+**Note:** Version bump only for package @zendeskgarden/container-scrollregion
+
+
+
+
+
 ## [0.1.3](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-scrollregion@0.1.2...@zendeskgarden/container-scrollregion@0.1.3) (2022-02-28)
@@ -8,0 +16,0 @@

dist/typings/index.d.ts

@@ -8,2 +8,4 @@ /**
 export { useScrollRegion } from './useScrollRegion';
+export type { IUseScrollRegionProps } from './useScrollRegion';
 export { ScrollRegionContainer } from './ScrollRegionContainer';
+export type { IScrollRegionContainerProps } from './ScrollRegionContainer';

dist/typings/ScrollRegionContainer.d.ts

@@ -8,4 +8,4 @@ /**
 import React from 'react';
-import { IUseScrollRegion } from './useScrollRegion';
-export interface IScrollRegionContainerProps extends IUseScrollRegion {
+import { IUseScrollRegionProps } from './useScrollRegion';
+export interface IScrollRegionContainerProps<RefType = HTMLElement> extends IUseScrollRegionProps<RefType> {
     /** A render prop function which receives the tab index */
@@ -12,0 +12,0 @@ render?: (tabIndex: number | undefined) => React.ReactNode;

dist/typings/useScrollRegion.d.ts

@@ -8,8 +8,8 @@ /**
 /// <reference types="react" />
-export interface IUseScrollRegion {
+export interface IUseScrollRegionProps<RefType = HTMLElement> {
     /** A [ref](https://reactjs.org/docs/refs-and-the-dom.html) pointing to the scroll region's container element */
-    containerRef: React.RefObject<HTMLElement>;
+    containerRef: React.RefObject<RefType>;
     /** A value that determines if the scroll region tab index should be recalculated */
     dependency?: any;
 }
-export declare function useScrollRegion({ containerRef, dependency }: IUseScrollRegion): number | undefined;
+export declare function useScrollRegion({ containerRef, dependency }: IUseScrollRegionProps): number | undefined;

package.json

 {
   "name": "@zendeskgarden/container-scrollregion",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Containers relating to scroll region in the Garden Design System",
@@ -48,3 +48,3 @@ "license": "Apache-2.0",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "b2203248219805cfb5bc14ef02b11a8ce2506ae1"
+  "gitHead": "e0eea66256f1f415a2051afc563684dfc9fbe711"
 }

README.md

@@ -17,15 +17,32 @@ # @zendeskgarden/container-scrollregion [![npm version][npm version badge]][npm version link]
 
-For live examples check out [storybook](https://zendeskgarden.github.io/react-containers?path=/story/scrollregion-container--usescrollregion).
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
-A scroll region is an area of the web page that contains scrollable content. The scroll region hook
-allows keyboard users to focus and scroll a scroll region.
+### As a hook
 
-A scroll region with a dynamic layout should use the `dependency` option. The hook re-calculates the
-tab-index when the `dependency` value changes. If there are multiple dependency values, a memoized
-object can be used as the `dependency` value. There is a Storybook demo that shows an example of
-this scenario.
+A scroll region is an area of the web page that contains scrollable content. The
+scroll region hook allows keyboard users to focus and scroll the region. A
+scroll region with a dynamic layout should use the `dependency` option. The hook
+re-calculates the tab-index when the `dependency` value changes. If there are
+multiple dependency values, a memoized object can be used as the `dependency`
+value.
 
+```jsx
+import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
+
+const ScrollRegion = () => {
+  const containerRef = useRef();
+  const containerTabIndex = useScrollRegion({ containerRef });
+
+  return (
+    <div ref={containerRef} tabIndex={containerTabIndex}>
+      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
+    </div>
+  );
+};
+```
+
 ### As a Render Prop Component
 
-```jsx static
+```jsx
 import { ScrollRegionContainer } from '@zendeskgarden/container-scrollregion';
@@ -47,18 +64,1 @@
 ```
-
-### As a hook
-
-```jsx static
-import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
-
-const ScrollRegion = () => {
-  const containerRef = useRef();
-  const containerTabIndex = useScrollRegion({ containerRef });
-
-  return (
-    <div ref={containerRef} tabIndex={containerTabIndex}>
-      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea.</p>
-    </div>
-  );
-};
-```

No alert changes

Improved metrics

Total package byte prevSize

22281

increased by1.51%

Lines of code

182

increased by1.11%

No dependency changes