carbon-react 120.2.1 → 120.3.0

package/esm/components/definition-list/__internal__/dl.context.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
-interface DlContextProps {
+export declare type ElementAlignment = "left" | "center" | "right";
+export interface DlContextProps {
+    /** Render the DefinitionList as a single column */
     asSingleColumn?: boolean;
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
 }
 declare const _default: React.Context<DlContextProps>;
 export default _default;

package/esm/components/definition-list/dd.component.js

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDd } from "./definition-list.style";
+import DlContext from "./__internal__/dl.context";
 const Dd = ({
   children,
   ...rest
@@ -9,7 +10,14 @@ const Dd = ({
   const {
     mb
   } = rest;
+  const {
+    asSingleColumn,
+    ddTextAlign
+  } = useContext(DlContext);
   return /*#__PURE__*/React.createElement(StyledDd, _extends({
+    "data-element": "dd",
+    asSingleColumn: asSingleColumn,
+    ddTextAlign: ddTextAlign,
     mb: mb || 2
   }, rest), children);
 };

package/esm/components/definition-list/definition-list.style.d.ts

@@ -1,22 +1,4 @@
-export interface StyledDlProps {
-    /** Render the DefinitionList as a single column */
-    asSingleColumn?: boolean;
-    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
-        by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
-     */
-    w?: number;
-}
-export declare type ElementAlignment = "left" | "center" | "right";
-export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, StyledDlProps, never>;
-export interface StyledDtDivProps {
-    /** This string will specify the text align styling of the `<dt></dt>`. */
-    dtTextAlign?: ElementAlignment;
-}
-export declare const StyledDtDiv: import("styled-components").StyledComponent<"div", any, StyledDtDivProps, never>;
-export interface StyledDdDivProps {
-    /** This string will specify the text align styling of the `<dd></dd>`. */
-    ddTextAlign?: ElementAlignment;
-}
-export declare const StyledDdDiv: import("styled-components").StyledComponent<"div", any, StyledDdDivProps, never>;
-export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
-export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;
+import { DlProps } from "./dl.component";
+export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, Omit<DlProps, "dtTextAlign" | "ddTextAlign">, never>;
+export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, Pick<DlProps, "dtTextAlign" | "asSingleColumn">, never>;
+export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, Pick<DlProps, "ddTextAlign" | "asSingleColumn">, never>;

package/esm/components/definition-list/definition-list.style.js

@@ -26,30 +26,22 @@ export const StyledDl = styled.dl`
 StyledDl.defaultProps = {
   theme: baseTheme
 };
-export const StyledDtDiv = styled.div`
+export const StyledDt = styled.dt`
   ${space}
+  font-size: var(--fontSizes100);
+  font-weight: 700;
+  color: var(--colorsUtilityYin090);
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && css`
+      grid-column: 1;
+    `}
   ${({
   dtTextAlign
 }) => css`
     text-align: ${dtTextAlign};
   `}
 `;
-StyledDtDiv.defaultProps = {
-  theme: baseTheme
-};
-export const StyledDdDiv = styled.div`
-  ${({
-  ddTextAlign
-}) => css`
-    text-align: ${ddTextAlign};
-  `}
-`;
-export const StyledDt = styled.dt`
-  ${space}
-  font-size: var(--fontSizes100);
-  font-weight: 700;
-  color: var(--colorsUtilityYin090);
-`;
 StyledDt.defaultProps = {
   theme: baseTheme
 };
@@ -58,6 +50,16 @@ export const StyledDd = styled.dd`
   font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && css`
+      grid-column: 2;
+    `}
+  ${({
+  ddTextAlign
+}) => css`
+    text-align: ${ddTextAlign};
+  `}
 
   ${StyledButton} {
     padding: 0;

package/esm/components/definition-list/dl.component.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
-export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+import { DlContextProps } from "./__internal__/dl.context";
+export interface DlProps extends SpaceProps, DlContextProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */
     children: React.ReactNode;
+    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+      by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+    */
+    w?: number;
 }
 declare const Dl: {
     ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps): React.JSX.Element;

package/esm/components/definition-list/dl.component.js

@@ -1,10 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import PropTypes from "prop-types";
-import { isElement, isFragment } from "react-is";
-import { StyledDl, StyledDtDiv, StyledDdDiv } from "./definition-list.style";
-import Dt from "./dt.component";
-import Dd from "./dd.component";
+import { StyledDl } from "./definition-list.style";
 import DlContext from "./__internal__/dl.context";
 const Dl = ({
   children,
@@ -13,54 +10,16 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => {
-  const dlComponent = [];
-  const listChildren = React.Children.toArray(children);
-  let key = "";
-  const composeDlComponent = childrenArray => {
-    let dtLabel;
-    let ddContent = [];
-    let isLastChild;
-    let nextItemIsNotDd;
-    childrenArray.forEach((child, index) => {
-      if (isFragment(child)) {
-        composeDlComponent(child.props.children);
-      } else {
-        if (isElement(child) && child.type === Dt) {
-          dtLabel = child;
-        }
-        if (isElement(child) && child.type === Dd) {
-          ddContent.push(child);
-        }
-        isLastChild = index === childrenArray.length - 1;
-        const originalKey = isElement(child) && child.props.key;
-        const nextItem = childrenArray[index + 1];
-        const isNextItemDt = isElement(nextItem) && nextItem.type === Dt;
-        nextItemIsNotDd = !isLastChild && (isNextItemDt || isFragment(nextItem));
-        if (dtLabel && (nextItemIsNotDd || isLastChild)) {
-          key = `${key + 1}`;
-          dlComponent.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: originalKey || key
-          }, /*#__PURE__*/React.createElement(StyledDtDiv, {
-            dtTextAlign: dtTextAlign
-          }, dtLabel), /*#__PURE__*/React.createElement(StyledDdDiv, {
-            ddTextAlign: ddTextAlign
-          }, ddContent)));
-          ddContent = [];
-        }
-      }
-    });
-    return dlComponent;
-  };
-  return /*#__PURE__*/React.createElement(StyledDl, _extends({
-    w: w,
-    "data-component": "dl",
-    asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
-    value: {
-      asSingleColumn
-    }
-  }, composeDlComponent(listChildren)));
-};
+}) => /*#__PURE__*/React.createElement(StyledDl, _extends({
+  w: w,
+  "data-component": "dl",
+  asSingleColumn: asSingleColumn
+}, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+  value: {
+    asSingleColumn,
+    dtTextAlign,
+    ddTextAlign
+  }
+}, children));
 Dl.displayName = "Dl";
 export default Dl;

package/esm/components/definition-list/dt.component.js

@@ -8,7 +8,8 @@ const Dt = ({
   ...rest
 }) => {
   const {
-    asSingleColumn
+    asSingleColumn,
+    dtTextAlign
   } = useContext(DlContext);
   const {
     mb,
@@ -17,7 +18,9 @@ const Dt = ({
   return /*#__PURE__*/React.createElement(StyledDt, _extends({
     "data-element": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
-    pr: pr || asSingleColumn ? undefined : 3
+    pr: pr || asSingleColumn ? undefined : 3,
+    dtTextAlign: dtTextAlign,
+    asSingleColumn: asSingleColumn
   }, rest), children);
 };
 Dt.displayName = "Dt";

package/lib/components/definition-list/__internal__/dl.context.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
-interface DlContextProps {
+export declare type ElementAlignment = "left" | "center" | "right";
+export interface DlContextProps {
+    /** Render the DefinitionList as a single column */
     asSingleColumn?: boolean;
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
 }
 declare const _default: React.Context<DlContextProps>;
 export default _default;

package/lib/components/definition-list/dd.component.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("./definition-list.style");
+var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Dd = ({
   children,
@@ -16,7 +19,14 @@ const Dd = ({
   const {
     mb
   } = rest;
+  const {
+    asSingleColumn,
+    ddTextAlign
+  } = (0, _react.useContext)(_dl.default);
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDd, _extends({
+    "data-element": "dd",
+    asSingleColumn: asSingleColumn,
+    ddTextAlign: ddTextAlign,
     mb: mb || 2
   }, rest), children);
 };

package/lib/components/definition-list/definition-list.style.d.ts

@@ -1,22 +1,4 @@
-export interface StyledDlProps {
-    /** Render the DefinitionList as a single column */
-    asSingleColumn?: boolean;
-    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
-        by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
-     */
-    w?: number;
-}
-export declare type ElementAlignment = "left" | "center" | "right";
-export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, StyledDlProps, never>;
-export interface StyledDtDivProps {
-    /** This string will specify the text align styling of the `<dt></dt>`. */
-    dtTextAlign?: ElementAlignment;
-}
-export declare const StyledDtDiv: import("styled-components").StyledComponent<"div", any, StyledDtDivProps, never>;
-export interface StyledDdDivProps {
-    /** This string will specify the text align styling of the `<dd></dd>`. */
-    ddTextAlign?: ElementAlignment;
-}
-export declare const StyledDdDiv: import("styled-components").StyledComponent<"div", any, StyledDdDivProps, never>;
-export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
-export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;
+import { DlProps } from "./dl.component";
+export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, Omit<DlProps, "dtTextAlign" | "ddTextAlign">, never>;
+export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, Pick<DlProps, "dtTextAlign" | "asSingleColumn">, never>;
+export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, Pick<DlProps, "ddTextAlign" | "asSingleColumn">, never>;

package/lib/components/definition-list/definition-list.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledDtDiv = exports.StyledDt = exports.StyledDl = exports.StyledDdDiv = exports.StyledDd = void 0;
+exports.StyledDt = exports.StyledDl = exports.StyledDd = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _button = _interopRequireDefault(require("../button/button.style"));
@@ -36,32 +36,22 @@ exports.StyledDl = StyledDl;
 StyledDl.defaultProps = {
   theme: _themes.baseTheme
 };
-const StyledDtDiv = _styledComponents.default.div`
+const StyledDt = _styledComponents.default.dt`
   ${_styledSystem.space}
+  font-size: var(--fontSizes100);
+  font-weight: 700;
+  color: var(--colorsUtilityYin090);
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && (0, _styledComponents.css)`
+      grid-column: 1;
+    `}
   ${({
   dtTextAlign
 }) => (0, _styledComponents.css)`
     text-align: ${dtTextAlign};
   `}
 `;
-exports.StyledDtDiv = StyledDtDiv;
-StyledDtDiv.defaultProps = {
-  theme: _themes.baseTheme
-};
-const StyledDdDiv = _styledComponents.default.div`
-  ${({
-  ddTextAlign
-}) => (0, _styledComponents.css)`
-    text-align: ${ddTextAlign};
-  `}
-`;
-exports.StyledDdDiv = StyledDdDiv;
-const StyledDt = _styledComponents.default.dt`
-  ${_styledSystem.space}
-  font-size: var(--fontSizes100);
-  font-weight: 700;
-  color: var(--colorsUtilityYin090);
-`;
 exports.StyledDt = StyledDt;
 StyledDt.defaultProps = {
   theme: _themes.baseTheme
@@ -71,6 +61,16 @@ const StyledDd = _styledComponents.default.dd`
   font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && (0, _styledComponents.css)`
+      grid-column: 2;
+    `}
+  ${({
+  ddTextAlign
+}) => (0, _styledComponents.css)`
+    text-align: ${ddTextAlign};
+  `}
 
   ${_button.default} {
     padding: 0;

package/lib/components/definition-list/dl.component.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
-export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+import { DlContextProps } from "./__internal__/dl.context";
+export interface DlProps extends SpaceProps, DlContextProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */
     children: React.ReactNode;
+    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+      by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+    */
+    w?: number;
 }
 declare const Dl: {
     ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps): React.JSX.Element;

package/lib/components/definition-list/dl.component.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactIs = require("react-is");
 var _definitionList = require("./definition-list.style");
-var _dt = _interopRequireDefault(require("./dt.component"));
-var _dd = _interopRequireDefault(require("./dd.component"));
 var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -20,55 +17,17 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => {
-  const dlComponent = [];
-  const listChildren = _react.default.Children.toArray(children);
-  let key = "";
-  const composeDlComponent = childrenArray => {
-    let dtLabel;
-    let ddContent = [];
-    let isLastChild;
-    let nextItemIsNotDd;
-    childrenArray.forEach((child, index) => {
-      if ((0, _reactIs.isFragment)(child)) {
-        composeDlComponent(child.props.children);
-      } else {
-        if ((0, _reactIs.isElement)(child) && child.type === _dt.default) {
-          dtLabel = child;
-        }
-        if ((0, _reactIs.isElement)(child) && child.type === _dd.default) {
-          ddContent.push(child);
-        }
-        isLastChild = index === childrenArray.length - 1;
-        const originalKey = (0, _reactIs.isElement)(child) && child.props.key;
-        const nextItem = childrenArray[index + 1];
-        const isNextItemDt = (0, _reactIs.isElement)(nextItem) && nextItem.type === _dt.default;
-        nextItemIsNotDd = !isLastChild && (isNextItemDt || (0, _reactIs.isFragment)(nextItem));
-        if (dtLabel && (nextItemIsNotDd || isLastChild)) {
-          key = `${key + 1}`;
-          dlComponent.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-            key: originalKey || key
-          }, /*#__PURE__*/_react.default.createElement(_definitionList.StyledDtDiv, {
-            dtTextAlign: dtTextAlign
-          }, dtLabel), /*#__PURE__*/_react.default.createElement(_definitionList.StyledDdDiv, {
-            ddTextAlign: ddTextAlign
-          }, ddContent)));
-          ddContent = [];
-        }
-      }
-    });
-    return dlComponent;
-  };
-  return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
-    w: w,
-    "data-component": "dl",
-    asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
-    value: {
-      asSingleColumn
-    }
-  }, composeDlComponent(listChildren)));
-};
+}) => /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
+  w: w,
+  "data-component": "dl",
+  asSingleColumn: asSingleColumn
+}, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
+  value: {
+    asSingleColumn,
+    dtTextAlign,
+    ddTextAlign
+  }
+}, children));
 Dl.displayName = "Dl";
 var _default = Dl;
 exports.default = _default;

package/lib/components/definition-list/dt.component.js

@@ -17,7 +17,8 @@ const Dt = ({
   ...rest
 }) => {
   const {
-    asSingleColumn
+    asSingleColumn,
+    dtTextAlign
   } = (0, _react.useContext)(_dl.default);
   const {
     mb,
@@ -26,7 +27,9 @@ const Dt = ({
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDt, _extends({
     "data-element": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
-    pr: pr || asSingleColumn ? undefined : 3
+    pr: pr || asSingleColumn ? undefined : 3,
+    dtTextAlign: dtTextAlign,
+    asSingleColumn: asSingleColumn
   }, rest), children);
 };
 Dt.displayName = "Dt";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "120.2.1",
+  "version": "120.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",