venice-ui 2.0.25 → 2.0.27

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.
Files changed (12) hide show
  1. package/dist/cjs/components/DatePicker/Calendar.js +2 -2
  2. package/dist/cjs/components/DatePicker/DatePicker.js +2 -2
  3. package/dist/cjs/components/DatePicker/DatePiocker.styles.js +3 -3
  4. package/dist/cjs/components/Form/Form.js +1 -1
  5. package/dist/esm/components/DatePicker/Calendar.js +2 -2
  6. package/dist/esm/components/DatePicker/DatePicker.js +2 -2
  7. package/dist/esm/components/DatePicker/DatePiocker.styles.js +3 -3
  8. package/dist/esm/components/Form/Form.js +1 -1
  9. package/dist/types/components/DatePicker/Calendar.d.ts +1 -0
  10. package/dist/types/components/DatePicker/DatePicker.d.ts +1 -0
  11. package/dist/types/components/DatePicker/DatePiocker.styles.d.ts +1 -0
  12. package/package.json +1 -1
package/dist/cjs/components/DatePicker/Calendar.js CHANGED
@@ -31,7 +31,7 @@ const CalendarHeader_1 = require("./CalendarHeader");
31
31
  const date_fns_1 = require("date-fns");
32
32
  const CalendarContent_1 = require("./CalendarContent");
33
33
  const ButtonsFooter_1 = require("../ButtonsFooter");
34
- const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
34
+ const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex }) => {
35
35
  const [calendarSettings, updateCalendarSettings] = (0, react_1.useState)({
36
36
  mode: 'day',
37
37
  value: 0,
@@ -82,7 +82,7 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
82
82
  };
83
83
  console.log(top);
84
84
  return (react_1.default.createElement(react_1.default.Fragment, null,
85
- react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size },
85
+ react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
86
86
  react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
87
87
  react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
88
88
  react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
package/dist/cjs/components/DatePicker/DatePicker.js CHANGED
@@ -35,7 +35,7 @@ const react_dom_1 = require("react-dom");
35
35
  const Calendar_1 = require("./Calendar");
36
36
  const date_fns_1 = require("date-fns");
37
37
  const Icons_1 = require("../Icons");
38
- const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, }) => {
38
+ const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
39
39
  const [open, toogleOpen] = (0, react_1.useState)(false);
40
40
  const sourceRef = (0, react_1.useRef)(null);
41
41
  const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
@@ -71,6 +71,6 @@ const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = fals
71
71
  value && (react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
72
72
  react_1.default.createElement(Icons_1.Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
73
73
  open &&
74
- (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit }), document.body)))))));
74
+ (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit, zIndex: zIndex }), document.body)))))));
75
75
  };
76
76
  exports.DatePicker = DatePicker;
