@hipay/hipay-material-ui 1.0.0-beta.11 → 1.0.0-beta.13

package/HiTable/BodyCellBuilder.js

@@ -127,7 +127,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 onOpenDetails = _props.onOpenDetails,
                 lookedUp = _props.lookedUp,
                 fixedColumnWidth = _props.fixedColumnWidth,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
+                disableContextMenu = _props.disableContextMenu,
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
 
 
             var layoutProps = {
@@ -150,7 +151,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
             if (typeof data !== 'undefined') {
 
                 var cellElement = void 0;
-                var hasContextMenu = true;
 
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
@@ -200,7 +200,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             displayTime: props.displayTime,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_ICON:
@@ -229,7 +228,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             view: view,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_RATE:
@@ -242,7 +240,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             view: view,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_SENTINEL:
@@ -287,14 +284,14 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         break;
                 }
 
-                cellContent = hasContextMenu ? _react2.default.createElement(
+                cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
                     _reactContextmenu.ContextMenuTrigger,
                     {
                         id: 'hitable_context_menu_' + this.props.tabId,
                         collect: this.collectContextMenuDatas
                     },
                     cellElement
-                ) : cellElement;
+                );
             }
 
             return _react2.default.createElement(
@@ -308,7 +305,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right'
+    ellipsis: 'right',
+    disableContextMenu: true
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -340,6 +338,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Ellipsis
      */

package/HiTable/BodyCells/CellImage.js

@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
         },
         center: {
             textAlign: 'center'
+        },
+        tooltipContainer: {
+            display: 'flex',
+            alignItems: 'center'
         }
     };
 };
