oolib 3.1.0 → 3.1.2
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.
|
@@ -41,13 +41,11 @@ exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapp
|
|
|
41
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
44
|
+
var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
44
45
|
var mixins_1 = require("../../themes/mixins");
|
|
45
46
|
var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100;
|
|
46
47
|
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n"], ["\n position: relative;\n width: fit-content;\n"])));
|
|
47
|
-
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n background:
|
|
48
|
-
var invert = _a.invert;
|
|
49
|
-
return (invert ? greyColor80 : greyColor5);
|
|
50
|
-
}, function (_a) {
|
|
48
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n background: transparent;\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n ", "\n background: transparent;\n outline: none;\n border: none;\n width: 13rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
51
49
|
var invert = _a.invert, disabled = _a.disabled;
|
|
52
50
|
return invert
|
|
53
51
|
? disabled
|
|
@@ -58,15 +56,9 @@ exports.StyledInput = styled_components_1.default.input(templateObject_3 || (tem
|
|
|
58
56
|
: themes_1.colors.greyColor100;
|
|
59
57
|
}, function (_a) {
|
|
60
58
|
var disabled = _a.disabled;
|
|
61
|
-
return
|
|
62
|
-
}, function (_a) {
|
|
63
|
-
var invert = _a.invert, disabled = _a.disabled;
|
|
64
|
-
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
65
|
-
}, function (_a) {
|
|
66
|
-
var disabled = _a.disabled;
|
|
67
|
-
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "], ["\n color: ", "\n background-color: ", ";\n cursor: not-allowed;\n &:hover{\n background-color: none !important;\n }\n "])), greyColor40, greyColor15);
|
|
59
|
+
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
68
60
|
}, greyColor40);
|
|
69
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "
|
|
61
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /* v2 select-box look (matches DropdownSingle): a ::before bordered box behind\n the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n border lives on THIS wrapper (input only), NOT the container, so the\n absolutely-positioned calendar (z-index:10000) isn't trapped in this\n stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n input rather than the page. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"], ["\n /* v2 select-box look (matches DropdownSingle): a ::before bordered box behind\n the input \u2014 grey30 border on hover, grey80 + shadow on focus-within. The\n border lives on THIS wrapper (input only), NOT the container, so the\n absolutely-positioned calendar (z-index:10000) isn't trapped in this\n stacking context. z-index:0 so the ::before's z-index:-1 sits behind the\n input rather than the page. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, globalStyles_1.globalInputElemHover_v2, globalStyles_1.globalInputElemFocused_v2);
|
|
70
62
|
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n z-index: 10000;\n height: 40rem;\n visibility: ", ";\n \n ", "{\n position: absolute;\n height: unset;\n width: 30rem;\n ", "\n }\n\n"], ["\n z-index: 10000;\n height: 40rem;\n visibility: ", ";\n \n ", "{\n position: absolute;\n height: unset;\n width: 30rem;\n ", "\n }\n\n"])), function (_a) {
|
|
71
63
|
var showCalendar = _a.showCalendar, debug = _a.debug;
|
|
72
64
|
return debug ? "" : showCalendar ? "visible" : "hidden";
|
|
@@ -54,7 +54,6 @@ var BlockLabel_1 = require("../../v2/components/BlockLabel");
|
|
|
54
54
|
var TimePicker_1 = require("../TimePicker");
|
|
55
55
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
56
56
|
var DatePicker_1 = __importDefault(require("../DatePicker"));
|
|
57
|
-
var convertTo12Hour_1 = require("../TimePicker/utils/convertTo12Hour");
|
|
58
57
|
/**
|
|
59
58
|
* Parses an ISO string into internal { date, time } format.
|
|
60
59
|
* @param {string} value - ISO string (e.g. "2025-02-24T14:30:00.000Z")
|
|
@@ -73,7 +72,13 @@ var parseISOValue = function (value) {
|
|
|
73
72
|
var DateTimePicker = function (props) {
|
|
74
73
|
var parentOnChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, passChangeHandlerOps = props.passChangeHandlerOps, invert = props.invert, disabled = props.disabled, _a = props.debug, debug = _a === void 0 ? false : _a;
|
|
75
74
|
var normalized = (0, react_1.useMemo)(function () { return parseISOValue(value); }, [value]);
|
|
76
|
-
|
|
75
|
+
// _value.time is kept in 24h "HH:MM:SS" (as parseISOValue emits) — the same
|
|
76
|
+
// shape TimePicker accepts (it converts to 12h for display itself) and the
|
|
77
|
+
// same shape the date-change recompute below splits. Storing 12h here (an
|
|
78
|
+
// earlier bug) made a DATE change parse "5:44 PM" as 24h → Invalid Date →
|
|
79
|
+
// toISOString() threw → the change never reached onChange (didn't save or
|
|
80
|
+
// sync to other users); it also double-converted through TimePicker.
|
|
81
|
+
var _b = (0, react_1.useState)({ date: normalized.date, time: normalized.time }), _value = _b[0], _setValue = _b[1];
|
|
77
82
|
var handleOnChange = function (k, v) {
|
|
78
83
|
var _a;
|
|
79
84
|
var newVal = __assign(__assign({}, _value), (_a = {}, _a[k] = v, _a));
|
|
@@ -94,7 +99,7 @@ var DateTimePicker = function (props) {
|
|
|
94
99
|
(0, react_1.useEffect)(function () {
|
|
95
100
|
var n = parseISOValue(value);
|
|
96
101
|
if (n.date !== _value.date || n.time !== _value.time) {
|
|
97
|
-
_setValue({ date: n.date, time: n.time
|
|
102
|
+
_setValue({ date: n.date, time: n.time });
|
|
98
103
|
}
|
|
99
104
|
}, [value]);
|
|
100
105
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -104,11 +104,14 @@ var TimePicker = function (props) {
|
|
|
104
104
|
};
|
|
105
105
|
scrollTimeElementToTop();
|
|
106
106
|
}, [inputValue, timeStripRef]);
|
|
107
|
-
//
|
|
108
|
-
//
|
|
109
|
-
//
|
|
110
|
-
//
|
|
111
|
-
//
|
|
107
|
+
// Reflect external value changes — a remote collaborator's edit, or our own
|
|
108
|
+
// committed value round-tripping back. Without this, inputValue is seeded
|
|
109
|
+
// once on mount (line above) and goes stale. Typing doesn't fire here: the
|
|
110
|
+
// value only changes on blur (handleOnBlur → onParentChange), so a focused
|
|
111
|
+
// user's input is never clobbered mid-edit.
|
|
112
|
+
(0, react_1.useEffect)(function () {
|
|
113
|
+
setInputValue(value ? (0, convertTo12Hour_1.convertTo12Hour)(value) : null);
|
|
114
|
+
}, [value]);
|
|
112
115
|
var handleTimeClick = function (e, item) {
|
|
113
116
|
setInputValue(item);
|
|
114
117
|
};
|
|
@@ -131,11 +134,12 @@ var TimePicker = function (props) {
|
|
|
131
134
|
react_1.default.createElement("div", { style: { display: "flex", position: 'relative' } },
|
|
132
135
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, inputValue)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
133
136
|
react_1.default.createElement(styled_1.StyledTimeInputWrapper, { invert: invert },
|
|
134
|
-
react_1.default.createElement(styled_1.
|
|
135
|
-
|
|
136
|
-
e.
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
react_1.default.createElement(styled_1.StyledTimeInputBorderWrapper, { disabled: disabled },
|
|
138
|
+
react_1.default.createElement(styled_1.StyledTimeInput, { type: "test", className: "SANS_3", placeholder: "HH:MM AA", maxLength: "8", invert: invert, value: inputValue, ref: inputRef, autoCapitalize: "characters", onChange: function (e) { return handleInputChange(e); }, onBlur: function () { return handleOnBlur(); }, onFocus: function () { return handleOnFocus(); }, onKeyDown: function (e) {
|
|
139
|
+
if (e.key === 'Enter') {
|
|
140
|
+
e.target.blur();
|
|
141
|
+
}
|
|
142
|
+
}, disabled: disabled })),
|
|
139
143
|
react_1.default.createElement(styled_1.StyledDropDown, { className: "drop-down", invert: invert },
|
|
140
144
|
react_1.default.createElement(styled_1.StyledDropDownList, { className: "drop-list", ref: timeStripRef },
|
|
141
145
|
" ",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export const StyledTimeInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export const StyledTimeInputBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
3
|
export const StyledTimeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
3
4
|
export const StyledDropDown: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
5
|
export const StyledMotionDiv: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
@@ -37,34 +37,33 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
37
37
|
};
|
|
38
38
|
})();
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputWrapper = void 0;
|
|
40
|
+
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputBorderWrapper = exports.StyledTimeInputWrapper = void 0;
|
|
41
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
44
|
+
var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
44
45
|
var mixins_1 = require("../../themes/mixins");
|
|
45
46
|
var framer_motion_1 = require("framer-motion");
|
|
46
47
|
var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
|
|
47
|
-
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n
|
|
48
|
-
exports.
|
|
49
|
-
var
|
|
50
|
-
return
|
|
48
|
+
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"], ["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"])));
|
|
49
|
+
exports.StyledTimeInputBorderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"], ["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
|
|
50
|
+
var disabled = _a.disabled;
|
|
51
|
+
return !disabled && globalStyles_1.globalInputElemHover_v2;
|
|
51
52
|
}, function (_a) {
|
|
53
|
+
var disabled = _a.disabled;
|
|
54
|
+
return !disabled && globalStyles_1.globalInputElemFocused_v2;
|
|
55
|
+
});
|
|
56
|
+
exports.StyledTimeInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"], ["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
52
57
|
var invert = _a.invert, disabled = _a.disabled;
|
|
53
58
|
return invert
|
|
54
59
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
55
60
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
56
61
|
}, function (_a) {
|
|
57
62
|
var disabled = _a.disabled;
|
|
58
|
-
return
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}, greyColor40, (0, mixins_1.transition)('background-color', 'width'));
|
|
66
|
-
exports.StyledDropDown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n z-index: 1;\n"], ["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n z-index: 1;\n"])), globalVariables_1.globalLightboxStyle);
|
|
67
|
-
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
68
|
-
exports.StyledDropDownList = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"], ["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"])));
|
|
69
|
-
exports.StyledListItem = styled_components_1.default.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"], ["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"])), globalVariables_1.globalHoverOnWhiteBG);
|
|
70
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
63
|
+
return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
64
|
+
}, greyColor40, (0, mixins_1.transition)('width'));
|
|
65
|
+
exports.StyledDropDown = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"], ["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"])), globalVariables_1.globalLightboxStyle);
|
|
66
|
+
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
67
|
+
exports.StyledDropDownList = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"], ["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"])));
|
|
68
|
+
exports.StyledListItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"], ["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"])), globalVariables_1.globalHoverOnWhiteBG);
|
|
69
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|