@zendeskgarden/container-buttongroup - npm Package Compare versions

Comparing version 0.3.18 to 1.0.0

CHANGELOG.md

@@ -6,2 +6,26 @@ # Change Log
 
+# [1.0.0](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-buttongroup@0.3.18...@zendeskgarden/container-buttongroup@1.0.0) (2022-06-17)
+
+
+* fix!(breadcrumb,modal,pagination,selection,tabs,treeview): refactored interface types for enhanced accessibility (#461) ([93f7b43](https://github.com/zendeskgarden/react-containers/commit/93f7b43485d22f2e88bc604c528849ef0b7bb556)), closes [#461](https://github.com/zendeskgarden/react-containers/issues/461)
+
+
+### BREAKING CHANGES
+
+* - breadcrumb – `[options.getContainerProps]` requires `aria-label`
+- modal – `[options.getCloseProps]` requires `aria-label`
+- modal – rename `id` prop to `idPrefix` for consistency
+- pagination – remove `IGetContainerProps` and `IGetPageProps` exports
+- pagination – `[options.getPageProps]`, `[options.getPreviousPageProps]`, and `[options.getNextPageProps]` require `aria-label`
+- pagination – `[options.getPageProps]` no longer accepts `page` or `current` props (previously used to format the `aria-label` which is now required from the consumer)
+- selection – rename `UseSelectionReturnValue` -> `IUseSelectionReturnValue`
+- selection – remove `IGetItemPropsOptions`, `IUseSelectionState`
+- tabs – replace `vertical` prop with `orientation` for consistency
+- treeview – `[options.getTreeProps]` requires `aria-label`
+- utilities – remove `ContainerOrientation` (enum removed from treeview)
+
+
+
+
+
 ## [0.3.18](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-buttongroup@0.3.17...@zendeskgarden/container-buttongroup@0.3.18) (2022-04-25)
@@ -8,0 +32,0 @@

dist/index.cjs.js

@@ -50,4 +50,4 @@ /**
 var _excluded$1 = ["role"],
-    _excluded2 = ["role", "selectedAriaKey"];
-function useButtonGroup(options) {
+    _excluded2 = ["role"];
+var useButtonGroup = function useButtonGroup(options) {
   var _useSelection = containerSelection.useSelection(options),
@@ -58,3 +58,3 @@ selectedItem = _useSelection.selectedItem,
       getItemProps = _useSelection.getItemProps;
-  var _getGroupProps = function getGroupProps(_temp) {
+  var getGroupProps = function getGroupProps(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
@@ -64,19 +64,17 @@ _ref$role = _ref.role,
         other = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return _extends({
-      role: role,
+    return _extends({}, getContainerProps(other), {
+      role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.buttongroup',
-      'data-garden-container-version': '0.3.18'
-    }, other);
+      'data-garden-container-version': '1.0.0'
+    });
   };
-  var _getButtonProps = function getButtonProps(_temp2) {
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$role = _ref2.role,
+  var getButtonProps = function getButtonProps(_ref2) {
+    var _ref2$role = _ref2.role,
         role = _ref2$role === void 0 ? 'button' : _ref2$role,
-        _ref2$selectedAriaKey = _ref2.selectedAriaKey,
-        selectedAriaKey = _ref2$selectedAriaKey === void 0 ? 'aria-pressed' : _ref2$selectedAriaKey,
         other = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-    return _extends({
-      role: role,
-      selectedAriaKey: selectedAriaKey
-    }, other);
+    return _extends({}, getItemProps(_extends({
+      selectedAriaKey: 'aria-pressed'
+    }, other)), {
+      role: role === null ? undefined : role
+    });
   };
@@ -86,10 +84,6 @@ return {
     focusedItem: focusedItem,
-    getGroupProps: function getGroupProps(props) {
-      return getContainerProps(_getGroupProps(props));
-    },
-    getButtonProps: function getButtonProps(props) {
-      return getItemProps(_getButtonProps(props), 'getButtonProps');
-    }
+    getGroupProps: getGroupProps,
+    getButtonProps: getButtonProps
   };
-}
+};
 
@@ -96,0 +90,0 @@ var _excluded = ["children", "render"];

dist/index.esm.js

@@ -41,4 +41,4 @@ /**
 var _excluded$1 = ["role"],
-    _excluded2 = ["role", "selectedAriaKey"];
-function useButtonGroup(options) {
+    _excluded2 = ["role"];
+var useButtonGroup = function useButtonGroup(options) {
   var _useSelection = useSelection(options),
@@ -49,3 +49,3 @@ selectedItem = _useSelection.selectedItem,
       getItemProps = _useSelection.getItemProps;
-  var _getGroupProps = function getGroupProps(_temp) {
+  var getGroupProps = function getGroupProps(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
@@ -55,19 +55,17 @@ _ref$role = _ref.role,
         other = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return _extends({
-      role: role,
+    return _extends({}, getContainerProps(other), {
+      role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.buttongroup',
-      'data-garden-container-version': '0.3.18'
-    }, other);
+      'data-garden-container-version': '1.0.0'
+    });
   };
-  var _getButtonProps = function getButtonProps(_temp2) {
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$role = _ref2.role,
+  var getButtonProps = function getButtonProps(_ref2) {
+    var _ref2$role = _ref2.role,
         role = _ref2$role === void 0 ? 'button' : _ref2$role,
-        _ref2$selectedAriaKey = _ref2.selectedAriaKey,
-        selectedAriaKey = _ref2$selectedAriaKey === void 0 ? 'aria-pressed' : _ref2$selectedAriaKey,
         other = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-    return _extends({
-      role: role,
-      selectedAriaKey: selectedAriaKey
-    }, other);
+    return _extends({}, getItemProps(_extends({
+      selectedAriaKey: 'aria-pressed'
+    }, other)), {
+      role: role === null ? undefined : role
+    });
   };
@@ -77,10 +75,6 @@ return {
     focusedItem: focusedItem,
-    getGroupProps: function getGroupProps(props) {
-      return getContainerProps(_getGroupProps(props));
-    },
-    getButtonProps: function getButtonProps(props) {
-      return getItemProps(_getButtonProps(props), 'getButtonProps');
-    }
+    getGroupProps: getGroupProps,
+    getButtonProps: getButtonProps
   };
-}
+};
 
@@ -87,0 +81,0 @@ var _excluded = ["children", "render"];

dist/typings/ButtonGroupContainer.d.ts

@@ -8,9 +8,3 @@ /**
 import React from 'react';
-import { IUseButtonGroupProps, UseButtonGroupReturnValue } from './useButtonGroup';
-export interface IButtonGroupContainerProps<Item> extends IUseButtonGroupProps<Item> {
-    /** A render prop function */
-    render?: (options: UseButtonGroupReturnValue<Item>) => React.ReactNode;
-    /** A children render prop function */
-    children?: (options: UseButtonGroupReturnValue<Item>) => React.ReactNode;
-}
+import { IButtonGroupContainerProps } from './types';
 export declare const ButtonGroupContainer: React.FunctionComponent<IButtonGroupContainerProps<any>>;

