@ringcentral/juno 2.26.1 → 2.26.2

package/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -37,8 +37,8 @@ var DatePickerHeader = react_1.memo(function (props) {
                 monthLabel,
                 react_1.default.createElement(SelectArrowDownIcon_1.SelectArrowDownIcon, null)),
             react_1.default.createElement(styles_1.SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },
-                react_1.default.createElement(styles_1.SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disablePrevMonth, onClick: selectPreviousMonth, symbol: juno_icon_1.ArrowLeft2, "aria-label": previousMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-pre-month", className: classes.leftArrow }),
-                react_1.default.createElement(styles_1.SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disableNextMonth, onClick: selectNextMonth, symbol: juno_icon_1.ArrowRight, "aria-label": nextMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-next-month", className: classes.rightArrow })))));
+                react_1.default.createElement(styles_1.SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disablePrevMonth, onClick: selectPreviousMonth, symbol: juno_icon_1.ArrowLeft2, "aria-label": previousMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-pre-month", className: classes.leftArrow, focusVariant: "focusRing" }),
+                react_1.default.createElement(styles_1.SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disableNextMonth, onClick: selectNextMonth, symbol: juno_icon_1.ArrowRight, "aria-label": nextMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-next-month", className: classes.rightArrow, focusVariant: "focusRing" })))));
 });
 exports.DatePickerHeader = DatePickerHeader;
 DatePickerHeader.defaultProps = {

package/components/Forms/Picker/DatePicker/Year.js

@@ -16,7 +16,7 @@ var Year = react_1.memo(react_1.forwardRef(function (props, ref) {
     });
     var yearAriaLabel = getYearAriaLabel === null || getYearAriaLabel === void 0 ? void 0 : getYearAriaLabel("" + value, selected);
     var handleClick = !disabled ? _handleClick : undefined;
-    return (react_1.default.createElement(styles_1.StyledYear, tslib_1.__assign({ radius: "round", onClick: handleClick, onKeyPress: handleClick, ref: ref, selected: selected, "aria-pressed": focused, "aria-label": yearAriaLabel, className: className, "data-test-automation-class": "date-picker-year", "data-test-automation-value": children }, rest),
+    return (react_1.default.createElement(styles_1.StyledYear, tslib_1.__assign({ radius: "round", onClick: handleClick, onKeyPress: handleClick, ref: ref, selected: selected, "aria-pressed": focused, size: "medium", "aria-label": yearAriaLabel, className: className, "data-test-automation-class": "date-picker-year", "data-test-automation-value": children }, rest),
         react_1.default.createElement(react_1.default.Fragment, null, 
         // TODO: that <></> will fix when `RcIconButton` ready
         children)));

package/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.js

@@ -7,7 +7,7 @@ var utils_1 = require("../../../../Buttons/IconButton/utils");
 var Icon_1 = require("../../../../Icon");
 var utils_2 = require("../utils");
 var monthInactiveStyle = foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &,\n  ", " {\n    color: ", ";\n  }\n"], ["\n  &,\n  ", " {\n    color: ", ";\n  }\n"])), Icon_1.RcIcon, foundation_1.focusVisibleColor);
-var StyledCurrentMonth = foundation_1.styled.button(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), foundation_1.flexCenterStyle, foundation_1.spacing(5), utils_2.textColor, foundation_1.typography('body2'), foundation_1.radius('sm'), foundation_1.spacing(1, 0, 1, 1), foundation_1.focusVisibleShadowStyle('sm'), Icon_1.RcIcon, foundation_1.spacing(2), function (_a) {
+var StyledCurrentMonth = foundation_1.styled.button(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), foundation_1.flexCenterStyle, foundation_1.spacing(5), utils_2.textColor, foundation_1.typography('body2'), foundation_1.radius('sm'), foundation_1.spacing(1, 0, 1, 1), foundation_1.focusVisibleShadowStyle('lg', undefined, undefined, 2), Icon_1.RcIcon, foundation_1.spacing(2), function (_a) {
     var view = _a.view;
     return (view === 'day' ? '0' : '180');
 }, foundation_1.palette2('neutral', 'f04'), foundation_1.focusVisible, monthInactiveStyle, foundation_1.nonTouchHoverMedia, monthInactiveStyle);

package/components/Forms/Picker/DatePicker/styles/StyledDay.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
+var styles_1 = require("../../styles");
 var utils_2 = require("../utils");
 var CurrentDayStyle = foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), foundation_1.palette2('neutral', 'b04'));
 exports.DayStyle = function (_a) {
     var current = _a.current, size = _a.size, hidden = _a.hidden, selected = _a.selected;
-    return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n    }\n  "])), utils_1.RcIconButtonClasses.root, utils_2.RcDatePickerIconWidths[size], utils_2.RcDatePickerIconWidths[size], hidden && 'hidden', foundation_1.typography('caption1'), current && !selected && CurrentDayStyle);
+    var sizeValue = utils_2.RcDatePickerIconWidths[size];
+    return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "])), utils_1.RcIconButtonClasses.root, sizeValue, sizeValue, hidden && 'hidden', foundation_1.typography('caption1'), current && !selected && CurrentDayStyle, styles_1.datePickerCustomFocusRingStyle);
 };
 var templateObject_1, templateObject_2;

package/components/Forms/Picker/DatePicker/styles/StyledYear.js

@@ -4,5 +4,5 @@ var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
 var styles_1 = require("../../styles");
-exports.StyledYear = foundation_1.styled(styles_1.PickerBaseIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n  }\n"])), utils_1.RcIconButtonClasses.root, foundation_1.typography('body1'));
+exports.StyledYear = foundation_1.styled(styles_1.PickerBaseIconButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"])), utils_1.RcIconButtonClasses.root, foundation_1.typography('body1'), styles_1.datePickerCustomFocusRingStyle);
 var templateObject_1;

package/components/Forms/Picker/styles/PickerBaseIconButton.js

@@ -5,6 +5,6 @@ var react_1 = tslib_1.__importStar(require("react"));
 var IconButton_1 = require("../../../Buttons/IconButton");
 exports.PickerBaseIconButton = react_1.forwardRef(function (props, ref) {
     var children = props.children, selected = props.selected, hidden = props.hidden, rest = tslib_1.__rest(props, ["children", "selected", "hidden"]);
-    return (react_1.default.createElement(IconButton_1.RcIconButton, tslib_1.__assign({ elevation: 0, activeElevation: 0, ref: ref, variant: selected ? 'contained' : 'round', color: selected ? 'interactive.b02' : 'neutral.f06', "data-hidden": hidden, size: "xsmall" }, rest), children));
+    return (react_1.default.createElement(IconButton_1.RcIconButton, tslib_1.__assign({ elevation: 0, activeElevation: 0, ref: ref, variant: selected ? 'contained' : 'round', color: selected ? 'interactive.b02' : 'neutral.f06', "data-hidden": hidden, size: "xsmall", focusVariant: "focusRing" }, rest), children));
 });
 exports.PickerBaseIconButton.displayName = 'PickerBaseIconButton';

package/components/Forms/Picker/styles/datePickerCustomFocusRingStyle.d.ts

@@ -0,0 +1,5 @@
+import { RcThemedStyled, UnitMap } from '../../../../foundation';
+import { RcDatePickerSize } from '../DatePicker';
+import { PickerBaseIconButtonProps } from './PickerBaseIconButton';
+export declare const RcPickerFocusInsetBorderSizes: UnitMap<RcDatePickerSize, number>;
+export declare const datePickerCustomFocusRingStyle: RcThemedStyled<PickerBaseIconButtonProps, any>;

package/components/Forms/Picker/styles/datePickerCustomFocusRingStyle.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var foundation_1 = require("../../../../foundation");
+exports.RcPickerFocusInsetBorderSizes = {
+    small: 1,
+    medium: 2,
+};
+exports.datePickerCustomFocusRingStyle = function (_a) {
+    var size = _a.size, selected = _a.selected, _b = _a.radius, radius = _b === void 0 ? 'circle' : _b;
+    var focusInsetBorderSizes = exports.RcPickerFocusInsetBorderSizes[size];
+    return (selected && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      ", " {\n        ", "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "], ["\n      ", " {\n        ",
+        "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "])), foundation_1.focusVisible, foundation_1.shadowBorder(radius, foundation_1.palette2('neutral', 'b01'), true, focusInsetBorderSizes), focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes));
+};
+var templateObject_1;

package/components/Forms/Picker/styles/index.d.ts

@@ -1,3 +1,4 @@
 export * from './PickerBaseIconButton';
 export * from './StyledPickerTextField';
 export * from './StyledPopover';
+export * from './datePickerCustomFocusRingStyle';

package/components/Forms/Picker/styles/index.js

@@ -4,3 +4,4 @@ var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./PickerBaseIconButton"), exports);
 tslib_1.__exportStar(require("./StyledPickerTextField"), exports);
 tslib_1.__exportStar(require("./StyledPopover"), exports);
+tslib_1.__exportStar(require("./datePickerCustomFocusRingStyle"), exports);

package/es6/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -34,8 +34,8 @@ var DatePickerHeader = memo(function (props) {
                 monthLabel,
                 React.createElement(SelectArrowDownIcon, null)),
             React.createElement(SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },
-                React.createElement(SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disablePrevMonth, onClick: selectPreviousMonth, symbol: arrowLeftSvg, "aria-label": previousMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-pre-month", className: classes.leftArrow }),
-                React.createElement(SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disableNextMonth, onClick: selectNextMonth, symbol: arrowRightSvg, "aria-label": nextMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-next-month", className: classes.rightArrow })))));
+                React.createElement(SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disablePrevMonth, onClick: selectPreviousMonth, symbol: arrowLeftSvg, "aria-label": previousMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-pre-month", className: classes.leftArrow, focusVariant: "focusRing" }),
+                React.createElement(SwitchHeaderButton, { color: "neutral.f04", size: "small", disabled: disableNextMonth, onClick: selectNextMonth, symbol: arrowRightSvg, "aria-label": nextMonthAriaLabel, "data-picker-action": true, "data-test-automation-id": "date-picker-next-month", className: classes.rightArrow, focusVariant: "focusRing" })))));
 });
 DatePickerHeader.defaultProps = {
     disablePrevMonth: false,

package/es6/components/Forms/Picker/DatePicker/Year.js

@@ -14,7 +14,7 @@ var Year = memo(forwardRef(function (props, ref) {
     });
     var yearAriaLabel = getYearAriaLabel === null || getYearAriaLabel === void 0 ? void 0 : getYearAriaLabel("" + value, selected);
     var handleClick = !disabled ? _handleClick : undefined;
-    return (React.createElement(StyledYear, __assign({ radius: "round", onClick: handleClick, onKeyPress: handleClick, ref: ref, selected: selected, "aria-pressed": focused, "aria-label": yearAriaLabel, className: className, "data-test-automation-class": "date-picker-year", "data-test-automation-value": children }, rest),
+    return (React.createElement(StyledYear, __assign({ radius: "round", onClick: handleClick, onKeyPress: handleClick, ref: ref, selected: selected, "aria-pressed": focused, size: "medium", "aria-label": yearAriaLabel, className: className, "data-test-automation-class": "date-picker-year", "data-test-automation-value": children }, rest),
         React.createElement(React.Fragment, null, 
         // TODO: that <></> will fix when `RcIconButton` ready
         children)));

package/es6/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.js

@@ -5,7 +5,7 @@ import { RcIconButtonClasses } from '../../../../Buttons/IconButton/utils';
 import { RcIcon } from '../../../../Icon';
 import { textColor } from '../utils';
 var monthInactiveStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &,\n  ", " {\n    color: ", ";\n  }\n"], ["\n  &,\n  ", " {\n    color: ", ";\n  }\n"])), RcIcon, focusVisibleColor);
-var StyledCurrentMonth = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), flexCenterStyle, spacing(5), textColor, typography('body2'), radius('sm'), spacing(1, 0, 1, 1), focusVisibleShadowStyle('sm'), RcIcon, spacing(2), function (_a) {
+var StyledCurrentMonth = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), flexCenterStyle, spacing(5), textColor, typography('body2'), radius('sm'), spacing(1, 0, 1, 1), focusVisibleShadowStyle('lg', undefined, undefined, 2), RcIcon, spacing(2), function (_a) {
     var view = _a.view;
     return (view === 'day' ? '0' : '180');
 }, palette2('neutral', 'f04'), focusVisible, monthInactiveStyle, nonTouchHoverMedia, monthInactiveStyle);

package/es6/components/Forms/Picker/DatePicker/styles/StyledDay.js

@@ -1,10 +1,12 @@
 import { __makeTemplateObject } from "tslib";
 import { css, palette2, typography, } from '../../../../../foundation';
 import { RcIconButtonClasses } from '../../../../Buttons/IconButton/utils';
+import { datePickerCustomFocusRingStyle } from '../../styles';
 import { RcDatePickerIconWidths } from '../utils';
 var CurrentDayStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), palette2('neutral', 'b04'));
 export var DayStyle = function (_a) {
     var current = _a.current, size = _a.size, hidden = _a.hidden, selected = _a.selected;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n    }\n  "])), RcIconButtonClasses.root, RcDatePickerIconWidths[size], RcDatePickerIconWidths[size], hidden && 'hidden', typography('caption1'), current && !selected && CurrentDayStyle);
+    var sizeValue = RcDatePickerIconWidths[size];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "], ["\n    &.", " {\n      width: ", ";\n      height: ", ";\n      margin: 0 2px;\n      visibility: ", ";\n      ", ";\n      ", ";\n\n      ", "\n    }\n  "])), RcIconButtonClasses.root, sizeValue, sizeValue, hidden && 'hidden', typography('caption1'), current && !selected && CurrentDayStyle, datePickerCustomFocusRingStyle);
 };
 var templateObject_1, templateObject_2;

