@salutejs/plasma-new-hope 0.335.0-canary.2196.17375511532.0 → 0.335.0-canary.2196.17400757003.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/cjs/components/Autocomplete/Autocomplete.js +4 -1
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Autocomplete/FloatingPopover.js +5 -4
- package/cjs/components/Autocomplete/FloatingPopover.js.map +1 -1
- package/cjs/components/Calendar/Calendar.tokens.js +1 -0
- package/cjs/components/Calendar/Calendar.tokens.js.map +1 -1
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -3
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
- package/cjs/components/DatePicker/DatePicker.tokens.js.map +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/cjs/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/cjs/components/DatePicker/{DatePickerBase.styles_10sa0ht.css → DatePickerBase.styles_1fnt3hc.css} +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +1 -1
- package/{es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1n0dbxm.css → cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_160e4y4.css} +2 -2
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +2 -2
- package/cjs/components/Popup/Popup.js +8 -67
- package/cjs/components/Popup/Popup.js.map +1 -1
- package/cjs/components/Popup/ui/Draggable/Draggable.js +33 -0
- package/cjs/components/Popup/ui/Draggable/Draggable.js.map +1 -0
- package/cjs/components/Popup/ui/Resizable/Resizable.js +79 -0
- package/cjs/components/Popup/ui/Resizable/Resizable.js.map +1 -0
- package/cjs/components/Slider/ui/Handler/Handler.js +3 -3
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.js +22 -45
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/Tooltip/hooks/useDelayedTooltip.js +49 -0
- package/cjs/components/Tooltip/hooks/useDelayedTooltip.js.map +1 -0
- package/cjs/components/Tree/Tree.css +6 -6
- package/cjs/components/Tree/Tree.js +9 -2
- package/cjs/components/Tree/Tree.js.map +1 -1
- package/cjs/components/Tree/Tree.styles.js +1 -1
- package/cjs/components/Tree/Tree.styles.js.map +1 -1
- package/cjs/components/Tree/Tree.styles_6sla5y.css +7 -0
- package/cjs/components/Tree/Tree.tokens.js +2 -1
- package/cjs/components/Tree/Tree.tokens.js.map +1 -1
- package/cjs/index.css +10 -10
- package/emotion/cjs/components/Autocomplete/Autocomplete.js +3 -1
- package/emotion/cjs/components/Autocomplete/FloatingPopover.js +31 -4
- package/emotion/cjs/components/Calendar/Calendar.tokens.js +1 -0
- package/emotion/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -3
- package/emotion/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
- package/emotion/cjs/components/DatePicker/DatePickerBase.styles.js +5 -5
- package/emotion/cjs/components/Popup/Popup.js +7 -69
- package/emotion/cjs/components/Popup/ui/Draggable/Draggable.js +75 -0
- package/emotion/cjs/components/Popup/ui/Resizable/Resizable.js +114 -0
- package/emotion/cjs/components/Popup/ui/index.js +20 -0
- package/emotion/cjs/components/Tooltip/Tooltip.js +19 -41
- package/emotion/cjs/components/Tooltip/hooks/index.js +11 -0
- package/emotion/cjs/components/Tooltip/hooks/useDelayedTooltip.js +93 -0
- package/emotion/cjs/components/Tree/Tree.js +7 -2
- package/emotion/cjs/components/Tree/Tree.styles.js +13 -13
- package/emotion/cjs/components/Tree/Tree.tokens.js +2 -1
- package/emotion/cjs/examples/components/Calendar/CalendarBase.config.js +5 -5
- package/emotion/cjs/examples/components/Calendar/CalendarDouble.config.js +5 -5
- package/emotion/cjs/examples/components/Combobox/Combobox.js +15 -0
- package/emotion/cjs/examples/components/DatePicker/DatePicker.config.js +7 -7
- package/emotion/es/components/Autocomplete/Autocomplete.js +3 -1
- package/emotion/es/components/Autocomplete/FloatingPopover.js +31 -4
- package/emotion/es/components/Calendar/Calendar.tokens.js +1 -0
- package/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +4 -4
- package/emotion/es/components/DatePicker/DatePicker.tokens.js +1 -0
- package/emotion/es/components/DatePicker/DatePickerBase.styles.js +5 -5
- package/emotion/es/components/Popup/Popup.js +6 -63
- package/emotion/es/components/Popup/ui/Draggable/Draggable.js +19 -0
- package/emotion/es/components/Popup/ui/Resizable/Resizable.js +63 -0
- package/emotion/es/components/Popup/ui/index.js +2 -0
- package/emotion/es/components/Tooltip/Tooltip.js +20 -42
- package/emotion/es/components/Tooltip/hooks/index.js +1 -0
- package/emotion/es/components/Tooltip/hooks/useDelayedTooltip.js +83 -0
- package/emotion/es/components/Tree/Tree.js +7 -2
- package/emotion/es/components/Tree/Tree.styles.js +13 -13
- package/emotion/es/components/Tree/Tree.tokens.js +2 -1
- package/emotion/es/examples/components/Calendar/CalendarBase.config.js +5 -5
- package/emotion/es/examples/components/Calendar/CalendarDouble.config.js +5 -5
- package/emotion/es/examples/components/Combobox/Combobox.js +7 -0
- package/emotion/es/examples/components/DatePicker/DatePicker.config.js +7 -7
- package/es/components/Autocomplete/Autocomplete.js +4 -1
- package/es/components/Autocomplete/Autocomplete.js.map +1 -1
- package/es/components/Autocomplete/FloatingPopover.js +6 -5
- package/es/components/Autocomplete/FloatingPopover.js.map +1 -1
- package/es/components/Calendar/Calendar.tokens.js +1 -0
- package/es/components/Calendar/Calendar.tokens.js.map +1 -1
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +4 -4
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js.map +1 -1
- package/es/components/DatePicker/DatePicker.tokens.js +1 -0
- package/es/components/DatePicker/DatePicker.tokens.js.map +1 -1
- package/es/components/DatePicker/DatePickerBase.styles.js +1 -1
- package/es/components/DatePicker/DatePickerBase.styles.js.map +1 -1
- package/es/components/DatePicker/{DatePickerBase.styles_10sa0ht.css → DatePickerBase.styles_1fnt3hc.css} +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js +1 -1
- package/{cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_1n0dbxm.css → es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles_160e4y4.css} +2 -2
- package/es/components/DatePicker/SingleDate/SingleDate.css +2 -2
- package/es/components/Popup/Popup.js +7 -65
- package/es/components/Popup/Popup.js.map +1 -1
- package/es/components/Popup/ui/Draggable/Draggable.js +24 -0
- package/es/components/Popup/ui/Draggable/Draggable.js.map +1 -0
- package/es/components/Popup/ui/Resizable/Resizable.js +71 -0
- package/es/components/Popup/ui/Resizable/Resizable.js.map +1 -0
- package/es/components/Slider/ui/Handler/Handler.js +2 -2
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/es/components/Tooltip/Tooltip.js +23 -46
- package/es/components/Tooltip/Tooltip.js.map +1 -1
- package/es/components/Tooltip/hooks/useDelayedTooltip.js +45 -0
- package/es/components/Tooltip/hooks/useDelayedTooltip.js.map +1 -0
- package/es/components/Tree/Tree.css +6 -6
- package/es/components/Tree/Tree.js +9 -2
- package/es/components/Tree/Tree.js.map +1 -1
- package/es/components/Tree/Tree.styles.js +1 -1
- package/es/components/Tree/Tree.styles.js.map +1 -1
- package/es/components/Tree/Tree.styles_6sla5y.css +7 -0
- package/es/components/Tree/Tree.tokens.js +2 -1
- package/es/components/Tree/Tree.tokens.js.map +1 -1
- package/es/index.css +10 -10
- package/package.json +4 -4
- package/styled-components/cjs/components/Autocomplete/Autocomplete.js +3 -1
- package/styled-components/cjs/components/Autocomplete/FloatingPopover.js +31 -4
- package/styled-components/cjs/components/Calendar/Calendar.tokens.js +1 -0
- package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js +3 -3
- package/styled-components/cjs/components/DatePicker/DatePicker.tokens.js +1 -0
- package/styled-components/cjs/components/DatePicker/DatePickerBase.styles.js +3 -3
- package/styled-components/cjs/components/Popup/Popup.js +7 -69
- package/styled-components/cjs/components/Popup/ui/Draggable/Draggable.js +75 -0
- package/styled-components/cjs/components/Popup/ui/Resizable/Resizable.js +114 -0
- package/styled-components/cjs/components/Popup/ui/index.js +20 -0
- package/styled-components/cjs/components/Tooltip/Tooltip.js +18 -40
- package/styled-components/cjs/components/Tooltip/hooks/index.js +11 -0
- package/styled-components/cjs/components/Tooltip/hooks/useDelayedTooltip.js +93 -0
- package/styled-components/cjs/components/Tree/Tree.js +7 -2
- package/styled-components/cjs/components/Tree/Tree.styles.js +13 -10
- package/styled-components/cjs/components/Tree/Tree.tokens.js +2 -1
- package/styled-components/cjs/examples/components/Calendar/CalendarBase.config.js +8 -4
- package/styled-components/cjs/examples/components/Calendar/CalendarDouble.config.js +8 -4
- package/styled-components/cjs/examples/components/Combobox/Combobox.js +15 -0
- package/styled-components/cjs/examples/components/DatePicker/DatePicker.config.js +8 -4
- package/styled-components/es/components/Autocomplete/Autocomplete.js +3 -1
- package/styled-components/es/components/Autocomplete/FloatingPopover.js +31 -4
- package/styled-components/es/components/Calendar/Calendar.tokens.js +1 -0
- package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js +4 -4
- package/styled-components/es/components/DatePicker/DatePicker.tokens.js +1 -0
- package/styled-components/es/components/DatePicker/DatePickerBase.styles.js +3 -3
- package/styled-components/es/components/Popup/Popup.js +6 -63
- package/styled-components/es/components/Popup/ui/Draggable/Draggable.js +19 -0
- package/styled-components/es/components/Popup/ui/Resizable/Resizable.js +63 -0
- package/styled-components/es/components/Popup/ui/index.js +2 -0
- package/styled-components/es/components/Tooltip/Tooltip.js +19 -41
- package/styled-components/es/components/Tooltip/hooks/index.js +1 -0
- package/styled-components/es/components/Tooltip/hooks/useDelayedTooltip.js +83 -0
- package/styled-components/es/components/Tree/Tree.js +7 -2
- package/styled-components/es/components/Tree/Tree.styles.js +13 -10
- package/styled-components/es/components/Tree/Tree.tokens.js +2 -1
- package/styled-components/es/examples/components/Calendar/CalendarBase.config.js +8 -4
- package/styled-components/es/examples/components/Calendar/CalendarDouble.config.js +8 -4
- package/styled-components/es/examples/components/Combobox/Combobox.js +0 -7
- package/styled-components/es/examples/components/DatePicker/DatePicker.config.js +8 -4
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts +6 -0
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
- package/types/components/Calendar/Calendar.tokens.d.ts +1 -0
- package/types/components/Calendar/Calendar.tokens.d.ts.map +1 -1
- package/types/components/DatePicker/DatePicker.tokens.d.ts +1 -0
- package/types/components/DatePicker/DatePicker.tokens.d.ts.map +1 -1
- package/types/components/DatePicker/DatePickerBase.styles.d.ts.map +1 -1
- package/types/components/Popup/Popup.d.ts.map +1 -1
- package/types/components/Popup/ui/Draggable/Draggable.d.ts +6 -0
- package/types/components/Popup/ui/Draggable/Draggable.d.ts.map +1 -0
- package/types/components/Popup/ui/Resizable/Resizable.d.ts +7 -0
- package/types/components/Popup/ui/Resizable/Resizable.d.ts.map +1 -0
- package/types/components/Popup/ui/index.d.ts +3 -0
- package/types/components/Popup/ui/index.d.ts.map +1 -0
- package/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/types/components/Tooltip/Tooltip.types.d.ts +31 -20
- package/types/components/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/types/components/Tooltip/hooks/index.d.ts +2 -0
- package/types/components/Tooltip/hooks/index.d.ts.map +1 -0
- package/types/components/Tooltip/hooks/useDelayedTooltip.d.ts +7 -0
- package/types/components/Tooltip/hooks/useDelayedTooltip.d.ts.map +1 -0
- package/types/components/Tree/Tree.d.ts.map +1 -1
- package/types/components/Tree/Tree.styles.d.ts.map +1 -1
- package/types/components/Tree/Tree.tokens.d.ts +1 -0
- package/types/components/Tree/Tree.tokens.d.ts.map +1 -1
- package/types/components/Tree/Tree.types.d.ts +11 -4
- package/types/components/Tree/Tree.types.d.ts.map +1 -1
- package/types/examples/components/Autocomplete/Autocomplete.d.ts +8 -0
- package/types/examples/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/components/Calendar/CalendarBase.config.d.ts.map +1 -1
- package/types/examples/components/Calendar/CalendarDouble.config.d.ts.map +1 -1
- package/types/examples/components/DatePicker/DatePicker.config.d.ts.map +1 -1
- package/cjs/components/Tree/Tree.styles_1w91oy6.css +0 -7
- package/es/components/Tree/Tree.styles_1w91oy6.css +0 -7
@@ -2,7 +2,7 @@ import React from "react";
|
|
2
2
|
import { IconDisclosureLeft, IconDisclosureRight } from "../../../_Icon";
|
3
3
|
import { CalendarState } from "../../store/types";
|
4
4
|
import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT, I18N } from "../../utils";
|
5
|
-
import { classes } from "../../Calendar.tokens";
|
5
|
+
import { classes, tokens } from "../../Calendar.tokens";
|
6
6
|
import { sizeMap } from "../../store/reducer";
|
7
7
|
import { cx } from "../../../../utils";
|
8
8
|
import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation, StyledHeaderArrow } from "./CalendarHeader.styles";
|
@@ -37,20 +37,20 @@ import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrap
|
|
37
37
|
if (type === CalendarState.Days) {
|
38
38
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledHeaderDate, null, MONTH_NAMES[locale][date.monthIndex]), /*#__PURE__*/ React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/ React.createElement(StyledHeaderArrow, {
|
39
39
|
color: "inherit",
|
40
|
-
|
40
|
+
sizeCustomProperty: tokens.calendarArrowHeaderCustomSize
|
41
41
|
})));
|
42
42
|
}
|
43
43
|
if (type === CalendarState.Months || type === CalendarState.Quarters) {
|
44
44
|
return /*#__PURE__*/ React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/ React.createElement(StyledHeaderArrow, {
|
45
45
|
color: "inherit",
|
46
|
-
|
46
|
+
sizeCustomProperty: tokens.calendarArrowHeaderCustomSize
|
47
47
|
}));
|
48
48
|
}
|
49
49
|
if (type === CalendarState.Years) {
|
50
50
|
var yearValue = secondPart ? startYear + 12 : startYear;
|
51
51
|
return /*#__PURE__*/ React.createElement(StyledHeaderDate, null, yearValue, "—", yearValue + YEAR_RENDER_COUNT - 1, /*#__PURE__*/ React.createElement(StyledHeaderArrow, {
|
52
52
|
color: "inherit",
|
53
|
-
|
53
|
+
sizeCustomProperty: tokens.calendarArrowHeaderCustomSize
|
54
54
|
}));
|
55
55
|
}
|
56
56
|
return '';
|
@@ -174,6 +174,7 @@ export var tokens = {
|
|
174
174
|
calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight',
|
175
175
|
calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold',
|
176
176
|
calendarHeaderArrowColor: '--plasma-date-picker-calendar__header-arrow-color',
|
177
|
+
calendarHeaderArrowCustomSize: '--plasma-date-picker-calendar__header-arrow-custom-size',
|
177
178
|
iconButtonColor: '--plasma-date-picker-icon-button__color',
|
178
179
|
iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color',
|
179
180
|
iconButtonColorHover: '--plasma-date-picker-icon-button__color-hover',
|
@@ -5,11 +5,11 @@ import { calendarBaseConfig, calendarBaseTokens } from "../Calendar";
|
|
5
5
|
import { tokens } from "./DatePicker.tokens";
|
6
6
|
var mergedCalendarConfig = mergeConfig(calendarBaseConfig);
|
7
7
|
var Calendar = component(mergedCalendarConfig);
|
8
|
-
export var baseCalendarTokens = "\n padding-top: var(".concat(tokens.calendarPaddingTop, ");\n box-shadow: var(").concat(tokens.calendarShadow, ");\n border-radius: var(").concat(tokens.calendarBorderRadius, ");\n margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n ").concat(calendarBaseTokens.calendarDisabledOpacity, ": var(").concat(tokens.calendarDisabledOpacity, ");\n\n ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n \n ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n \n ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n \n ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
|
8
|
+
export var baseCalendarTokens = "\n padding-top: var(".concat(tokens.calendarPaddingTop, ");\n box-shadow: var(").concat(tokens.calendarShadow, ");\n border-radius: var(").concat(tokens.calendarBorderRadius, ");\n margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n ").concat(calendarBaseTokens.calendarDisabledOpacity, ": var(").concat(tokens.calendarDisabledOpacity, ");\n\n ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n \n ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n \n ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n ").concat(calendarBaseTokens.calendarArrowHeaderCustomSize, ": var(").concat(tokens.calendarHeaderArrowCustomSize, ");\n \n ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
|
9
9
|
// NOTE: переопределение токенов Calendar
|
10
10
|
export var StyledCalendar = styled(Calendar).withConfig({
|
11
11
|
displayName: "DatePickerBase.styles__StyledCalendar",
|
12
|
-
componentId: "sc-
|
12
|
+
componentId: "sc-d2170f67-0"
|
13
13
|
})([
|
14
14
|
"",
|
15
15
|
" width:",
|
@@ -24,7 +24,7 @@ export var StyledCalendar = styled(Calendar).withConfig({
|
|
24
24
|
});
|
25
25
|
export var InputHidden = styled.input.withConfig({
|
26
26
|
displayName: "DatePickerBase.styles__InputHidden",
|
27
|
-
componentId: "sc-
|
27
|
+
componentId: "sc-d2170f67-1"
|
28
28
|
})([
|
29
29
|
"",
|
30
30
|
";"
|
@@ -101,15 +101,13 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
101
101
|
}
|
102
102
|
import React, { forwardRef, useRef } from "react";
|
103
103
|
import { useForkRef } from "@salutejs/plasma-core";
|
104
|
-
import Draggable from "react-draggable";
|
105
|
-
import { Resizable } from "re-resizable";
|
106
104
|
import { canUseDOM, cx, safeUseId } from "../../utils";
|
107
105
|
import { Portal } from "../Portal";
|
108
|
-
import {
|
106
|
+
import { Draggable, Resizable } from "./ui";
|
109
107
|
import { PopupRoot } from "./PopupRoot";
|
110
108
|
import { usePopup } from "./hooks";
|
111
109
|
import { classes } from "./Popup.tokens";
|
112
|
-
import { StyledPortalContainer, base
|
110
|
+
import { StyledPortalContainer, base } from "./Popup.styles";
|
113
111
|
export var handlePosition = function(placement, offset) {
|
114
112
|
var x = '0rem';
|
115
113
|
var y = '0rem';
|
@@ -190,12 +188,7 @@ export var handlePosition = function(placement, offset) {
|
|
190
188
|
"draggable",
|
191
189
|
"resizable"
|
192
190
|
]);
|
193
|
-
var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
|
194
|
-
var nodeRef = useRef(null);
|
195
191
|
var innerIsOpen = isOpen || opened;
|
196
|
-
var resizable = typeof outerResizable === 'boolean' ? {
|
197
|
-
disabled: !outerResizable
|
198
|
-
} : outerResizable;
|
199
192
|
var uniqId = safeUseId();
|
200
193
|
var innerId = id || uniqId;
|
201
194
|
var _usePopup = usePopup({
|
@@ -206,22 +199,11 @@ export var handlePosition = function(placement, offset) {
|
|
206
199
|
}), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
|
207
200
|
var portalRef = useRef(null);
|
208
201
|
var contentRef = useRef(null);
|
209
|
-
var resizableContainer = useRef(null);
|
210
202
|
var innerRef = useForkRef(contentRef, outerRootRef);
|
211
203
|
if (!isVisible && !innerIsOpen) {
|
212
204
|
return null;
|
213
205
|
}
|
214
206
|
var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
|
215
|
-
var handleResizeStart = function() {
|
216
|
-
if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
|
217
|
-
resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
|
218
|
-
}
|
219
|
-
};
|
220
|
-
var handleResizeStop = function() {
|
221
|
-
if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
|
222
|
-
resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
|
223
|
-
}
|
224
|
-
};
|
225
207
|
var rootNode = /*#__PURE__*/ React.createElement(Root, {
|
226
208
|
className: cls
|
227
209
|
}, overlay, /*#__PURE__*/ React.createElement(PopupRoot, _object_spread({
|
@@ -233,50 +215,11 @@ export var handlePosition = function(placement, offset) {
|
|
233
215
|
animationInfo: animationInfo,
|
234
216
|
setVisible: setVisible
|
235
217
|
}, rest), /*#__PURE__*/ React.createElement(Draggable, {
|
236
|
-
|
237
|
-
defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
|
238
|
-
defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
|
239
|
-
disabled: !draggable,
|
240
|
-
cancel: ".".concat(classes.resizableHandleWrapper)
|
241
|
-
}, /*#__PURE__*/ React.createElement("div", {
|
242
|
-
ref: nodeRef
|
218
|
+
draggable: draggable
|
243
219
|
}, /*#__PURE__*/ React.createElement(Resizable, {
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
|
248
|
-
minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
|
249
|
-
minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
|
250
|
-
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
251
|
-
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
|
252
|
-
onResizeStart: handleResizeStart,
|
253
|
-
onResizeStop: handleResizeStop,
|
254
|
-
handleComponent: {
|
255
|
-
topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
256
|
-
className: classes.resizableTopRightIcon,
|
257
|
-
color: "inherit",
|
258
|
-
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
259
|
-
})),
|
260
|
-
bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
261
|
-
className: classes.resizableBottomRightIcon,
|
262
|
-
color: "inherit",
|
263
|
-
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
264
|
-
})),
|
265
|
-
bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
266
|
-
className: classes.resizableBottomLeftIcon,
|
267
|
-
color: "inherit",
|
268
|
-
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
269
|
-
})),
|
270
|
-
topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
271
|
-
className: classes.resizableTopLeftIcon,
|
272
|
-
color: "inherit",
|
273
|
-
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
274
|
-
}))
|
275
|
-
},
|
276
|
-
className: classes.resizableContainer,
|
277
|
-
handleStyles: getHandleStyles(),
|
278
|
-
handleWrapperClass: classes.resizableHandleWrapper
|
279
|
-
}, children)))));
|
220
|
+
resizable: outerResizable,
|
221
|
+
placement: placement
|
222
|
+
}, children))));
|
280
223
|
if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
|
281
224
|
return /*#__PURE__*/ React.createElement(Portal, {
|
282
225
|
container: frame.current
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React, { useRef } from "react";
|
2
|
+
import ReactDraggable from "react-draggable";
|
3
|
+
import { classes } from "../../Popup.tokens";
|
4
|
+
export var Draggable = function(param) {
|
5
|
+
var children = param.children, draggable = param.draggable;
|
6
|
+
var nodeRef = useRef(null);
|
7
|
+
if (!draggable) {
|
8
|
+
return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
|
9
|
+
}
|
10
|
+
return /*#__PURE__*/ React.createElement(ReactDraggable, {
|
11
|
+
nodeRef: nodeRef,
|
12
|
+
defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
|
13
|
+
defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
|
14
|
+
disabled: !draggable,
|
15
|
+
cancel: ".".concat(classes.resizableHandleWrapper)
|
16
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
17
|
+
ref: nodeRef
|
18
|
+
}, children));
|
19
|
+
};
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import React, { useRef } from "react";
|
2
|
+
import { Resizable as ReResizable } from "re-resizable";
|
3
|
+
import { classes } from "../../Popup.tokens";
|
4
|
+
import { getHandleStyles, getRatioBasedOnPlacement, getResizeDirections } from "../../utils";
|
5
|
+
import { IconResizeDiagonalStyled } from "../../Popup.styles";
|
6
|
+
export var Resizable = function(param) {
|
7
|
+
var children = param.children, outerResizable = param.resizable, placement = param.placement;
|
8
|
+
var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
|
9
|
+
var resizableContainer = useRef(null);
|
10
|
+
var resizable = typeof outerResizable === 'boolean' ? {
|
11
|
+
disabled: !outerResizable
|
12
|
+
} : outerResizable;
|
13
|
+
var handleResizeStart = function() {
|
14
|
+
if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
|
15
|
+
resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
|
16
|
+
}
|
17
|
+
};
|
18
|
+
var handleResizeStop = function() {
|
19
|
+
if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
|
20
|
+
resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
|
21
|
+
}
|
22
|
+
};
|
23
|
+
if (!resizable || resizable.disabled) {
|
24
|
+
return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
|
25
|
+
}
|
26
|
+
return /*#__PURE__*/ React.createElement(ReResizable, {
|
27
|
+
ref: resizableContainer,
|
28
|
+
enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
|
29
|
+
resizeRatio: getRatioBasedOnPlacement(placement),
|
30
|
+
defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
|
31
|
+
minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
|
32
|
+
minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
|
33
|
+
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
34
|
+
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
|
35
|
+
onResizeStart: handleResizeStart,
|
36
|
+
onResizeStop: handleResizeStop,
|
37
|
+
handleComponent: {
|
38
|
+
topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
39
|
+
className: classes.resizableTopRightIcon,
|
40
|
+
color: "inherit",
|
41
|
+
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
42
|
+
})),
|
43
|
+
bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
44
|
+
className: classes.resizableBottomRightIcon,
|
45
|
+
color: "inherit",
|
46
|
+
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
47
|
+
})),
|
48
|
+
bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
49
|
+
className: classes.resizableBottomLeftIcon,
|
50
|
+
color: "inherit",
|
51
|
+
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
52
|
+
})),
|
53
|
+
topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
|
54
|
+
className: classes.resizableTopLeftIcon,
|
55
|
+
color: "inherit",
|
56
|
+
size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
|
57
|
+
}))
|
58
|
+
},
|
59
|
+
className: classes.resizableContainer,
|
60
|
+
handleStyles: getHandleStyles(),
|
61
|
+
handleWrapperClass: classes.resizableHandleWrapper
|
62
|
+
}, children);
|
63
|
+
};
|
@@ -99,11 +99,12 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
99
99
|
if (n === "Map" || n === "Set") return Array.from(n);
|
100
100
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
101
101
|
}
|
102
|
-
import React, { useEffect, forwardRef, useState
|
102
|
+
import React, { useEffect, forwardRef, useState } from "react";
|
103
103
|
import styled from "styled-components";
|
104
104
|
import { component } from "../../engines";
|
105
|
-
import { popoverConfig, popoverTokens } from "../Popover";
|
106
105
|
import { cx } from "../../utils";
|
106
|
+
import { popoverConfig, popoverTokens } from "../Popover";
|
107
|
+
import { useDelayedTooltip } from "./hooks";
|
107
108
|
import { StyledContentLeft, TooltipRoot } from "./Tooltip.styles";
|
108
109
|
import { base as viewCSS } from "./variations/_view/base";
|
109
110
|
import { base as sizeCSS } from "./variations/_size/base";
|
@@ -115,7 +116,7 @@ var getStringValue = function(value) {
|
|
115
116
|
var Popover = component(popoverConfig);
|
116
117
|
var StyledPopover = styled(Popover).withConfig({
|
117
118
|
displayName: "Tooltip__StyledPopover",
|
118
|
-
componentId: "sc-
|
119
|
+
componentId: "sc-1fef1a42-0"
|
119
120
|
})([
|
120
121
|
"",
|
121
122
|
":var(",
|
@@ -138,7 +139,7 @@ var StyledPopover = styled(Popover).withConfig({
|
|
138
139
|
var id = _param.id, text = _param.text, opened = _param.opened, isVisible = _param.isVisible, isOpen = _param.isOpen, _param_hasArrow = _param.hasArrow, hasArrow = _param_hasArrow === void 0 ? true : _param_hasArrow, arrow = _param.arrow, animated = _param.animated, _param_offset = _param.offset, offset = _param_offset === void 0 ? [
|
139
140
|
3,
|
140
141
|
8
|
141
|
-
] : _param_offset, minWidth = _param.minWidth, maxWidth = _param.maxWidth, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? true : _param_usePortal, target = _param.target, children = _param.children, onDismiss = _param.onDismiss, view = _param.view, size = _param.size, contentLeft = _param.contentLeft, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? '9200' : _param_zIndex, className = _param.className, style = _param.style,
|
142
|
+
] : _param_offset, minWidth = _param.minWidth, maxWidth = _param.maxWidth, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? true : _param_usePortal, target = _param.target, children = _param.children, onDismiss = _param.onDismiss, view = _param.view, size = _param.size, contentLeft = _param.contentLeft, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? '9200' : _param_zIndex, className = _param.className, style = _param.style, hoverTimeout = _param.hoverTimeout, _param_mouseEnterDelay = _param.mouseEnterDelay, mouseEnterDelay = _param_mouseEnterDelay === void 0 ? 0 : _param_mouseEnterDelay, mouseLeaveDelay = _param.mouseLeaveDelay, trigger = _param.trigger, rest = _object_without_properties(_param, [
|
142
143
|
"id",
|
143
144
|
"text",
|
144
145
|
"opened",
|
@@ -162,16 +163,15 @@ var StyledPopover = styled(Popover).withConfig({
|
|
162
163
|
"className",
|
163
164
|
"style",
|
164
165
|
"hoverTimeout",
|
166
|
+
"mouseEnterDelay",
|
167
|
+
"mouseLeaveDelay",
|
165
168
|
"trigger"
|
166
169
|
]);
|
167
170
|
var _useState = _sliced_to_array(useState(null), 2), ref = _useState[0], setRef = _useState[1];
|
168
|
-
var
|
169
|
-
|
170
|
-
var
|
171
|
-
|
172
|
-
var innerIsOpen = Boolean(isVisible || isOpen || opened);
|
173
|
-
var innerHasArrow = arrow || hasArrow;
|
174
|
-
var showTooltip = innerIsOpen && Boolean(text);
|
171
|
+
var _ref;
|
172
|
+
mouseLeaveDelay = (_ref = mouseLeaveDelay !== null && mouseLeaveDelay !== void 0 ? mouseLeaveDelay : hoverTimeout) !== null && _ref !== void 0 ? _ref : 300;
|
173
|
+
var _useDelayedTooltip = useDelayedTooltip(mouseEnterDelay, mouseLeaveDelay), openedState = _useDelayedTooltip.opened, showTooltip = _useDelayedTooltip.showTooltip, hideTooltip = _useDelayedTooltip.hideTooltip, setOpened = _useDelayedTooltip.setOpened;
|
174
|
+
var isTooltipOpened = Boolean(text) && (isVisible || isOpen || opened || openedState);
|
175
175
|
useEffect(function() {
|
176
176
|
var onKeyDown = function(event) {
|
177
177
|
if (event.keyCode === ESCAPE_KEYCODE) {
|
@@ -183,45 +183,26 @@ var StyledPopover = styled(Popover).withConfig({
|
|
183
183
|
window.removeEventListener('keydown', onKeyDown);
|
184
184
|
};
|
185
185
|
}, []);
|
186
|
-
var onMouseEnter = function() {
|
187
|
-
clearTimeout(timeoutRef.current);
|
188
|
-
setIsHovered(true);
|
189
|
-
};
|
190
|
-
var onMouseLeave = function() {
|
191
|
-
timeoutRef.current = setTimeout(function() {
|
192
|
-
setIsHovered(false);
|
193
|
-
}, hoverTimeout);
|
194
|
-
};
|
195
|
-
useEffect(function() {
|
196
|
-
return function() {
|
197
|
-
return clearTimeout(timeoutRef.current);
|
198
|
-
};
|
199
|
-
}, [
|
200
|
-
trigger
|
201
|
-
]);
|
202
186
|
var onToggle = function(isOpen) {
|
203
187
|
if (trigger === 'hover') {
|
204
188
|
if (isOpen) {
|
205
|
-
|
206
|
-
setIsOpened(true);
|
189
|
+
showTooltip();
|
207
190
|
} else {
|
208
|
-
|
209
|
-
setIsOpened(false);
|
210
|
-
}, hoverTimeout);
|
191
|
+
hideTooltip();
|
211
192
|
}
|
212
193
|
} else {
|
213
|
-
|
194
|
+
setOpened(isOpen);
|
214
195
|
}
|
215
196
|
};
|
216
197
|
return /*#__PURE__*/ React.createElement(StyledPopover, _object_spread({
|
217
|
-
opened:
|
198
|
+
opened: isTooltipOpened,
|
218
199
|
placement: placement,
|
219
200
|
offset: offset,
|
220
201
|
zIndex: zIndex,
|
221
202
|
target: target || children,
|
222
203
|
usePortal: usePortal,
|
223
|
-
hasArrow:
|
224
|
-
"aria-hidden": !
|
204
|
+
hasArrow: arrow || hasArrow,
|
205
|
+
"aria-hidden": !isTooltipOpened,
|
225
206
|
"aria-live": "polite",
|
226
207
|
role: "tooltip",
|
227
208
|
animated: animated,
|
@@ -229,16 +210,13 @@ var StyledPopover = styled(Popover).withConfig({
|
|
229
210
|
}, (trigger === 'hover' || trigger === 'click') && {
|
230
211
|
trigger: trigger,
|
231
212
|
onToggle: onToggle
|
232
|
-
}, rest), /*#__PURE__*/ React.createElement(Root,
|
213
|
+
}, rest), /*#__PURE__*/ React.createElement(Root, {
|
233
214
|
view: view,
|
234
215
|
size: size,
|
235
216
|
ref: setRef,
|
236
217
|
className: className,
|
237
218
|
style: style
|
238
|
-
},
|
239
|
-
onMouseEnter: onMouseEnter,
|
240
|
-
onMouseLeave: onMouseLeave
|
241
|
-
}), /*#__PURE__*/ React.createElement(TooltipRoot, {
|
219
|
+
}, /*#__PURE__*/ React.createElement(TooltipRoot, {
|
242
220
|
ref: outerRef,
|
243
221
|
id: id,
|
244
222
|
maxWidth: getStringValue(maxWidth),
|
@@ -0,0 +1 @@
|
|
1
|
+
export { useDelayedTooltip } from "./useDelayedTooltip";
|
@@ -0,0 +1,83 @@
|
|
1
|
+
function _array_like_to_array(arr, len) {
|
2
|
+
if (len == null || len > arr.length) len = arr.length;
|
3
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
4
|
+
return arr2;
|
5
|
+
}
|
6
|
+
function _array_with_holes(arr) {
|
7
|
+
if (Array.isArray(arr)) return arr;
|
8
|
+
}
|
9
|
+
function _iterable_to_array_limit(arr, i) {
|
10
|
+
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
11
|
+
if (_i == null) return;
|
12
|
+
var _arr = [];
|
13
|
+
var _n = true;
|
14
|
+
var _d = false;
|
15
|
+
var _s, _e;
|
16
|
+
try {
|
17
|
+
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
18
|
+
_arr.push(_s.value);
|
19
|
+
if (i && _arr.length === i) break;
|
20
|
+
}
|
21
|
+
} catch (err) {
|
22
|
+
_d = true;
|
23
|
+
_e = err;
|
24
|
+
} finally{
|
25
|
+
try {
|
26
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
27
|
+
} finally{
|
28
|
+
if (_d) throw _e;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
return _arr;
|
32
|
+
}
|
33
|
+
function _non_iterable_rest() {
|
34
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
35
|
+
}
|
36
|
+
function _sliced_to_array(arr, i) {
|
37
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
38
|
+
}
|
39
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
40
|
+
if (!o) return;
|
41
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
42
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
43
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
44
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
45
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
46
|
+
}
|
47
|
+
import { useState, useRef, useEffect } from "react";
|
48
|
+
export var useDelayedTooltip = function(openDelay, closeDelay) {
|
49
|
+
var _useState = _sliced_to_array(useState(false), 2), opened = _useState[0], setOpened = _useState[1];
|
50
|
+
var openTimeoutRef = useRef(null);
|
51
|
+
var closeTimeoutRef = useRef(null);
|
52
|
+
var clearTimeouts = function() {
|
53
|
+
if (openTimeoutRef.current) {
|
54
|
+
clearTimeout(openTimeoutRef.current);
|
55
|
+
openTimeoutRef.current = null;
|
56
|
+
}
|
57
|
+
if (closeTimeoutRef.current) {
|
58
|
+
clearTimeout(closeTimeoutRef.current);
|
59
|
+
closeTimeoutRef.current = null;
|
60
|
+
}
|
61
|
+
};
|
62
|
+
var showTooltip = function() {
|
63
|
+
clearTimeouts();
|
64
|
+
openTimeoutRef.current = setTimeout(function() {
|
65
|
+
setOpened(true);
|
66
|
+
}, openDelay);
|
67
|
+
};
|
68
|
+
var hideTooltip = function() {
|
69
|
+
clearTimeouts();
|
70
|
+
closeTimeoutRef.current = setTimeout(function() {
|
71
|
+
setOpened(false);
|
72
|
+
}, closeDelay);
|
73
|
+
};
|
74
|
+
useEffect(function() {
|
75
|
+
return clearTimeouts;
|
76
|
+
}, []);
|
77
|
+
return {
|
78
|
+
opened: opened,
|
79
|
+
setOpened: setOpened,
|
80
|
+
showTooltip: showTooltip,
|
81
|
+
hideTooltip: hideTooltip
|
82
|
+
};
|
83
|
+
};
|
@@ -106,10 +106,14 @@ import { classes } from "./Tree.tokens";
|
|
106
106
|
* Многоуровневый раскрывающийся список в виде дерева.
|
107
107
|
*/ export var treeRoot = function(Root) {
|
108
108
|
return /*#__PURE__*/ forwardRef(function(param, ref) {
|
109
|
-
var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle;
|
109
|
+
var items = param.items, _param_arrowPlacement = param.arrowPlacement, arrowPlacement = _param_arrowPlacement === void 0 ? 'left' : _param_arrowPlacement, _param_virtual = param.virtual, virtual = _param_virtual === void 0 ? true : _param_virtual, height = param.height, itemHeight = param.itemHeight, size = param.size, view = param.view, _param_fullWidthItemSelection = param.fullWidthItemSelection, fullWidthItemSelection = _param_fullWidthItemSelection === void 0 ? false : _param_fullWidthItemSelection, _param_multiple = param.multiple, multiple = _param_multiple === void 0 ? false : _param_multiple, _param_defaultExpandAll = param.defaultExpandAll, defaultExpandAll = _param_defaultExpandAll === void 0 ? false : _param_defaultExpandAll, _param_autoExpandParent = param.autoExpandParent, autoExpandParent = _param_autoExpandParent === void 0 ? false : _param_autoExpandParent, _param_checkable = param.checkable, checkable = _param_checkable === void 0 ? false : _param_checkable, outerSelectedKeys = param.selectedKeys, checkedKeys = param.checkedKeys, expandedKeys = param.expandedKeys, defaultCheckedKeys = param.defaultCheckedKeys, defaultExpandedKeys = param.defaultExpandedKeys, defaultSelectedKeys = param.defaultSelectedKeys, className = param.className, onTreeSelect = param.onTreeSelect, onTreeCheck = param.onTreeCheck, onTreeExpand = param.onTreeExpand, _param_hasIcon = param.hasIcon, hasIcon = _param_hasIcon === void 0 ? false : _param_hasIcon, icon = param.icon, renderTitle = param.renderTitle, _param_mode = param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode;
|
110
110
|
var _useState = _sliced_to_array(useState(defaultSelectedKeys || []), 2), selected = _useState[0], setSelected = _useState[1];
|
111
111
|
var selectedKeys = outerSelectedKeys !== null && outerSelectedKeys !== void 0 ? outerSelectedKeys : selected;
|
112
|
+
var isRadioMode = mode === 'radio' && !multiple;
|
112
113
|
var handleSelect = function(updatedSelectedKeys, info) {
|
114
|
+
if (!multiple && isRadioMode && updatedSelectedKeys.length === 0) {
|
115
|
+
return;
|
116
|
+
}
|
113
117
|
setSelected(updatedSelectedKeys);
|
114
118
|
if (onTreeSelect) {
|
115
119
|
onTreeSelect(updatedSelectedKeys, info);
|
@@ -117,6 +121,7 @@ import { classes } from "./Tree.tokens";
|
|
117
121
|
};
|
118
122
|
var invertedClass = arrowPlacement === 'right' ? classes.treeInverted : undefined;
|
119
123
|
var itemFilledClass = fullWidthItemSelection ? classes.treeItemFilled : undefined;
|
124
|
+
var radioModeClass = isRadioMode ? classes.treeRadioMode : undefined;
|
120
125
|
// Проходимся по дереву и устанавливаем соответствующие классы для узлов дерева,
|
121
126
|
// чтобы соблюсти иерархию вложенности в UI.
|
122
127
|
var treeData = useMemo(function() {
|
@@ -136,7 +141,7 @@ import { classes } from "./Tree.tokens";
|
|
136
141
|
virtual: virtual,
|
137
142
|
multiple: multiple,
|
138
143
|
checkable: checkable,
|
139
|
-
className: cx(className, invertedClass, itemFilledClass),
|
144
|
+
className: cx(className, invertedClass, itemFilledClass, radioModeClass),
|
140
145
|
defaultExpandAll: defaultExpandAll,
|
141
146
|
autoExpandParent: autoExpandParent,
|
142
147
|
style: {
|