dist/typings/index.d.ts

@@ -8,4 +8,4 @@ /**
 export { useButtonGroup } from './useButtonGroup';
-export type { UseButtonGroupReturnValue, IUseButtonGroupPropGetters, IUseButtonGroupProps } from './useButtonGroup';
 export { ButtonGroupContainer } from './ButtonGroupContainer';
-export type { IButtonGroupContainerProps } from './ButtonGroupContainer';
+export type { IUseSelectionProps as IUseButtonGroupProps } from '@zendeskgarden/container-selection';
+export type { IButtonGroupContainerProps, IUseButtonGroupReturnValue } from './types';

dist/typings/useButtonGroup.d.ts

@@ -7,11 +7,4 @@ /**
  */
-/// <reference types="react" />
-import { IUseSelectionProps, IUseSelectionState, IGetItemPropsOptions } from '@zendeskgarden/container-selection';
-export interface IUseButtonGroupProps<Item> extends IUseSelectionProps<Item> {
-}
-export interface IUseButtonGroupPropGetters<Item> {
-    getGroupProps: <T>(options?: T) => T & React.HTMLProps<any>;
-    getButtonProps: <T extends IGetItemPropsOptions<Item>>(options: T, propGetterName?: string) => any;
-}
-export declare type UseButtonGroupReturnValue<Item> = IUseSelectionState<Item> & IUseButtonGroupPropGetters<Item>;
-export declare function useButtonGroup<Item = any>(options: IUseButtonGroupProps<Item>): UseButtonGroupReturnValue<Item>;
+import { IUseSelectionProps as IUseButtonGroupProps } from '@zendeskgarden/container-selection';
+import { IUseButtonGroupReturnValue } from './types';
+export declare const useButtonGroup: <Item>(options: IUseButtonGroupProps<Item>) => IUseButtonGroupReturnValue<Item>;

package.json

 {
   "name": "@zendeskgarden/container-buttongroup",
-  "version": "0.3.18",
+  "version": "1.0.0",
   "description": "Containers relating to buttongroup in the Garden Design System",
@@ -24,3 +24,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.8.4",
-    "@zendeskgarden/container-selection": "^1.3.18"
+    "@zendeskgarden/container-selection": "^2.0.0"
   },
@@ -45,3 +45,3 @@ "peerDependencies": {
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "c1335a6a2812ee3c7ecebd4c824d00aaf87987df"
+  "gitHead": "9d58d7c857d5b21a8d90558be2f2be341b2a9270"
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36676

increased by5.27%

Number of package files

10

increased by11.11%

Lines of code

247

increased by5.11%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@reach/auto-id@0.18.0(transitive)

• + Added@reach/utils@0.18.0(transitive)

• + Added@zendeskgarden/container-selection@2.0.6(transitive)

• + Added@zendeskgarden/container-utilities@1.0.14(transitive)

• - Removed@reach/auto-id@0.16.0(transitive)

• - Removed@reach/utils@0.16.0(transitive)

• - Removed@zendeskgarden/container-selection@1.3.18(transitive)

• - Removed@zendeskgarden/container-utilities@0.7.1(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• - Removedtslib@2.8.1(transitive)

• Updated@zendeskgarden/container-selection@^2.0.0