feat: merge master 9.14.0 into alpha

CHANGELOG.md

@@ -1,3 +1,38 @@
+# [9.12.0](https://github.com/dhis2/ui/compare/v9.11.8...v9.12.0) (2024-10-29)
+
+
+### Features
+
+* **icons:** add link-off icons ([e72be1e](https://github.com/dhis2/ui/commit/e72be1ec672fd16072a33ec057ccc3413713abeb))
+
+## [9.11.8](https://github.com/dhis2/ui/compare/v9.11.7...v9.11.8) (2024-10-15)
+
+
+### Bug Fixes
+
+* **sharing-dialog:** add 'route' to SharingType type ([#1617](https://github.com/dhis2/ui/issues/1617)) ([1d9664a](https://github.com/dhis2/ui/commit/1d9664a80410f8ea6a8a4a4a7c3f6acc36a74587))
+
+## [9.11.7](https://github.com/dhis2/ui/compare/v9.11.6...v9.11.7) (2024-10-01)
+
+
+### Bug Fixes
+
+* revert "fix: select-field not showing in correct place" ([#1614](https://github.com/dhis2/ui/issues/1614)) ([c83de6b](https://github.com/dhis2/ui/commit/c83de6b0a8993ac16a87a3351ec96ff1aa43151b))
+
+## [9.11.6](https://github.com/dhis2/ui/compare/v9.11.5...v9.11.6) (2024-09-29)
+
+
+### Bug Fixes
+
+* **translations:** sync translations from transifex (master) ([491bf04](https://github.com/dhis2/ui/commit/491bf0477e8990e591b32ebfb32e6837f5e563b3))
+
+## [9.11.5](https://github.com/dhis2/ui/compare/v9.11.4...v9.11.5) (2024-09-26)
+
+
+### Bug Fixes
+
+* update default props to JS default params ([#1598](https://github.com/dhis2/ui/issues/1598)) ([20e343f](https://github.com/dhis2/ui/commit/20e343fc9e34570dcd8678ddb449d48c5b62a140))
+
 # [10.0.0-alpha.6](https://github.com/dhis2/ui/compare/v10.0.0-alpha.5...v10.0.0-alpha.6) (2024-10-29)
 
 

collections/ui/API.md

@@ -796,7 +796,7 @@ import { Input } from '@dhis2/ui'
 |role|string|||Sets a role attribute on the input|
 |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
 |tabIndex|string||||
-|type|'text' │ 'number' │ 'password' │ 'email' │ 'url' │ 'tel' │ 'date' │ 'datetime' │ 'datetime-local' │ 'month' │ 'week' │ 'time' │ 'search'|`'text'`||The native input `type` attribute|
+|type|inputTypes|`'text'`||The native input `type` attribute|
 |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
 |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
 |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props|
@@ -840,7 +840,7 @@ import { InputField } from '@dhis2/ui'
 |required|boolean|||Indicates this input is required|
 |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`|
 |tabIndex|string||||
-|type|custom|||Type of input|
+|type|inputTypes|||Type of input|
 |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props|
 |validationText|string|||Text below input for validation feedback. Receives styles depending on validation status|
 |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object|
@@ -1462,7 +1462,7 @@ import { Pagination } from '@dhis2/ui'
 |pageSelectText|string │ function|`() => i18n.t('Page')`|||
 |pageSizeSelectText|string │ function|`() => i18n.t('Items per page')`|||
 |pageSizes|arrayOf(string)|`['5', '10', '20', '30', '40', '50', '75', '100']`|||
-|pageSummaryText|string │ function|`getDefaultPageSummaryText`|||
+|pageSummaryText|string │ function||||
 |previousPageText|string │ function|`() => i18n.t('Previous')`|||
 |total|number||||
 |onPageChange|function||||
@@ -2707,7 +2707,7 @@ import { TableHead } from '@dhis2/ui'
 |---|---|---|---|---|
 |children|node|||Should be `<TableRowHead>` components|
 |className|string||||
-|dataTest|string|`'dhis2-uicore-tablehead'`|||
+|dataTest|string||||
 |role|string||||
 
 ### TableRow

components/alert/src/alert-bar/alert-bar.js

@@ -13,10 +13,10 @@
     children,
     className,
     critical,
-    dataTest,
-    duration,
+    dataTest = 'dhis2-uicore-alertbar',
+    duration = 8000,
     hidden,
-    icon,
+    icon = true,
     permanent,
     success,
     warning,
@@ -98,7 +98,7 @@
         }
 
         return clearAllTimeouts
     }, [hidden])
 
     return !inDOM ? null : (
         <div
@@ -142,12 +142,6 @@
     PropTypes.bool
 )
 
-AlertBar.defaultProps = {
-    duration: 8000,
-    dataTest: 'dhis2-uicore-alertbar',
-    icon: true,
-}
-
 AlertBar.propTypes = {
     /** An array of 0-2 action objects 
 `[{label: "Save", onClick: clickHandler}]`*/

components/alert/src/alert-bar/icon.js

@@ -9,7 +9,7 @@ import {
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
+const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => {
     if (error) {
         return <IconErrorFilled24 color={colors.white} />
     }
@@ -26,10 +26,6 @@ const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
     return defaultTo
 }
 
-StatusIcon.defaultProps = {
-    defaultTo: null,
-}
-
 StatusIcon.propTypes = {
     defaultTo: PropTypes.element,
     error: PropTypes.bool,

components/alert/src/alert-stack/alert-stack.js

@@ -4,7 +4,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const AlertStack = ({ className, children, dataTest }) => (
+export const AlertStack = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-alertstack',
+}) => (
     <Portal>
         <div className={cx(className)} data-test={dataTest}>
             {children}
@@ -33,10 +37,6 @@ export const AlertStack = ({ className, children, dataTest }) => (
     </Portal>
 )
 
-AlertStack.defaultProps = {
-    dataTest: 'dhis2-uicore-alertstack',
-}
-
 AlertStack.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

components/box/src/box.js

@@ -11,7 +11,7 @@ export const Box = ({
     maxWidth,
     marginTop,
     children,
-    dataTest,
+    dataTest = 'dhis2-uicore-box',
     className,
 }) => (
     <div data-test={dataTest} className={className}>
@@ -31,10 +31,6 @@ export const Box = ({
     </div>
 )
 
-Box.defaultProps = {
-    dataTest: 'dhis2-uicore-box',
-}
-
 Box.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

components/button/src/button-strip/button-strip.js

@@ -4,7 +4,13 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Children } from 'react'
 
-const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
+const ButtonStrip = ({
+    className,
+    children,
+    middle,
+    end,
+    dataTest = 'dhis2-uicore-buttonstrip',
+}) => (
     <div
         className={cx(className, { start: !middle && !end, middle, end })}
         data-test={dataTest}
@@ -39,10 +45,6 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
 
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool)
 
-ButtonStrip.defaultProps = {
-    dataTest: 'dhis2-uicore-buttonstrip',
-}
-
 ButtonStrip.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

components/button/src/button/button.js

@@ -8,7 +8,7 @@
 export const Button = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-button',
     destructive,
     disabled,
     icon,
@@ -20,7 +20,7 @@
     small,
     tabIndex,
     toggled,
-    type,
+    type = 'button',
     value,
     onBlur,
     onClick,
@@ -35,7 +35,7 @@
         if (initialFocus && ref.current) {
             ref.current.focus()
         }
     }, [initialFocus, ref.current])
 
     const { 'aria-label': ariaLabel, title } = otherProps
 
@@ -94,11 +94,6 @@
     )
 }
 
-Button.defaultProps = {
-    type: 'button',
-    dataTest: 'dhis2-uicore-button',
-}
-
 Button.propTypes = {
     /** Component to render inside the button */
     children: PropTypes.node,

components/button/src/dropdown-button/dropdown-button.js

@@ -67,6 +67,10 @@ class DropdownButton extends Component {
         open: false,
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-dropdownbutton',
+    }
+
     anchorRef = React.createRef()
 
     componentDidMount() {
@@ -124,7 +128,7 @@ class DropdownButton extends Component {
             tabIndex,
             type,
             initialFocus,
-            dataTest,
+            dataTest = 'dhis2-uicore-dropdownbutton',
         } = this.props
         const open =
             typeof this.props.open === 'boolean'
@@ -181,10 +185,6 @@ class DropdownButton extends Component {
     }
 }
 
-DropdownButton.defaultProps = {
-    dataTest: 'dhis2-uicore-dropdownbutton',
-}
-
 DropdownButton.propTypes = {
     /** Children to render inside the buton */
     children: PropTypes.node,

components/button/src/split-button/split-button.js

@@ -20,6 +20,10 @@ class SplitButton extends Component {
         open: false,
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-splitbutton',
+    }
+
     anchorRef = React.createRef()
 
     componentDidMount() {
@@ -72,7 +76,7 @@ class SplitButton extends Component {
             disabled,
             type,
             tabIndex,
-            dataTest,
+            dataTest = 'dhis2-uicore-splitbutton',
             initialFocus,
         } = this.props
 
@@ -159,10 +163,6 @@ class SplitButton extends Component {
     }
 }
 
-SplitButton.defaultProps = {
-    dataTest: 'dhis2-uicore-splitbutton',
-}
-
 SplitButton.propTypes = {
     children: PropTypes.string,
     className: PropTypes.string,

components/calendar/src/calendar-input/calendar-input.js

@@ -37,6 +37,7 @@ export const CalendarInput = ({
     format,
     strictValidation,
     inputWidth,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
 } = {}) => {
     const ref = useRef()
@@ -147,6 +148,7 @@ export const CalendarInput = ({
                 <InputField
                     label={i18n.t('Pick a date')}
                     {...rest}
+                    dataTest={dataTest}
                     type="text"
                     onFocus={onFocus}
                     value={partialDate}

components/calendar/src/calendar/calendar.js

@@ -13,10 +13,10 @@ export const Calendar = ({
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize,
+    width = '240px',
+    cellSize = '32px',
 }) => {
     const [selectedDateString, setSelectedDateString] = useState(date)
     const languageDirection = useResolvedDirection(dir, locale)
@@ -70,12 +70,6 @@ export const Calendar = ({
     )
 }
 
-Calendar.defaultProps = {
-    cellSize: '32px',
-    width: '240px',
-    weekDayFormat: 'narrow',
-}
-
 export const CalendarProps = {
     /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
     calendar: PropTypes.any.isRequired,

components/calendar/src/stories/calendar-story-wrapper.js

@@ -6,13 +6,13 @@ import { Calendar } from '../calendar/calendar.js'
 const { calendars, numberingSystems } = constants
 export const CalendarStoryWrapper = (props) => {
     const {
-        calendar,
+        calendar = 'gregory',
         locale,
         timeZone,
         dir,
-        component: Component,
+        component: Component = Calendar,
         date,
-        weekDayFormat,
+        weekDayFormat = 'narrow',
     } = props
     const [selectedCalendar, setSelectedCalendar] = useState(calendar)
     const [selectedNumberingSystem, setSelectedNumberingSystem] = useState()
@@ -150,12 +150,6 @@ export const CalendarStoryWrapper = (props) => {
     )
 }
 
-CalendarStoryWrapper.defaultProps = {
-    calendar: 'gregorian',
-    component: Calendar,
-    weekDayFormat: 'narrow',
-}
-
 CalendarStoryWrapper.propTypes = {
     calendar: PropTypes.string.isRequired,
     component: PropTypes.elementType.isRequired,

components/card/src/card.js

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Card = ({ className, children, dataTest }) => (
+const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
     <div className={cx(className)} data-test={dataTest}>
         {children}
 
@@ -23,10 +23,6 @@ const Card = ({ className, children, dataTest }) => (
     </div>
 )
 
-Card.defaultProps = {
-    dataTest: 'dhis2-uicore-card',
-}
-
 Card.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,