@zendeskgarden/container-selection - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.cjs.js

@@ -21,31 +21,3 @@ /**
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-var stateReducer = function stateReducer(state, action) {
+const stateReducer = (state, action) => {
   switch (action.type) {
@@ -58,24 +30,24 @@ case 'END':
       {
-        return _extends({}, state, {
+        return { ...state,
           focusedItem: action.payload
-        });
+        };
       }
     case 'MOUSE_SELECT':
       {
-        return _extends({}, state, {
+        return { ...state,
           selectedItem: action.payload,
           focusedItem: undefined
-        });
+        };
       }
     case 'KEYBOARD_SELECT':
       {
-        return _extends({}, state, {
+        return { ...state,
           selectedItem: action.payload
-        });
+        };
       }
     case 'EXIT_WIDGET':
       {
-        return _extends({}, state, {
+        return { ...state,
           focusedItem: undefined
-        });
+        };
       }
@@ -87,35 +59,30 @@ default:
 
-var _excluded$1 = ["role"],
-    _excluded2 = ["selectedAriaKey", "role", "onFocus", "onKeyDown", "onClick", "item", "focusRef", "refKey"];
-var useSelection = function useSelection(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-      _ref$defaultFocusedIn = _ref.defaultFocusedIndex,
-      defaultFocusedIndex = _ref$defaultFocusedIn === void 0 ? 0 : _ref$defaultFocusedIn,
-      defaultSelectedIndex = _ref.defaultSelectedIndex,
-      rtl = _ref.rtl,
-      selectedItem = _ref.selectedItem,
-      focusedItem = _ref.focusedItem,
-      onSelect = _ref.onSelect,
-      onFocus = _ref.onFocus;
-  var isSelectedItemControlled = selectedItem !== undefined;
-  var isFocusedItemControlled = focusedItem !== undefined;
-  var refs = [];
-  var items = [];
-  var _useReducer = React.useReducer(stateReducer, {
-    selectedItem: selectedItem,
-    focusedItem: focusedItem
-  }),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
-  var controlledFocusedItem = containerUtilities.getControlledValue(focusedItem, state.focusedItem);
-  var controlledSelectedItem = containerUtilities.getControlledValue(selectedItem, state.selectedItem);
-  React.useEffect(function () {
+const useSelection = function (_temp) {
+  let {
+    direction = 'horizontal',
+    defaultFocusedIndex = 0,
+    defaultSelectedIndex,
+    rtl,
+    selectedItem,
+    focusedItem,
+    onSelect,
+    onFocus
+  } = _temp === void 0 ? {} : _temp;
+  const isSelectedItemControlled = selectedItem !== undefined;
+  const isFocusedItemControlled = focusedItem !== undefined;
+  const refs = [];
+  const items = [];
+  const [state, dispatch] = React.useReducer(stateReducer, {
+    selectedItem,
+    focusedItem
+  });
+  const controlledFocusedItem = containerUtilities.getControlledValue(focusedItem, state.focusedItem);
+  const controlledSelectedItem = containerUtilities.getControlledValue(selectedItem, state.selectedItem);
+  React.useEffect(() => {
     if (controlledFocusedItem !== undefined) {
-      var focusedIndex = items.indexOf(controlledFocusedItem);
+      const focusedIndex = items.indexOf(controlledFocusedItem);
       refs[focusedIndex] && refs[focusedIndex].current.focus();
     }
   }, [controlledFocusedItem]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (selectedItem === undefined && defaultSelectedIndex !== undefined) {
@@ -131,35 +98,34 @@ onSelect && onSelect(items[defaultSelectedIndex]);
   }, []);
-  var getContainerProps = function getContainerProps(_temp2) {
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$role = _ref2.role,
-        role = _ref2$role === void 0 ? 'listbox' : _ref2$role,
-        other = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
-    return _extends({
+  const getContainerProps = function (_temp2) {
+    let {
+      role = 'listbox',
+      ...other
+    } = _temp2 === void 0 ? {} : _temp2;
+    return {
       role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.selection',
-      'data-garden-container-version': '2.0.0'
-    }, other);
+      'data-garden-container-version': '2.0.1',
+      ...other
+    };
   };
-  var getItemProps = function getItemProps(_ref3) {
-    var _extends2;
-    var _ref3$selectedAriaKey = _ref3.selectedAriaKey,
-        selectedAriaKey = _ref3$selectedAriaKey === void 0 ? 'aria-selected' : _ref3$selectedAriaKey,
-        _ref3$role = _ref3.role,
-        role = _ref3$role === void 0 ? 'option' : _ref3$role,
-        onFocusCallback = _ref3.onFocus,
-        onKeyDown = _ref3.onKeyDown,
-        onClick = _ref3.onClick,
-        item = _ref3.item,
-        focusRef = _ref3.focusRef,
-        _ref3$refKey = _ref3.refKey,
-        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-        other = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  const getItemProps = _ref => {
+    let {
+      selectedAriaKey = 'aria-selected',
+      role = 'option',
+      onFocus: onFocusCallback,
+      onKeyDown,
+      onClick,
+      item,
+      focusRef,
+      refKey = 'ref',
+      ...other
+    } = _ref;
     refs.push(focusRef);
     items.push(item);
-    var isSelected = controlledSelectedItem === item;
-    var isFocused = controlledFocusedItem === undefined ? isSelected : controlledFocusedItem === item;
-    var tabIndex = isFocused || controlledSelectedItem === undefined && controlledFocusedItem === undefined && items.indexOf(item) === defaultFocusedIndex ? 0 : -1;
-    var verticalDirection = direction === 'vertical' || direction === 'both';
-    var horizontalDirection = direction === 'horizontal' || direction === 'both';
-    var handleFocus = function handleFocus() {
+    const isSelected = controlledSelectedItem === item;
+    const isFocused = controlledFocusedItem === undefined ? isSelected : controlledFocusedItem === item;
+    const tabIndex = isFocused || controlledSelectedItem === undefined && controlledFocusedItem === undefined && items.indexOf(item) === defaultFocusedIndex ? 0 : -1;
+    const verticalDirection = direction === 'vertical' || direction === 'both';
+    const horizontalDirection = direction === 'horizontal' || direction === 'both';
+    const handleFocus = () => {
       onFocus && onFocus(item);
@@ -173,3 +139,3 @@ if (!isFocusedItemControlled) {
     };
-    var handleClick = function handleClick() {
+    const handleClick = () => {
       onSelect && onSelect(item);
@@ -184,5 +150,5 @@ onFocus && onFocus();
     };
-    var handleKeyDown = function handleKeyDown(event) {
-      var nextIndex;
-      var currentIndex;
+    const handleKeyDown = event => {
+      let nextIndex;
+      let currentIndex;
       if (isFocusedItemControlled) {
@@ -193,3 +159,3 @@ currentIndex = items.indexOf(focusedItem);
       }
-      var onIncrement = function onIncrement() {
+      const onIncrement = () => {
         nextIndex = currentIndex + 1;
@@ -205,3 +171,3 @@ if (currentIndex === items.length - 1) {
       };
-      var onDecrement = function onDecrement() {
+      const onDecrement = () => {
         nextIndex = currentIndex - 1;
@@ -217,3 +183,3 @@ if (currentIndex === 0) {
       };
-      var hasModifierKeyPressed = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
+      const hasModifierKeyPressed = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
       if (!hasModifierKeyPressed) {
@@ -264,3 +230,3 @@ if (event.key === containerUtilities.KEYS.UP && verticalDirection || event.key === containerUtilities.KEYS.LEFT && horizontalDirection) {
     };
-    var onBlur = function onBlur(event) {
+    const onBlur = event => {
       if (event.target.tabIndex === 0) {
@@ -275,6 +241,13 @@ if (!isFocusedItemControlled) {
     };
-    return _extends((_extends2 = {
+    return {
       role: role === null ? undefined : role,
-      tabIndex: tabIndex
-    }, _extends2[selectedAriaKey] = selectedAriaKey ? isSelected : undefined, _extends2[refKey] = focusRef, _extends2.onFocus = containerUtilities.composeEventHandlers(onFocusCallback, handleFocus), _extends2.onClick = containerUtilities.composeEventHandlers(onClick, handleClick), _extends2.onKeyDown = containerUtilities.composeEventHandlers(onKeyDown, handleKeyDown), _extends2.onBlur = onBlur, _extends2), other);
+      tabIndex,
+      [selectedAriaKey]: selectedAriaKey ? isSelected : undefined,
+      [refKey]: focusRef,
+      onFocus: containerUtilities.composeEventHandlers(onFocusCallback, handleFocus),
+      onClick: containerUtilities.composeEventHandlers(onClick, handleClick),
+      onKeyDown: containerUtilities.composeEventHandlers(onKeyDown, handleKeyDown),
+      onBlur,
+      ...other
+    };
   };
@@ -284,13 +257,13 @@ return {
     selectedItem: controlledSelectedItem,
-    getItemProps: getItemProps,
-    getContainerProps: getContainerProps
+    getItemProps,
+    getContainerProps
   };
 };
 
-var _excluded = ["children", "render"];
-var SelectionContainer = function SelectionContainer(_ref) {
-  var children = _ref.children,
-      _ref$render = _ref.render,
-      render = _ref$render === void 0 ? children : _ref$render,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+const SelectionContainer = _ref => {
+  let {
+    children,
+    render = children,
+    ...options
+  } = _ref;
   return React__default["default"].createElement(React__default["default"].Fragment, null, render(useSelection(options)));
@@ -297,0 +270,0 @@ };

dist/index.esm.js

@@ -12,31 +12,3 @@ /**
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-var stateReducer = function stateReducer(state, action) {
+const stateReducer = (state, action) => {
   switch (action.type) {
@@ -49,24 +21,24 @@ case 'END':
       {
-        return _extends({}, state, {
+        return { ...state,
           focusedItem: action.payload
-        });
+        };
       }
     case 'MOUSE_SELECT':
       {
-        return _extends({}, state, {
+        return { ...state,
           selectedItem: action.payload,
           focusedItem: undefined
-        });
+        };
       }
     case 'KEYBOARD_SELECT':
       {
-        return _extends({}, state, {
+        return { ...state,
           selectedItem: action.payload
-        });
+        };
       }
     case 'EXIT_WIDGET':
       {
-        return _extends({}, state, {
+        return { ...state,
           focusedItem: undefined
-        });
+        };
       }
@@ -78,35 +50,30 @@ default:
 
-var _excluded$1 = ["role"],
-    _excluded2 = ["selectedAriaKey", "role", "onFocus", "onKeyDown", "onClick", "item", "focusRef", "refKey"];
-var useSelection = function useSelection(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-      _ref$defaultFocusedIn = _ref.defaultFocusedIndex,
-      defaultFocusedIndex = _ref$defaultFocusedIn === void 0 ? 0 : _ref$defaultFocusedIn,
-      defaultSelectedIndex = _ref.defaultSelectedIndex,
-      rtl = _ref.rtl,
-      selectedItem = _ref.selectedItem,
-      focusedItem = _ref.focusedItem,
-      onSelect = _ref.onSelect,
-      onFocus = _ref.onFocus;
-  var isSelectedItemControlled = selectedItem !== undefined;
-  var isFocusedItemControlled = focusedItem !== undefined;
-  var refs = [];
-  var items = [];
-  var _useReducer = useReducer(stateReducer, {
-    selectedItem: selectedItem,
-    focusedItem: focusedItem
-  }),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
-  var controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem);
-  var controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem);
-  useEffect(function () {
+const useSelection = function (_temp) {
+  let {
+    direction = 'horizontal',
+    defaultFocusedIndex = 0,
+    defaultSelectedIndex,
+    rtl,
+    selectedItem,
+    focusedItem,
+    onSelect,
+    onFocus
+  } = _temp === void 0 ? {} : _temp;
+  const isSelectedItemControlled = selectedItem !== undefined;
+  const isFocusedItemControlled = focusedItem !== undefined;
+  const refs = [];
+  const items = [];
+  const [state, dispatch] = useReducer(stateReducer, {
+    selectedItem,
+    focusedItem
+  });
+  const controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem);
+  const controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem);
+  useEffect(() => {
     if (controlledFocusedItem !== undefined) {
-      var focusedIndex = items.indexOf(controlledFocusedItem);
+      const focusedIndex = items.indexOf(controlledFocusedItem);
       refs[focusedIndex] && refs[focusedIndex].current.focus();
     }
   }, [controlledFocusedItem]);
-  useEffect(function () {
+  useEffect(() => {
     if (selectedItem === undefined && defaultSelectedIndex !== undefined) {
@@ -122,35 +89,34 @@ onSelect && onSelect(items[defaultSelectedIndex]);
   }, []);
-  var getContainerProps = function getContainerProps(_temp2) {
-    var _ref2 = _temp2 === void 0 ? {} : _temp2,
-        _ref2$role = _ref2.role,
-        role = _ref2$role === void 0 ? 'listbox' : _ref2$role,
-        other = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
-    return _extends({
+  const getContainerProps = function (_temp2) {
+    let {
+      role = 'listbox',
+      ...other
+    } = _temp2 === void 0 ? {} : _temp2;
+    return {
       role: role === null ? undefined : role,
       'data-garden-container-id': 'containers.selection',
-      'data-garden-container-version': '2.0.0'
-    }, other);
+      'data-garden-container-version': '2.0.1',
+      ...other
+    };
   };
-  var getItemProps = function getItemProps(_ref3) {
-    var _extends2;
-    var _ref3$selectedAriaKey = _ref3.selectedAriaKey,
-        selectedAriaKey = _ref3$selectedAriaKey === void 0 ? 'aria-selected' : _ref3$selectedAriaKey,
-        _ref3$role = _ref3.role,
-        role = _ref3$role === void 0 ? 'option' : _ref3$role,
-        onFocusCallback = _ref3.onFocus,
-        onKeyDown = _ref3.onKeyDown,
-        onClick = _ref3.onClick,
-        item = _ref3.item,
-        focusRef = _ref3.focusRef,
-        _ref3$refKey = _ref3.refKey,
-        refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-        other = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  const getItemProps = _ref => {
+    let {
+      selectedAriaKey = 'aria-selected',
+      role = 'option',
+      onFocus: onFocusCallback,
+      onKeyDown,
+      onClick,
+      item,
+      focusRef,
+      refKey = 'ref',
+      ...other
+    } = _ref;
     refs.push(focusRef);
     items.push(item);
-    var isSelected = controlledSelectedItem === item;
-    var isFocused = controlledFocusedItem === undefined ? isSelected : controlledFocusedItem === item;
-    var tabIndex = isFocused || controlledSelectedItem === undefined && controlledFocusedItem === undefined && items.indexOf(item) === defaultFocusedIndex ? 0 : -1;
-    var verticalDirection = direction === 'vertical' || direction === 'both';
-    var horizontalDirection = direction === 'horizontal' || direction === 'both';
-    var handleFocus = function handleFocus() {
+    const isSelected = controlledSelectedItem === item;
+    const isFocused = controlledFocusedItem === undefined ? isSelected : controlledFocusedItem === item;
+    const tabIndex = isFocused || controlledSelectedItem === undefined && controlledFocusedItem === undefined && items.indexOf(item) === defaultFocusedIndex ? 0 : -1;
+    const verticalDirection = direction === 'vertical' || direction === 'both';
+    const horizontalDirection = direction === 'horizontal' || direction === 'both';
+    const handleFocus = () => {
       onFocus && onFocus(item);
@@ -164,3 +130,3 @@ if (!isFocusedItemControlled) {
     };
-    var handleClick = function handleClick() {
+    const handleClick = () => {
       onSelect && onSelect(item);
@@ -175,5 +141,5 @@ onFocus && onFocus();
     };
-    var handleKeyDown = function handleKeyDown(event) {
-      var nextIndex;
-      var currentIndex;
+    const handleKeyDown = event => {
+      let nextIndex;
+      let currentIndex;
       if (isFocusedItemControlled) {
@@ -184,3 +150,3 @@ currentIndex = items.indexOf(focusedItem);
       }
-      var onIncrement = function onIncrement() {
+      const onIncrement = () => {
         nextIndex = currentIndex + 1;
@@ -196,3 +162,3 @@ if (currentIndex === items.length - 1) {
       };
-      var onDecrement = function onDecrement() {
+      const onDecrement = () => {
         nextIndex = currentIndex - 1;
@@ -208,3 +174,3 @@ if (currentIndex === 0) {
       };
-      var hasModifierKeyPressed = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
+      const hasModifierKeyPressed = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
       if (!hasModifierKeyPressed) {
@@ -255,3 +221,3 @@ if (event.key === KEYS.UP && verticalDirection || event.key === KEYS.LEFT && horizontalDirection) {
     };
-    var onBlur = function onBlur(event) {
+    const onBlur = event => {
       if (event.target.tabIndex === 0) {
@@ -266,6 +232,13 @@ if (!isFocusedItemControlled) {
     };
-    return _extends((_extends2 = {
+    return {
       role: role === null ? undefined : role,
-      tabIndex: tabIndex
-    }, _extends2[selectedAriaKey] = selectedAriaKey ? isSelected : undefined, _extends2[refKey] = focusRef, _extends2.onFocus = composeEventHandlers(onFocusCallback, handleFocus), _extends2.onClick = composeEventHandlers(onClick, handleClick), _extends2.onKeyDown = composeEventHandlers(onKeyDown, handleKeyDown), _extends2.onBlur = onBlur, _extends2), other);
+      tabIndex,
+      [selectedAriaKey]: selectedAriaKey ? isSelected : undefined,
+      [refKey]: focusRef,
+      onFocus: composeEventHandlers(onFocusCallback, handleFocus),
+      onClick: composeEventHandlers(onClick, handleClick),
+      onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+      onBlur,
+      ...other
+    };
   };
@@ -275,13 +248,13 @@ return {
     selectedItem: controlledSelectedItem,
-    getItemProps: getItemProps,
-    getContainerProps: getContainerProps
+    getItemProps,
+    getContainerProps
   };
 };
 
-var _excluded = ["children", "render"];
-var SelectionContainer = function SelectionContainer(_ref) {
-  var children = _ref.children,
-      _ref$render = _ref.render,
-      render = _ref$render === void 0 ? children : _ref$render,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+const SelectionContainer = _ref => {
+  let {
+    children,
+    render = children,
+    ...options
+  } = _ref;
   return React.createElement(React.Fragment, null, render(useSelection(options)));
@@ -288,0 +261,0 @@ };

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

34958

decreased by-37.77%

Number of package files

10

decreased by-9.09%

Lines of code

663

decreased by-7.27%

Dependency changes

• Updated@zendeskgarden/container-utilities@^1.0.1