@@ -113,7 +117,7 @@ var CellImage = function (_React$PureComponent) {
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
+                { className: classes.tooltipContainer },
                 _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
                 _react2.default.createElement(
                     'span',

package/HiTable/HiTable.js

@@ -67,6 +67,10 @@ var _HiTableFooterScroll = require('./HiTableFooterScroll');
 
 var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
 
+var _HiTableFooter = require('./HiTableFooter');
+
+var _HiTableFooter2 = _interopRequireDefault(_HiTableFooter);
+
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -707,7 +711,9 @@ var HiTable = function (_React$Component) {
                 groupBy = _props.groupBy,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu,
+                footerContent = _props.footerContent;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -716,6 +722,13 @@ var HiTable = function (_React$Component) {
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
+            var nbColumnsDisplayed = 0;
+            orderedColumns.forEach(function (column) {
+                if (column.displayed !== false) {
+                    nbColumnsDisplayed += 1;
+                }
+            });
+
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
@@ -785,7 +798,8 @@ var HiTable = function (_React$Component) {
                             groupByIds: groupByIds,
                             lookupColumns: lookupColumns,
                             loading: loading,
-                            fixedColumnWidth: fixedColumnWidth
+                            fixedColumnWidth: fixedColumnWidth,
+                            disableContextMenu: disableContextMenu
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -794,7 +808,15 @@ var HiTable = function (_React$Component) {
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
                             translations: translations
-                        })
+                        }),
+                        !infiniteScroll && footerContent && _react2.default.createElement(
+                            _HiTableFooter2.default,
+                            {
+                                nbColumnsDisplayed: nbColumnsDisplayed,
+                                view: view
+                            },
+                            footerContent
+                        )
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
@@ -856,7 +878,8 @@ HiTable.defaultProps = {
     view: 'l',
     lookupColumns: [],
     loading: false,
-    fixedColumnWidth: true
+    fixedColumnWidth: true,
+    disableContextMenu: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -883,6 +906,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
@@ -892,6 +919,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Sinon les colonnes s'adaptent à l'espace disponible
      */
     fixedColumnWidth: _propTypes2.default.bool,
+    /**
+     * Ajoute un footer avec le contenu footerContent à l'intérieur
+     */
+    footerContent: _propTypes2.default.node,
     /**
      * Id de la colonne par laquelle sont regroupé les éléments
      */
@@ -966,6 +997,9 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback sur le tri d'une colonne
      * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
+     *
+     * @param {string} column id
+     * @param {string} direction
      */
     onSort: _propTypes2.default.func,
     /**

package/HiTable/HiTableBody.js

@@ -287,7 +287,8 @@ var HiTableBody = function (_React$Component) {
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -386,7 +387,8 @@ var HiTableBody = function (_React$Component) {
                     sticky: sticky,
                     tabId: tabId,
                     view: view,
-                    fixedColumnWidth: fixedColumnWidth
+                    fixedColumnWidth: fixedColumnWidth,
+                    disableContextMenu: disableContextMenu
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -416,7 +418,8 @@ var HiTableBody = function (_React$Component) {
                             dense: dense,
                             sticky: sticky,
                             isDetail: true,
-                            fixedColumnWidth: fixedColumnWidth
+                            fixedColumnWidth: fixedColumnWidth,
+                            disableContextMenu: disableContextMenu
                         };
 
                         tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -457,7 +460,8 @@ HiTableBody.defaultProps = {
     height: 450,
     sticky: true,
     view: 'l',
-    loading: false
+    loading: false,
+    disableContextMenu: true
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -485,6 +489,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible

package/HiTable/HiTableFooter.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Table = require('material-ui/Table');
+
+var _styles = require('../styles');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        tfoot: {
+            zIndex: 13
+        },
+        tfootCell: {
+            borderTop: '1px solid',
+            borderTopColor: theme.palette.line.stepper
+        },
+        patchDiv: {
+            position: 'relative',
+            border: 'none',
+            width: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            height: '100%',
+            zIndex: 12,
+            backgroundColor: 'inherit'
+        }
+    };
+};
+
+var HiTableFooter = function (_React$Component) {
+    (0, _inherits3.default)(HiTableFooter, _React$Component);
+
+    function HiTableFooter() {
+        (0, _classCallCheck3.default)(this, HiTableFooter);
+        return (0, _possibleConstructorReturn3.default)(this, (HiTableFooter.__proto__ || (0, _getPrototypeOf2.default)(HiTableFooter)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiTableFooter, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                nbColumnsDisplayed = _props.nbColumnsDisplayed,
+                view = _props.view;
+
+
+            return _react2.default.createElement(
+                _Table.TableFooter,
+                { className: classes.tfoot },
+                _react2.default.createElement(
+                    _Table.TableRow,
+                    null,
+                    _react2.default.createElement(_Table.TableCell, {
+                        style: {
+                            paddingLeft: cst.DEFAULT_PADDING[view]
+                        },
+                        key: 'footer-left-cell',
+                        className: classes.patchDiv
+                    }),
+                    _react2.default.createElement(
+                        _Table.TableCell,
+                        { colSpan: nbColumnsDisplayed, classes: { root: classes.tfootCell } },
+                        this.props.children
+                    ),
+                    _react2.default.createElement(_Table.TableCell, {
+                        style: {
+                            paddingLeft: cst.DEFAULT_PADDING[view]
+                        },
+                        key: 'footer-right-cell',
+                        className: classes.patchDiv
+                    })
+                )
+            );
+        }
+    }]);
+    return HiTableFooter;
+}(_react2.default.Component);
+
+HiTableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Nombre de colonnes affichées
+     */
+    nbColumnsDisplayed: _propTypes2.default.number.isRequired,
+    /**
+     * Taille du tableau (L/M/S),
+     * définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiTableFooter' })(HiTableFooter);

package/es/HiTable/BodyCellBuilder.js

@@ -75,9 +75,10 @@ export default class BodyCellBuilder extends React.PureComponent {
             childrenCount,
             onOpenDetails,
             lookedUp,
-            fixedColumnWidth
+            fixedColumnWidth,
+            disableContextMenu
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
 
         const layoutProps = {
             type,
@@ -99,7 +100,6 @@ export default class BodyCellBuilder extends React.PureComponent {
         if (typeof data !== 'undefined') {
 
             let cellElement;
-            let hasContextMenu = true;
 
             switch (type) {
                 case cst.TYPE_ACCOUNT:
@@ -149,7 +149,6 @@ export default class BodyCellBuilder extends React.PureComponent {
                         displayTime: props.displayTime,
                         sticky: sticky
                     });
-                    hasContextMenu = false;
                     break;
 
                 case cst.TYPE_ICON:
@@ -178,7 +177,6 @@ export default class BodyCellBuilder extends React.PureComponent {
                         view: view,
                         sticky: sticky
                     });
-                    hasContextMenu = false;
                     break;
 
                 case cst.TYPE_RATE:
@@ -191,7 +189,6 @@ export default class BodyCellBuilder extends React.PureComponent {
                         view: view,
                         sticky: sticky
                     });
-                    hasContextMenu = false;
                     break;
 
                 case cst.TYPE_SENTINEL:
@@ -236,14 +233,14 @@ export default class BodyCellBuilder extends React.PureComponent {
                     break;
             }
 
-            cellContent = hasContextMenu ? React.createElement(
+            cellContent = disableContextMenu ? cellElement : React.createElement(
                 ContextMenuTrigger,
                 {
                     id: `hitable_context_menu_${this.props.tabId}`,
                     collect: this.collectContextMenuDatas
                 },
                 cellElement
-            ) : cellElement;
+            );
         }
 
         return React.createElement(
@@ -254,7 +251,8 @@ export default class BodyCellBuilder extends React.PureComponent {
     }
 }
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right'
+    ellipsis: 'right',
+    disableContextMenu: true
 };
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -285,6 +283,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Ellipsis
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -38,6 +38,10 @@ export const styles = theme => ({
     },
     center: {
         textAlign: 'center'
+    },
+    tooltipContainer: {
+        display: 'flex',
+        alignItems: 'center'
     }
 });
 
@@ -53,7 +57,7 @@ class CellImage extends React.PureComponent {
 
         const tooltipContent = React.createElement(
             'div',
-            null,
+            { className: classes.tooltipContainer },
             React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
             React.createElement(
                 'span',

package/es/HiTable/HiTable.js

@@ -5,10 +5,11 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
 import isRequiredIf from 'react-proptype-conditional-require';
 import HiButton from '../HiButton';
 
-import { withStyles, withTheme } from '../styles';
+import { withStyles } from '../styles';
 import HiTableHead from './HiTableHead';
 import HiTableBody from './HiTableBody';
 import HiTableFooterScroll from './HiTableFooterScroll';
+import HiTableFooter from './HiTableFooter';
 import * as cst from './constants';
 import HiTableContextMenu from './HiTableContextMenu';
 
@@ -583,13 +584,22 @@ class HiTable extends React.Component {
             groupBy,
             lookupColumns,
             loading,
-            fixedColumnWidth
+            fixedColumnWidth,
+            disableContextMenu,
+            footerContent
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
 
         const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
+        let nbColumnsDisplayed = 0;
+        orderedColumns.forEach(column => {
+            if (column.displayed !== false) {
+                nbColumnsDisplayed += 1;
+            }
+        });
+
         return React.createElement(
             'div',
             { className: classes.root },
@@ -657,7 +667,8 @@ class HiTable extends React.Component {
                         groupByIds: groupByIds,
                         lookupColumns: lookupColumns,
                         loading: loading,
-                        fixedColumnWidth: fixedColumnWidth
+                        fixedColumnWidth: fixedColumnWidth,
+                        disableContextMenu: disableContextMenu
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -666,7 +677,15 @@ class HiTable extends React.Component {
                         maxAutoRequest: 3,
                         isScrollToBottom: isScrollToBottom,
                         translations: translations
-                    })
+                    }),
+                    !infiniteScroll && footerContent && React.createElement(
+                        HiTableFooter,
+                        {
+                            nbColumnsDisplayed: nbColumnsDisplayed,
+                            view: view
+                        },
+                        footerContent
+                    )
                 ),
                 React.createElement(HiTableContextMenu, {
                     tabId: tabId,
@@ -724,7 +743,8 @@ HiTable.defaultProps = {
     view: 'l',
     lookupColumns: [],
     loading: false,
-    fixedColumnWidth: true
+    fixedColumnWidth: true,
+    disableContextMenu: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -751,6 +771,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
@@ -760,6 +784,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Sinon les colonnes s'adaptent à l'espace disponible
      */
     fixedColumnWidth: PropTypes.bool,
+    /**
+     * Ajoute un footer avec le contenu footerContent à l'intérieur
+     */
+    footerContent: PropTypes.node,
     /**
      * Id de la colonne par laquelle sont regroupé les éléments
      */
@@ -832,6 +860,9 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback sur le tri d'une colonne
      * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
+     *
+     * @param {string} column id
+     * @param {string} direction
      */
     onSort: PropTypes.func,
     /**

package/es/HiTable/HiTableBody.js

@@ -194,7 +194,8 @@ class HiTableBody extends React.Component {
             sortedColumnId,
             lookupColumns,
             loading,
-            fixedColumnWidth
+            fixedColumnWidth,
+            disableContextMenu
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -292,7 +293,8 @@ class HiTableBody extends React.Component {
                 sticky,
                 tabId,
                 view,
-                fixedColumnWidth
+                fixedColumnWidth,
+                disableContextMenu
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -322,7 +324,8 @@ class HiTableBody extends React.Component {
                         dense,
                         sticky,
                         isDetail: true,
-                        fixedColumnWidth
+                        fixedColumnWidth,
+                        disableContextMenu
                     };
 
                     tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -363,7 +366,8 @@ HiTableBody.defaultProps = {
     height: 450,
     sticky: true,
     view: 'l',
-    loading: false
+    loading: false,
+    disableContextMenu: true
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -391,6 +395,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible