venice-ui 2.0.26 → 2.0.28

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 +3 -4
  2. package/dist/cjs/components/DatePicker/DatePicker.js +2 -2
  3. package/dist/cjs/components/DatePicker/DatePiocker.styles.js +1 -2
  4. package/dist/cjs/components/Form/Form.js +1 -1
  5. package/dist/esm/components/DatePicker/Calendar.js +3 -4
  6. package/dist/esm/components/DatePicker/DatePicker.js +2 -2
  7. package/dist/esm/components/DatePicker/DatePiocker.styles.js +1 -2
  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 +4 -1
  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,
@@ -80,13 +80,12 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
80
80
  const setToday = () => {
81
81
  setSellectedDate(new Date());
82
82
  };
83
- console.log(top);
84
83
  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 },
84
+ react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
86
85
  react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
87
86
  react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
88
87
  react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
89
88
  react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
90
- react_1.default.createElement(DatePiocker_styles_1.CalendarOverlay, null)));
89
+ react_1.default.createElement(DatePiocker_styles_1.CalendarOverlay, { zIndex: zIndex })));
91
90
  };
92
91
  exports.Calendar = Calendar;
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
@@ -13,7 +13,7 @@ exports.CalendarOverlay = styled_components_1.default.div `
13
13
  left: 0;
14
14
  width: 100%;
15
15
  height: 100vh;
16
- z-index: 799;
16
+ z-index: ${(p) => (p.zIndex ? p.zIndex - 1 : Theme_1.Theme.zIndex.dropdown - 1)};
17
17
  `;
18
18
  exports.DatePiockerElement = styled_components_1.default.div `
19
19
  position: relative;
@@ -22,7 +22,6 @@ exports.DatePiockerElement = styled_components_1.default.div `
22
22
  box-sizing: border-box;
23
23
  width: 100%;
24
24
  `;
25
- // ToDo fix ma "top"!!!
26
25
  exports.CalendarWrapper = styled_components_1.default.div `
27
26
  box-sizing: border-box;
28
27
  background-color: ${Theme_1.Theme.colors.white};
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, readOnly: read, 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,
@@ -54,12 +54,11 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, })
54
54
  const setToday = () => {
55
55
  setSellectedDate(new Date());
56
56
  };
57
- console.log(top);
58
57
  return (React.createElement(React.Fragment, null,
59
- React.createElement(CalendarWrapper, { top: top, left: left, size: size },
58
+ React.createElement(CalendarWrapper, { top: top, left: left, size: size, zIndex: zIndex },
60
59
  React.createElement(Aligment, { direction: "row" },
61
60
  React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
62
61
  React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
63
62
  React.createElement(ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
64
- React.createElement(CalendarOverlay, null)));
63
+ React.createElement(CalendarOverlay, { zIndex: zIndex })));
65
64
  };
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
@@ -7,7 +7,7 @@ export const CalendarOverlay = styled.div `
7
7
  left: 0;
8
8
  width: 100%;
9
9
  height: 100vh;
10
- z-index: 799;
10
+ z-index: ${(p) => (p.zIndex ? p.zIndex - 1 : Theme.zIndex.dropdown - 1)};
11
11
  `;
12
12
  export const DatePiockerElement = styled.div `
13
13
  position: relative;
@@ -16,7 +16,6 @@ export const DatePiockerElement = styled.div `
16
16
  box-sizing: border-box;
17
17
  width: 100%;
18
18
  `;
19
- // ToDo fix ma "top"!!!
20
19
  export const CalendarWrapper = styled.div `
21
20
  box-sizing: border-box;
22
21
  background-color: ${Theme.colors.white};
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, readOnly: read, 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
@@ -1,5 +1,8 @@
1
1
  import { InputSize } from 'types';
2
- export declare const CalendarOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ interface ICalendarOverlayProps {
3
+ zIndex?: number;
4
+ }
5
+ export declare const CalendarOverlay: import("styled-components").StyledComponent<"div", any, ICalendarOverlayProps, never>;
3
6
  export declare const DatePiockerElement: import("styled-components").StyledComponent<"div", any, {}, never>;
4
7
  interface ICalendarStyle {
5
8
  size: InputSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.0.26",
3
+ "version": "2.0.28",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",