package/es6/components/Forms/Picker/DatePicker/styles/StyledYear.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from "tslib";
 import { styled, typography } from '../../../../../foundation';
 import { RcIconButtonClasses } from '../../../../Buttons/IconButton/utils';
-import { PickerBaseIconButton } from '../../styles';
-export var StyledYear = styled(PickerBaseIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n  }\n"])), RcIconButtonClasses.root, typography('body1'));
+import { datePickerCustomFocusRingStyle, PickerBaseIconButton, } from '../../styles';
+export var StyledYear = styled(PickerBaseIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"], ["\n  &.", " {\n    width: 56px;\n    min-width: 56px;\n    height: 28px;\n    margin: 4px 0;\n    ", ";\n    ", ";\n  }\n"])), RcIconButtonClasses.root, typography('body1'), datePickerCustomFocusRingStyle);
 var templateObject_1;

package/es6/components/Forms/Picker/styles/PickerBaseIconButton.js

@@ -3,6 +3,6 @@ import React, { forwardRef } from 'react';
 import { RcIconButton } from '../../../Buttons/IconButton';
 export var PickerBaseIconButton = forwardRef(function (props, ref) {
     var children = props.children, selected = props.selected, hidden = props.hidden, rest = __rest(props, ["children", "selected", "hidden"]);
-    return (React.createElement(RcIconButton, __assign({ elevation: 0, activeElevation: 0, ref: ref, variant: selected ? 'contained' : 'round', color: selected ? 'interactive.b02' : 'neutral.f06', "data-hidden": hidden, size: "xsmall" }, rest), children));
+    return (React.createElement(RcIconButton, __assign({ elevation: 0, activeElevation: 0, ref: ref, variant: selected ? 'contained' : 'round', color: selected ? 'interactive.b02' : 'neutral.f06', "data-hidden": hidden, size: "xsmall", focusVariant: "focusRing" }, rest), children));
 });
 PickerBaseIconButton.displayName = 'PickerBaseIconButton';

package/es6/components/Forms/Picker/styles/datePickerCustomFocusRingStyle.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from "tslib";
+import { css, focusVisible, palette2, shadowBorder, } from '../../../../foundation';
+export var RcPickerFocusInsetBorderSizes = {
+    small: 1,
+    medium: 2,
+};
+export var datePickerCustomFocusRingStyle = function (_a) {
+    var size = _a.size, selected = _a.selected, _b = _a.radius, radius = _b === void 0 ? 'circle' : _b;
+    var focusInsetBorderSizes = RcPickerFocusInsetBorderSizes[size];
+    return (selected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", " {\n        ", "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "], ["\n      ", " {\n        ",
+        "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "])), focusVisible, shadowBorder(radius, palette2('neutral', 'b01'), true, focusInsetBorderSizes), focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes));
+};
+var templateObject_1;

