@enact/limestone 1.3.0 → 1.10.0
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/.github/workflows/ci-branch.yml +21 -0
- package/.github/workflows/ci-pull-request.yml +16 -0
- package/.github/workflows/ci-reusable.yml +73 -0
- package/ActionGuide/ActionGuide.d.ts +5 -4
- package/ActionGuide/ActionGuide.module.css +1 -1
- package/Alert/Alert.d.ts +13 -2
- package/Alert/Alert.js +39 -5
- package/Alert/Alert.module.css +48 -1
- package/Alert/tests/Alert-specs.js +91 -0
- package/BodyText/BodyText.d.ts +5 -4
- package/BodyText/BodyText.module.css +7 -7
- package/Button/Button.d.ts +17 -12
- package/Button/Button.js +1 -1
- package/Button/Button.module.css +195 -268
- package/Button/tests/Button-specs.js +26 -0
- package/CHANGELOG.md +254 -0
- package/Card/Card.d.ts +40 -12
- package/Card/Card.js +164 -28
- package/Card/Card.module.css +277 -58
- package/Card/tests/Card-specs.js +67 -3
- package/Checkbox/Checkbox.d.ts +8 -7
- package/Checkbox/Checkbox.js +3 -1
- package/Checkbox/Checkbox.module.css +213 -120
- package/Checkbox/tests/Checkbox-specs.js +1 -1
- package/CheckboxItem/CheckboxItem.d.ts +22 -7
- package/CheckboxItem/CheckboxItem.js +71 -4
- package/Chips/Chip.js +72 -13
- package/Chips/Chip.module.css +3 -3
- package/Chips/Chips.js +37 -17
- package/Chips/Chips.module.css +1 -1
- package/Chips/tests/Chip-specs.js +43 -13
- package/Chips/tests/Chips-specs.js +31 -21
- package/ColorPicker/ColorPicker.js +27 -25
- package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
- package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
- package/ContextualPopupDecorator/ContextualPopupDecorator.js +567 -549
- package/DatePicker/DatePicker.d.ts +4 -5
- package/DayPicker/DayPicker.d.ts +8 -7
- package/DayPicker/DaySelectorDecorator.js +12 -7
- package/Dropdown/Dropdown.d.ts +11 -13
- package/Dropdown/Dropdown.module.css +13 -9
- package/Dropdown/DropdownList.js +80 -54
- package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
- package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
- package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
- package/FlexiblePopupPanels/useNavButtonFocus.js +7 -10
- package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
- package/Heading/Heading.d.ts +9 -8
- package/Heading/Heading.js +2 -2
- package/Heading/Heading.module.css +5 -5
- package/Icon/Icon.d.ts +15 -4
- package/Icon/Icon.js +49 -2
- package/Icon/Icon.module.css +1 -1
- package/Icon/IconList.js +27 -1
- package/IconItem/IconItem.d.ts +13 -12
- package/IconItem/IconItem.js +15 -0
- package/IconItem/IconItem.module.css +107 -1
- package/IconItem/tests/IconItem-specs.js +30 -1
- package/Image/Image.d.ts +5 -4
- package/Image/Image.js +6 -4
- package/ImageItem/ImageItem.d.ts +11 -10
- package/ImageItem/ImageItem.js +37 -31
- package/ImageItem/ImageItem.module.css +30 -30
- package/ImageItem/tests/ImageItem-specs.js +3 -10
- package/Input/Input.js +21 -3
- package/Input/Input.module.css +37 -8
- package/Input/InputField.js +79 -24
- package/Input/InputField.module.css +273 -41
- package/Input/InputFieldDecoratorIcon.js +1 -0
- package/Input/InputFieldSpotlightDecorator.js +257 -228
- package/Input/index.d.ts +120 -111
- package/Input/tests/Input-specs.js +26 -0
- package/Input/tests/InputField-specs.js +170 -3
- package/Input/tests/InputPopup-specs.js +1 -1
- package/Item/Item.d.ts +16 -9
- package/Item/Item.js +20 -2
- package/Item/Item.module.css +1 -1
- package/KeyGuide/KeyGuide.d.ts +8 -7
- package/KeyGuide/KeyGuide.js +29 -27
- package/KeyGuide/KeyGuide.module.css +25 -1
- package/Marquee/Marquee.d.ts +2 -4
- package/MediaOverlay/MediaOverlay.d.ts +12 -11
- package/MediaOverlay/MediaOverlay.js +43 -21
- package/MediaOverlay/MediaOverlay.module.css +114 -15
- package/MediaOverlay/tests/MediaOverlay-specs.js +29 -0
- package/MediaPlayer/MediaControls.js +195 -13
- package/MediaPlayer/MediaControls.module.css +3 -2
- package/MediaPlayer/MediaSlider.module.css +7 -20
- package/MediaPlayer/index.d.ts +59 -7
- package/MediaPlayer/tests/util-specs.js +4 -1
- package/PageViews/PageViews.js +232 -82
- package/PageViews/PageViews.module.css +3 -0
- package/PageViews/PageViewsRouter.js +100 -42
- package/PageViews/tests/PageViews-specs.js +171 -0
- package/Panels/Header.js +54 -34
- package/Panels/Header.module.css +83 -31
- package/Panels/Panel.module.css +1 -1
- package/Panels/index.d.ts +7 -8
- package/Picker/Picker.d.ts +4 -5
- package/Picker/Picker.module.css +2 -2
- package/Popup/Popup.js +245 -242
- package/Popup/Popup.module.css +24 -24
- package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
- package/PopupTabLayout/PopupTabLayout.js +26 -18
- package/PopupTabLayout/PopupTabLayout.module.css +53 -16
- package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
- package/ProgressBar/ProgressBar.d.ts +5 -4
- package/ProgressBar/ProgressBarTooltip.module.css +12 -12
- package/ProgressButton/ProgressButton.d.ts +4 -5
- package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
- package/RadioItem/RadioItem.d.ts +18 -5
- package/RadioItem/RadioItem.js +69 -2
- package/RadioItem/RadioItem.module.css +36 -36
- package/RangePicker/RangePicker.module.css +2 -2
- package/Scroller/EditableWrapper.js +28 -18
- package/Scroller/Scroller.d.ts +20 -16
- package/Scroller/Scroller.js +20 -13
- package/Scroller/Scroller.module.css +4 -4
- package/Scroller/useThemeScroller.js +3 -3
- package/Slider/Slider.d.ts +20 -14
- package/Slider/Slider.js +71 -14
- package/Slider/Slider.module.css +464 -91
- package/Slider/SliderBehaviorDecorator.js +16 -14
- package/Slider/tests/Slider-specs.js +53 -1
- package/Slider/utils.js +23 -7
- package/Spinner/Spinner.d.ts +5 -4
- package/Spinner/Spinner.js +10 -8
- package/Spinner/Spinner.module.css +9 -9
- package/Steps/Steps.d.ts +5 -4
- package/Steps/Steps.js +9 -5
- package/Switch/Switch.d.ts +8 -7
- package/Switch/Switch.module.css +100 -13
- package/SwitchItem/SwitchItem.d.ts +9 -6
- package/TabLayout/RefocusDecorator.js +26 -18
- package/TabLayout/TabGroup.js +3 -2
- package/TabLayout/TabGroup.module.css +2 -2
- package/TabLayout/TabLayout.d.ts +6 -0
- package/TabLayout/TabLayout.js +11 -1
- package/TabLayout/TabLayout.module.css +18 -0
- package/TabLayout/tests/TabGroup-specs.js +1 -1
- package/TabLayout/tests/TabLayout-specs.js +52 -0
- package/ThemeDecorator/AccessibilityDecorator.js +12 -11
- package/ThemeDecorator/I18nFontDecorator.js +6 -4
- package/ThemeDecorator/ThemeDecorator.d.ts +16 -10
- package/ThemeDecorator/ThemeDecorator.js +24 -9
- package/ThemeDecorator/fontGenerator.js +1 -1
- package/ThemeDecorator/screenTypes.json +1 -0
- package/TimePicker/TimePicker.module.css +1 -1
- package/TimePicker/TimePickerBase.js +5 -3
- package/TooltipDecorator/Tooltip.module.css +1 -2
- package/TooltipDecorator/TooltipDecorator.js +12 -7
- package/TooltipDecorator/tests/useTooltip-specs.js +5 -2
- package/TooltipDecorator/tests/util-specs.js +12 -0
- package/TooltipDecorator/useTooltip.js +1 -1
- package/TooltipDecorator/util.js +18 -11
- package/VideoPlayer/Feedback.js +3 -0
- package/VideoPlayer/Feedback.module.css +5 -9
- package/VideoPlayer/FeedbackIcons.js +1 -1
- package/VideoPlayer/FeedbackTooltip.module.css +55 -11
- package/VideoPlayer/VideoPlayer.d.ts +44 -18
- package/VideoPlayer/VideoPlayer.js +153 -47
- package/VideoPlayer/VideoPlayer.module.css +28 -11
- package/VirtualList/VirtualList.d.ts +9 -2
- package/VirtualList/VirtualList.js +51 -24
- package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
- package/VirtualList/tests/VirtualList-specs.js +28 -1
- package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
- package/VirtualList/useSpotlight.js +1 -1
- package/WizardPanels/WizardPanels.module.css +2 -2
- package/WizardPanels/index.d.ts +4 -2
- package/fonts/Limestone_Icons.ttf +0 -0
- package/internal/$L/$L.js +3 -3
- package/internal/AsyncRenderChildren/AsyncRenderChildren.js +9 -5
- package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +4 -1
- package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
- package/internal/DateTime/DateTime.module.css +1 -0
- package/internal/DateTime/DateTimeDecorator.js +5 -4
- package/internal/Panels/PanelsRouter.js +48 -31
- package/internal/Panels/useAutoFocus.js +10 -6
- package/internal/Panels/useFocusOnTransition.js +4 -3
- package/internal/Picker/Picker.js +7 -5
- package/internal/Picker/Picker.module.css +2 -2
- package/internal/Picker/SpottablePicker.js +15 -13
- package/internal/SharedStateDecorator/SharedStateDecorator.js +78 -99
- package/internal/validators/validators.js +21 -2
- package/package.json +18 -15
- package/styles/colors-highcontrast.less +9 -1
- package/styles/colors.less +12 -7
- package/styles/motion-mixins.less +66 -0
- package/styles/motions.less +78 -0
- package/styles/variables.less +176 -150
- package/useScroll/HoverToScroll.js +23 -17
- package/useScroll/Scrollbar.js +14 -10
- package/useScroll/ScrollbarPlaceholder.js +3 -5
- package/useScroll/ScrollbarTrack.js +7 -5
- package/useScroll/ScrollbarTrack.module.css +8 -8
- package/useScroll/useEvent.js +14 -3
- package/useScroll/useScroll.js +12 -2
- package/useScroll/useScroll.module.css +6 -6
- package/.travis.yml +0 -40
|
@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = exports.VirtualList = exports.VirtualGridList = void 0;
|
|
7
7
|
var _util = require("@enact/core/util");
|
|
8
8
|
var _I18nDecorator = require("@enact/i18n/I18nDecorator");
|
|
9
|
+
var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
|
|
9
10
|
var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
|
|
10
11
|
var _Resizable = require("@enact/ui/Resizable");
|
|
11
|
-
var
|
|
12
|
+
var _VirtualList2 = require("@enact/ui/VirtualList");
|
|
12
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
|
-
var
|
|
15
|
+
var _validators = require("../internal/validators");
|
|
15
16
|
var _useScroll3 = _interopRequireDefault(require("../useScroll"));
|
|
16
17
|
var _HoverToScroll = _interopRequireDefault(require("../useScroll/HoverToScroll"));
|
|
17
18
|
var _Scrollbar = _interopRequireDefault(require("../useScroll/Scrollbar"));
|
|
@@ -19,9 +20,9 @@ var _Skinnable = _interopRequireDefault(require("../Skinnable"));
|
|
|
19
20
|
var _useThemeVirtualList = require("./useThemeVirtualList");
|
|
20
21
|
var _VirtualListModule = _interopRequireDefault(require("./VirtualList.module.css"));
|
|
21
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
-
var _excluded = ["itemSize", "hoverToScroll"],
|
|
23
|
+
var _excluded = ["continue5WayHold", "itemSize", "hoverToScroll"],
|
|
23
24
|
_excluded2 = ["className"],
|
|
24
|
-
_excluded3 = ["hoverToScroll"],
|
|
25
|
+
_excluded3 = ["continue5WayHold", "hoverToScroll"],
|
|
25
26
|
_excluded4 = ["className"];
|
|
26
27
|
/**
|
|
27
28
|
* Provides Limestone-themed virtual list components and behaviors.
|
|
@@ -42,6 +43,7 @@ var nop = function nop() {};
|
|
|
42
43
|
var virtualListDefaultProps = {
|
|
43
44
|
'data-spotlight-container-disabled': false,
|
|
44
45
|
cbScrollTo: nop,
|
|
46
|
+
continue5WayHold: false,
|
|
45
47
|
direction: 'vertical',
|
|
46
48
|
horizontalScrollbar: 'auto',
|
|
47
49
|
noAffordance: false,
|
|
@@ -73,8 +75,9 @@ var virtualListDefaultProps = {
|
|
|
73
75
|
* @ui
|
|
74
76
|
* @public
|
|
75
77
|
*/
|
|
76
|
-
var
|
|
78
|
+
var _VirtualList = exports.VirtualList = function VirtualList(props) {
|
|
77
79
|
var virtualListProps = (0, _util.setDefaultProps)(props, virtualListDefaultProps);
|
|
80
|
+
(0, _util.checkPropTypes)(_VirtualList, virtualListProps);
|
|
78
81
|
if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
|
|
79
82
|
virtualListProps.overscrollEffectOn = {
|
|
80
83
|
arrowKey: false,
|
|
@@ -84,16 +87,20 @@ var VirtualList = exports.VirtualList = function VirtualList(props) {
|
|
|
84
87
|
wheel: false
|
|
85
88
|
};
|
|
86
89
|
}
|
|
87
|
-
var
|
|
90
|
+
var continue5WayHold = virtualListProps.continue5WayHold,
|
|
91
|
+
itemSize = virtualListProps.itemSize,
|
|
88
92
|
hoverToScroll = virtualListProps.hoverToScroll,
|
|
89
93
|
rest = _objectWithoutProperties(virtualListProps, _excluded);
|
|
94
|
+
_spotlight["default"].set(props.id, {
|
|
95
|
+
continue5WayHold: continue5WayHold
|
|
96
|
+
});
|
|
90
97
|
var itemSizeProps = itemSize && itemSize.minSize ? {
|
|
91
98
|
itemSize: itemSize.minSize,
|
|
92
99
|
itemSizes: itemSize.size
|
|
93
100
|
} : {
|
|
94
101
|
itemSize: itemSize
|
|
95
102
|
};
|
|
96
|
-
process.env.NODE_ENV !== "production" ? (0,
|
|
103
|
+
process.env.NODE_ENV !== "production" ? (0, _validators.warning)(itemSizeProps.itemSizes && rest.cbScrollTo !== nop, 'VirtualList with `minSize` in `itemSize` prop does not support `cbScrollTo` prop') : void 0;
|
|
97
104
|
|
|
98
105
|
// Hooks
|
|
99
106
|
|
|
@@ -119,14 +126,14 @@ var VirtualList = exports.VirtualList = function VirtualList(props) {
|
|
|
119
126
|
}));
|
|
120
127
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
|
|
121
128
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, themeScrollContainerProps), scrollContentWrapperRest), {}, {
|
|
122
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
129
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList2.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
|
|
123
130
|
ref: scrollContentHandle
|
|
124
131
|
})), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
|
|
125
132
|
}))
|
|
126
133
|
}));
|
|
127
134
|
};
|
|
128
|
-
|
|
129
|
-
|
|
135
|
+
_VirtualList.displayName = 'VirtualList';
|
|
136
|
+
_VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype */{
|
|
130
137
|
/**
|
|
131
138
|
* Size of an item for the VirtualList; valid value is a number generally.
|
|
132
139
|
* For different item size, value is an object that has `minSize`
|
|
@@ -143,7 +150,7 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
|
|
|
143
150
|
* @required
|
|
144
151
|
* @public
|
|
145
152
|
*/
|
|
146
|
-
itemSize: _propTypes["default"].oneOfType([_propTypes["default"].number,
|
|
153
|
+
itemSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _VirtualList2.itemSizesShape]).isRequired,
|
|
147
154
|
/**
|
|
148
155
|
* A callback function that receives a reference to the `scrollTo` feature.
|
|
149
156
|
*
|
|
@@ -175,6 +182,13 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
|
|
|
175
182
|
* @public
|
|
176
183
|
*/
|
|
177
184
|
cbScrollTo: _propTypes["default"].func,
|
|
185
|
+
/**
|
|
186
|
+
* When this value is `true`, scrolling in a VirtualList with holding a 5-way key continues to outer Scoller.
|
|
187
|
+
*
|
|
188
|
+
* @type {Boolean}
|
|
189
|
+
* @public
|
|
190
|
+
*/
|
|
191
|
+
continue5WayHold: _propTypes["default"].bool,
|
|
178
192
|
/**
|
|
179
193
|
* This is set to `true` by SpotlightContainerDecorator
|
|
180
194
|
*
|
|
@@ -480,17 +494,18 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
|
|
|
480
494
|
*/
|
|
481
495
|
wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
|
|
482
496
|
};
|
|
483
|
-
exports.VirtualList =
|
|
497
|
+
exports.VirtualList = _VirtualList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
|
|
484
498
|
overflow: true,
|
|
485
499
|
preserveId: true,
|
|
486
500
|
restrict: 'self-first'
|
|
487
501
|
}, (0, _I18nDecorator.I18nContextDecorator)({
|
|
488
502
|
rtlProp: 'rtl'
|
|
489
|
-
},
|
|
490
|
-
|
|
503
|
+
}, _VirtualList)));
|
|
504
|
+
_VirtualList.defaultPropValues = virtualListDefaultProps;
|
|
491
505
|
var virtualGridListDefaultProps = {
|
|
492
506
|
'data-spotlight-container-disabled': false,
|
|
493
507
|
cbScrollTo: nop,
|
|
508
|
+
continue5WayHold: false,
|
|
494
509
|
direction: 'vertical',
|
|
495
510
|
horizontalScrollbar: 'auto',
|
|
496
511
|
noAffordance: false,
|
|
@@ -522,8 +537,9 @@ var virtualGridListDefaultProps = {
|
|
|
522
537
|
* @ui
|
|
523
538
|
* @public
|
|
524
539
|
*/
|
|
525
|
-
var
|
|
540
|
+
var _VirtualGridList = exports.VirtualGridList = function VirtualGridList(props) {
|
|
526
541
|
var virtualGridListProps = (0, _util.setDefaultProps)(props, virtualGridListDefaultProps);
|
|
542
|
+
(0, _util.checkPropTypes)(_VirtualGridList, virtualGridListProps);
|
|
527
543
|
if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
|
|
528
544
|
virtualGridListProps.overscrollEffectOn = {
|
|
529
545
|
arrowKey: false,
|
|
@@ -533,8 +549,12 @@ var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props)
|
|
|
533
549
|
wheel: false
|
|
534
550
|
};
|
|
535
551
|
}
|
|
536
|
-
var
|
|
552
|
+
var continue5WayHold = virtualGridListProps.continue5WayHold,
|
|
553
|
+
hoverToScroll = virtualGridListProps.hoverToScroll,
|
|
537
554
|
rest = _objectWithoutProperties(virtualGridListProps, _excluded3);
|
|
555
|
+
_spotlight["default"].set(props.id, {
|
|
556
|
+
continue5WayHold: continue5WayHold
|
|
557
|
+
});
|
|
538
558
|
var _useScroll2 = (0, _useScroll3["default"])(rest),
|
|
539
559
|
ScrollContentWrapper = _useScroll2.scrollContentWrapper,
|
|
540
560
|
scrollContentHandle = _useScroll2.scrollContentHandle,
|
|
@@ -554,14 +574,14 @@ var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props)
|
|
|
554
574
|
}));
|
|
555
575
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
|
|
556
576
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, scrollContainerProps), scrollContentWrapperRest), {}, {
|
|
557
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
577
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList2.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
|
|
558
578
|
ref: scrollContentHandle
|
|
559
579
|
})), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
|
|
560
580
|
}))
|
|
561
581
|
}));
|
|
562
582
|
};
|
|
563
|
-
|
|
564
|
-
|
|
583
|
+
_VirtualGridList.displayName = 'VirtualGridList';
|
|
584
|
+
_VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.prototype */{
|
|
565
585
|
/**
|
|
566
586
|
* Size of an item for the VirtualGridList; valid value is an object that has `minWidth`
|
|
567
587
|
* and `minHeight` as properties.
|
|
@@ -580,7 +600,7 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
|
|
|
580
600
|
* @required
|
|
581
601
|
* @public
|
|
582
602
|
*/
|
|
583
|
-
itemSize:
|
|
603
|
+
itemSize: _VirtualList2.gridListItemSizeShape.isRequired,
|
|
584
604
|
/**
|
|
585
605
|
* A callback function that receives a reference to the `scrollTo` feature.
|
|
586
606
|
*
|
|
@@ -612,6 +632,13 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
|
|
|
612
632
|
* @public
|
|
613
633
|
*/
|
|
614
634
|
cbScrollTo: _propTypes["default"].func,
|
|
635
|
+
/**
|
|
636
|
+
* When this value is `true`, scrolling in a VirtualGridList with holding a 5-way key continues to outer Scroller.
|
|
637
|
+
*
|
|
638
|
+
* @type {Boolean}
|
|
639
|
+
* @public
|
|
640
|
+
*/
|
|
641
|
+
continue5WayHold: _propTypes["default"].bool,
|
|
615
642
|
/**
|
|
616
643
|
* This is set to `true` by SpotlightContainerDecorator
|
|
617
644
|
*
|
|
@@ -920,12 +947,12 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
|
|
|
920
947
|
*/
|
|
921
948
|
wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
|
|
922
949
|
};
|
|
923
|
-
exports.VirtualGridList =
|
|
950
|
+
exports.VirtualGridList = _VirtualGridList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
|
|
924
951
|
overflow: true,
|
|
925
952
|
preserveId: true,
|
|
926
953
|
restrict: 'self-first'
|
|
927
954
|
}, (0, _I18nDecorator.I18nContextDecorator)({
|
|
928
955
|
rtlProp: 'rtl'
|
|
929
|
-
},
|
|
930
|
-
|
|
931
|
-
var _default = exports["default"] =
|
|
956
|
+
}, _VirtualGridList)));
|
|
957
|
+
_VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
|
|
958
|
+
var _default = exports["default"] = _VirtualList;
|
|
@@ -530,6 +530,9 @@ describe('VirtualGridList with translate \'scrollMode\'', function () {
|
|
|
530
530
|
expect(startScrollTop).toBe(0);
|
|
531
531
|
expect(onScrollStartCount).toBe(1);
|
|
532
532
|
expect(resultScrollTop).toBe(0);
|
|
533
|
+
(0, _react.act)(function () {
|
|
534
|
+
return jest.advanceTimersByTime(200);
|
|
535
|
+
});
|
|
533
536
|
var listRoot = _react.screen.getByRole('list').parentElement;
|
|
534
537
|
expect(listRoot).toHaveStyle({
|
|
535
538
|
'--scroll-overscroll-translate-vertical': 'translateY(0px)'
|
|
@@ -162,7 +162,7 @@ describe('VirtualList', function () {
|
|
|
162
162
|
});
|
|
163
163
|
describe('ScrollTo', function () {
|
|
164
164
|
test('should warn if both \'minSize\' in \'itemSize\' prop and \'cbScrollTo\' prop are given', function () {
|
|
165
|
-
var consoleSpy = jest.spyOn(console, '
|
|
165
|
+
var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
|
|
166
166
|
var variableItemSize = {
|
|
167
167
|
minSize: itemSize,
|
|
168
168
|
size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
|
|
@@ -179,6 +179,33 @@ describe('VirtualList', function () {
|
|
|
179
179
|
expect(consoleSpy).toHaveBeenCalled();
|
|
180
180
|
expect(consoleSpy.mock.calls[0][0]).toBe(expectedErrorMsg);
|
|
181
181
|
});
|
|
182
|
+
test('should not warn if \'minSize\' in \'itemSize\' prop is given without \'cbScrollTo\' prop', function () {
|
|
183
|
+
var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
|
|
184
|
+
var variableItemSize = {
|
|
185
|
+
minSize: itemSize,
|
|
186
|
+
size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
|
|
187
|
+
};
|
|
188
|
+
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
|
|
189
|
+
clientSize: clientSize,
|
|
190
|
+
dataSize: 10,
|
|
191
|
+
itemRenderer: renderItem,
|
|
192
|
+
itemSize: variableItemSize,
|
|
193
|
+
scrollMode: "translate"
|
|
194
|
+
}));
|
|
195
|
+
expect(consoleSpy).not.toHaveBeenCalled();
|
|
196
|
+
});
|
|
197
|
+
test('should not warn if \'cbScrollTo\' prop is given without \'minSize\' in \'itemSize\' prop', function () {
|
|
198
|
+
var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
|
|
199
|
+
(0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
|
|
200
|
+
cbScrollTo: function cbScrollTo() {},
|
|
201
|
+
clientSize: clientSize,
|
|
202
|
+
dataSize: 10,
|
|
203
|
+
itemRenderer: renderItem,
|
|
204
|
+
itemSize: itemSize,
|
|
205
|
+
scrollMode: "translate"
|
|
206
|
+
}));
|
|
207
|
+
expect(consoleSpy).not.toHaveBeenCalled();
|
|
208
|
+
});
|
|
182
209
|
});
|
|
183
210
|
describe('Adding an item', function () {
|
|
184
211
|
test('should render an added item named \'Password 0\' as the first item', function (done) {
|
|
@@ -397,7 +397,7 @@ describe('VirtualList with translate \'scrollMode\'', function () {
|
|
|
397
397
|
});
|
|
398
398
|
});
|
|
399
399
|
test('should warn if both \'minSize\' in \'itemSize\' prop and \'cbScrollTo\' prop are given', function () {
|
|
400
|
-
var consoleSpy = jest.spyOn(console, '
|
|
400
|
+
var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
|
|
401
401
|
var variableItemSize = {
|
|
402
402
|
minSize: itemSize,
|
|
403
403
|
size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
|
|
@@ -523,6 +523,9 @@ describe('VirtualList with translate \'scrollMode\'', function () {
|
|
|
523
523
|
expect(startScrollTop).toBe(0);
|
|
524
524
|
expect(onScrollStartCount).toBe(1);
|
|
525
525
|
expect(resultScrollTop).toBe(0);
|
|
526
|
+
(0, _react.act)(function () {
|
|
527
|
+
return jest.advanceTimersByTime(200);
|
|
528
|
+
});
|
|
526
529
|
var listRoot = _react.screen.getByRole('list').parentElement;
|
|
527
530
|
expect(listRoot).toHaveStyle({
|
|
528
531
|
'--scroll-overscroll-translate-vertical': 'translateY(0px)'
|
|
@@ -113,7 +113,7 @@ var useSpotlightRestore = exports.useSpotlightRestore = function useSpotlightRes
|
|
|
113
113
|
mutableRef.current.restoreLastFocused = false;
|
|
114
114
|
|
|
115
115
|
// try to focus the last focused item
|
|
116
|
-
spottable.current.isScrolledByJump = true;
|
|
116
|
+
spottable.current.isScrolledByJump = true; // eslint-disable-line react-hooks/immutability
|
|
117
117
|
var foundLastFocused = focusByIndex(mutableRef.current.preservedIndex, mutableRef.current.lastSpotlightDirection);
|
|
118
118
|
spottable.current.isScrolledByJump = false;
|
|
119
119
|
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
.wizardPanels .steps {
|
|
5
5
|
height: 1.25rem;
|
|
6
6
|
line-height: 1.25rem;
|
|
7
|
-
margin-top: calc(
|
|
7
|
+
margin-top: calc(var(--primitive-spacing-84) * -1);
|
|
8
8
|
}
|
|
9
9
|
.wizardPanels .content {
|
|
10
|
-
margin: var(--primitive-spacing-60)
|
|
10
|
+
margin: var(--primitive-spacing-60) NaNrem - NaNrem - var(--primitive-spacing-36)));
|
|
11
11
|
}
|
|
12
12
|
.wizardPanels .footer {
|
|
13
13
|
text-align: center;
|
package/WizardPanels/index.d.ts
CHANGED
|
@@ -6,8 +6,10 @@ import * as React from "react";
|
|
|
6
6
|
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
|
7
7
|
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
|
|
8
8
|
|
|
9
|
-
export interface WizardPanelsProps
|
|
10
|
-
|
|
9
|
+
export interface WizardPanelsProps extends Merge<
|
|
10
|
+
WizardPanelsBaseProps,
|
|
11
|
+
ui_Changeable_ChangeableProps
|
|
12
|
+
> {
|
|
11
13
|
/**
|
|
12
14
|
* Called when the back button is pressed.
|
|
13
15
|
*
|
|
Binary file
|
package/internal/$L/$L.js
CHANGED
|
@@ -15,7 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
15
15
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
16
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
17
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* global
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* global ILIB_LIMESTONE_PATH */
|
|
19
19
|
// The ilib.ResBundle for the active locale used by $L
|
|
20
20
|
var resBundle;
|
|
21
21
|
|
|
@@ -37,8 +37,8 @@ function getResBundle() {
|
|
|
37
37
|
*/
|
|
38
38
|
function createResBundle(options) {
|
|
39
39
|
var opts = options;
|
|
40
|
-
if (typeof
|
|
41
|
-
opts.basePath =
|
|
40
|
+
if (typeof ILIB_LIMESTONE_PATH !== 'undefined') {
|
|
41
|
+
opts.basePath = ILIB_LIMESTONE_PATH;
|
|
42
42
|
}
|
|
43
43
|
if (!opts.onLoad) return;
|
|
44
44
|
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.AsyncRenderChildren = AsyncRenderChildren;
|
|
7
7
|
exports["default"] = void 0;
|
|
8
|
+
var _util = require("@enact/core/util");
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _react = require("react");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -27,11 +28,14 @@ var delayToRenderChildren = 600;
|
|
|
27
28
|
* @ui
|
|
28
29
|
* @private
|
|
29
30
|
*/
|
|
30
|
-
function AsyncRenderChildren(
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
function AsyncRenderChildren(props) {
|
|
32
|
+
var asyncRenderChildrenProps = (0, _util.setDefaultProps)(props, {
|
|
33
|
+
fallback: ''
|
|
34
|
+
});
|
|
35
|
+
(0, _util.checkPropTypes)(AsyncRenderChildren, asyncRenderChildrenProps);
|
|
36
|
+
var children = asyncRenderChildrenProps.children,
|
|
37
|
+
fallback = asyncRenderChildrenProps.fallback,
|
|
38
|
+
index = asyncRenderChildrenProps.index;
|
|
35
39
|
var _useState = (0, _react.useState)(index),
|
|
36
40
|
_useState2 = _slicedToArray(_useState, 2),
|
|
37
41
|
prevIndex = _useState2[0],
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require("@testing-library/jest-dom");
|
|
4
4
|
var _react = require("@testing-library/react");
|
|
5
|
+
var _react2 = require("react");
|
|
5
6
|
var _AsyncRenderChildren = _interopRequireDefault(require("../AsyncRenderChildren"));
|
|
6
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -12,7 +13,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
12
13
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
14
|
var data = {};
|
|
14
15
|
var Component = function Component(props) {
|
|
15
|
-
|
|
16
|
+
(0, _react2.useEffect)(function () {
|
|
17
|
+
data = props;
|
|
18
|
+
}, [props]);
|
|
16
19
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], _objectSpread({}, props));
|
|
17
20
|
};
|
|
18
21
|
describe('AsyncRenderChildren', function () {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.dateComponentPicker {
|
|
2
2
|
display: inline-block;
|
|
3
3
|
text-align: center;
|
|
4
|
-
margin: 0
|
|
4
|
+
margin: 0 var(--primitive-spacing-24);
|
|
5
5
|
vertical-align: inherit;
|
|
6
6
|
}
|
|
7
7
|
.dateComponentPicker .label {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
:global(.enact-locale-non-latin) .dateComponentPicker .label {
|
|
21
21
|
font-family: "Limestone";
|
|
22
22
|
font-weight: var(--primitive-font-weight-light);
|
|
23
|
-
font-size:
|
|
23
|
+
font-size: var(--primitive-font-size-54);
|
|
24
24
|
font-style: normal;
|
|
25
25
|
}
|
|
26
26
|
:global(.enact-locale-km) .dateComponentPicker .label {
|
|
@@ -71,7 +71,8 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
|
|
|
71
71
|
});
|
|
72
72
|
|
|
73
73
|
// eslint-disable-next-line no-shadow
|
|
74
|
-
var
|
|
74
|
+
var _DateTimeDecorator = function DateTimeDecorator(props) {
|
|
75
|
+
(0, _util.checkPropTypes)(_DateTimeDecorator, props);
|
|
75
76
|
var newValue = toTime(props.value);
|
|
76
77
|
var _useState = (0, _react.useState)(null),
|
|
77
78
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -214,8 +215,8 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
|
|
|
214
215
|
value: finalValue
|
|
215
216
|
}));
|
|
216
217
|
};
|
|
217
|
-
|
|
218
|
-
|
|
218
|
+
_DateTimeDecorator.displayName = 'DateTimeDecorator';
|
|
219
|
+
_DateTimeDecorator.propTypes = /** @lends limestone/internal/DateTimeDecorator.DateTimeDecorator.prototype */{
|
|
219
220
|
/**
|
|
220
221
|
* The current locale as a
|
|
221
222
|
* {@link https://tools.ietf.org/html/rfc5646|BCP 47 language tag}.
|
|
@@ -263,6 +264,6 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
|
|
|
263
264
|
return (0, _I18nDecorator.I18nContextDecorator)({
|
|
264
265
|
rtlProp: 'rtl',
|
|
265
266
|
localeProp: 'locale'
|
|
266
|
-
}, (0, _Changeable["default"])(
|
|
267
|
+
}, (0, _Changeable["default"])(_DateTimeDecorator));
|
|
267
268
|
});
|
|
268
269
|
var _default = exports["default"] = DateTimeDecorator;
|
|
@@ -4,16 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = exports.PanelsRouter = exports.PanelsContext = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
7
|
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
|
|
9
8
|
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
|
|
10
9
|
var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
|
|
10
|
+
var _util = require("@enact/core/util");
|
|
11
11
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _react = require("react");
|
|
12
13
|
var _useAutoFocus = _interopRequireDefault(require("./useAutoFocus"));
|
|
13
14
|
var _useFocusOnTransition2 = _interopRequireDefault(require("./useFocusOnTransition"));
|
|
14
15
|
var _useToggleRole2 = _interopRequireDefault(require("./useToggleRole"));
|
|
15
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
var _excluded = ["children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl", "subtitle", "title"],
|
|
17
|
+
var _excluded = ["autoFocus", "children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl", "subtitle", "title"],
|
|
17
18
|
_excluded2 = ["onWillTransition"];
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
19
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -36,18 +37,20 @@ var PanelsContext = exports.PanelsContext = /*#__PURE__*/(0, _react.createContex
|
|
|
36
37
|
function useReverseTransition() {
|
|
37
38
|
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
|
|
38
39
|
var rtl = arguments.length > 1 ? arguments[1] : undefined;
|
|
39
|
-
var prevIndex = (0,
|
|
40
|
-
|
|
40
|
+
var prevIndex = (0, _util.usePrevious)(index);
|
|
41
|
+
|
|
41
42
|
// If the index was changed, the panel transition occurs on the next cycle by `Panel`
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
prevIndex.current = index;
|
|
43
|
+
if (prevIndex !== index) {
|
|
44
|
+
var reverse = rtl ? index > prevIndex : index < prevIndex;
|
|
45
|
+
return {
|
|
46
|
+
reverseTransition: reverse,
|
|
47
|
+
prevIndex: index
|
|
48
|
+
};
|
|
49
49
|
}
|
|
50
|
-
return
|
|
50
|
+
return {
|
|
51
|
+
reverseTransition: rtl,
|
|
52
|
+
prevIndex: index
|
|
53
|
+
};
|
|
51
54
|
}
|
|
52
55
|
var defaultConfig = {
|
|
53
56
|
type: 'wizard'
|
|
@@ -66,20 +69,25 @@ var defaultConfig = {
|
|
|
66
69
|
* @private
|
|
67
70
|
*/
|
|
68
71
|
var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
|
|
69
|
-
var
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
72
|
+
var _PanelsProvider = function PanelsProvider(props) {
|
|
73
|
+
var panelsProviderProps = (0, _util.setDefaultProps)(props, {
|
|
74
|
+
autoFocus: 'default-element',
|
|
75
|
+
index: 0,
|
|
76
|
+
subtitle: '',
|
|
77
|
+
title: ''
|
|
78
|
+
});
|
|
79
|
+
(0, _util.checkPropTypes)(_PanelsProvider, panelsProviderProps);
|
|
80
|
+
var autoFocus = panelsProviderProps.autoFocus,
|
|
81
|
+
children = panelsProviderProps.children,
|
|
82
|
+
componentRef = panelsProviderProps.componentRef,
|
|
83
|
+
spotlightId = panelsProviderProps['data-spotlight-id'],
|
|
84
|
+
index = panelsProviderProps.index,
|
|
85
|
+
onTransition = panelsProviderProps.onTransition,
|
|
86
|
+
onWillTransition = panelsProviderProps.onWillTransition,
|
|
87
|
+
rtl = panelsProviderProps.rtl,
|
|
88
|
+
subtitle = panelsProviderProps.subtitle,
|
|
89
|
+
title = panelsProviderProps.title,
|
|
90
|
+
rest = _objectWithoutProperties(panelsProviderProps, _excluded);
|
|
83
91
|
var _useState = (0, _react.useState)(null),
|
|
84
92
|
_useState2 = _slicedToArray(_useState, 2),
|
|
85
93
|
panel = _useState2[0],
|
|
@@ -87,11 +95,11 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
|
|
|
87
95
|
var _useToggleRole = (0, _useToggleRole2["default"])(),
|
|
88
96
|
a11yRef = _useToggleRole.ref,
|
|
89
97
|
a11yOnWillTransition = _useToggleRole.onWillTransition;
|
|
90
|
-
var
|
|
91
|
-
autoFocus:
|
|
98
|
+
var autoFocusRef = (0, _useAutoFocus["default"])({
|
|
99
|
+
autoFocus: autoFocus,
|
|
92
100
|
hideChildren: panel == null
|
|
93
101
|
});
|
|
94
|
-
var ref = (0, _useChainRefs["default"])(
|
|
102
|
+
var ref = (0, _useChainRefs["default"])(autoFocusRef, a11yRef, componentRef);
|
|
95
103
|
var _useReverseTransition = useReverseTransition(index, rtl),
|
|
96
104
|
reverseTransition = _useReverseTransition.reverseTransition,
|
|
97
105
|
prevIndex = _useReverseTransition.prevIndex;
|
|
@@ -138,7 +146,16 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
|
|
|
138
146
|
}))]
|
|
139
147
|
});
|
|
140
148
|
};
|
|
141
|
-
|
|
149
|
+
_PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
|
|
150
|
+
/**
|
|
151
|
+
* Sets the strategy used to automatically focus an element within the Panels upon render.
|
|
152
|
+
* When set to 'none', focus is not set only on the first render.
|
|
153
|
+
*
|
|
154
|
+
* @type {('default-element'|'last-focused'|'none'|String)}
|
|
155
|
+
* @default 'default-element'
|
|
156
|
+
* @private
|
|
157
|
+
*/
|
|
158
|
+
autoFocus: _propTypes2["default"].string,
|
|
142
159
|
/**
|
|
143
160
|
* Obtains a reference to the root node.
|
|
144
161
|
*
|
|
@@ -218,6 +235,6 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
|
|
|
218
235
|
*/
|
|
219
236
|
title: _propTypes2["default"].string
|
|
220
237
|
};
|
|
221
|
-
return
|
|
238
|
+
return _PanelsProvider;
|
|
222
239
|
});
|
|
223
240
|
var _default = exports["default"] = PanelsRouter;
|
|
@@ -8,6 +8,7 @@ exports.useAutoFocus = useAutoFocus;
|
|
|
8
8
|
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
|
|
10
10
|
var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
|
|
11
|
+
var _util = require("@enact/core/util");
|
|
11
12
|
var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
|
|
12
13
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
13
14
|
var _react = require("react");
|
|
@@ -69,12 +70,15 @@ function useAutoFocus(_ref) {
|
|
|
69
70
|
}
|
|
70
71
|
var AutoFocusDecorator = exports.AutoFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
|
|
71
72
|
// eslint-disable-next-line no-shadow
|
|
72
|
-
function AutoFocusDecorator(
|
|
73
|
-
var
|
|
74
|
-
autoFocus
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
function AutoFocusDecorator(props) {
|
|
74
|
+
var autoFocusDecoratorProps = (0, _util.setDefaultProps)(props, {
|
|
75
|
+
autoFocus: 'last-focused'
|
|
76
|
+
});
|
|
77
|
+
(0, _util.checkPropTypes)(AutoFocusDecorator, autoFocusDecoratorProps);
|
|
78
|
+
var autoFocus = autoFocusDecoratorProps.autoFocus,
|
|
79
|
+
componentRef = autoFocusDecoratorProps.componentRef,
|
|
80
|
+
hideChildren = autoFocusDecoratorProps.hideChildren,
|
|
81
|
+
rest = _objectWithoutProperties(autoFocusDecoratorProps, _excluded);
|
|
78
82
|
var hook = useAutoFocus({
|
|
79
83
|
autoFocus: autoFocus,
|
|
80
84
|
hideChildren: hideChildren
|
|
@@ -33,10 +33,11 @@ var transitionHandlers = {
|
|
|
33
33
|
})
|
|
34
34
|
};
|
|
35
35
|
function useFocusOnTransition(config) {
|
|
36
|
-
var
|
|
36
|
+
var current = (0, _react.useMemo)(function () {
|
|
37
|
+
return {
|
|
37
38
|
timerId: null
|
|
38
|
-
}
|
|
39
|
-
|
|
39
|
+
};
|
|
40
|
+
}, []);
|
|
40
41
|
var handlers = (0, _useHandlers["default"])(transitionHandlers, config, {
|
|
41
42
|
current: current
|
|
42
43
|
});
|