@tenancy.nz/datepicker 1.9.4 → 1.9.5
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/dist/cjs/components/DatePicker.cjs +8 -4
- package/dist/cjs/components/DatePicker.styled.cjs +92 -63
- package/dist/cjs/components/DatePicker.tokens.cjs +58 -0
- package/dist/esm/components/DatePicker.js +8 -4
- package/dist/esm/components/DatePicker.styled.js +91 -61
- package/dist/esm/components/DatePicker.tokens.js +52 -0
- package/package.json +7 -5
|
@@ -66,6 +66,7 @@ function DatePicker(_ref) {
|
|
|
66
66
|
}
|
|
67
67
|
setParsedValue(value);
|
|
68
68
|
}, [fromFormat, value]);
|
|
69
|
+
var triggerIcon = icon || /* @__PURE__ */React.createElement(CalendarOutlinedIcon, null);
|
|
69
70
|
return /* @__PURE__ */React.createElement(xDatePickers.LocalizationProvider, {
|
|
70
71
|
dateAdapter: AdapterDayjs.AdapterDayjs
|
|
71
72
|
}, /* @__PURE__ */React.createElement(ui.FormControl, {
|
|
@@ -102,18 +103,21 @@ function DatePicker(_ref) {
|
|
|
102
103
|
textField: {
|
|
103
104
|
InputProps: {
|
|
104
105
|
onClick: function onClick() {
|
|
105
|
-
|
|
106
|
+
if (disabled || readOnly) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
setOpen(true);
|
|
106
110
|
},
|
|
107
111
|
endAdornment: /* @__PURE__ */React.createElement(InputAdornment, {
|
|
108
112
|
position: "end"
|
|
109
|
-
}, /* @__PURE__ */React.createElement(ui.IconButton, {
|
|
110
|
-
color:
|
|
113
|
+
}, disabled || readOnly ? triggerIcon : /* @__PURE__ */React.createElement(ui.IconButton, {
|
|
114
|
+
color: "default",
|
|
111
115
|
onClick: function onClick() {
|
|
112
116
|
return setOpen(true);
|
|
113
117
|
},
|
|
114
118
|
disableFocus: true,
|
|
115
119
|
variant: "default"
|
|
116
|
-
},
|
|
120
|
+
}, triggerIcon))
|
|
117
121
|
}
|
|
118
122
|
}
|
|
119
123
|
}
|
|
@@ -6,88 +6,117 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.c
|
|
|
6
6
|
var react = require('@emotion/react');
|
|
7
7
|
var styles = require('@mui/material/styles');
|
|
8
8
|
var xDatePickers = require('@mui/x-date-pickers');
|
|
9
|
-
var
|
|
9
|
+
var ui = require('@tenancy.nz/ui');
|
|
10
|
+
var DatePicker_tokens = require('./DatePicker.tokens.cjs');
|
|
10
11
|
|
|
11
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
13
|
+
var CUSTOM_PROPS = ["color", "edges", "size"];
|
|
14
|
+
var RADII = {
|
|
15
|
+
rounded: "9999px",
|
|
16
|
+
sharp: "0px",
|
|
17
|
+
smooth: ui.token("shape.radius1")
|
|
18
|
+
};
|
|
19
|
+
var SIZES = {
|
|
20
|
+
small: {
|
|
21
|
+
fontSizeOffset: -2,
|
|
22
|
+
height: "36px",
|
|
23
|
+
padding: "8px 12px"
|
|
24
|
+
},
|
|
25
|
+
medium: {
|
|
26
|
+
fontSizeOffset: 0,
|
|
27
|
+
height: "48px",
|
|
28
|
+
padding: "12px 16px"
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
var BASE_FONT_SIZE = 14;
|
|
32
|
+
var BORDER_WIDTH = "1px";
|
|
33
|
+
var FOCUS_BAR_WIDTH = "2px";
|
|
34
|
+
var BOX = ".MuiPickersInputBase-root";
|
|
35
|
+
var OUTLINE = ".MuiPickersOutlinedInput-notchedOutline";
|
|
36
|
+
var radiusFor = function radiusFor(edges) {
|
|
37
|
+
var _RADII$edges;
|
|
38
|
+
return (_RADII$edges = RADII[edges]) !== null && _RADII$edges !== void 0 ? _RADII$edges : RADII.smooth;
|
|
39
|
+
};
|
|
40
|
+
var sizeConfig = function sizeConfig(size) {
|
|
41
|
+
var _SIZES$size;
|
|
42
|
+
return (_SIZES$size = SIZES[size]) !== null && _SIZES$size !== void 0 ? _SIZES$size : SIZES.medium;
|
|
43
|
+
};
|
|
12
44
|
var colorStyles = function colorStyles(_ref) {
|
|
13
|
-
var color = _ref.color
|
|
14
|
-
|
|
15
|
-
return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n
|
|
45
|
+
var color = _ref.color;
|
|
46
|
+
var tokens = DatePicker_tokens.datePickerColorTokens(color);
|
|
47
|
+
return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background-color: ", ";\n "])), tokens.background);
|
|
16
48
|
};
|
|
17
|
-
var
|
|
18
|
-
var color = _ref2.color
|
|
19
|
-
|
|
20
|
-
return react.css(
|
|
49
|
+
var borderStyles = function borderStyles(_ref2) {
|
|
50
|
+
var color = _ref2.color;
|
|
51
|
+
var tokens = DatePicker_tokens.datePickerColorTokens(color);
|
|
52
|
+
return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border: ", " solid ", ";\n "])), BORDER_WIDTH, tokens.border);
|
|
21
53
|
};
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
|
|
54
|
+
var hoverStyles = function hoverStyles(_ref3) {
|
|
55
|
+
var color = _ref3.color;
|
|
56
|
+
var tokens = DatePicker_tokens.datePickerColorTokens(color);
|
|
57
|
+
return react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border-color: ", ";\n "])), tokens.borderHover);
|
|
25
58
|
};
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
return react.css(
|
|
59
|
+
var focusRingStyles = function focusRingStyles(_ref4) {
|
|
60
|
+
var color = _ref4.color;
|
|
61
|
+
var tokens = DatePicker_tokens.datePickerColorTokens(color);
|
|
62
|
+
return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border: ", " solid ", ";\n box-shadow: inset 0 -", " 0 0 ", ";\n "])), BORDER_WIDTH, tokens.focus, FOCUS_BAR_WIDTH, tokens.focus);
|
|
30
63
|
};
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
theme = _ref5.theme;
|
|
34
|
-
return react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n ", "\n"])), color === "default" && react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n box-shadow: 0px 0px 6px 0px\n ", ";\n border-color: ", " !important;\n "])), getObjectProp.default(theme, "vars.palette.info.main"), getObjectProp.default(theme, "vars.palette.info.main")), color !== "default" && react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n box-shadow: 0px 0px 6px 0px\n ", ";\n "])), getObjectProp.default(theme, "vars.palette.".concat(color, ".main"))));
|
|
64
|
+
var disabledStyles = function disabledStyles() {
|
|
65
|
+
return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n opacity: 1;\n user-select: none;\n"])), DatePicker_tokens.datePickerStateTokens.disabledBackground, DatePicker_tokens.datePickerStateTokens.disabledText);
|
|
35
66
|
};
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
var theme = _ref6.theme;
|
|
39
|
-
return react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n color: ", ";\n opacity: 1;\n transition: none;\n"])), getObjectProp.default(theme, "vars.palette.grey.600"));
|
|
67
|
+
var readOnlyStyles = function readOnlyStyles() {
|
|
68
|
+
return react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background-color: ", ";\n cursor: default;\n opacity: 1;\n user-select: none;\n"])), DatePicker_tokens.datePickerStateTokens.readOnlyBackground);
|
|
40
69
|
};
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
return react.css(
|
|
70
|
+
var edgesStyles = function edgesStyles(_ref5) {
|
|
71
|
+
var edges = _ref5.edges;
|
|
72
|
+
return react.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border-radius: ", ";\n"])), radiusFor(edges));
|
|
44
73
|
};
|
|
45
|
-
var sizeStyles = function sizeStyles(
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
74
|
+
var sizeStyles = function sizeStyles(_ref6) {
|
|
75
|
+
var _theme$typography$fon, _theme$typography;
|
|
76
|
+
var size = _ref6.size,
|
|
77
|
+
theme = _ref6.theme;
|
|
78
|
+
var _sizeConfig = sizeConfig(size),
|
|
79
|
+
fontSizeOffset = _sizeConfig.fontSizeOffset,
|
|
80
|
+
height = _sizeConfig.height,
|
|
81
|
+
padding = _sizeConfig.padding;
|
|
82
|
+
var fontSize = Number((_theme$typography$fon = theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontSize) !== null && _theme$typography$fon !== void 0 ? _theme$typography$fon : BASE_FONT_SIZE) + fontSizeOffset;
|
|
83
|
+
return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n height: ", ";\n padding: ", ";\n font-size: ", "px;\n "])), height, padding, fontSize);
|
|
49
84
|
};
|
|
50
|
-
var StyledDatepicker = styles.styled(xDatePickers.DatePicker
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
color: color
|
|
65
|
-
|
|
85
|
+
var StyledDatepicker = styles.styled(xDatePickers.DatePicker, {
|
|
86
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
87
|
+
return !CUSTOM_PROPS.includes(prop);
|
|
88
|
+
}
|
|
89
|
+
})(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref7) {
|
|
90
|
+
var color = _ref7.color,
|
|
91
|
+
disabled = _ref7.disabled,
|
|
92
|
+
edges = _ref7.edges,
|
|
93
|
+
readOnly = _ref7.readOnly,
|
|
94
|
+
size = _ref7.size,
|
|
95
|
+
theme = _ref7.theme;
|
|
96
|
+
var tokens = DatePicker_tokens.datePickerColorTokens(color);
|
|
97
|
+
var interactive = !disabled && !readOnly;
|
|
98
|
+
return react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n &&& ", " {\n ", "\n ", "\n ", "\n color: ", ";\n }\n\n &&& ", " ", " {\n ", "\n }\n\n &&& ", ".Mui-focused {\n color: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n "])), BOX, colorStyles({
|
|
99
|
+
color: color
|
|
100
|
+
}), edgesStyles({
|
|
101
|
+
edges: edges
|
|
66
102
|
}), sizeStyles({
|
|
67
103
|
size: size,
|
|
68
104
|
theme: theme
|
|
69
|
-
}),
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}), disabled && disabledStyles({
|
|
77
|
-
theme: theme
|
|
78
|
-
}), edgesStyles({
|
|
79
|
-
edges: edges,
|
|
80
|
-
theme: theme
|
|
81
|
-
}), !disabled && !readOnly && hoverStyles, readOnly ? getObjectProp.default(theme, "vars.palette.grey.600") : "inherit");
|
|
105
|
+
}), tokens.placeholder, BOX, OUTLINE, borderStyles({
|
|
106
|
+
color: color
|
|
107
|
+
}), BOX, tokens.text, interactive && react.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n &&& ", ":hover ", " {\n ", "\n }\n\n &&& ", ".Mui-focused ", " {\n ", "\n }\n "])), BOX, OUTLINE, hoverStyles({
|
|
108
|
+
color: color
|
|
109
|
+
}), BOX, OUTLINE, focusRingStyles({
|
|
110
|
+
color: color
|
|
111
|
+
})), readOnly && !disabled && react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n &&& ", " {\n ", "\n }\n\n &&& ", " ", " {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root svg {\n fill: ", ";\n }\n "])), BOX, readOnlyStyles(), BOX, OUTLINE, DatePicker_tokens.datePickerStateTokens.readOnlyBorder, DatePicker_tokens.datePickerStateTokens.readOnlyIcon), disabled && react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n &&& ", " {\n ", "\n }\n\n &&& ", " ", " {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root svg {\n fill: ", ";\n }\n "])), BOX, disabledStyles(), BOX, OUTLINE, DatePicker_tokens.datePickerStateTokens.disabledBorder, DatePicker_tokens.datePickerStateTokens.disabledIcon));
|
|
82
112
|
});
|
|
83
113
|
|
|
84
|
-
exports.
|
|
114
|
+
exports.borderStyles = borderStyles;
|
|
85
115
|
exports.colorStyles = colorStyles;
|
|
86
116
|
exports.default = StyledDatepicker;
|
|
87
117
|
exports.disabledStyles = disabledStyles;
|
|
88
118
|
exports.edgesStyles = edgesStyles;
|
|
89
|
-
exports.
|
|
119
|
+
exports.focusRingStyles = focusRingStyles;
|
|
90
120
|
exports.hoverStyles = hoverStyles;
|
|
91
|
-
exports.placeholderStyles = placeholderStyles;
|
|
92
121
|
exports.readOnlyStyles = readOnlyStyles;
|
|
93
122
|
exports.sizeStyles = sizeStyles;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var ui = require('@tenancy.nz/ui');
|
|
6
|
+
|
|
7
|
+
var defaultTokens = {
|
|
8
|
+
background: ui.token("palette.semantic.surface.background1"),
|
|
9
|
+
backgroundHover: ui.token("palette.semantic.surface.background1"),
|
|
10
|
+
border: ui.token("palette.semantic.border.mediumColor"),
|
|
11
|
+
borderHover: ui.token("palette.semantic.border.strongColor"),
|
|
12
|
+
focus: ui.token("palette.semantic.border.focusColor"),
|
|
13
|
+
icon: ui.token("palette.semantic.icons.primaryColor"),
|
|
14
|
+
placeholder: ui.token("palette.semantic.text.placeholderColor"),
|
|
15
|
+
text: ui.token("palette.semantic.text.primaryColor")
|
|
16
|
+
};
|
|
17
|
+
var error = {
|
|
18
|
+
background: ui.token("palette.semantic.surface.errorColor"),
|
|
19
|
+
backgroundHover: ui.token("palette.semantic.surface.errorColor"),
|
|
20
|
+
border: ui.token("palette.semantic.border.errorColor"),
|
|
21
|
+
borderHover: ui.token("palette.semantic.border.errorColor"),
|
|
22
|
+
focus: ui.token("palette.semantic.border.errorColor"),
|
|
23
|
+
icon: ui.token("palette.semantic.icons.primaryColor"),
|
|
24
|
+
placeholder: ui.token("palette.semantic.text.placeholderColor"),
|
|
25
|
+
text: ui.token("palette.semantic.text.primaryColor")
|
|
26
|
+
};
|
|
27
|
+
var success = {
|
|
28
|
+
background: ui.token("palette.semantic.surface.successColor"),
|
|
29
|
+
backgroundHover: ui.token("palette.semantic.surface.successColor"),
|
|
30
|
+
border: ui.token("palette.semantic.border.successColor"),
|
|
31
|
+
borderHover: ui.token("palette.semantic.border.successColor"),
|
|
32
|
+
focus: ui.token("palette.semantic.border.successColor"),
|
|
33
|
+
icon: ui.token("palette.semantic.icons.primaryColor"),
|
|
34
|
+
placeholder: ui.token("palette.semantic.text.placeholderColor"),
|
|
35
|
+
text: ui.token("palette.semantic.text.primaryColor")
|
|
36
|
+
};
|
|
37
|
+
var datePickerColorConfigs = {
|
|
38
|
+
default: defaultTokens,
|
|
39
|
+
error: error,
|
|
40
|
+
success: success
|
|
41
|
+
};
|
|
42
|
+
var datePickerStateTokens = {
|
|
43
|
+
disabledBackground: ui.token("palette.semantic.surface.background3"),
|
|
44
|
+
disabledBorder: ui.token("palette.semantic.border.mediumColor"),
|
|
45
|
+
disabledIcon: ui.token("palette.semantic.icons.disabledColor"),
|
|
46
|
+
disabledText: ui.token("palette.semantic.text.disabledColor"),
|
|
47
|
+
readOnlyBackground: ui.token("palette.semantic.surface.background3"),
|
|
48
|
+
readOnlyBorder: ui.token("palette.semantic.border.strongColor"),
|
|
49
|
+
readOnlyIcon: ui.token("palette.semantic.icons.secondaryColor")
|
|
50
|
+
};
|
|
51
|
+
var datePickerColorTokens = function datePickerColorTokens(color) {
|
|
52
|
+
var _datePickerColorConfi;
|
|
53
|
+
return (_datePickerColorConfi = datePickerColorConfigs[color]) !== null && _datePickerColorConfi !== void 0 ? _datePickerColorConfi : datePickerColorConfigs.default;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
exports.datePickerColorTokens = datePickerColorTokens;
|
|
57
|
+
exports.datePickerStateTokens = datePickerStateTokens;
|
|
58
|
+
exports.default = datePickerColorTokens;
|
|
@@ -62,6 +62,7 @@ function DatePicker(_ref) {
|
|
|
62
62
|
}
|
|
63
63
|
setParsedValue(value);
|
|
64
64
|
}, [fromFormat, value]);
|
|
65
|
+
var triggerIcon = icon || /* @__PURE__ */React.createElement(CalendarOutlinedIcon, null);
|
|
65
66
|
return /* @__PURE__ */React.createElement(LocalizationProvider, {
|
|
66
67
|
dateAdapter: AdapterDayjs
|
|
67
68
|
}, /* @__PURE__ */React.createElement(FormControl, {
|
|
@@ -98,18 +99,21 @@ function DatePicker(_ref) {
|
|
|
98
99
|
textField: {
|
|
99
100
|
InputProps: {
|
|
100
101
|
onClick: function onClick() {
|
|
101
|
-
|
|
102
|
+
if (disabled || readOnly) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
setOpen(true);
|
|
102
106
|
},
|
|
103
107
|
endAdornment: /* @__PURE__ */React.createElement(InputAdornment, {
|
|
104
108
|
position: "end"
|
|
105
|
-
}, /* @__PURE__ */React.createElement(IconButton, {
|
|
106
|
-
color:
|
|
109
|
+
}, disabled || readOnly ? triggerIcon : /* @__PURE__ */React.createElement(IconButton, {
|
|
110
|
+
color: "default",
|
|
107
111
|
onClick: function onClick() {
|
|
108
112
|
return setOpen(true);
|
|
109
113
|
},
|
|
110
114
|
disableFocus: true,
|
|
111
115
|
variant: "default"
|
|
112
|
-
},
|
|
116
|
+
}, triggerIcon))
|
|
113
117
|
}
|
|
114
118
|
}
|
|
115
119
|
}
|
|
@@ -2,79 +2,109 @@ import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_ro
|
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
4
|
import { DatePicker } from '@mui/x-date-pickers';
|
|
5
|
-
import
|
|
5
|
+
import { token } from '@tenancy.nz/ui';
|
|
6
|
+
import { datePickerStateTokens, datePickerColorTokens } from './DatePicker.tokens.js';
|
|
6
7
|
|
|
7
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
9
|
+
var CUSTOM_PROPS = ["color", "edges", "size"];
|
|
10
|
+
var RADII = {
|
|
11
|
+
rounded: "9999px",
|
|
12
|
+
sharp: "0px",
|
|
13
|
+
smooth: token("shape.radius1")
|
|
14
|
+
};
|
|
15
|
+
var SIZES = {
|
|
16
|
+
small: {
|
|
17
|
+
fontSizeOffset: -2,
|
|
18
|
+
height: "36px",
|
|
19
|
+
padding: "8px 12px"
|
|
20
|
+
},
|
|
21
|
+
medium: {
|
|
22
|
+
fontSizeOffset: 0,
|
|
23
|
+
height: "48px",
|
|
24
|
+
padding: "12px 16px"
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
var BASE_FONT_SIZE = 14;
|
|
28
|
+
var BORDER_WIDTH = "1px";
|
|
29
|
+
var FOCUS_BAR_WIDTH = "2px";
|
|
30
|
+
var BOX = ".MuiPickersInputBase-root";
|
|
31
|
+
var OUTLINE = ".MuiPickersOutlinedInput-notchedOutline";
|
|
32
|
+
var radiusFor = function radiusFor(edges) {
|
|
33
|
+
var _RADII$edges;
|
|
34
|
+
return (_RADII$edges = RADII[edges]) !== null && _RADII$edges !== void 0 ? _RADII$edges : RADII.smooth;
|
|
35
|
+
};
|
|
36
|
+
var sizeConfig = function sizeConfig(size) {
|
|
37
|
+
var _SIZES$size;
|
|
38
|
+
return (_SIZES$size = SIZES[size]) !== null && _SIZES$size !== void 0 ? _SIZES$size : SIZES.medium;
|
|
39
|
+
};
|
|
8
40
|
var colorStyles = function colorStyles(_ref) {
|
|
9
|
-
var color = _ref.color
|
|
10
|
-
|
|
11
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
41
|
+
var color = _ref.color;
|
|
42
|
+
var tokens = datePickerColorTokens(color);
|
|
43
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), tokens.background);
|
|
12
44
|
};
|
|
13
|
-
var
|
|
14
|
-
var color = _ref2.color
|
|
15
|
-
|
|
16
|
-
return css(
|
|
45
|
+
var borderStyles = function borderStyles(_ref2) {
|
|
46
|
+
var color = _ref2.color;
|
|
47
|
+
var tokens = datePickerColorTokens(color);
|
|
48
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: ", " solid ", ";\n "])), BORDER_WIDTH, tokens.border);
|
|
17
49
|
};
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
|
|
50
|
+
var hoverStyles = function hoverStyles(_ref3) {
|
|
51
|
+
var color = _ref3.color;
|
|
52
|
+
var tokens = datePickerColorTokens(color);
|
|
53
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-color: ", ";\n "])), tokens.borderHover);
|
|
21
54
|
};
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
return css(
|
|
55
|
+
var focusRingStyles = function focusRingStyles(_ref4) {
|
|
56
|
+
var color = _ref4.color;
|
|
57
|
+
var tokens = datePickerColorTokens(color);
|
|
58
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border: ", " solid ", ";\n box-shadow: inset 0 -", " 0 0 ", ";\n "])), BORDER_WIDTH, tokens.focus, FOCUS_BAR_WIDTH, tokens.focus);
|
|
26
59
|
};
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
theme = _ref5.theme;
|
|
30
|
-
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", "\n"])), color === "default" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 6px 0px\n ", ";\n border-color: ", " !important;\n "])), getObjectProp(theme, "vars.palette.info.main"), getObjectProp(theme, "vars.palette.info.main")), color !== "default" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 6px 0px\n ", ";\n "])), getObjectProp(theme, "vars.palette.".concat(color, ".main"))));
|
|
60
|
+
var disabledStyles = function disabledStyles() {
|
|
61
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n opacity: 1;\n user-select: none;\n"])), datePickerStateTokens.disabledBackground, datePickerStateTokens.disabledText);
|
|
31
62
|
};
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
var theme = _ref6.theme;
|
|
35
|
-
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n color: ", ";\n opacity: 1;\n transition: none;\n"])), getObjectProp(theme, "vars.palette.grey.600"));
|
|
63
|
+
var readOnlyStyles = function readOnlyStyles() {
|
|
64
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n cursor: default;\n opacity: 1;\n user-select: none;\n"])), datePickerStateTokens.readOnlyBackground);
|
|
36
65
|
};
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
return css(
|
|
66
|
+
var edgesStyles = function edgesStyles(_ref5) {
|
|
67
|
+
var edges = _ref5.edges;
|
|
68
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-radius: ", ";\n"])), radiusFor(edges));
|
|
40
69
|
};
|
|
41
|
-
var sizeStyles = function sizeStyles(
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
70
|
+
var sizeStyles = function sizeStyles(_ref6) {
|
|
71
|
+
var _theme$typography$fon, _theme$typography;
|
|
72
|
+
var size = _ref6.size,
|
|
73
|
+
theme = _ref6.theme;
|
|
74
|
+
var _sizeConfig = sizeConfig(size),
|
|
75
|
+
fontSizeOffset = _sizeConfig.fontSizeOffset,
|
|
76
|
+
height = _sizeConfig.height,
|
|
77
|
+
padding = _sizeConfig.padding;
|
|
78
|
+
var fontSize = Number((_theme$typography$fon = theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontSize) !== null && _theme$typography$fon !== void 0 ? _theme$typography$fon : BASE_FONT_SIZE) + fontSizeOffset;
|
|
79
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: ", ";\n padding: ", ";\n font-size: ", "px;\n "])), height, padding, fontSize);
|
|
45
80
|
};
|
|
46
|
-
var StyledDatepicker = styled(DatePicker
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
color: color
|
|
61
|
-
|
|
81
|
+
var StyledDatepicker = styled(DatePicker, {
|
|
82
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
83
|
+
return !CUSTOM_PROPS.includes(prop);
|
|
84
|
+
}
|
|
85
|
+
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref7) {
|
|
86
|
+
var color = _ref7.color,
|
|
87
|
+
disabled = _ref7.disabled,
|
|
88
|
+
edges = _ref7.edges,
|
|
89
|
+
readOnly = _ref7.readOnly,
|
|
90
|
+
size = _ref7.size,
|
|
91
|
+
theme = _ref7.theme;
|
|
92
|
+
var tokens = datePickerColorTokens(color);
|
|
93
|
+
var interactive = !disabled && !readOnly;
|
|
94
|
+
return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n &&& ", " {\n ", "\n ", "\n ", "\n color: ", ";\n }\n\n &&& ", " ", " {\n ", "\n }\n\n &&& ", ".Mui-focused {\n color: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n "])), BOX, colorStyles({
|
|
95
|
+
color: color
|
|
96
|
+
}), edgesStyles({
|
|
97
|
+
edges: edges
|
|
62
98
|
}), sizeStyles({
|
|
63
99
|
size: size,
|
|
64
100
|
theme: theme
|
|
65
|
-
}),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}), disabled && disabledStyles({
|
|
73
|
-
theme: theme
|
|
74
|
-
}), edgesStyles({
|
|
75
|
-
edges: edges,
|
|
76
|
-
theme: theme
|
|
77
|
-
}), !disabled && !readOnly && hoverStyles, readOnly ? getObjectProp(theme, "vars.palette.grey.600") : "inherit");
|
|
101
|
+
}), tokens.placeholder, BOX, OUTLINE, borderStyles({
|
|
102
|
+
color: color
|
|
103
|
+
}), BOX, tokens.text, interactive && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n &&& ", ":hover ", " {\n ", "\n }\n\n &&& ", ".Mui-focused ", " {\n ", "\n }\n "])), BOX, OUTLINE, hoverStyles({
|
|
104
|
+
color: color
|
|
105
|
+
}), BOX, OUTLINE, focusRingStyles({
|
|
106
|
+
color: color
|
|
107
|
+
})), readOnly && !disabled && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n &&& ", " {\n ", "\n }\n\n &&& ", " ", " {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root svg {\n fill: ", ";\n }\n "])), BOX, readOnlyStyles(), BOX, OUTLINE, datePickerStateTokens.readOnlyBorder, datePickerStateTokens.readOnlyIcon), disabled && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n &&& ", " {\n ", "\n }\n\n &&& ", " ", " {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root svg {\n fill: ", ";\n }\n "])), BOX, disabledStyles(), BOX, OUTLINE, datePickerStateTokens.disabledBorder, datePickerStateTokens.disabledIcon));
|
|
78
108
|
});
|
|
79
109
|
|
|
80
|
-
export {
|
|
110
|
+
export { borderStyles, colorStyles, StyledDatepicker as default, disabledStyles, edgesStyles, focusRingStyles, hoverStyles, readOnlyStyles, sizeStyles };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { token } from '@tenancy.nz/ui';
|
|
2
|
+
|
|
3
|
+
var defaultTokens = {
|
|
4
|
+
background: token("palette.semantic.surface.background1"),
|
|
5
|
+
backgroundHover: token("palette.semantic.surface.background1"),
|
|
6
|
+
border: token("palette.semantic.border.mediumColor"),
|
|
7
|
+
borderHover: token("palette.semantic.border.strongColor"),
|
|
8
|
+
focus: token("palette.semantic.border.focusColor"),
|
|
9
|
+
icon: token("palette.semantic.icons.primaryColor"),
|
|
10
|
+
placeholder: token("palette.semantic.text.placeholderColor"),
|
|
11
|
+
text: token("palette.semantic.text.primaryColor")
|
|
12
|
+
};
|
|
13
|
+
var error = {
|
|
14
|
+
background: token("palette.semantic.surface.errorColor"),
|
|
15
|
+
backgroundHover: token("palette.semantic.surface.errorColor"),
|
|
16
|
+
border: token("palette.semantic.border.errorColor"),
|
|
17
|
+
borderHover: token("palette.semantic.border.errorColor"),
|
|
18
|
+
focus: token("palette.semantic.border.errorColor"),
|
|
19
|
+
icon: token("palette.semantic.icons.primaryColor"),
|
|
20
|
+
placeholder: token("palette.semantic.text.placeholderColor"),
|
|
21
|
+
text: token("palette.semantic.text.primaryColor")
|
|
22
|
+
};
|
|
23
|
+
var success = {
|
|
24
|
+
background: token("palette.semantic.surface.successColor"),
|
|
25
|
+
backgroundHover: token("palette.semantic.surface.successColor"),
|
|
26
|
+
border: token("palette.semantic.border.successColor"),
|
|
27
|
+
borderHover: token("palette.semantic.border.successColor"),
|
|
28
|
+
focus: token("palette.semantic.border.successColor"),
|
|
29
|
+
icon: token("palette.semantic.icons.primaryColor"),
|
|
30
|
+
placeholder: token("palette.semantic.text.placeholderColor"),
|
|
31
|
+
text: token("palette.semantic.text.primaryColor")
|
|
32
|
+
};
|
|
33
|
+
var datePickerColorConfigs = {
|
|
34
|
+
default: defaultTokens,
|
|
35
|
+
error: error,
|
|
36
|
+
success: success
|
|
37
|
+
};
|
|
38
|
+
var datePickerStateTokens = {
|
|
39
|
+
disabledBackground: token("palette.semantic.surface.background3"),
|
|
40
|
+
disabledBorder: token("palette.semantic.border.mediumColor"),
|
|
41
|
+
disabledIcon: token("palette.semantic.icons.disabledColor"),
|
|
42
|
+
disabledText: token("palette.semantic.text.disabledColor"),
|
|
43
|
+
readOnlyBackground: token("palette.semantic.surface.background3"),
|
|
44
|
+
readOnlyBorder: token("palette.semantic.border.strongColor"),
|
|
45
|
+
readOnlyIcon: token("palette.semantic.icons.secondaryColor")
|
|
46
|
+
};
|
|
47
|
+
var datePickerColorTokens = function datePickerColorTokens(color) {
|
|
48
|
+
var _datePickerColorConfi;
|
|
49
|
+
return (_datePickerColorConfi = datePickerColorConfigs[color]) !== null && _datePickerColorConfi !== void 0 ? _datePickerColorConfi : datePickerColorConfigs.default;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export { datePickerColorTokens, datePickerStateTokens, datePickerColorTokens as default };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tenancy.nz/datepicker",
|
|
3
3
|
"description": "Datepicker library for TPS UI.",
|
|
4
|
-
"version": "1.9.
|
|
4
|
+
"version": "1.9.5",
|
|
5
5
|
"author": "TPS <https://www.tenancy.co.nz>",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/cjs/index.cjs",
|
|
@@ -18,12 +18,14 @@
|
|
|
18
18
|
"dayjs": "^1.11.19",
|
|
19
19
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
20
20
|
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
21
|
-
"@tenancy.nz/icons": "1.9.
|
|
22
|
-
"@tenancy.nz/
|
|
21
|
+
"@tenancy.nz/icons": "1.9.5",
|
|
22
|
+
"@tenancy.nz/tokens": "1.9.5",
|
|
23
|
+
"@tenancy.nz/ui": "1.9.5"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
|
-
"@tenancy.nz/ui": "1.9.
|
|
26
|
-
"@tenancy.nz/icons": "1.9.
|
|
26
|
+
"@tenancy.nz/ui": "1.9.5",
|
|
27
|
+
"@tenancy.nz/icons": "1.9.5",
|
|
28
|
+
"@tenancy.nz/tokens": "1.9.5"
|
|
27
29
|
},
|
|
28
30
|
"scripts": {
|
|
29
31
|
"build": "tsx ../../scripts/build.js"
|