package/es6/components/Forms/Picker/styles/index.js

@@ -1,3 +1,4 @@
 export * from './PickerBaseIconButton';
 export * from './StyledPickerTextField';
 export * from './StyledPopover';
+export * from './datePickerCustomFocusRingStyle';

package/es6/foundation/styles/focusVisible.js

@@ -12,5 +12,9 @@ export var shadowBorder = function (r, color, inset, size) {
     if (size === void 0) { size = 1; }
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"])), inset ? 'inset' : '', size, color, radius(r));
 };
-export var focusVisibleShadowStyle = function (r, color) { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), focusVisible, shadowBorder(r, color)); };
+export var focusVisibleShadowStyle = function (r, color, inset, size) {
+    if (inset === void 0) { inset = true; }
+    if (size === void 0) { size = 1; }
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), focusVisible, shadowBorder(r, color, inset, size));
+};
 var templateObject_1, templateObject_2;

package/foundation/styles/focusVisible.d.ts

@@ -2,4 +2,4 @@ export declare const focusVisible = "&.focus-visible, &[data-focus-visible-added
 export declare const focusWithin = "&:hover, &:focus-within";
 export declare const focusVisibleColor: import("./newPalette").PaletteReturnType;
 export declare const shadowBorder: (r?: "round" | "circle" | "sm" | "md" | "lg" | "xl" | "xxl" | "zero", color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<any>[];
-export declare const focusVisibleShadowStyle: (r?: "round" | "circle" | "sm" | "md" | "lg" | "xl" | "xxl" | "zero" | undefined, color?: any) => import("styled-components").FlattenInterpolation<any>[];
+export declare const focusVisibleShadowStyle: (r?: "round" | "circle" | "sm" | "md" | "lg" | "xl" | "xxl" | "zero" | undefined, color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<any>[];

package/foundation/styles/focusVisible.js

@@ -14,5 +14,9 @@ exports.shadowBorder = function (r, color, inset, size) {
     if (size === void 0) { size = 1; }
     return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"])), inset ? 'inset' : '', size, color, radius_1.radius(r));
 };
-exports.focusVisibleShadowStyle = function (r, color) { return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), exports.focusVisible, exports.shadowBorder(r, color)); };
+exports.focusVisibleShadowStyle = function (r, color, inset, size) {
+    if (inset === void 0) { inset = true; }
+    if (size === void 0) { size = 1; }
+    return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), exports.focusVisible, exports.shadowBorder(r, color, inset, size));
+};
 var templateObject_1, templateObject_2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.26.1",
+  "version": "2.26.2",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",