cozy-ui 96.1.0 → 96.2.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [96.2.0](https://github.com/cozy/cozy-ui/compare/v96.1.1...v96.2.0) (2023-11-28)
+
+
+### Features
+
+* **NestedSelect:** Add `header` and `childrenHeader` props on `options` ([bf31c73](https://github.com/cozy/cozy-ui/commit/bf31c73))
+* **NestedSelect:** Title is no longer required ([6a776cf](https://github.com/cozy/cozy-ui/commit/6a776cf))
+
+## [96.1.1](https://github.com/cozy/cozy-ui/compare/v96.1.0...v96.1.1) (2023-11-27)
+
+
+### Bug Fixes
+
+* Improve IllustrationDialog layout in native ([2946e9d](https://github.com/cozy/cozy-ui/commit/2946e9d))
+
 # [96.1.0](https://github.com/cozy/cozy-ui/compare/v96.0.0...v96.1.0) (2023-11-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "96.1.0",
+  "version": "96.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/MuiCozyTheme/makeOverrides.js

@@ -506,11 +506,13 @@ export const makeOverrides = theme => ({
             '& .dialogContentWrapper': {
               flexGrow: 1,
               '&:not(.withActions)': {
-                paddingBottom: '16px'
+                paddingBottom:
+                  'calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height) + 16px)'
               }
             },
             '& .cozyDialogActions': {
-              paddingBottom: '16px'
+              paddingBottom:
+                'calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height) + 16px)'
             }
           }
         },

package/react/NestedSelect/BottomSheet.jsx

@@ -11,6 +11,8 @@ import Divider from '../Divider'
 import NestedSelect from './NestedSelect'
 
 const HeaderComponent = ({ title, showBack, onClickBack }) => {
+  if (!title) return null
+
   return (
     <>
       <BottomSheetHeader

package/react/NestedSelect/Modal.jsx

@@ -15,6 +15,9 @@ const NestedSelectDialogHeader = ({ onClickBack, showBack, title }) => {
   const { dialogTitleProps } = useCozyDialog({
     open: true
   })
+
+  if (!title) return null
+
   return (
     <DialogTitle {...dialogTitleProps}>
       <Media>

package/react/NestedSelect/NestedSelect.jsx

@@ -90,16 +90,18 @@ class NestedSelect extends Component {
       transformParentItem,
       radioPosition,
       ellipsis,
+      options,
+      searchOptions,
       noDivider
     } = this.props
     const { history, searchValue, searchResult } = this.state
+
     const current = history[0]
     const children = current.children || []
     const level = history.length - 1
     const isSelectedWithLevel = item => isSelected(item, level)
     const parentItem = transformParentItem(omit(current, 'children'))
 
-    const searchOptions = this.props.searchOptions
     const hasSearchResult = searchValue.length > 0
 
     const onChange = ev => {
@@ -120,6 +122,7 @@ class NestedSelect extends Component {
             onClickBack={this.handleBack}
           />
         ) : null}
+        {level > 0 ? options.childrenHeader : options.header}
         <ContentComponent>
           {canSelectParent && level > 0 ? (
             <ItemRow
@@ -195,7 +198,7 @@ const ItemPropType = PropTypes.shape({
   /** Key used for the item, if not passed, title is used */
   key: PropTypes.string,
   /** Label used for the item */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.node,
   /** Description of the item */
   description: PropTypes.node,
   /** Options below the current one */
@@ -214,6 +217,10 @@ NestedSelect.propTypes = {
 
   /** Options that will be rendered as nested lists of choices */
   options: PropTypes.shape({
+    /** Header shown above options list */
+    header: PropTypes.node,
+    /** Header shown above options list inside a children */
+    childrenHeader: PropTypes.node,
     children: PropTypes.arrayOf(ItemPropType)
   }),
 

package/react/NestedSelect/NestedSelect.md

@@ -17,6 +17,7 @@ import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import palette from 'cozy-ui/transpiled/react/palette'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import Alert from 'cozy-ui/transpiled/react/Alert'
 
 const Image = ({ letter }) => (
   <Circle backgroundColor={palette.melon}>
@@ -42,7 +43,13 @@ const SettingAction = ({ item, onClick }) => {
   )
 }
 
-const options = {
+const makeOptions = withHeaders => ({
+  header: withHeaders ?
+    <Alert className="u-mt-1 u-mh-1" serverity="info" icon={false}>This is a header for options</Alert>
+    : undefined,
+  childrenHeader: withHeaders ?
+    <Alert className="u-mt-1 u-mh-1" serverity="info">This is specific option header for children</Alert>
+    : undefined,
   children: [
     {
       ...letterOption('A', 'is for Apple'),
@@ -78,7 +85,7 @@ const options = {
     letterOption('M'),
     letterOption('N'),
   ]
-}
+})
 
 const transformParentItem = item => ({
   ...item,
@@ -95,7 +102,7 @@ const StaticExample = () => {
       onSelect={x => x}
       dismissAction={x => x}
       isSelected={x => x.title === 'C'}
-      options={options}
+      options={makeOptions()}
       title="Please select letter"
       transformParentItem={transformParentItem}
       componentsProps={{ bottomsheet: { skipAnimation: isTesting() } }}
@@ -151,7 +158,14 @@ const InteractiveExample = () => {
     }, RADIO_BUTTON_ANIM_DURATION)
   }
 
-  const initialVariants = [{ noDivider: false, leftRadio: false, withSearch: false, withEllipsis: true }]
+  const initialVariants = [{
+    noTitle: false,
+    noDivider: false,
+    leftRadio: false,
+    withSearch: false,
+    withEllipsis: true,
+    withHeaders: false
+  }]
 
   return (
     <Variants initialVariants={initialVariants} screenshotAllVariants>
@@ -167,9 +181,9 @@ const InteractiveExample = () => {
               onSelect={handleSelect}
               onClose={hideModal}
               isSelected={isSelected}
-              options={options}
+              options={makeOptions(variant.withHeaders)}
               radioPosition={variant.leftRadio ? 'left' : 'right'}
-              title="Please select letter"
+              title={variant.noTitle ? undefined : "Please select letter"}
               transformParentItem={transformParentItem}
               searchOptions={variant.withSearch ? searchOptions : undefined}
               ellipsis={variant.withEllipsis}

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -471,11 +471,11 @@ export var makeOverrides = function makeOverrides(theme) {
           '& .dialogContentWrapper': {
             flexGrow: 1,
             '&:not(.withActions)': {
-              paddingBottom: '16px'
+              paddingBottom: 'calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height) + 16px)'
             }
           },
           '& .cozyDialogActions': {
-            paddingBottom: '16px'
+            paddingBottom: 'calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height) + 16px)'
           }
         }),
         '& .dialogTitleFluidContainer': _defineProperty({

package/transpiled/react/NestedSelect/BottomSheet.js

@@ -14,6 +14,7 @@ var HeaderComponent = function HeaderComponent(_ref) {
   var title = _ref.title,
       showBack = _ref.showBack,
       onClickBack = _ref.onClickBack;
+  if (!title) return null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomSheetHeader, {
     className: cx('u-h-3', {
       'u-pl-half u-pr-3': showBack

package/transpiled/react/NestedSelect/Modal.js

@@ -22,6 +22,7 @@ var NestedSelectDialogHeader = function NestedSelectDialogHeader(_ref) {
   }),
       dialogTitleProps = _useCozyDialog.dialogTitleProps;
 
+  if (!title) return null;
   return /*#__PURE__*/React.createElement(DialogTitle, dialogTitleProps, /*#__PURE__*/React.createElement(Media, null, showBack && /*#__PURE__*/React.createElement(Img, {
     className: styles.Modal__back
   }, /*#__PURE__*/React.createElement(IconButton, {

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -129,6 +129,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           transformParentItem = _this$props.transformParentItem,
           radioPosition = _this$props.radioPosition,
           ellipsis = _this$props.ellipsis,
+          options = _this$props.options,
+          searchOptions = _this$props.searchOptions,
           noDivider = _this$props.noDivider;
       var _this$state = this.state,
           history = _this$state.history,
@@ -143,7 +145,6 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
       };
 
       var parentItem = transformParentItem(omit(current, 'children'));
-      var searchOptions = this.props.searchOptions;
       var hasSearchResult = searchValue.length > 0;
 
       var onChange = function onChange(ev) {
@@ -167,7 +168,7 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
         title: current.title || title,
         showBack: history.length > 1,
         onClickBack: this.handleBack
-      }) : null, /*#__PURE__*/React.createElement(ContentComponent, null, canSelectParent && level > 0 ? /*#__PURE__*/React.createElement(ItemRow, {
+      }) : null, level > 0 ? options.childrenHeader : options.header, /*#__PURE__*/React.createElement(ContentComponent, null, canSelectParent && level > 0 ? /*#__PURE__*/React.createElement(ItemRow, {
         radioPosition: radioPosition,
         item: parentItem,
         onClick: this.handleClickItem,
@@ -227,7 +228,7 @@ var ItemPropType = PropTypes.shape({
   key: PropTypes.string,
 
   /** Label used for the item */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.node,
 
   /** Description of the item */
   description: PropTypes.node,
@@ -247,6 +248,11 @@ NestedSelect.propTypes = {
 
   /** Options that will be rendered as nested lists of choices */
   options: PropTypes.shape({
+    /** Header shown above options list */
+    header: PropTypes.node,
+
+    /** Header shown above options list inside a children */
+    childrenHeader: PropTypes.node,
     children: PropTypes.arrayOf(ItemPropType)
   }),