@paygreen/pgui 2.14.1 → 2.14.3
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/index.js +5447 -5322
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/InputDayPicker/index.d.ts +4 -1
- package/dist/cjs/types/components/InputRangePicker/index.d.ts +5 -3
- package/dist/esm/index.js +5447 -5322
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/InputDayPicker/index.d.ts +4 -1
- package/dist/esm/types/components/InputRangePicker/index.d.ts +5 -3
- package/dist/index.d.ts +9 -4
- package/package.json +14 -11
|
@@ -13,5 +13,8 @@ export type InputDayPickerProps = {
|
|
|
13
13
|
isDisabled?: boolean;
|
|
14
14
|
inputProps?: any;
|
|
15
15
|
dayPickerProps?: any;
|
|
16
|
+
isOpen?: boolean;
|
|
17
|
+
onOpen?: () => void;
|
|
18
|
+
onClose?: () => void;
|
|
16
19
|
};
|
|
17
|
-
export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, }: InputDayPickerProps) => React.JSX.Element;
|
|
20
|
+
export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, isOpen: isOpenProp, onOpen: onOpenProp, onClose: onCloseProp, }: InputDayPickerProps) => React.JSX.Element;
|
|
@@ -13,11 +13,13 @@ export type InputRangePickerProps = {
|
|
|
13
13
|
locale?: 'fr' | 'en';
|
|
14
14
|
variant?: 'filled' | 'outline';
|
|
15
15
|
withTime?: boolean;
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
minStartDate?: Date | null | undefined;
|
|
17
|
+
maxStartDate?: Date | null | undefined;
|
|
18
|
+
minEndDate?: Date | null | undefined;
|
|
19
|
+
maxEndDate?: Date | null | undefined;
|
|
18
20
|
isDisabled?: boolean;
|
|
19
21
|
breakpoint?: 'base' | 'sm' | 'md' | 'lg';
|
|
20
22
|
inputProps?: any;
|
|
21
23
|
dayPickerProps?: any;
|
|
22
24
|
};
|
|
23
|
-
export declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale,
|
|
25
|
+
export declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minStartDate, maxStartDate, minEndDate, maxEndDate, variant, breakpoint, inputProps, dayPickerProps, }: InputRangePickerProps) => React.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -91,8 +91,11 @@ type InputDayPickerProps = {
|
|
|
91
91
|
isDisabled?: boolean;
|
|
92
92
|
inputProps?: any;
|
|
93
93
|
dayPickerProps?: any;
|
|
94
|
+
isOpen?: boolean;
|
|
95
|
+
onOpen?: () => void;
|
|
96
|
+
onClose?: () => void;
|
|
94
97
|
};
|
|
95
|
-
declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, }: InputDayPickerProps) => React.JSX.Element;
|
|
98
|
+
declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, isOpen: isOpenProp, onOpen: onOpenProp, onClose: onCloseProp, }: InputDayPickerProps) => React.JSX.Element;
|
|
96
99
|
|
|
97
100
|
var css_248z = "/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: currentColor;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom,\r\n\t so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled],\r\n.PhoneInputCountrySelect[readonly] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}";
|
|
98
101
|
styleInject(css_248z);
|
|
@@ -122,14 +125,16 @@ type InputRangePickerProps = {
|
|
|
122
125
|
locale?: 'fr' | 'en';
|
|
123
126
|
variant?: 'filled' | 'outline';
|
|
124
127
|
withTime?: boolean;
|
|
125
|
-
|
|
126
|
-
|
|
128
|
+
minStartDate?: Date | null | undefined;
|
|
129
|
+
maxStartDate?: Date | null | undefined;
|
|
130
|
+
minEndDate?: Date | null | undefined;
|
|
131
|
+
maxEndDate?: Date | null | undefined;
|
|
127
132
|
isDisabled?: boolean;
|
|
128
133
|
breakpoint?: 'base' | 'sm' | 'md' | 'lg';
|
|
129
134
|
inputProps?: any;
|
|
130
135
|
dayPickerProps?: any;
|
|
131
136
|
};
|
|
132
|
-
declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale,
|
|
137
|
+
declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minStartDate, maxStartDate, minEndDate, maxEndDate, variant, breakpoint, inputProps, dayPickerProps, }: InputRangePickerProps) => React.JSX.Element;
|
|
133
138
|
|
|
134
139
|
type ModalResponsiveProps = ModalProps & DrawerProps;
|
|
135
140
|
declare const ModalResponsive: ({ isOpen, onClose, finalFocusRef, children, ...rest }: ModalResponsiveProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paygreen/pgui",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.3",
|
|
4
4
|
"description": "PGUI is the design system coming from Paygreen.",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -51,19 +51,22 @@
|
|
|
51
51
|
"@babel/preset-typescript": "^7.23.3",
|
|
52
52
|
"@chakra-ui/react": "^2.8.2",
|
|
53
53
|
"@chakra-ui/theme-tools": "^2.1.2",
|
|
54
|
+
"@chromatic-com/storybook": "^1.5.0",
|
|
54
55
|
"@emotion/react": "^11.11.3",
|
|
55
56
|
"@emotion/styled": "^11.11.0",
|
|
56
57
|
"@rollup/plugin-commonjs": "^22.0.2",
|
|
57
58
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
58
59
|
"@rollup/plugin-typescript": "11.1.5",
|
|
59
|
-
"@storybook/addon-actions": "^
|
|
60
|
-
"@storybook/addon-docs": "^
|
|
61
|
-
"@storybook/addon-essentials": "^
|
|
62
|
-
"@storybook/addon-interactions": "^
|
|
63
|
-
"@storybook/addon-links": "^
|
|
64
|
-
"@storybook/
|
|
65
|
-
"@storybook/
|
|
66
|
-
"@storybook/
|
|
60
|
+
"@storybook/addon-actions": "^8.1.6",
|
|
61
|
+
"@storybook/addon-docs": "^8.1.6",
|
|
62
|
+
"@storybook/addon-essentials": "^8.1.6",
|
|
63
|
+
"@storybook/addon-interactions": "^8.1.6",
|
|
64
|
+
"@storybook/addon-links": "^8.1.6",
|
|
65
|
+
"@storybook/addon-themes": "^8.1.6",
|
|
66
|
+
"@storybook/addon-webpack5-compiler-swc": "^1.0.3",
|
|
67
|
+
"@storybook/react": "^8.1.6",
|
|
68
|
+
"@storybook/react-webpack5": "^8.1.6",
|
|
69
|
+
"@storybook/test": "^8.1.6",
|
|
67
70
|
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
|
68
71
|
"@types/react": "^18.2.47",
|
|
69
72
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
@@ -86,7 +89,7 @@
|
|
|
86
89
|
"eslint-plugin-prettier": "^4.2.1",
|
|
87
90
|
"eslint-plugin-react": "^7.33.2",
|
|
88
91
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
89
|
-
"eslint-plugin-storybook": "^0.
|
|
92
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
90
93
|
"framer-motion": "4.1.17",
|
|
91
94
|
"husky": "^8.0.3",
|
|
92
95
|
"lint-staged": "^13.3.0",
|
|
@@ -108,7 +111,7 @@
|
|
|
108
111
|
"rollup-plugin-terser": "^7.0.2",
|
|
109
112
|
"sass": "^1.69.7",
|
|
110
113
|
"sass-loader": "^12.6.0",
|
|
111
|
-
"storybook": "^
|
|
114
|
+
"storybook": "^8.1.6",
|
|
112
115
|
"style-loader": "^2.0.0",
|
|
113
116
|
"tslib": "^2.6.2",
|
|
114
117
|
"typescript": "^4.9.5"
|