package/dist/cjs/components/DatePicker/DatePiocker.styles.js CHANGED
@@ -32,9 +32,9 @@ exports.CalendarWrapper = styled_components_1.default.div `
32
32
  height: auto;
33
33
  width: 326px;
34
34
  position: absolute;
35
- z-index: ${Theme_1.Theme.zIndex.dropdown};
36
- left: ${p => p.left}px;
37
- top: ${p => p.top}px;
35
+ z-index: ${(p) => (p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown)};
36
+ left: ${(p) => p.left}px;
37
+ top: ${(p) => p.top}px;
38
38
  border: 1px solid ${Theme_1.Theme.colors.gray_2};
39
39
  border-top: none;
40
40
  min-width: 30px;
package/dist/cjs/components/Form/Form.js CHANGED
@@ -53,7 +53,7 @@ const Form = ({ formData, size = 'medium', read }) => {
53
53
  case 'file':
54
54
  return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
55
55
  case 'date':
56
- return (react_1.default.createElement(DatePicker_1.DatePicker, { label: item.label, value: item.value, name: item.name, size: size, handleChange: onDateChangeHandler }));
56
+ return (react_1.default.createElement(DatePicker_1.DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex }));
57
57
  }
58
58
  };
59
59
  return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {
package/dist/esm/components/DatePicker/Calendar.js CHANGED
@@ -5,7 +5,7 @@ import { CalendarHeader } from './CalendarHeader';
5
5
  import { addMonths, addYears, getTime, getYear, subMonths, subYears, } from 'date-fns';
6
6
  import { CalendarContent } from './CalendarContent';
7
7
  import { ButtonsFooter } from '../ButtonsFooter';
8
- export const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
8
+ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, zIndex }) => {
9
9
  const [calendarSettings, updateCalendarSettings] = useState({
10
10
  mode: 'day',
11
11
  value: 0,
@@ -56,7 +56,7 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, })
56
56
  };
57
57
  console.log(top);
58
58
  return (React.createElement(React.Fragment, null,
59
- React.createElement(CalendarWrapper, { top: top, left: left, size: size },
59
+ React.createElement(CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
60
60
  React.createElement(Aligment, { direction: "row" },
61
61
  React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
62
62
  React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
package/dist/esm/components/DatePicker/DatePicker.js CHANGED
@@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
9
9
  import { Calendar } from './Calendar';
10
10
  import { format } from 'date-fns';
11
11
  import { Icon } from '../Icons';
12
- export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, }) => {
12
+ export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, zIndex }) => {
13
13
  const [open, toogleOpen] = useState(false);
14
14
  const sourceRef = useRef(null);
15
15
  const [dropdownStyles, setDropdownStyles] = useState({
@@ -45,5 +45,5 @@ export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled
45
45
  value && (React.createElement(EyeIconWrapper, { size: size },
46
46
  React.createElement(Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
47
47
  open &&
48
- createPortal(React.createElement(Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit }), document.body)))))));
48
+ createPortal(React.createElement(Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit, zIndex: zIndex }), document.body)))))));
49
49
  };
package/dist/esm/components/DatePicker/DatePiocker.styles.js CHANGED
@@ -26,9 +26,9 @@ export const CalendarWrapper = styled.div `
26
26
  height: auto;
27
27
  width: 326px;
28
28
  position: absolute;
29
- z-index: ${Theme.zIndex.dropdown};
30
- left: ${p => p.left}px;
31
- top: ${p => p.top}px;
29
+ z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
30
+ left: ${(p) => p.left}px;
31
+ top: ${(p) => p.top}px;
32
32
  border: 1px solid ${Theme.colors.gray_2};
33
33
  border-top: none;
34
34
  min-width: 30px;
package/dist/esm/components/Form/Form.js CHANGED
@@ -47,7 +47,7 @@ export const Form = ({ formData, size = 'medium', read }) => {
47
47
  case 'file':
48
48
  return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
49
49
  case 'date':
50
- return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, handleChange: onDateChangeHandler }));
50
+ return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex }));
51
51
  }
52
52
  };
53
53
  return (React.createElement(FormWrapper, null, formData.data.map((item) => {
package/dist/types/components/DatePicker/Calendar.d.ts CHANGED
@@ -8,6 +8,7 @@ interface ICalendar {
8
8
  handleClose: () => void;
9
9
  handleSelect: (date: number) => void;
10
10
  open: boolean;
11
+ zIndex?: number;
11
12
  }
12
13
  export declare const Calendar: FC<ICalendar>;
13
14
  export {};
package/dist/types/components/DatePicker/DatePicker.d.ts CHANGED
@@ -4,5 +4,6 @@ export interface IDatePicker extends IFormElement {
4
4
  theme?: any;
5
5
  position?: string;
6
6
  handleChange: (name: string, value: string | number | undefined) => void;
7
+ zIndex?: number;
7
8
  }
8
9
  export declare const DatePicker: FC<IDatePicker>;
package/dist/types/components/DatePicker/DatePiocker.styles.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ICalendarStyle {
5
5
  size: InputSize;
6
6
  top: number;
7
7
  left: number;
8
+ zIndex?: number;
8
9
  }
9
10
  export declare const CalendarWrapper: import("styled-components").StyledComponent<"div", any, ICalendarStyle, never>;
10
11
  export declare const CalendarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.0.25",
3
+ "version": "2.0.27",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",