New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@zendeskgarden/container-buttongroup
Advanced tools
@zendeskgarden/container-buttongroup - npm Package Compare versions
Comparing version 0.3.0 to 0.3.1
@@ -6,2 +6,13 @@ # Change Log | ||
| ## [0.3.1](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-buttongroup@0.3.0...@zendeskgarden/container-buttongroup@0.3.1) (2020-02-14) | ||
| ### Bug Fixes | ||
| * **build:** apply babel to all bundles ([#160](https://github.com/zendeskgarden/react-containers/issues/160)) ([826735b](https://github.com/zendeskgarden/react-containers/commit/826735bba881d5247b423ffb61cf9643c6599d16)) | ||
| # [0.3.0](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-buttongroup@0.2.8...@zendeskgarden/container-buttongroup@0.3.0) (2020-02-12) | ||
@@ -8,0 +19,0 @@ |
@@ -14,3 +14,3 @@ /** | ||
| var react = require('react'); | ||
| var containerSelection = require('@zendeskgarden/container-selection'); | ||
| var PropTypes = _interopDefault(require('prop-types')); | ||
@@ -103,391 +103,53 @@ | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { | ||
| return; | ||
| } | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| function composeEventHandlers() { | ||
| for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| fns[_key] = arguments[_key]; | ||
| } | ||
| return function (event) { | ||
| for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | ||
| args[_key2 - 1] = arguments[_key2]; | ||
| } | ||
| return fns.some(function (fn) { | ||
| fn && fn.apply(void 0, [event].concat(args)); | ||
| return event && event.defaultPrevented; | ||
| }); | ||
| function useButtonGroup(options) { | ||
| var _useSelection = containerSelection.useSelection(options), | ||
| selectedItem = _useSelection.selectedItem, | ||
| focusedItem = _useSelection.focusedItem, | ||
| getContainerProps = _useSelection.getContainerProps, | ||
| getItemProps = _useSelection.getItemProps; | ||
| var _getGroupProps = function getGroupProps() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var _ref$role = _ref.role, | ||
| role = _ref$role === void 0 ? 'group' : _ref$role, | ||
| other = _objectWithoutProperties(_ref, ["role"]); | ||
| return _objectSpread2({ | ||
| role: role, | ||
| 'data-garden-container-id': 'containers.buttongroup', | ||
| 'data-garden-container-version': '0.3.1' | ||
| }, other); | ||
| }; | ||
| } | ||
| function getControlledValue() { | ||
| for (var _len3 = arguments.length, values = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| values[_key3] = arguments[_key3]; | ||
| } | ||
| for (var _i = 0, _values = values; _i < _values.length; _i++) { | ||
| var value = _values[_i]; | ||
| if (value !== undefined) { | ||
| return value; | ||
| } | ||
| } | ||
| return undefined; | ||
| } | ||
| var KEY_CODES = { | ||
| ALT: 18, | ||
| BACKSPACE: 8, | ||
| COMMA: 188, | ||
| DELETE: 46, | ||
| DOWN: 40, | ||
| END: 35, | ||
| ENTER: 13, | ||
| ESCAPE: 27, | ||
| HOME: 36, | ||
| LEFT: 37, | ||
| NUMPAD_ADD: 107, | ||
| NUMPAD_DECIMAL: 110, | ||
| NUMPAD_DIVIDE: 111, | ||
| NUMPAD_ENTER: 108, | ||
| NUMPAD_MULTIPLY: 106, | ||
| NUMPAD_SUBTRACT: 109, | ||
| PAGE_DOWN: 34, | ||
| PAGE_UP: 33, | ||
| PERIOD: 190, | ||
| RIGHT: 39, | ||
| SHIFT: 16, | ||
| SPACE: 32, | ||
| TAB: 9, | ||
| UP: 38 | ||
| }; | ||
| function stateReducer(state, action) { | ||
| switch (action.type) { | ||
| case 'FOCUS': | ||
| { | ||
| if (action.onFocus) { | ||
| if (action.payload !== action.focusedItem) { | ||
| action.onFocus(action.payload); | ||
| } | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.payload | ||
| }); | ||
| } | ||
| case 'INCREMENT': | ||
| { | ||
| var controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem); | ||
| var controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem); | ||
| var currentItemIndex = controlledFocusedItem === undefined ? action.items.indexOf(controlledSelectedItem) : action.items.indexOf(controlledFocusedItem); | ||
| var newFocusedItem = action.items[(currentItemIndex + 1) % action.items.length]; | ||
| if (action.onFocus) { | ||
| action.onFocus(newFocusedItem); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: newFocusedItem | ||
| }); | ||
| } | ||
| case 'DECREMENT': | ||
| { | ||
| var _controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem); | ||
| var _controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem); | ||
| var _currentItemIndex = _controlledFocusedItem === undefined ? action.items.indexOf(_controlledSelectedItem) : action.items.indexOf(_controlledFocusedItem); | ||
| var _newFocusedItem = action.items[(_currentItemIndex + action.items.length - 1) % action.items.length]; | ||
| if (action.onFocus) { | ||
| action.onFocus(_newFocusedItem); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: _newFocusedItem | ||
| }); | ||
| } | ||
| case 'HOME': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(action.items[0]); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.items[0] | ||
| }); | ||
| } | ||
| case 'END': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(action.items[action.items.length - 1]); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.items[action.items.length - 1] | ||
| }); | ||
| } | ||
| case 'MOUSE_SELECT': | ||
| { | ||
| var isSelectControlled = false; | ||
| var isFocusControlled = false; | ||
| if (action.onSelect) { | ||
| action.onSelect(action.payload); | ||
| isSelectControlled = true; | ||
| } | ||
| if (action.onFocus) { | ||
| action.onFocus(undefined); | ||
| isFocusControlled = true; | ||
| } | ||
| if (isFocusControlled && isSelectControlled) { | ||
| return state; | ||
| } | ||
| var updatedState = _objectSpread2({}, state); | ||
| if (!isSelectControlled) { | ||
| updatedState.selectedItem = action.payload; | ||
| } | ||
| if (!isFocusControlled) { | ||
| updatedState.focusedItem = undefined; | ||
| } | ||
| return updatedState; | ||
| } | ||
| case 'KEYBOARD_SELECT': | ||
| { | ||
| if (action.onSelect) { | ||
| action.onSelect(action.payload); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| selectedItem: action.payload | ||
| }); | ||
| } | ||
| case 'EXIT_WIDGET': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(undefined); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: undefined | ||
| }); | ||
| } | ||
| default: | ||
| return state; | ||
| } | ||
| } | ||
| function useSelection() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| _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 refs = []; | ||
| var items = []; | ||
| var _useReducer = react.useReducer(stateReducer, { | ||
| selectedItem: selectedItem, | ||
| focusedItem: focusedItem | ||
| }), | ||
| _useReducer2 = _slicedToArray(_useReducer, 2), | ||
| state = _useReducer2[0], | ||
| dispatch = _useReducer2[1]; | ||
| var controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem); | ||
| var controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem); | ||
| react.useEffect(function () { | ||
| if (controlledFocusedItem !== undefined) { | ||
| var focusedIndex = items.indexOf(controlledFocusedItem); | ||
| refs[focusedIndex] && refs[focusedIndex].current.focus(); | ||
| } | ||
| }, [controlledFocusedItem]); | ||
| react.useEffect(function () { | ||
| if (selectedItem === undefined && defaultSelectedIndex !== undefined) { | ||
| dispatch({ | ||
| type: 'KEYBOARD_SELECT', | ||
| payload: items[defaultSelectedIndex], | ||
| onSelect: onSelect | ||
| }); | ||
| } | ||
| }, []); | ||
| var getContainerProps = function getContainerProps() { | ||
| var _getButtonProps = function getButtonProps() { | ||
| var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var _ref2$role = _ref2.role, | ||
| role = _ref2$role === void 0 ? 'listbox' : _ref2$role, | ||
| other = _objectWithoutProperties(_ref2, ["role"]); | ||
| role = _ref2$role === void 0 ? 'button' : _ref2$role, | ||
| _ref2$selectedAriaKey = _ref2.selectedAriaKey, | ||
| selectedAriaKey = _ref2$selectedAriaKey === void 0 ? 'aria-pressed' : _ref2$selectedAriaKey, | ||
| other = _objectWithoutProperties(_ref2, ["role", "selectedAriaKey"]); | ||
| return _objectSpread2({ | ||
| role: role, | ||
| 'data-garden-container-id': 'containers.selection', | ||
| 'data-garden-container-version': '1.3.0' | ||
| selectedAriaKey: selectedAriaKey | ||
| }, other); | ||
| }; | ||
| var getItemProps = function getItemProps() { | ||
| var _objectSpread2$1; | ||
| var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var propGetterName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'getItemProps'; | ||
| 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 = _objectWithoutProperties(_ref3, ["selectedAriaKey", "role", "onFocus", "onKeyDown", "onClick", "item", "focusRef", "refKey"]); | ||
| if (item === undefined) { | ||
| throw new Error("Accessibility Error: You must provide an \"item\" option to \"".concat(propGetterName, "()\"")); | ||
| return { | ||
| selectedItem: selectedItem, | ||
| focusedItem: focusedItem, | ||
| getGroupProps: function getGroupProps(props) { | ||
| return getContainerProps(_getGroupProps(props)); | ||
| }, | ||
| getButtonProps: function getButtonProps(props) { | ||
| return getItemProps(_getButtonProps(props), 'getButtonProps'); | ||
| } | ||
| if (focusRef === undefined) { | ||
| throw new Error("Accessibility Error: You must provide a \"focusRef\" option to \"".concat(propGetterName, "()\"")); | ||
| } | ||
| 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'; | ||
| return _objectSpread2((_objectSpread2$1 = { | ||
| role: role, | ||
| tabIndex: tabIndex | ||
| }, _defineProperty(_objectSpread2$1, selectedAriaKey, selectedAriaKey ? isSelected : undefined), _defineProperty(_objectSpread2$1, refKey, focusRef), _defineProperty(_objectSpread2$1, "onFocus", composeEventHandlers(onFocusCallback, function () { | ||
| dispatch({ | ||
| type: 'FOCUS', | ||
| payload: item, | ||
| focusedItem: focusedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| })), _defineProperty(_objectSpread2$1, "onBlur", function onBlur(e) { | ||
| if (e.target.tabIndex === 0) { | ||
| dispatch({ | ||
| type: 'EXIT_WIDGET', | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| }), _defineProperty(_objectSpread2$1, "onClick", composeEventHandlers(onClick, function () { | ||
| dispatch({ | ||
| type: 'MOUSE_SELECT', | ||
| payload: item, | ||
| onSelect: onSelect, | ||
| onFocus: onFocus | ||
| }); | ||
| })), _defineProperty(_objectSpread2$1, "onKeyDown", composeEventHandlers(onKeyDown, function (e) { | ||
| if (e.keyCode === KEY_CODES.UP && verticalDirection || e.keyCode === KEY_CODES.LEFT && horizontalDirection) { | ||
| if (rtl && !verticalDirection) { | ||
| dispatch({ | ||
| type: 'INCREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } else { | ||
| dispatch({ | ||
| type: 'DECREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.DOWN && verticalDirection || e.keyCode === KEY_CODES.RIGHT && horizontalDirection) { | ||
| if (rtl && !verticalDirection) { | ||
| dispatch({ | ||
| type: 'DECREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } else { | ||
| dispatch({ | ||
| type: 'INCREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.HOME) { | ||
| dispatch({ | ||
| type: 'HOME', | ||
| items: items, | ||
| onFocus: onFocus | ||
| }); | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.END) { | ||
| dispatch({ | ||
| type: 'END', | ||
| items: items, | ||
| onFocus: onFocus | ||
| }); | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.SPACE || e.keyCode === KEY_CODES.ENTER) { | ||
| dispatch({ | ||
| type: 'KEYBOARD_SELECT', | ||
| payload: item, | ||
| onSelect: onSelect | ||
| }); | ||
| e.preventDefault(); | ||
| } | ||
| })), _objectSpread2$1), other); | ||
| }; | ||
| return { | ||
| focusedItem: controlledFocusedItem, | ||
| selectedItem: controlledSelectedItem, | ||
| getItemProps: getItemProps, | ||
| getContainerProps: getContainerProps | ||
| }; | ||
| } | ||
| var SelectionContainer = function SelectionContainer(_ref4) { | ||
| var children = _ref4.children, | ||
| _ref4$render = _ref4.render, | ||
| render = _ref4$render === void 0 ? children : _ref4$render, | ||
| options = _objectWithoutProperties(_ref4, ["children", "render"]); | ||
| return render(useSelection(options)); | ||
| var ButtonGroupContainer = function ButtonGroupContainer(_ref) { | ||
| var children = _ref.children, | ||
| _ref$render = _ref.render, | ||
| render = _ref$render === void 0 ? children : _ref$render, | ||
| options = _objectWithoutProperties(_ref, ["children", "render"]); | ||
| return render(useButtonGroup(options)); | ||
| }; | ||
| SelectionContainer.propTypes = { | ||
| ButtonGroupContainer.propTypes = { | ||
| children: PropTypes.func, | ||
| render: PropTypes.func, | ||
| rtl: PropTypes.bool, | ||
| direction: PropTypes.oneOf(['horizontal', 'vertical', 'both']), | ||
| defaultFocusedIndex: PropTypes.number, | ||
| focusedItem: PropTypes.any, | ||
@@ -499,40 +161,3 @@ selectedItem: PropTypes.any, | ||
| function useButtonGroup(options) { | ||
| const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection(options); | ||
| const getGroupProps = ({ role = 'group', ...other } = {}) => { | ||
| return { | ||
| role, | ||
| 'data-garden-container-id': 'containers.buttongroup', | ||
| 'data-garden-container-version': '0.3.0', | ||
| ...other | ||
| }; | ||
| }; | ||
| const getButtonProps = ({ role = 'button', selectedAriaKey = 'aria-pressed', ...other } = {}) => { | ||
| return { | ||
| role, | ||
| selectedAriaKey, | ||
| ...other | ||
| }; | ||
| }; | ||
| return { | ||
| selectedItem, | ||
| focusedItem, | ||
| getGroupProps: props => getContainerProps(getGroupProps(props)), | ||
| getButtonProps: props => getItemProps(getButtonProps(props), 'getButtonProps') | ||
| }; | ||
| } | ||
| const ButtonGroupContainer = ({ children, render = children, ...options }) => { | ||
| return render(useButtonGroup(options)); | ||
| }; | ||
| ButtonGroupContainer.propTypes = { | ||
| children: PropTypes.func, | ||
| render: PropTypes.func, | ||
| focusedItem: PropTypes.any, | ||
| selectedItem: PropTypes.any, | ||
| onSelect: PropTypes.func, | ||
| onFocus: PropTypes.func | ||
| }; | ||
| exports.ButtonGroupContainer = ButtonGroupContainer; | ||
| exports.useButtonGroup = useButtonGroup; |
@@ -8,3 +8,3 @@ /** | ||
| import { useReducer, useEffect } from 'react'; | ||
| import { useSelection } from '@zendeskgarden/container-selection'; | ||
| import PropTypes from 'prop-types'; | ||
@@ -97,391 +97,53 @@ | ||
| function _slicedToArray(arr, i) { | ||
| return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
| if (Array.isArray(arr)) return arr; | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
| if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { | ||
| return; | ||
| } | ||
| var _arr = []; | ||
| var _n = true; | ||
| var _d = false; | ||
| var _e = undefined; | ||
| try { | ||
| for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { | ||
| _arr.push(_s.value); | ||
| if (i && _arr.length === i) break; | ||
| } | ||
| } catch (err) { | ||
| _d = true; | ||
| _e = err; | ||
| } finally { | ||
| try { | ||
| if (!_n && _i["return"] != null) _i["return"](); | ||
| } finally { | ||
| if (_d) throw _e; | ||
| } | ||
| } | ||
| return _arr; | ||
| } | ||
| function _nonIterableRest() { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance"); | ||
| } | ||
| function composeEventHandlers() { | ||
| for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| fns[_key] = arguments[_key]; | ||
| } | ||
| return function (event) { | ||
| for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | ||
| args[_key2 - 1] = arguments[_key2]; | ||
| } | ||
| return fns.some(function (fn) { | ||
| fn && fn.apply(void 0, [event].concat(args)); | ||
| return event && event.defaultPrevented; | ||
| }); | ||
| function useButtonGroup(options) { | ||
| var _useSelection = useSelection(options), | ||
| selectedItem = _useSelection.selectedItem, | ||
| focusedItem = _useSelection.focusedItem, | ||
| getContainerProps = _useSelection.getContainerProps, | ||
| getItemProps = _useSelection.getItemProps; | ||
| var _getGroupProps = function getGroupProps() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var _ref$role = _ref.role, | ||
| role = _ref$role === void 0 ? 'group' : _ref$role, | ||
| other = _objectWithoutProperties(_ref, ["role"]); | ||
| return _objectSpread2({ | ||
| role: role, | ||
| 'data-garden-container-id': 'containers.buttongroup', | ||
| 'data-garden-container-version': '0.3.1' | ||
| }, other); | ||
| }; | ||
| } | ||
| function getControlledValue() { | ||
| for (var _len3 = arguments.length, values = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| values[_key3] = arguments[_key3]; | ||
| } | ||
| for (var _i = 0, _values = values; _i < _values.length; _i++) { | ||
| var value = _values[_i]; | ||
| if (value !== undefined) { | ||
| return value; | ||
| } | ||
| } | ||
| return undefined; | ||
| } | ||
| var KEY_CODES = { | ||
| ALT: 18, | ||
| BACKSPACE: 8, | ||
| COMMA: 188, | ||
| DELETE: 46, | ||
| DOWN: 40, | ||
| END: 35, | ||
| ENTER: 13, | ||
| ESCAPE: 27, | ||
| HOME: 36, | ||
| LEFT: 37, | ||
| NUMPAD_ADD: 107, | ||
| NUMPAD_DECIMAL: 110, | ||
| NUMPAD_DIVIDE: 111, | ||
| NUMPAD_ENTER: 108, | ||
| NUMPAD_MULTIPLY: 106, | ||
| NUMPAD_SUBTRACT: 109, | ||
| PAGE_DOWN: 34, | ||
| PAGE_UP: 33, | ||
| PERIOD: 190, | ||
| RIGHT: 39, | ||
| SHIFT: 16, | ||
| SPACE: 32, | ||
| TAB: 9, | ||
| UP: 38 | ||
| }; | ||
| function stateReducer(state, action) { | ||
| switch (action.type) { | ||
| case 'FOCUS': | ||
| { | ||
| if (action.onFocus) { | ||
| if (action.payload !== action.focusedItem) { | ||
| action.onFocus(action.payload); | ||
| } | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.payload | ||
| }); | ||
| } | ||
| case 'INCREMENT': | ||
| { | ||
| var controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem); | ||
| var controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem); | ||
| var currentItemIndex = controlledFocusedItem === undefined ? action.items.indexOf(controlledSelectedItem) : action.items.indexOf(controlledFocusedItem); | ||
| var newFocusedItem = action.items[(currentItemIndex + 1) % action.items.length]; | ||
| if (action.onFocus) { | ||
| action.onFocus(newFocusedItem); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: newFocusedItem | ||
| }); | ||
| } | ||
| case 'DECREMENT': | ||
| { | ||
| var _controlledFocusedItem = getControlledValue(action.focusedItem, state.focusedItem); | ||
| var _controlledSelectedItem = getControlledValue(action.selectedItem, state.selectedItem); | ||
| var _currentItemIndex = _controlledFocusedItem === undefined ? action.items.indexOf(_controlledSelectedItem) : action.items.indexOf(_controlledFocusedItem); | ||
| var _newFocusedItem = action.items[(_currentItemIndex + action.items.length - 1) % action.items.length]; | ||
| if (action.onFocus) { | ||
| action.onFocus(_newFocusedItem); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: _newFocusedItem | ||
| }); | ||
| } | ||
| case 'HOME': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(action.items[0]); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.items[0] | ||
| }); | ||
| } | ||
| case 'END': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(action.items[action.items.length - 1]); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: action.items[action.items.length - 1] | ||
| }); | ||
| } | ||
| case 'MOUSE_SELECT': | ||
| { | ||
| var isSelectControlled = false; | ||
| var isFocusControlled = false; | ||
| if (action.onSelect) { | ||
| action.onSelect(action.payload); | ||
| isSelectControlled = true; | ||
| } | ||
| if (action.onFocus) { | ||
| action.onFocus(undefined); | ||
| isFocusControlled = true; | ||
| } | ||
| if (isFocusControlled && isSelectControlled) { | ||
| return state; | ||
| } | ||
| var updatedState = _objectSpread2({}, state); | ||
| if (!isSelectControlled) { | ||
| updatedState.selectedItem = action.payload; | ||
| } | ||
| if (!isFocusControlled) { | ||
| updatedState.focusedItem = undefined; | ||
| } | ||
| return updatedState; | ||
| } | ||
| case 'KEYBOARD_SELECT': | ||
| { | ||
| if (action.onSelect) { | ||
| action.onSelect(action.payload); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| selectedItem: action.payload | ||
| }); | ||
| } | ||
| case 'EXIT_WIDGET': | ||
| { | ||
| if (action.onFocus) { | ||
| action.onFocus(undefined); | ||
| return state; | ||
| } | ||
| return _objectSpread2({}, state, { | ||
| focusedItem: undefined | ||
| }); | ||
| } | ||
| default: | ||
| return state; | ||
| } | ||
| } | ||
| function useSelection() { | ||
| var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| _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 refs = []; | ||
| var items = []; | ||
| var _useReducer = useReducer(stateReducer, { | ||
| selectedItem: selectedItem, | ||
| focusedItem: focusedItem | ||
| }), | ||
| _useReducer2 = _slicedToArray(_useReducer, 2), | ||
| state = _useReducer2[0], | ||
| dispatch = _useReducer2[1]; | ||
| var controlledFocusedItem = getControlledValue(focusedItem, state.focusedItem); | ||
| var controlledSelectedItem = getControlledValue(selectedItem, state.selectedItem); | ||
| useEffect(function () { | ||
| if (controlledFocusedItem !== undefined) { | ||
| var focusedIndex = items.indexOf(controlledFocusedItem); | ||
| refs[focusedIndex] && refs[focusedIndex].current.focus(); | ||
| } | ||
| }, [controlledFocusedItem]); | ||
| useEffect(function () { | ||
| if (selectedItem === undefined && defaultSelectedIndex !== undefined) { | ||
| dispatch({ | ||
| type: 'KEYBOARD_SELECT', | ||
| payload: items[defaultSelectedIndex], | ||
| onSelect: onSelect | ||
| }); | ||
| } | ||
| }, []); | ||
| var getContainerProps = function getContainerProps() { | ||
| var _getButtonProps = function getButtonProps() { | ||
| var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var _ref2$role = _ref2.role, | ||
| role = _ref2$role === void 0 ? 'listbox' : _ref2$role, | ||
| other = _objectWithoutProperties(_ref2, ["role"]); | ||
| role = _ref2$role === void 0 ? 'button' : _ref2$role, | ||
| _ref2$selectedAriaKey = _ref2.selectedAriaKey, | ||
| selectedAriaKey = _ref2$selectedAriaKey === void 0 ? 'aria-pressed' : _ref2$selectedAriaKey, | ||
| other = _objectWithoutProperties(_ref2, ["role", "selectedAriaKey"]); | ||
| return _objectSpread2({ | ||
| role: role, | ||
| 'data-garden-container-id': 'containers.selection', | ||
| 'data-garden-container-version': '1.3.0' | ||
| selectedAriaKey: selectedAriaKey | ||
| }, other); | ||
| }; | ||
| var getItemProps = function getItemProps() { | ||
| var _objectSpread2$1; | ||
| var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| var propGetterName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'getItemProps'; | ||
| 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 = _objectWithoutProperties(_ref3, ["selectedAriaKey", "role", "onFocus", "onKeyDown", "onClick", "item", "focusRef", "refKey"]); | ||
| if (item === undefined) { | ||
| throw new Error("Accessibility Error: You must provide an \"item\" option to \"".concat(propGetterName, "()\"")); | ||
| return { | ||
| selectedItem: selectedItem, | ||
| focusedItem: focusedItem, | ||
| getGroupProps: function getGroupProps(props) { | ||
| return getContainerProps(_getGroupProps(props)); | ||
| }, | ||
| getButtonProps: function getButtonProps(props) { | ||
| return getItemProps(_getButtonProps(props), 'getButtonProps'); | ||
| } | ||
| if (focusRef === undefined) { | ||
| throw new Error("Accessibility Error: You must provide a \"focusRef\" option to \"".concat(propGetterName, "()\"")); | ||
| } | ||
| 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'; | ||
| return _objectSpread2((_objectSpread2$1 = { | ||
| role: role, | ||
| tabIndex: tabIndex | ||
| }, _defineProperty(_objectSpread2$1, selectedAriaKey, selectedAriaKey ? isSelected : undefined), _defineProperty(_objectSpread2$1, refKey, focusRef), _defineProperty(_objectSpread2$1, "onFocus", composeEventHandlers(onFocusCallback, function () { | ||
| dispatch({ | ||
| type: 'FOCUS', | ||
| payload: item, | ||
| focusedItem: focusedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| })), _defineProperty(_objectSpread2$1, "onBlur", function onBlur(e) { | ||
| if (e.target.tabIndex === 0) { | ||
| dispatch({ | ||
| type: 'EXIT_WIDGET', | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| }), _defineProperty(_objectSpread2$1, "onClick", composeEventHandlers(onClick, function () { | ||
| dispatch({ | ||
| type: 'MOUSE_SELECT', | ||
| payload: item, | ||
| onSelect: onSelect, | ||
| onFocus: onFocus | ||
| }); | ||
| })), _defineProperty(_objectSpread2$1, "onKeyDown", composeEventHandlers(onKeyDown, function (e) { | ||
| if (e.keyCode === KEY_CODES.UP && verticalDirection || e.keyCode === KEY_CODES.LEFT && horizontalDirection) { | ||
| if (rtl && !verticalDirection) { | ||
| dispatch({ | ||
| type: 'INCREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } else { | ||
| dispatch({ | ||
| type: 'DECREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.DOWN && verticalDirection || e.keyCode === KEY_CODES.RIGHT && horizontalDirection) { | ||
| if (rtl && !verticalDirection) { | ||
| dispatch({ | ||
| type: 'DECREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } else { | ||
| dispatch({ | ||
| type: 'INCREMENT', | ||
| items: items, | ||
| focusedItem: focusedItem, | ||
| selectedItem: selectedItem, | ||
| onFocus: onFocus | ||
| }); | ||
| } | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.HOME) { | ||
| dispatch({ | ||
| type: 'HOME', | ||
| items: items, | ||
| onFocus: onFocus | ||
| }); | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.END) { | ||
| dispatch({ | ||
| type: 'END', | ||
| items: items, | ||
| onFocus: onFocus | ||
| }); | ||
| e.preventDefault(); | ||
| } else if (e.keyCode === KEY_CODES.SPACE || e.keyCode === KEY_CODES.ENTER) { | ||
| dispatch({ | ||
| type: 'KEYBOARD_SELECT', | ||
| payload: item, | ||
| onSelect: onSelect | ||
| }); | ||
| e.preventDefault(); | ||
| } | ||
| })), _objectSpread2$1), other); | ||
| }; | ||
| return { | ||
| focusedItem: controlledFocusedItem, | ||
| selectedItem: controlledSelectedItem, | ||
| getItemProps: getItemProps, | ||
| getContainerProps: getContainerProps | ||
| }; | ||
| } | ||
| var SelectionContainer = function SelectionContainer(_ref4) { | ||
| var children = _ref4.children, | ||
| _ref4$render = _ref4.render, | ||
| render = _ref4$render === void 0 ? children : _ref4$render, | ||
| options = _objectWithoutProperties(_ref4, ["children", "render"]); | ||
| return render(useSelection(options)); | ||
| var ButtonGroupContainer = function ButtonGroupContainer(_ref) { | ||
| var children = _ref.children, | ||
| _ref$render = _ref.render, | ||
| render = _ref$render === void 0 ? children : _ref$render, | ||
| options = _objectWithoutProperties(_ref, ["children", "render"]); | ||
| return render(useButtonGroup(options)); | ||
| }; | ||
| SelectionContainer.propTypes = { | ||
| ButtonGroupContainer.propTypes = { | ||
| children: PropTypes.func, | ||
| render: PropTypes.func, | ||
| rtl: PropTypes.bool, | ||
| direction: PropTypes.oneOf(['horizontal', 'vertical', 'both']), | ||
| defaultFocusedIndex: PropTypes.number, | ||
| focusedItem: PropTypes.any, | ||
@@ -493,39 +155,2 @@ selectedItem: PropTypes.any, | ||
| function useButtonGroup(options) { | ||
| const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection(options); | ||
| const getGroupProps = ({ role = 'group', ...other } = {}) => { | ||
| return { | ||
| role, | ||
| 'data-garden-container-id': 'containers.buttongroup', | ||
| 'data-garden-container-version': '0.3.0', | ||
| ...other | ||
| }; | ||
| }; | ||
| const getButtonProps = ({ role = 'button', selectedAriaKey = 'aria-pressed', ...other } = {}) => { | ||
| return { | ||
| role, | ||
| selectedAriaKey, | ||
| ...other | ||
| }; | ||
| }; | ||
| return { | ||
| selectedItem, | ||
| focusedItem, | ||
| getGroupProps: props => getContainerProps(getGroupProps(props)), | ||
| getButtonProps: props => getItemProps(getButtonProps(props), 'getButtonProps') | ||
| }; | ||
| } | ||
| const ButtonGroupContainer = ({ children, render = children, ...options }) => { | ||
| return render(useButtonGroup(options)); | ||
| }; | ||
| ButtonGroupContainer.propTypes = { | ||
| children: PropTypes.func, | ||
| render: PropTypes.func, | ||
| focusedItem: PropTypes.any, | ||
| selectedItem: PropTypes.any, | ||
| onSelect: PropTypes.func, | ||
| onFocus: PropTypes.func | ||
| }; | ||
| export { ButtonGroupContainer, useButtonGroup }; |
@@ -11,3 +11,3 @@ { | ||
| }, | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "main": "dist/index.cjs.js", | ||
@@ -24,3 +24,3 @@ "module": "dist/index.esm.js", | ||
| "dependencies": { | ||
| "@zendeskgarden/container-selection": "^1.3.0" | ||
| "@zendeskgarden/container-selection": "^1.3.1" | ||
| }, | ||
@@ -45,3 +45,3 @@ "peerDependencies": { | ||
| "zendeskgarden:src": "src/index.ts", | ||
| "gitHead": "54aeb7846e6b34c5003229fedf8f4c5132babfa9" | ||
| "gitHead": "81501ce8b32df63d3ffaa086c9a359a9fcf42d9a" | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-42.44%
32341
- Lines of code
- decreased by-70.59%
305