@tenancy.nz/datepicker 1.9.4 → 1.9.6
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 +12 -5
- package/dist/cjs/components/DatePicker.styled.cjs +92 -63
- package/dist/cjs/components/DatePicker.tokens.cjs +58 -0
- package/dist/esm/components/DatePicker.js +13 -6
- 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,24 @@ 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
|
-
position: "end"
|
|
109
|
-
|
|
110
|
-
|
|
112
|
+
position: "end",
|
|
113
|
+
sx: {
|
|
114
|
+
color: disabled || readOnly ? ui.token("palette.semantic.icons.disabledColor") : ui.token("palette.semantic.icons.primaryColor")
|
|
115
|
+
}
|
|
116
|
+
}, disabled || readOnly ? triggerIcon : /* @__PURE__ */React.createElement(ui.IconButton, {
|
|
117
|
+
color: "primary",
|
|
111
118
|
onClick: function onClick() {
|
|
112
119
|
return setOpen(true);
|
|
113
120
|
},
|
|
114
121
|
disableFocus: true,
|
|
115
122
|
variant: "default"
|
|
116
|
-
},
|
|
123
|
+
}, triggerIcon))
|
|
117
124
|
}
|
|
118
125
|
}
|
|
119
126
|
}
|
|
@@ -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;
|
|
@@ -5,7 +5,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat.js';
|
|
|
5
5
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
6
6
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
7
7
|
import { LocalizationProvider } from '@mui/x-date-pickers';
|
|
8
|
-
import { FormControl, IconButton } from '@tenancy.nz/ui';
|
|
8
|
+
import { FormControl, token, IconButton } from '@tenancy.nz/ui';
|
|
9
9
|
import CalendarOutlinedIcon from '@tenancy.nz/icons/CalendarOutlined';
|
|
10
10
|
import StyledDatepicker from './DatePicker.styled.js';
|
|
11
11
|
|
|
@@ -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,24 @@ 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
|
-
position: "end"
|
|
105
|
-
|
|
106
|
-
|
|
108
|
+
position: "end",
|
|
109
|
+
sx: {
|
|
110
|
+
color: disabled || readOnly ? token("palette.semantic.icons.disabledColor") : token("palette.semantic.icons.primaryColor")
|
|
111
|
+
}
|
|
112
|
+
}, disabled || readOnly ? triggerIcon : /* @__PURE__ */React.createElement(IconButton, {
|
|
113
|
+
color: "primary",
|
|
107
114
|
onClick: function onClick() {
|
|
108
115
|
return setOpen(true);
|
|
109
116
|
},
|
|
110
117
|
disableFocus: true,
|
|
111
118
|
variant: "default"
|
|
112
|
-
},
|
|
119
|
+
}, triggerIcon))
|
|
113
120
|
}
|
|
114
121
|
}
|
|
115
122
|
}
|
|
@@ -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.6",
|
|
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.6",
|
|
22
|
+
"@tenancy.nz/tokens": "1.9.6",
|
|
23
|
+
"@tenancy.nz/ui": "1.9.6"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
|
-
"@tenancy.nz/ui": "1.9.
|
|
26
|
-
"@tenancy.nz/
|
|
26
|
+
"@tenancy.nz/ui": "1.9.6",
|
|
27
|
+
"@tenancy.nz/tokens": "1.9.6",
|
|
28
|
+
"@tenancy.nz/icons": "1.9.6"
|
|
27
29
|
},
|
|
28
30
|
"scripts": {
|
|
29
31
|
"build": "tsx ../../scripts/build.js"
|