@pingux/astro 2.46.0-alpha.2 → 2.46.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/Input/Input.d.ts +4 -0
- package/lib/cjs/components/Input/Input.js +13 -21
- package/lib/cjs/components/Input/Input.stories.d.ts +20 -0
- package/lib/cjs/components/Input/Input.styles.d.ts +8 -0
- package/lib/cjs/components/Input/Input.styles.js +0 -1
- package/lib/cjs/components/Input/Input.test.d.ts +1 -0
- package/lib/cjs/components/Input/Input.test.js +2 -10
- package/lib/cjs/components/Input/index.d.ts +1 -0
- package/lib/cjs/components/RockerButton/RockerButton.js +2 -2
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.d.ts +4 -0
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js +9 -39
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.d.ts +9 -0
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.d.ts +1 -0
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +2 -2
- package/lib/cjs/components/RockerButtonGroup/index.d.ts +1 -0
- package/lib/cjs/components/RockerButtonGroup/index.js +2 -21
- package/lib/cjs/components/TreeView/TreeView.stories.js +14 -0
- package/lib/cjs/components/TreeView/TreeViewRow.js +9 -3
- package/lib/cjs/context/RockerButtonGroupContext/index.d.ts +2 -0
- package/lib/cjs/context/RockerButtonGroupContext/index.js +10 -0
- package/lib/cjs/types/index.d.ts +2 -0
- package/lib/cjs/types/index.js +35 -13
- package/lib/cjs/types/input.d.ts +18 -0
- package/lib/cjs/types/input.js +6 -0
- package/lib/cjs/types/rockerButtonGroup.d.ts +14 -0
- package/lib/cjs/types/rockerButtonGroup.js +6 -0
- package/lib/cjs/types/shared/index.d.ts +1 -0
- package/lib/cjs/types/shared/index.js +12 -1
- package/lib/cjs/types/shared/validPositiveInteger.d.ts +4 -0
- package/lib/cjs/types/shared/validPositiveInteger.js +6 -0
- package/lib/components/Input/Input.js +12 -20
- package/lib/components/Input/Input.styles.js +0 -1
- package/lib/components/Input/Input.test.js +2 -10
- package/lib/components/RockerButton/RockerButton.js +1 -1
- package/lib/components/RockerButtonGroup/RockerButtonGroup.js +7 -38
- package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +3 -3
- package/lib/components/RockerButtonGroup/index.js +1 -2
- package/lib/components/TreeView/TreeView.stories.js +14 -0
- package/lib/components/TreeView/TreeViewRow.js +9 -3
- package/lib/context/RockerButtonGroupContext/index.js +2 -0
- package/lib/types/index.js +2 -0
- package/lib/types/input.js +1 -0
- package/lib/types/rockerButtonGroup.js +1 -0
- package/lib/types/shared/index.js +2 -1
- package/lib/types/shared/validPositiveInteger.js +1 -0
- package/package.json +3 -1
@@ -9,15 +9,16 @@ _Object$defineProperty(exports, "__esModule", {
|
|
9
9
|
value: true
|
10
10
|
});
|
11
11
|
exports["default"] = void 0;
|
12
|
-
var _isInteger = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-integer"));
|
13
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
14
13
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
14
|
+
var _base = _interopRequireDefault(require("@emotion/styled/base"));
|
15
15
|
var _react = _interopRequireWildcard(require("react"));
|
16
|
-
var
|
16
|
+
var _styledSystem = require("styled-system");
|
17
17
|
var _themeUi = require("theme-ui");
|
18
|
-
var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
|
19
18
|
var _react2 = require("@emotion/react");
|
20
19
|
var _excluded = ["name", "placeholder", "maxLength"];
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
21
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
21
22
|
/**
|
22
23
|
* Base input component.
|
23
24
|
*
|
@@ -28,34 +29,25 @@ var _excluded = ["name", "placeholder", "maxLength"];
|
|
28
29
|
* We instead encourage developers to utilize our Field components wherever possible.
|
29
30
|
* If this component is used, accessibility is left to the developer.
|
30
31
|
*/
|
31
|
-
|
32
|
-
|
32
|
+
|
33
|
+
var ExtendedInput = /*#__PURE__*/(0, _base["default"])(_themeUi.Input, process.env.NODE_ENV === "production" ? {
|
34
|
+
target: "e1lpwkt50"
|
35
|
+
} : {
|
36
|
+
target: "e1lpwkt50",
|
37
|
+
label: "ExtendedInput"
|
38
|
+
})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnNCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG4vKipcbiAqIEJhc2UgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIEFjY2VwdHMgcmVsZXZhbnQgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiBbSW5wdXQgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9pbnB1dC8pLlxuICpcbiAqICoqTm90ZSoqOiBUaGlzIGNvbXBvbmVudCBkb2VzIG5vdCBzdXBwbHkgYWxsIG9mIHRoZSBhY2Nlc3NpYmlsaXR5IGFzc2lzdGFuY2Ugb24gaXRzIG93bi5cbiAqIFdlIGluc3RlYWQgZW5jb3VyYWdlIGRldmVsb3BlcnMgdG8gdXRpbGl6ZSBvdXIgRmllbGQgY29tcG9uZW50cyB3aGVyZXZlciBwb3NzaWJsZS5cbiAqIElmIHRoaXMgY29tcG9uZW50IGlzIHVzZWQsIGFjY2Vzc2liaWxpdHkgaXMgbGVmdCB0byB0aGUgZGV2ZWxvcGVyLlxuICovXG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSAnSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnB1dDtcbiJdfQ== */");
|
33
39
|
var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
34
40
|
var name = props.name,
|
35
41
|
placeholder = props.placeholder,
|
36
42
|
maxLength = props.maxLength,
|
37
43
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
38
|
-
return (0, _react2.jsx)(
|
44
|
+
return (0, _react2.jsx)(ExtendedInput, (0, _extends2["default"])({
|
39
45
|
ref: ref,
|
40
46
|
name: name,
|
41
47
|
placeholder: placeholder,
|
42
|
-
maxLength:
|
48
|
+
maxLength: maxLength && maxLength
|
43
49
|
}, others));
|
44
50
|
});
|
45
51
|
Input.displayName = 'Input';
|
46
|
-
Input.propTypes = {
|
47
|
-
/** Defines a string value that labels the current element. */
|
48
|
-
'aria-label': _propTypes["default"].string,
|
49
|
-
/** Id of input. */
|
50
|
-
id: _propTypes["default"].string,
|
51
|
-
/** Name of input. */
|
52
|
-
name: _propTypes["default"].string,
|
53
|
-
/** Max length of input value */
|
54
|
-
maxLength: _isValidPositiveInt["default"],
|
55
|
-
/** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
|
56
|
-
type: _propTypes["default"].string,
|
57
|
-
/** Placeholder for the input */
|
58
|
-
placeholder: _propTypes["default"].string
|
59
|
-
};
|
60
52
|
var _default = Input;
|
61
53
|
exports["default"] = _default;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryFn } from '@storybook/react';
|
3
|
+
import { InputProps } from '../../types';
|
4
|
+
declare const _default: {
|
5
|
+
title: string;
|
6
|
+
component: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
7
|
+
argTypes: {
|
8
|
+
placeholder: {};
|
9
|
+
type: {};
|
10
|
+
name: {};
|
11
|
+
id: {};
|
12
|
+
};
|
13
|
+
args: {
|
14
|
+
placeholder: string;
|
15
|
+
};
|
16
|
+
};
|
17
|
+
export default _default;
|
18
|
+
export declare const Default: StoryFn<InputProps>;
|
19
|
+
export declare const Password: StoryFn;
|
20
|
+
export declare const LargeInput: StoryFn;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -45,17 +45,9 @@ test('maxlength field with a set maxlength', function () {
|
|
45
45
|
_userEvent["default"].type(input, 'banana');
|
46
46
|
expect(input.value.length).toBe(3);
|
47
47
|
});
|
48
|
-
test('maxlength field is not set as
|
48
|
+
test('maxlength field is not set as undefined', function () {
|
49
49
|
getComponent({
|
50
|
-
maxLength:
|
51
|
-
});
|
52
|
-
var input = _react2.screen.getByTestId(testId);
|
53
|
-
_userEvent["default"].type(input, 'banana');
|
54
|
-
expect(input.value.length).toBe(6);
|
55
|
-
});
|
56
|
-
test('maxlength field is not set as zero', function () {
|
57
|
-
getComponent({
|
58
|
-
maxLength: 0
|
50
|
+
maxLength: undefined
|
59
51
|
});
|
60
52
|
var input = _react2.screen.getByTestId(testId);
|
61
53
|
_userEvent["default"].type(input, 'banana');
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './Input';
|
@@ -23,10 +23,10 @@ var _reactStately = require("react-stately");
|
|
23
23
|
var _interactions = require("@react-aria/interactions");
|
24
24
|
var _utils = require("@react-aria/utils");
|
25
25
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
26
|
+
var _RockerButtonGroupContext = require("../../context/RockerButtonGroupContext");
|
26
27
|
var _hooks = require("../../hooks");
|
27
28
|
var _index = require("../../index");
|
28
29
|
var _colors = require("../../styles/colors");
|
29
|
-
var _RockerButtonGroup = require("../RockerButtonGroup");
|
30
30
|
var _react2 = require("@emotion/react");
|
31
31
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
32
32
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -39,7 +39,7 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
|
|
39
39
|
var key = item.key,
|
40
40
|
rendered = item.rendered,
|
41
41
|
itemProps = item.props;
|
42
|
-
var state = (0, _react.useContext)(
|
42
|
+
var state = (0, _react.useContext)(_RockerButtonGroupContext.RockerContext);
|
43
43
|
var isDisabled = state.disabledKeys.has(key);
|
44
44
|
var isSelected = state.selectedKey === key;
|
45
45
|
var rockerButtonRef = (0, _react.useRef)();
|
@@ -1,61 +1,41 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
5
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
6
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
7
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
8
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
9
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
10
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
11
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
12
4
|
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
13
7
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
14
8
|
_Object$defineProperty(exports, "__esModule", {
|
15
9
|
value: true
|
16
10
|
});
|
17
|
-
exports["default"] =
|
11
|
+
exports["default"] = void 0;
|
18
12
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
19
13
|
var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
|
20
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
21
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
22
15
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
23
16
|
var _react = _interopRequireWildcard(require("react"));
|
24
17
|
var _reactAria = require("react-aria");
|
25
18
|
var _reactStately = require("react-stately");
|
26
|
-
var
|
19
|
+
var _RockerButtonGroupContext = require("../../context/RockerButtonGroupContext");
|
27
20
|
var _hooks = require("../../hooks");
|
28
21
|
var _Box = _interopRequireDefault(require("../Box"));
|
29
22
|
var _RockerButton = require("../RockerButton");
|
30
23
|
var _react2 = require("@emotion/react");
|
31
|
-
var _excluded = ["
|
24
|
+
var _excluded = ["tabListProps"];
|
32
25
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
33
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
34
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
35
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
36
|
-
var RockerContext = /*#__PURE__*/_react["default"].createContext({});
|
37
|
-
exports.RockerContext = RockerContext;
|
38
27
|
var RockerButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
39
28
|
var _context;
|
40
|
-
var
|
41
|
-
onSelectionChange = props.onSelectionChange,
|
42
|
-
tabListProps = props.tabListProps,
|
43
|
-
disabledKeys = props.disabledKeys,
|
29
|
+
var tabListProps = props.tabListProps,
|
44
30
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
45
|
-
var buttonGroupRef = (0,
|
31
|
+
var buttonGroupRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
46
32
|
(0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
|
47
|
-
|
48
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
49
|
-
return buttonGroupRef.current;
|
50
|
-
});
|
51
|
-
var state = (0, _reactStately.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
|
52
|
-
onSelectionChange: onSelectionChange
|
53
|
-
}));
|
33
|
+
var state = (0, _reactStately.useTabListState)(props);
|
54
34
|
var _useTabList = (0, _reactAria.useTabList)(props, state, buttonGroupRef),
|
55
35
|
raTabListProps = _useTabList.tabListProps;
|
56
36
|
// removed tabList role for now as this isn't really the role we are looking for
|
57
37
|
delete raTabListProps.role;
|
58
|
-
return (0, _react2.jsx)(RockerContext.Provider, {
|
38
|
+
return (0, _react2.jsx)(_RockerButtonGroupContext.RockerContext.Provider, {
|
59
39
|
value: state
|
60
40
|
}, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
61
41
|
variant: "rockerButton.container"
|
@@ -72,16 +52,6 @@ var RockerButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
|
|
72
52
|
});
|
73
53
|
}))));
|
74
54
|
});
|
75
|
-
RockerButtonGroup.propTypes = {
|
76
|
-
/** The default button key to be selected. (uncontrolled) */
|
77
|
-
defaultSelectedKey: _propTypes["default"].string,
|
78
|
-
/** The button key that is currently selected. (controlled) */
|
79
|
-
selectedKey: _propTypes["default"].string,
|
80
|
-
/** Which keys should be disabled. */
|
81
|
-
disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
82
|
-
/** Handler that is called when the selected button has changed. */
|
83
|
-
onSelectionChange: _propTypes["default"].func
|
84
|
-
};
|
85
55
|
RockerButtonGroup.displayName = 'RockerButtonGroup';
|
86
56
|
var _default = RockerButtonGroup;
|
87
57
|
exports["default"] = _default;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { StoryFn } from '@storybook/react';
|
2
|
+
import { RockerButtonGroupProps } from '../../types';
|
3
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
4
|
+
export default _default;
|
5
|
+
export declare const Default: StoryFn<RockerButtonGroupProps>;
|
6
|
+
export declare const Uncontrolled: StoryFn;
|
7
|
+
export declare const Controlled: StoryFn;
|
8
|
+
export declare const withCustomSelectedColors: StoryFn;
|
9
|
+
export declare const DisabledSingleButton: StoryFn;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -61,14 +61,14 @@ var getComponent = function getComponent() {
|
|
61
61
|
});
|
62
62
|
test('renders rocker container with buttons', function () {
|
63
63
|
getComponent();
|
64
|
-
var rockerContainer =
|
64
|
+
var rockerContainer = _testWrapper.screen.getByTestId(testId);
|
65
65
|
expect(rockerContainer).toBeInTheDocument();
|
66
66
|
var buttons = _testWrapper.screen.getAllByRole('button');
|
67
67
|
expect(buttons).toHaveLength(3);
|
68
68
|
});
|
69
69
|
test('buttonGroup is not disabled by default', function () {
|
70
70
|
getComponent();
|
71
|
-
var rockerContainer =
|
71
|
+
var rockerContainer = _testWrapper.screen.getByTestId(testId);
|
72
72
|
expect(rockerContainer).toBeEnabled();
|
73
73
|
(0, _forEach["default"])(testButtons).call(testButtons, function (button) {
|
74
74
|
var buttonKey = _testWrapper.screen.getByText(button.key);
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './RockerButtonGroup';
|
@@ -1,33 +1,14 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context;
|
4
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
5
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
6
3
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
7
|
-
var
|
8
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
9
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
4
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
10
5
|
_Object$defineProperty(exports, "__esModule", {
|
11
6
|
value: true
|
12
7
|
});
|
13
|
-
var _exportNames = {};
|
14
8
|
_Object$defineProperty(exports, "default", {
|
15
9
|
enumerable: true,
|
16
10
|
get: function get() {
|
17
11
|
return _RockerButtonGroup["default"];
|
18
12
|
}
|
19
13
|
});
|
20
|
-
var _RockerButtonGroup =
|
21
|
-
_forEachInstanceProperty(_context = _Object$keys(_RockerButtonGroup)).call(_context, function (key) {
|
22
|
-
if (key === "default" || key === "__esModule") return;
|
23
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
24
|
-
if (key in exports && exports[key] === _RockerButtonGroup[key]) return;
|
25
|
-
_Object$defineProperty(exports, key, {
|
26
|
-
enumerable: true,
|
27
|
-
get: function get() {
|
28
|
-
return _RockerButtonGroup[key];
|
29
|
-
}
|
30
|
-
});
|
31
|
-
});
|
32
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
33
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var _RockerButtonGroup = _interopRequireDefault(require("./RockerButtonGroup"));
|
@@ -46,6 +46,20 @@ var _default = {
|
|
46
46
|
source: {
|
47
47
|
type: 'code'
|
48
48
|
}
|
49
|
+
},
|
50
|
+
a11y: {
|
51
|
+
config: {
|
52
|
+
rules: [
|
53
|
+
/* Turned off since dynamic parent and children getting added on treegrid role
|
54
|
+
* and design specs */
|
55
|
+
{
|
56
|
+
id: 'aria-required-parent',
|
57
|
+
enabled: false
|
58
|
+
}, {
|
59
|
+
id: 'aria-required-children',
|
60
|
+
enabled: false
|
61
|
+
}]
|
62
|
+
}
|
49
63
|
}
|
50
64
|
}
|
51
65
|
};
|
@@ -200,7 +200,9 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
200
200
|
toggledIcon: _MenuDownIcon["default"],
|
201
201
|
iconProps: {
|
202
202
|
size: 25,
|
203
|
-
title:
|
203
|
+
title: {
|
204
|
+
name: "".concat(title, " expand or collapse button")
|
205
|
+
}
|
204
206
|
},
|
205
207
|
buttonProps: _objectSpread({
|
206
208
|
'aria-label': "".concat(title, " expand or collapse button"),
|
@@ -222,7 +224,9 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
222
224
|
color: "focus",
|
223
225
|
icon: mainIcon,
|
224
226
|
size: 25,
|
225
|
-
title:
|
227
|
+
title: {
|
228
|
+
name: 'folder icon'
|
229
|
+
},
|
226
230
|
alt: "folder icon"
|
227
231
|
}), (0, _react2.jsx)(_index.Text, {
|
228
232
|
className: classNames
|
@@ -230,7 +234,9 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
230
234
|
icon: lastIcon,
|
231
235
|
size: 15,
|
232
236
|
color: "accent.80",
|
233
|
-
title:
|
237
|
+
title: {
|
238
|
+
name: 'lock icon'
|
239
|
+
},
|
234
240
|
alt: "lock icon"
|
235
241
|
})));
|
236
242
|
});
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
_Object$defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.RockerContext = void 0;
|
8
|
+
var _react = require("react");
|
9
|
+
var RockerContext = /*#__PURE__*/(0, _react.createContext)({});
|
10
|
+
exports.RockerContext = RockerContext;
|
package/lib/cjs/types/index.d.ts
CHANGED
@@ -8,6 +8,7 @@ export * from './fieldHelperText';
|
|
8
8
|
export * from './icon';
|
9
9
|
export * from './iconBadge';
|
10
10
|
export * from './iconButton';
|
11
|
+
export * from './input';
|
11
12
|
export * from './item';
|
12
13
|
export * from './link';
|
13
14
|
export * from './listItem';
|
@@ -15,6 +16,7 @@ export * from './loader';
|
|
15
16
|
export * from './overlayPanel';
|
16
17
|
export * from './popoverContainer';
|
17
18
|
export * from './popoverMenu';
|
19
|
+
export * from './rockerButtonGroup';
|
18
20
|
export * from './separator';
|
19
21
|
export * from './shared';
|
20
22
|
export * from './table';
|
package/lib/cjs/types/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24;
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
@@ -117,8 +117,19 @@ _forEachInstanceProperty(_context10 = _Object$keys(_iconButton)).call(_context10
|
|
117
117
|
}
|
118
118
|
});
|
119
119
|
});
|
120
|
+
var _input = require("./input");
|
121
|
+
_forEachInstanceProperty(_context11 = _Object$keys(_input)).call(_context11, function (key) {
|
122
|
+
if (key === "default" || key === "__esModule") return;
|
123
|
+
if (key in exports && exports[key] === _input[key]) return;
|
124
|
+
_Object$defineProperty(exports, key, {
|
125
|
+
enumerable: true,
|
126
|
+
get: function get() {
|
127
|
+
return _input[key];
|
128
|
+
}
|
129
|
+
});
|
130
|
+
});
|
120
131
|
var _item = require("./item");
|
121
|
-
_forEachInstanceProperty(
|
132
|
+
_forEachInstanceProperty(_context12 = _Object$keys(_item)).call(_context12, function (key) {
|
122
133
|
if (key === "default" || key === "__esModule") return;
|
123
134
|
if (key in exports && exports[key] === _item[key]) return;
|
124
135
|
_Object$defineProperty(exports, key, {
|
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_item)).call(_context11, func
|
|
129
140
|
});
|
130
141
|
});
|
131
142
|
var _link = require("./link");
|
132
|
-
_forEachInstanceProperty(
|
143
|
+
_forEachInstanceProperty(_context13 = _Object$keys(_link)).call(_context13, function (key) {
|
133
144
|
if (key === "default" || key === "__esModule") return;
|
134
145
|
if (key in exports && exports[key] === _link[key]) return;
|
135
146
|
_Object$defineProperty(exports, key, {
|
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_link)).call(_context12, func
|
|
140
151
|
});
|
141
152
|
});
|
142
153
|
var _listItem = require("./listItem");
|
143
|
-
_forEachInstanceProperty(
|
154
|
+
_forEachInstanceProperty(_context14 = _Object$keys(_listItem)).call(_context14, function (key) {
|
144
155
|
if (key === "default" || key === "__esModule") return;
|
145
156
|
if (key in exports && exports[key] === _listItem[key]) return;
|
146
157
|
_Object$defineProperty(exports, key, {
|
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_listItem)).call(_context13,
|
|
151
162
|
});
|
152
163
|
});
|
153
164
|
var _loader = require("./loader");
|
154
|
-
_forEachInstanceProperty(
|
165
|
+
_forEachInstanceProperty(_context15 = _Object$keys(_loader)).call(_context15, function (key) {
|
155
166
|
if (key === "default" || key === "__esModule") return;
|
156
167
|
if (key in exports && exports[key] === _loader[key]) return;
|
157
168
|
_Object$defineProperty(exports, key, {
|
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_loader)).call(_context14, fu
|
|
162
173
|
});
|
163
174
|
});
|
164
175
|
var _overlayPanel = require("./overlayPanel");
|
165
|
-
_forEachInstanceProperty(
|
176
|
+
_forEachInstanceProperty(_context16 = _Object$keys(_overlayPanel)).call(_context16, function (key) {
|
166
177
|
if (key === "default" || key === "__esModule") return;
|
167
178
|
if (key in exports && exports[key] === _overlayPanel[key]) return;
|
168
179
|
_Object$defineProperty(exports, key, {
|
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_overlayPanel)).call(_context
|
|
173
184
|
});
|
174
185
|
});
|
175
186
|
var _popoverContainer = require("./popoverContainer");
|
176
|
-
_forEachInstanceProperty(
|
187
|
+
_forEachInstanceProperty(_context17 = _Object$keys(_popoverContainer)).call(_context17, function (key) {
|
177
188
|
if (key === "default" || key === "__esModule") return;
|
178
189
|
if (key in exports && exports[key] === _popoverContainer[key]) return;
|
179
190
|
_Object$defineProperty(exports, key, {
|
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_popoverContainer)).call(_con
|
|
184
195
|
});
|
185
196
|
});
|
186
197
|
var _popoverMenu = require("./popoverMenu");
|
187
|
-
_forEachInstanceProperty(
|
198
|
+
_forEachInstanceProperty(_context18 = _Object$keys(_popoverMenu)).call(_context18, function (key) {
|
188
199
|
if (key === "default" || key === "__esModule") return;
|
189
200
|
if (key in exports && exports[key] === _popoverMenu[key]) return;
|
190
201
|
_Object$defineProperty(exports, key, {
|
@@ -194,8 +205,19 @@ _forEachInstanceProperty(_context17 = _Object$keys(_popoverMenu)).call(_context1
|
|
194
205
|
}
|
195
206
|
});
|
196
207
|
});
|
208
|
+
var _rockerButtonGroup = require("./rockerButtonGroup");
|
209
|
+
_forEachInstanceProperty(_context19 = _Object$keys(_rockerButtonGroup)).call(_context19, function (key) {
|
210
|
+
if (key === "default" || key === "__esModule") return;
|
211
|
+
if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
|
212
|
+
_Object$defineProperty(exports, key, {
|
213
|
+
enumerable: true,
|
214
|
+
get: function get() {
|
215
|
+
return _rockerButtonGroup[key];
|
216
|
+
}
|
217
|
+
});
|
218
|
+
});
|
197
219
|
var _separator = require("./separator");
|
198
|
-
_forEachInstanceProperty(
|
220
|
+
_forEachInstanceProperty(_context20 = _Object$keys(_separator)).call(_context20, function (key) {
|
199
221
|
if (key === "default" || key === "__esModule") return;
|
200
222
|
if (key in exports && exports[key] === _separator[key]) return;
|
201
223
|
_Object$defineProperty(exports, key, {
|
@@ -206,7 +228,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_separator)).call(_context18,
|
|
206
228
|
});
|
207
229
|
});
|
208
230
|
var _shared = require("./shared");
|
209
|
-
_forEachInstanceProperty(
|
231
|
+
_forEachInstanceProperty(_context21 = _Object$keys(_shared)).call(_context21, function (key) {
|
210
232
|
if (key === "default" || key === "__esModule") return;
|
211
233
|
if (key in exports && exports[key] === _shared[key]) return;
|
212
234
|
_Object$defineProperty(exports, key, {
|
@@ -217,7 +239,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_shared)).call(_context19, fu
|
|
217
239
|
});
|
218
240
|
});
|
219
241
|
var _table = require("./table");
|
220
|
-
_forEachInstanceProperty(
|
242
|
+
_forEachInstanceProperty(_context22 = _Object$keys(_table)).call(_context22, function (key) {
|
221
243
|
if (key === "default" || key === "__esModule") return;
|
222
244
|
if (key in exports && exports[key] === _table[key]) return;
|
223
245
|
_Object$defineProperty(exports, key, {
|
@@ -228,7 +250,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_table)).call(_context20, fun
|
|
228
250
|
});
|
229
251
|
});
|
230
252
|
var _text = require("./text");
|
231
|
-
_forEachInstanceProperty(
|
253
|
+
_forEachInstanceProperty(_context23 = _Object$keys(_text)).call(_context23, function (key) {
|
232
254
|
if (key === "default" || key === "__esModule") return;
|
233
255
|
if (key in exports && exports[key] === _text[key]) return;
|
234
256
|
_Object$defineProperty(exports, key, {
|
@@ -239,7 +261,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_text)).call(_context21, func
|
|
239
261
|
});
|
240
262
|
});
|
241
263
|
var _tooltipTrigger = require("./tooltipTrigger");
|
242
|
-
_forEachInstanceProperty(
|
264
|
+
_forEachInstanceProperty(_context24 = _Object$keys(_tooltipTrigger)).call(_context24, function (key) {
|
243
265
|
if (key === "default" || key === "__esModule") return;
|
244
266
|
if (key in exports && exports[key] === _tooltipTrigger[key]) return;
|
245
267
|
_Object$defineProperty(exports, key, {
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { TestingAttributes } from './shared/test';
|
2
|
+
import { DOMAttributes, StyleProps, ValidPositiveInteger } from './shared';
|
3
|
+
export interface InputProps extends StyleProps, DOMAttributes, TestingAttributes {
|
4
|
+
/** Defines a string value that labels the current element. */
|
5
|
+
'aria-label'?: string;
|
6
|
+
/** Id of input. */
|
7
|
+
id?: string;
|
8
|
+
/** Name of input. */
|
9
|
+
name?: string;
|
10
|
+
/** Max length of input value */
|
11
|
+
maxLength?: ValidPositiveInteger;
|
12
|
+
/** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
|
13
|
+
type?: string;
|
14
|
+
/** Placeholder for the input */
|
15
|
+
placeholder?: string;
|
16
|
+
/** Styling variant for the input */
|
17
|
+
variant?: string;
|
18
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { TabListProps } from '@react-stately/tabs';
|
2
|
+
import { TestingAttributes } from './shared/test';
|
3
|
+
import { BoxProps } from './box';
|
4
|
+
export interface RockerButtonGroupProps extends BoxProps, TestingAttributes {
|
5
|
+
/** The default button key to be selected. (uncontrolled) */
|
6
|
+
defaultSelectedKey?: string;
|
7
|
+
/** The button key that is currently selected. (controlled) */
|
8
|
+
selectedKey?: string;
|
9
|
+
/** Which keys should be disabled. */
|
10
|
+
disabledKeys?: string[];
|
11
|
+
/** Handler that is called when the selected button has changed. */
|
12
|
+
onSelectionChange?: (key: string) => void;
|
13
|
+
tabListProps?: TabListProps<object>;
|
14
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var _context, _context2, _context3, _context4, _context5;
|
3
|
+
var _context, _context2, _context3, _context4, _context5, _context6;
|
4
4
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
5
5
|
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
6
6
|
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
@@ -61,4 +61,15 @@ _forEachInstanceProperty(_context5 = _Object$keys(_utils)).call(_context5, funct
|
|
61
61
|
return _utils[key];
|
62
62
|
}
|
63
63
|
});
|
64
|
+
});
|
65
|
+
var _validPositiveInteger = require("./validPositiveInteger");
|
66
|
+
_forEachInstanceProperty(_context6 = _Object$keys(_validPositiveInteger)).call(_context6, function (key) {
|
67
|
+
if (key === "default" || key === "__esModule") return;
|
68
|
+
if (key in exports && exports[key] === _validPositiveInteger[key]) return;
|
69
|
+
_Object$defineProperty(exports, key, {
|
70
|
+
enumerable: true,
|
71
|
+
get: function get() {
|
72
|
+
return _validPositiveInteger[key];
|
73
|
+
}
|
74
|
+
});
|
64
75
|
});
|
@@ -0,0 +1,4 @@
|
|
1
|
+
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
|
2
|
+
type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
|
3
|
+
export type ValidPositiveInteger = Range<1, 999>;
|
4
|
+
export {};
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
|
+
import _styled from "@emotion/styled/base";
|
3
4
|
var _excluded = ["name", "placeholder", "maxLength"];
|
4
|
-
import _Number$isInteger from "@babel/runtime-corejs3/core-js-stable/number/is-integer";
|
5
5
|
import React, { forwardRef } from 'react';
|
6
|
-
import
|
6
|
+
import { flexbox, layout, typography } from 'styled-system';
|
7
7
|
import { Input as ThemeUIInput } from 'theme-ui';
|
8
|
-
import
|
8
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
9
9
|
/**
|
10
10
|
* Base input component.
|
11
11
|
*
|
@@ -16,32 +16,24 @@ import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
|
|
16
16
|
* We instead encourage developers to utilize our Field components wherever possible.
|
17
17
|
* If this component is used, accessibility is left to the developer.
|
18
18
|
*/
|
19
|
-
|
19
|
+
|
20
|
+
var ExtendedInput = /*#__PURE__*/_styled(ThemeUIInput, process.env.NODE_ENV === "production" ? {
|
21
|
+
target: "e1lpwkt50"
|
22
|
+
} : {
|
23
|
+
target: "e1lpwkt50",
|
24
|
+
label: "ExtendedInput"
|
25
|
+
})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG4vKipcbiAqIEJhc2UgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIEFjY2VwdHMgcmVsZXZhbnQgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiBbSW5wdXQgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9pbnB1dC8pLlxuICpcbiAqICoqTm90ZSoqOiBUaGlzIGNvbXBvbmVudCBkb2VzIG5vdCBzdXBwbHkgYWxsIG9mIHRoZSBhY2Nlc3NpYmlsaXR5IGFzc2lzdGFuY2Ugb24gaXRzIG93bi5cbiAqIFdlIGluc3RlYWQgZW5jb3VyYWdlIGRldmVsb3BlcnMgdG8gdXRpbGl6ZSBvdXIgRmllbGQgY29tcG9uZW50cyB3aGVyZXZlciBwb3NzaWJsZS5cbiAqIElmIHRoaXMgY29tcG9uZW50IGlzIHVzZWQsIGFjY2Vzc2liaWxpdHkgaXMgbGVmdCB0byB0aGUgZGV2ZWxvcGVyLlxuICovXG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSAnSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnB1dDtcbiJdfQ== */");
|
20
26
|
var Input = /*#__PURE__*/forwardRef(function (props, ref) {
|
21
27
|
var name = props.name,
|
22
28
|
placeholder = props.placeholder,
|
23
29
|
maxLength = props.maxLength,
|
24
30
|
others = _objectWithoutProperties(props, _excluded);
|
25
|
-
return ___EmotionJSX(
|
31
|
+
return ___EmotionJSX(ExtendedInput, _extends({
|
26
32
|
ref: ref,
|
27
33
|
name: name,
|
28
34
|
placeholder: placeholder,
|
29
|
-
maxLength:
|
35
|
+
maxLength: maxLength && maxLength
|
30
36
|
}, others));
|
31
37
|
});
|
32
38
|
Input.displayName = 'Input';
|
33
|
-
Input.propTypes = {
|
34
|
-
/** Defines a string value that labels the current element. */
|
35
|
-
'aria-label': PropTypes.string,
|
36
|
-
/** Id of input. */
|
37
|
-
id: PropTypes.string,
|
38
|
-
/** Name of input. */
|
39
|
-
name: PropTypes.string,
|
40
|
-
/** Max length of input value */
|
41
|
-
maxLength: isValidPositiveInt,
|
42
|
-
/** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
|
43
|
-
type: PropTypes.string,
|
44
|
-
/** Placeholder for the input */
|
45
|
-
placeholder: PropTypes.string
|
46
|
-
};
|
47
39
|
export default Input;
|
@@ -42,17 +42,9 @@ test('maxlength field with a set maxlength', function () {
|
|
42
42
|
userEvent.type(input, 'banana');
|
43
43
|
expect(input.value.length).toBe(3);
|
44
44
|
});
|
45
|
-
test('maxlength field is not set as
|
45
|
+
test('maxlength field is not set as undefined', function () {
|
46
46
|
getComponent({
|
47
|
-
maxLength:
|
48
|
-
});
|
49
|
-
var input = screen.getByTestId(testId);
|
50
|
-
userEvent.type(input, 'banana');
|
51
|
-
expect(input.value.length).toBe(6);
|
52
|
-
});
|
53
|
-
test('maxlength field is not set as zero', function () {
|
54
|
-
getComponent({
|
55
|
-
maxLength: 0
|
47
|
+
maxLength: undefined
|
56
48
|
});
|
57
49
|
var input = screen.getByTestId(testId);
|
58
50
|
userEvent.type(input, 'banana');
|
@@ -16,10 +16,10 @@ import { Item } from 'react-stately';
|
|
16
16
|
import { useHover, usePress } from '@react-aria/interactions';
|
17
17
|
import { mergeProps } from '@react-aria/utils';
|
18
18
|
import PropTypes from 'prop-types';
|
19
|
+
import { RockerContext } from '../../context/RockerButtonGroupContext';
|
19
20
|
import { usePropWarning, useRockerButton, useStatusClasses } from '../../hooks';
|
20
21
|
import { Box } from '../../index';
|
21
22
|
import { accent, getBaseHexColor, getDarkerColor } from '../../styles/colors';
|
22
|
-
import { RockerContext } from '../RockerButtonGroup';
|
23
23
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
24
24
|
export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
25
25
|
var _itemProps$selectedSt, _itemProps$selectedSt2;
|
@@ -1,44 +1,23 @@
|
|
1
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
10
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
2
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
12
|
-
var _excluded = ["
|
3
|
+
var _excluded = ["tabListProps"];
|
13
4
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
14
5
|
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
15
|
-
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
17
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
6
|
+
import React, { forwardRef } from 'react';
|
18
7
|
import { useTabList } from 'react-aria';
|
19
8
|
import { useTabListState } from 'react-stately';
|
20
|
-
import
|
21
|
-
import { usePropWarning } from '../../hooks';
|
9
|
+
import { RockerContext } from '../../context/RockerButtonGroupContext';
|
10
|
+
import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
|
22
11
|
import Box from '../Box';
|
23
12
|
import { CollectionRockerButton } from '../RockerButton';
|
24
13
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
25
|
-
export var RockerContext = /*#__PURE__*/React.createContext({});
|
26
14
|
var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
|
27
15
|
var _context;
|
28
|
-
var
|
29
|
-
onSelectionChange = props.onSelectionChange,
|
30
|
-
tabListProps = props.tabListProps,
|
31
|
-
disabledKeys = props.disabledKeys,
|
16
|
+
var tabListProps = props.tabListProps,
|
32
17
|
others = _objectWithoutProperties(props, _excluded);
|
33
|
-
var buttonGroupRef =
|
18
|
+
var buttonGroupRef = useLocalOrForwardRef(ref);
|
34
19
|
usePropWarning(props, 'disabled', 'isDisabled');
|
35
|
-
|
36
|
-
useImperativeHandle(ref, function () {
|
37
|
-
return buttonGroupRef.current;
|
38
|
-
});
|
39
|
-
var state = useTabListState(_objectSpread(_objectSpread({}, props), {}, {
|
40
|
-
onSelectionChange: onSelectionChange
|
41
|
-
}));
|
20
|
+
var state = useTabListState(props);
|
42
21
|
var _useTabList = useTabList(props, state, buttonGroupRef),
|
43
22
|
raTabListProps = _useTabList.tabListProps;
|
44
23
|
// removed tabList role for now as this isn't really the role we are looking for
|
@@ -60,15 +39,5 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
60
39
|
});
|
61
40
|
}))));
|
62
41
|
});
|
63
|
-
RockerButtonGroup.propTypes = {
|
64
|
-
/** The default button key to be selected. (uncontrolled) */
|
65
|
-
defaultSelectedKey: PropTypes.string,
|
66
|
-
/** The button key that is currently selected. (controlled) */
|
67
|
-
selectedKey: PropTypes.string,
|
68
|
-
/** Which keys should be disabled. */
|
69
|
-
disabledKeys: PropTypes.arrayOf(PropTypes.string),
|
70
|
-
/** Handler that is called when the selected button has changed. */
|
71
|
-
onSelectionChange: PropTypes.func
|
72
|
-
};
|
73
42
|
RockerButtonGroup.displayName = 'RockerButtonGroup';
|
74
43
|
export default RockerButtonGroup;
|
@@ -4,7 +4,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
|
|
4
4
|
import React from 'react';
|
5
5
|
import userEvent from '@testing-library/user-event';
|
6
6
|
import { RockerButton, RockerButtonGroup } from '../../index';
|
7
|
-
import { fireEvent,
|
7
|
+
import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
|
8
8
|
import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
|
9
9
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
10
10
|
var testId = 'testId';
|
@@ -58,14 +58,14 @@ universalComponentTests({
|
|
58
58
|
});
|
59
59
|
test('renders rocker container with buttons', function () {
|
60
60
|
getComponent();
|
61
|
-
var rockerContainer =
|
61
|
+
var rockerContainer = screen.getByTestId(testId);
|
62
62
|
expect(rockerContainer).toBeInTheDocument();
|
63
63
|
var buttons = screen.getAllByRole('button');
|
64
64
|
expect(buttons).toHaveLength(3);
|
65
65
|
});
|
66
66
|
test('buttonGroup is not disabled by default', function () {
|
67
67
|
getComponent();
|
68
|
-
var rockerContainer =
|
68
|
+
var rockerContainer = screen.getByTestId(testId);
|
69
69
|
expect(rockerContainer).toBeEnabled();
|
70
70
|
_forEachInstanceProperty(testButtons).call(testButtons, function (button) {
|
71
71
|
var buttonKey = screen.getByText(button.key);
|
@@ -1,2 +1 @@
|
|
1
|
-
export { default } from './RockerButtonGroup';
|
2
|
-
export * from './RockerButtonGroup';
|
1
|
+
export { default } from './RockerButtonGroup';
|
@@ -33,6 +33,20 @@ export default {
|
|
33
33
|
source: {
|
34
34
|
type: 'code'
|
35
35
|
}
|
36
|
+
},
|
37
|
+
a11y: {
|
38
|
+
config: {
|
39
|
+
rules: [
|
40
|
+
/* Turned off since dynamic parent and children getting added on treegrid role
|
41
|
+
* and design specs */
|
42
|
+
{
|
43
|
+
id: 'aria-required-parent',
|
44
|
+
enabled: false
|
45
|
+
}, {
|
46
|
+
id: 'aria-required-children',
|
47
|
+
enabled: false
|
48
|
+
}]
|
49
|
+
}
|
36
50
|
}
|
37
51
|
}
|
38
52
|
};
|
@@ -189,7 +189,9 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
189
189
|
toggledIcon: MenuDownIcon,
|
190
190
|
iconProps: {
|
191
191
|
size: 25,
|
192
|
-
title:
|
192
|
+
title: {
|
193
|
+
name: "".concat(title, " expand or collapse button")
|
194
|
+
}
|
193
195
|
},
|
194
196
|
buttonProps: _objectSpread({
|
195
197
|
'aria-label': "".concat(title, " expand or collapse button"),
|
@@ -211,7 +213,9 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
211
213
|
color: "focus",
|
212
214
|
icon: mainIcon,
|
213
215
|
size: 25,
|
214
|
-
title:
|
216
|
+
title: {
|
217
|
+
name: 'folder icon'
|
218
|
+
},
|
215
219
|
alt: "folder icon"
|
216
220
|
}), ___EmotionJSX(Text, {
|
217
221
|
className: classNames
|
@@ -219,7 +223,9 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
219
223
|
icon: lastIcon,
|
220
224
|
size: 15,
|
221
225
|
color: "accent.80",
|
222
|
-
title:
|
226
|
+
title: {
|
227
|
+
name: 'lock icon'
|
228
|
+
},
|
223
229
|
alt: "lock icon"
|
224
230
|
})));
|
225
231
|
});
|
package/lib/types/index.js
CHANGED
@@ -8,6 +8,7 @@ export * from './fieldHelperText';
|
|
8
8
|
export * from './icon';
|
9
9
|
export * from './iconBadge';
|
10
10
|
export * from './iconButton';
|
11
|
+
export * from './input';
|
11
12
|
export * from './item';
|
12
13
|
export * from './link';
|
13
14
|
export * from './listItem';
|
@@ -15,6 +16,7 @@ export * from './loader';
|
|
15
16
|
export * from './overlayPanel';
|
16
17
|
export * from './popoverContainer';
|
17
18
|
export * from './popoverMenu';
|
19
|
+
export * from './rockerButtonGroup';
|
18
20
|
export * from './separator';
|
19
21
|
export * from './shared';
|
20
22
|
export * from './table';
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@pingux/astro",
|
3
|
-
"version": "2.46.0-alpha.
|
3
|
+
"version": "2.46.0-alpha.4",
|
4
4
|
"description": "React component library for Ping Identity's design system",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -66,6 +66,7 @@
|
|
66
66
|
"@react-aria/overlays": "^3.7.0",
|
67
67
|
"@react-aria/selection": "~3.10.1",
|
68
68
|
"@react-aria/table": "^3.9.0",
|
69
|
+
"@react-aria/tabs": "^3.8.3",
|
69
70
|
"@react-aria/utils": "^3.16.0",
|
70
71
|
"@react-aria/virtualizer": "~3.8.0",
|
71
72
|
"@react-aria/visually-hidden": "~3.6.0",
|
@@ -78,6 +79,7 @@
|
|
78
79
|
"@react-stately/layout": "^3.13.4",
|
79
80
|
"@react-stately/list": "~3.4.1",
|
80
81
|
"@react-stately/table": "^3.9.0",
|
82
|
+
"@react-stately/tabs": "^3.6.3",
|
81
83
|
"@react-stately/tree": "^3.7.4",
|
82
84
|
"@react-stately/virtualizer": "~3.6.5",
|
83
85
|
"@react-types/accordion": "^3.0.0-alpha.18",
|