cozy-ui 77.3.0 → 77.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [77.5.0](https://github.com/cozy/cozy-ui/compare/v77.4.0...v77.5.0) (2022-11-09)
+
+
+### Features
+
+* Table components now forward ref ([f599a39](https://github.com/cozy/cozy-ui/commit/f599a39))
+
+# [77.4.0](https://github.com/cozy/cozy-ui/compare/v77.3.0...v77.4.0) (2022-11-09)
+
+
+### Features
+
+* **CozyDialogs:** Add possibility to override DialogTitle props ([c4a1995](https://github.com/cozy/cozy-ui/commit/c4a1995))
+
 # [77.3.0](https://github.com/cozy/cozy-ui/compare/v77.2.0...v77.3.0) (2022-11-08)
 
 

package/package.json

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

package/react/CozyDialogs/Readme.md

@@ -30,6 +30,8 @@ import Button from  'cozy-ui/transpiled/react/Buttons'
 
 ### Props
 
+* **componentsProps** : `<object>` – overriden properties of specific components
+  * **dialogTitle** : `<object>` – DialogTitle component properties
 * **size** : `<string>` – Can be "s", "m" (default) or "l"
 * **open** : `<boolean>` (required) – To open/close the modal
 * **disableTitleAutoPadding** : `<boolean>` (optional) – Disable title padding calculation that would prevent overlapping with close and back buttons
@@ -341,3 +343,56 @@ const initialVariants = [{
   </Variants>
 </BreakpointsProvider>
 ```
+
+### Dialogs with title button
+
+```jsx
+import cx from 'classnames'
+import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+import { Dialog } from  'cozy-ui/transpiled/react/CozyDialogs'
+import Button from  'cozy-ui/transpiled/react/Buttons'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+
+initialState = { showModal: false }
+
+const Modal = () => {
+  const { isMobile } = useBreakpoints()
+
+  return (
+    <Dialog
+      open
+      title={
+        <>
+          This is the title
+          <IconButton>
+            <Icon icon={DotsIcon} />
+          </IconButton>
+        </>
+      }
+      content="Here's the content"
+      actions={
+        <Button label="Close" onClick={() => setState({ showModal: false })} />
+      }
+      componentsProps={{
+        dialogTitle: {
+          className: "u-flex u-flex-items-center u-flex-justify-between u-pv-0-s u-pv-1 u-pr-0-s"
+        }
+      }}
+      onClose={() => setState({ showModal: false })}
+    />
+  )
+}
+
+;
+
+<BreakpointsProvider>
+  <Button label="Open modal" onClick={() => setState({ showModal: true })}/>
+
+  {state.showModal && (
+    <Modal />
+  )}
+</BreakpointsProvider>
+```

package/react/CozyDialogs/useCozyDialog.js

@@ -32,6 +32,7 @@ const useCozyDialog = props => {
     disableGutters,
     titleRef,
     background,
+    componentsProps,
     ...otherProps
   } = props
   const { isMobile } = useBreakpoints()
@@ -66,15 +67,19 @@ const useCozyDialog = props => {
   const showBackButton = onBack || (fullScreen && onClose) // back and close buttons are merged in fullScreen
 
   const dialogTitleProps = {
+    ...componentsProps?.dialogTitle,
     id: `modal-title-${id}`,
     ref: titleRef,
     disableTypography: true,
-    className: cx({
-      'u-ellipsis': !isFluidTitle,
-      dialogTitleFluid: isFluidTitle,
-      dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
-      dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
-    })
+    className: cx(
+      {
+        'u-ellipsis': !isFluidTitle,
+        dialogTitleFluid: isFluidTitle,
+        dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
+        dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
+      },
+      componentsProps?.dialogTitle?.className
+    )
   }
 
   const listItemClassName = 'listItem--dialog'

package/react/Table/Readme.md

@@ -8,11 +8,12 @@ import {
   TableCell
 } from 'cozy-ui/transpiled/react/Table';
 
+let refRow = ''
 const cellStyles = { flexGrow: 1 };
 
 <Table>
   <TableHead>
-    <TableRow>
+    <TableRow ref={c => (refRow = c)} onClick={() => alert(refRow)}>
       <TableHeader style={cellStyles}>Firstname</TableHeader>
       <TableHeader style={cellStyles}>Lastname</TableHeader>
     </TableRow>

package/react/Table/index.jsx

@@ -1,39 +1,69 @@
 import React from 'react'
-import styles from './styles.styl'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+
+import styles from './styles.styl'
 
-export const Table = props => {
+export const Table = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.Table, className)} {...rest} />
-}
+  return <div className={cx(styles.Table, className)} {...rest} ref={ref} />
+})
 
-export const TableHead = props => {
+export const TableHead = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableHead, className)} {...rest} />
-}
+  return <div className={cx(styles.TableHead, className)} {...rest} ref={ref} />
+})
 
-export const TableBody = props => {
+export const TableBody = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableBody, className)} {...rest} />
-}
+  return <div className={cx(styles.TableBody, className)} {...rest} ref={ref} />
+})
 
-export const TableRow = props => {
+export const TableRow = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableRow, className)} {...rest} />
-}
+  return <div className={cx(styles.TableRow, className)} {...rest} ref={ref} />
+})
 
-export const TableCell = props => {
+export const TableCell = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableCell, className)} {...rest} />
-}
+  return <div className={cx(styles.TableCell, className)} {...rest} ref={ref} />
+})
 
-export const TableHeader = props => {
+export const TableHeader = React.forwardRef((props, ref) => {
   const { className, ...rest } = props
 
-  return <div className={cx(styles.TableHeader, className)} {...rest} />
+  return (
+    <div className={cx(styles.TableHeader, className)} {...rest} ref={ref} />
+  )
+})
+
+Table.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableHead.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableBody.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+
+TableRow.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableCell.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+}
+TableHeader.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 }

package/transpiled/react/CozyDialogs/useCozyDialog.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "actions", "actionsLayout", "title", "content", "open", "opened", "onBack", "onClose", "align", "disableTitleAutoPadding", "isFluidTitle", "disableGutters", "titleRef", "background"];
+var _excluded = ["size", "actions", "actionsLayout", "title", "content", "open", "opened", "onBack", "onClose", "align", "disableTitleAutoPadding", "isFluidTitle", "disableGutters", "titleRef", "background", "componentsProps"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -24,6 +24,8 @@ var useStyles = makeStyles({
 });
 
 var useCozyDialog = function useCozyDialog(props) {
+  var _componentsProps$dial;
+
   var size = props.size,
       actions = props.actions,
       actionsLayout = props.actionsLayout,
@@ -39,6 +41,7 @@ var useCozyDialog = function useCozyDialog(props) {
       disableGutters = props.disableGutters,
       titleRef = props.titleRef,
       background = props.background,
+      componentsProps = props.componentsProps,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var _useBreakpoints = useBreakpoints(),
@@ -75,7 +78,7 @@ var useCozyDialog = function useCozyDialog(props) {
   var showCloseButton = !fullScreen && onClose;
   var showBackButton = onBack || fullScreen && onClose; // back and close buttons are merged in fullScreen
 
-  var dialogTitleProps = {
+  var dialogTitleProps = _objectSpread(_objectSpread({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.dialogTitle), {}, {
     id: "modal-title-".concat(id),
     ref: titleRef,
     disableTypography: true,
@@ -84,8 +87,9 @@ var useCozyDialog = function useCozyDialog(props) {
       dialogTitleFluid: isFluidTitle,
       dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
       dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
-    })
-  };
+    }, componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$dial = componentsProps.dialogTitle) === null || _componentsProps$dial === void 0 ? void 0 : _componentsProps$dial.className)
+  });
+
   var listItemClassName = 'listItem--dialog';
   var listItemProps = {
     classes: {

package/transpiled/react/Table/index.js

@@ -7,6 +7,8 @@ var _excluded = ["className"],
     _excluded5 = ["className"],
     _excluded6 = ["className"];
 import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
 var styles = {
   "Table": "styles__Table___x3ZsI",
   "TableHead": "styles__TableHead___1rqhM",
@@ -15,52 +17,87 @@ var styles = {
   "TableCell": "styles__TableCell___yJCq7",
   "TableHeader": "styles__TableHeader___FWkmV"
 };
-import cx from 'classnames';
-export var Table = function Table(props) {
+export var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.Table, className)
-  }, rest));
-};
-export var TableHead = function TableHead(props) {
+  }, rest, {
+    ref: ref
+  }));
+});
+export var TableHead = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded2);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.TableHead, className)
-  }, rest));
-};
-export var TableBody = function TableBody(props) {
+  }, rest, {
+    ref: ref
+  }));
+});
+export var TableBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded3);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.TableBody, className)
-  }, rest));
-};
-export var TableRow = function TableRow(props) {
+  }, rest, {
+    ref: ref
+  }));
+});
+export var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded4);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.TableRow, className)
-  }, rest));
-};
-export var TableCell = function TableCell(props) {
+  }, rest, {
+    ref: ref
+  }));
+});
+export var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded5);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.TableCell, className)
-  }, rest));
-};
-export var TableHeader = function TableHeader(props) {
+  }, rest, {
+    ref: ref
+  }));
+});
+export var TableHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       rest = _objectWithoutProperties(props, _excluded6);
 
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.TableHeader, className)
-  }, rest));
+  }, rest, {
+    ref: ref
+  }));
+});
+Table.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+TableHead.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+TableBody.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+TableRow.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+TableCell.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+TableHeader.propTypes = {
+  className: PropTypes.string,
+  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };