diff --git a/docs/components/ComponentsList.tsx b/docs/components/ComponentsList.tsx index be09bab1..ed62f8cd 100644 --- a/docs/components/ComponentsList.tsx +++ b/docs/components/ComponentsList.tsx @@ -38,7 +38,7 @@ interface MenuItemProps extends ActionLinkProps { const NavItems = styled.div``; const MenuItem = styled(ActionLink)( - themed( + themed( ({ selected, theme }) => ` position: relative; display: block; diff --git a/docs/components/Layout.tsx b/docs/components/Layout.tsx index a1c09b91..b7192a2a 100644 --- a/docs/components/Layout.tsx +++ b/docs/components/Layout.tsx @@ -55,14 +55,14 @@ interface ContentColumn { } const ContentColumn = styled('div')( - themed( + themed( ({ hasSidebar, theme }) => ` flex: 1; padding: ${distance.xxlarge} ${distance.xlarge}; ${ hasSidebar ? `margin-left: ${tocColumnWidth}px;` - : `width: ${theme.breakpoints.large}px; + : `width: ${theme.breakpoints.large}px; margin: 0 auto;` } `, diff --git a/docs/components/SectionRenderer.tsx b/docs/components/SectionRenderer.tsx index d4ef8010..adc7a94e 100644 --- a/docs/components/SectionRenderer.tsx +++ b/docs/components/SectionRenderer.tsx @@ -19,7 +19,7 @@ interface SectionRendererProps { } const SectionRenderer: React.SFC = props => { - const { description, content, sections, components, depth, slug, pagePerSection } = props; + const { description, content, sections, components, depth, slug, pagePerSection, name } = props; return (
diff --git a/package-lock.json b/package-lock.json index b7af7549..16a7afc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3214,6 +3214,7 @@ "version": "7.3.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz", "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==", + "dev": true, "requires": { "regenerator-runtime": "^0.12.0" } @@ -3707,6 +3708,11 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@popperjs/core": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz", + "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==" + }, "@types/babel__core": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.2.tgz", @@ -3911,7 +3917,8 @@ "@types/prop-types": { "version": "15.7.4", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", + "dev": true }, "@types/puppeteer": { "version": "1.12.1", @@ -3926,6 +3933,7 @@ "version": "16.14.14", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.14.tgz", "integrity": "sha512-uwIWDYW8LznHzEMJl7ag9St1RsK0gw/xaFZ5+uI1ZM1HndwUgmPH3/wQkSb87GkOVg7shUxnpNW8DcN0AzvG5Q==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3933,13 +3941,27 @@ } }, "@types/react-datepicker": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-2.8.1.tgz", - "integrity": "sha512-N6jCCRufj3TwN33beCf6/hdR0CVxGY0uZpqm+3EFbbdZ5rYTHzfz3kFSQzXOq87yNCYp8yTwyvot0jfCC34jxg==", + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.1.5.tgz", + "integrity": "sha512-KGejyyCiFhBXjHp4AmuzO4W4pfWV9PYFZrBTA56tsuy+jpqQ2Jdx7j44onYomeUSv2B2uqT3OCkOh+dOI8Fy3g==", + "dev": true, "requires": { + "@popperjs/core": "^2.9.2", "@types/react": "*", - "date-fns": "^2.0.0-beta.1", - "popper.js": "^1.14.1" + "date-fns": "^2.0.1", + "react-popper": "^2.2.5" + }, + "dependencies": { + "react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "dev": true, + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + } } }, "@types/react-dom": { @@ -3984,7 +4006,8 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "@types/stack-utils": { "version": "1.0.1", @@ -6915,15 +6938,6 @@ "sha.js": "^2.4.8" } }, - "create-react-context": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", - "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==", - "requires": { - "gud": "^1.0.0", - "warning": "^4.0.3" - } - }, "cross-env": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz", @@ -7091,7 +7105,8 @@ "csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", + "dev": true }, "cwd": { "version": "0.10.0", @@ -10100,11 +10115,6 @@ "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", "dev": true }, - "gud": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", - "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" - }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -16474,11 +16484,6 @@ "integrity": "sha512-1n3Z4p3IOxArEs1VRXnZ/RXdfEniAUS9jb68g58FIXMNkPJeZd+Qh4Uq7/e0LVxAQGos1eIUrqrt4FpjdnEd+Q==", "dev": true }, - "popper.js": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", - "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" - }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -17025,15 +17030,23 @@ "dev": true }, "react-datepicker": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.8.0.tgz", - "integrity": "sha512-TL9YemykqK77hq1LRGIWbLFpHvNfSb8yZr3q1zk5XTGdSLsVtZ6mlXby3zuGwi8sL0+h9SEnNaqK8IeOl0R2iQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.2.1.tgz", + "integrity": "sha512-0gcvHMnX8rS1fV90PjjsB7MQdsWNU77JeVHf6bbwK9HnFxgwjVflTx40ebKmHV+leqe+f+FgUP9Nvqbe5RGyfA==", "requires": { - "classnames": "^2.2.5", - "date-fns": "^v2.0.0-beta.1", - "prop-types": "^15.6.0", - "react-onclickoutside": "^6.7.1", - "react-popper": "^1.0.2" + "@popperjs/core": "^2.9.2", + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.10.0", + "react-popper": "^2.2.5" + }, + "dependencies": { + "react-onclickoutside": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==" + } } }, "react-dev-utils": { @@ -17298,6 +17311,11 @@ "integrity": "sha512-GoqeM3Xadie7XUApXOjkY3Qhs8RkwB/Za4WMedBGrOKH1eTuKGyoAECff7jiVonJchOx6KZ9i8ILO5XIoHB+Tg==", "dev": true }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-group": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-group/-/react-group-1.0.6.tgz", @@ -17339,15 +17357,11 @@ "integrity": "sha512-5Q4Rn7QLEoh7WIe66KFvYIpWJ49GeHoygP1/EtJyZjXKgrWH19Tf0Ty3lWyQzrEEDyLOwUvvmBFSE3dcDdvagA==" }, "react-popper": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz", - "integrity": "sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", "requires": { - "@babel/runtime": "^7.1.2", - "create-react-context": "^0.3.0", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.7", + "react-fast-compare": "^3.0.1", "warning": "^4.0.2" } }, @@ -17604,7 +17618,8 @@ "regenerator-runtime": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "dev": true }, "regenerator-transform": { "version": "0.14.1", @@ -20000,11 +20015,6 @@ "mime-types": "~2.1.18" } }, - "typed-styles": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" - }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/package.json b/package.json index 63796673..7583cfa4 100644 --- a/package.json +++ b/package.json @@ -43,10 +43,9 @@ } }, "dependencies": { - "@types/react-datepicker": "^2.8.0", "date-fns": "^2.3.0", "memoize-one": "^5.1.0", - "react-datepicker": "^2.8.0", + "react-datepicker": "^4.2.1", "react-onclickoutside": "^6.7.1", "typescript-plugin-inner-jsx": "^0.1.9" }, @@ -66,6 +65,7 @@ "@types/jest-image-snapshot": "^2.8.0", "@types/puppeteer": "^1.12.1", "@types/react": "^16.14.14", + "@types/react-datepicker": "^4.1.5", "@types/react-dom": "^16.9.14", "@types/react-onclickoutside": "^6.7.0", "@types/react-router": "^4.4.1", diff --git a/src/components/DateField/CustomReactDatepicker.part.tsx b/src/components/DateField/CustomReactDatepicker.part.tsx index bca29cd1..f88c0d58 100644 --- a/src/components/DateField/CustomReactDatepicker.part.tsx +++ b/src/components/DateField/CustomReactDatepicker.part.tsx @@ -331,7 +331,7 @@ const getHeaderRender = ({ months = defaultMonths, }: { months: CustomReactDatepickerProps['months']; -}): ReactDatePickerProps['renderCustomHeader'] => ({ date, increaseMonth, decreaseMonth, changeYear }) => { +}): ReactDatePickerProps['renderCustomHeader'] => ({ date, increaseMonth, decreaseMonth, changeYear }) => { const monthName = months[date.getMonth()]; const year = date.getFullYear(); return ( @@ -352,7 +352,7 @@ const getHeaderRender = ({ ); }; -export interface CustomReactDatepickerProps extends ReactDatePickerProps { +export interface CustomReactDatepickerProps extends ReactDatePickerProps { months?: Array; weekDays?: Array; } @@ -364,7 +364,7 @@ export const CustomReactDatepicker: React.FC = ({ ...props }) => ( - locale={patchLocale(enGB, weekDays, months)} renderCustomHeader={getHeaderRender({ months })} showMonthYearPicker={showMonthYearPicker} diff --git a/src/components/DateField/DateFieldInt.part.tsx b/src/components/DateField/DateFieldInt.part.tsx index d3367db9..b7e27775 100644 --- a/src/components/DateField/DateFieldInt.part.tsx +++ b/src/components/DateField/DateFieldInt.part.tsx @@ -171,7 +171,7 @@ export interface DateFieldBasicProps extends FormContextProps, TextInputProps { } export type DateFieldProps = DateFieldBasicProps & - Omit; + Omit, keyof typeof excludedReactDatePickerProps>; interface DateFieldState { value: string; @@ -232,15 +232,15 @@ class DateFieldInt extends React.Component { } } - private changeValue: ReactDatePickerProps['onChange'] = inputDate => { + private changeValue: ReactDatePickerProps['onChange'] = inputDate => { const { dateFormat = DefaultDateFormat, locale } = this.props; const date = inputDate || undefined; - const value = safeDateFormat(date, { + const value = safeDateFormat(date as Date, { dateFormat, locale, }); - this.change(date, value); + this.change(date as Date, value); }; private changeInput = (e: React.FocusEvent) => { @@ -322,7 +322,7 @@ class DateFieldInt extends React.Component { ...rest } = this.props; - const datePickerProps = {} as ReactDatePickerProps; + const datePickerProps = {} as ReactDatePickerProps; const customInputProps = {} as Omit; Object.keys(rest).forEach(propName => { if (excludedReactDatePickerProps[propName]) {