orcs-design-system 3.2.6 → 3.2.8
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.
|
@@ -2,6 +2,7 @@ import React, { useState } from "react";
|
|
|
2
2
|
import DatePicker from ".";
|
|
3
3
|
import Box from "../Box";
|
|
4
4
|
import Spacer from "../Spacer";
|
|
5
|
+
import moment from "moment";
|
|
5
6
|
import "react-dates/lib/css/_datepicker.css";
|
|
6
7
|
import "react-dates/initialize";
|
|
7
8
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -85,8 +86,11 @@ const DateRange = () => {
|
|
|
85
86
|
});
|
|
86
87
|
};
|
|
87
88
|
const ShowClearDates = () => {
|
|
88
|
-
const [date, setDate] = useState(
|
|
89
|
-
const [dates, setDates] = useState({
|
|
89
|
+
const [date, setDate] = useState(moment()); // Default date for single DatePicker
|
|
90
|
+
const [dates, setDates] = useState({
|
|
91
|
+
startDate: moment(),
|
|
92
|
+
endDate: moment()
|
|
93
|
+
}); // Default dates for range DatePicker
|
|
90
94
|
const [focused1, setFocused1] = useState(null);
|
|
91
95
|
const [focused2, setFocused2] = useState(null);
|
|
92
96
|
const onDatesChange = _ref2 => {
|
|
@@ -73,7 +73,16 @@ const DatePickerLabel = styled.label.withConfig({
|
|
|
73
73
|
const DatePickerContainer = styled.div.withConfig({
|
|
74
74
|
displayName: "DatePicker__DatePickerContainer",
|
|
75
75
|
componentId: "sc-15292wq-1"
|
|
76
|
-
})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center
|
|
76
|
+
})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
|
|
77
|
+
if (props.width) {
|
|
78
|
+
if (props.width.includes("px")) {
|
|
79
|
+
const widthValue = parseInt(props.width, 10);
|
|
80
|
+
return "".concat(widthValue * 2, "px");
|
|
81
|
+
}
|
|
82
|
+
return props.width;
|
|
83
|
+
}
|
|
84
|
+
return "calc(134px * 2)";
|
|
85
|
+
}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
|
|
77
86
|
|
|
78
87
|
/**
|
|
79
88
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "orcs-design-system",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.8",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": "20.12.2"
|
|
6
6
|
},
|
|
@@ -142,6 +142,10 @@
|
|
|
142
142
|
"webpack-cli": "^5.1.4"
|
|
143
143
|
},
|
|
144
144
|
"overrides": {
|
|
145
|
+
"@mui/utils": "6.0.0-alpha.9",
|
|
146
|
+
"braces": "3.0.3",
|
|
147
|
+
"eslint-plugin-testing-library": "^5.11.1",
|
|
148
|
+
"jest": "$jest",
|
|
145
149
|
"nth-check": "2.1.0",
|
|
146
150
|
"parse-url": "8.1.0",
|
|
147
151
|
"postcss": "^8.4.31",
|
|
@@ -149,12 +153,9 @@
|
|
|
149
153
|
"remark-parse": "10.0.2",
|
|
150
154
|
"react": "$react",
|
|
151
155
|
"react-dom": "$react-dom",
|
|
152
|
-
"eslint-plugin-testing-library": "^5.11.1",
|
|
153
156
|
"typescript": "5.2.2",
|
|
154
157
|
"webpack-dev-middleware": "6.1.2",
|
|
155
|
-
"
|
|
156
|
-
"@mui/utils": "6.0.0-alpha.9",
|
|
157
|
-
"braces": "3.0.3"
|
|
158
|
+
"ws": "8.17.1"
|
|
158
159
|
},
|
|
159
160
|
"browserslist": [
|
|
160
161
|
">0.2%",
|