carbon-react 124.3.1 → 124.4.0

package/esm/components/tile/flex-tile-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-cell.component";
+export type { FlexTileCellProps } from "./flex-tile-cell.component";

package/esm/components/tile/flex-tile-cell/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-cell.component";

package/esm/components/tile/flex-tile-container/flex-tile-container.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "../../box";
+export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap"> {
+    /** The child elements of FlexTileContainer need to be FlexTileCell components. */
+    children: React.ReactNode;
+}
+export declare const FlexTileContainer: ({ children, columnGap, }: FlexTileContainerProps) => JSX.Element;
+export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/flex-tile-container.component.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "../../box";
+const FlexTileContainer = ({
+  children,
+  columnGap = 2
+}) => {
+  if (!children) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    alignContent: "stretch",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: columnGap,
+    justifyContent: "flex-start",
+    overflow: "hidden",
+    width: "100%",
+    "data-component": "flex-tile-container"
+  }, children);
+};
+FlexTileContainer.propTypes = {
+  "children": PropTypes.node,
+  "columnGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export { FlexTileContainer };
+export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flex-tile-container.component";
+export type { FlexTileContainerProps } from "./flex-tile-container.component";

package/esm/components/tile/flex-tile-container/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-container.component";

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const FlexTileDivider: () => JSX.Element;
+export default FlexTileDivider;

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "../../box";
+import Hr from "../../hr/hr.component";
+export const FlexTileDivider = () => {
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    bottom: "0px",
+    left: "0px",
+    height: "1px",
+    width: "100vw",
+    m: "0px 0px -1px 0px"
+  }, /*#__PURE__*/React.createElement(Hr, {
+    m: 0
+  }));
+};
+export default FlexTileDivider;

package/esm/components/tile/flex-tile-divider/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./flex-tile-divider.component";

package/esm/components/tile/flex-tile-divider/index.js

@@ -0,0 +1 @@
+export { default } from "./flex-tile-divider.component";

package/esm/components/tile/index.d.ts

@@ -4,3 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as FlexTileContainer } from "./flex-tile-container";
+export type { FlexTileContainerProps } from "./flex-tile-container";
+export { default as FlexTileCell } from "./flex-tile-cell";
+export type { FlexTileCellProps } from "./flex-tile-cell";
+export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/components/tile/index.js

@@ -1,3 +1,6 @@
 export { default as Tile } from "./tile.component";
 export { default as TileContent } from "./tile-content";
-export { default as TileFooter } from "./tile-footer";
+export { default as TileFooter } from "./tile-footer";
+export { default as FlexTileContainer } from "./flex-tile-container";
+export { default as FlexTileCell } from "./flex-tile-cell";
+export { default as FlexTileDivider } from "./flex-tile-divider";

package/esm/style/utils/box-gap.d.ts

@@ -0,0 +1,5 @@
+export declare const GAP_VALUES: number[];
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
+export declare const getGapValue: (gapValue: number | string) => string;
+export default function gap(gapValue: number | string): string;

package/esm/style/utils/box-gap.js

@@ -0,0 +1,9 @@
+import { space } from "../../style/themes/base/base-theme.config";
+export const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+export const getGapValue = gapValue => typeof gapValue === "number" ? `var(--spacing${gapValue}00)` : gapValue;
+export default function gap(gapValue) {
+  if (typeof gapValue === "number") {
+    return space[gapValue];
+  }
+  return gapValue;
+}

package/lib/components/box/box.component.d.ts

@@ -1,13 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, PositionProps, GridProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
+import { Gap } from "style/utils/box-gap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
-export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
-export declare type Gap = AllowedNumericalValues | string;
 declare type DesignTokensType = keyof typeof DesignTokens;
 declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
 declare type BorderRadiusType = Extract<DesignTokensType, `borderRadius${string}`>;

package/lib/components/box/box.component.js

@@ -11,7 +11,6 @@ var _box = _interopRequireDefault(require("./box.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 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); }
-const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -482,7 +481,7 @@ Box.propTypes = {
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "color": _propTypes.default.string,
-  "columnGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "columnGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
@@ -993,7 +992,7 @@ Box.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   })]),
   "flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert-layer", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
-  "gap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "gap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "gridArea": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "inherit", "initial", "revert-layer", "revert", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
@@ -3430,7 +3429,7 @@ Box.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "role": _propTypes.default.string,
-  "rowGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
+  "rowGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "scrollVariant": _propTypes.default.oneOf(["dark", "light"]),
   "size": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/components/box/box.config.d.ts

@@ -7,6 +7,5 @@ declare const _default: {
         thumb: string;
         track: string;
     };
-    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/lib/components/box/box.config.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _baseTheme = require("../../style/themes/base/base-theme.config");
 var _default = exports.default = {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -13,11 +12,5 @@ var _default = exports.default = {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
-  },
-  gap: gapValue => {
-    if (typeof gapValue === "number") {
-      return _baseTheme.space[gapValue];
-    }
-    return gapValue;
   }
 };

package/lib/components/box/box.style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _boxGap = _interopRequireDefault(require("../../style/utils/box-gap"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _box = _interopRequireDefault(require("./box.config"));
@@ -97,15 +98,15 @@ const StyledBox = _styledComponents.default.div`
   rowGap
 }) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && (0, _styledComponents.css)`
       ${gap !== undefined && (0, _styledComponents.css)`
-        gap: ${_box.default.gap(gap)};
+        gap: ${(0, _boxGap.default)(gap)};
       `}
 
       ${columnGap !== undefined && (0, _styledComponents.css)`
-        column-gap: ${_box.default.gap(columnGap)};
+        column-gap: ${(0, _boxGap.default)(columnGap)};
       `}
 
       ${rowGap !== undefined && (0, _styledComponents.css)`
-        row-gap: ${_box.default.gap(rowGap)};
+        row-gap: ${(0, _boxGap.default)(rowGap)};
       `}
     `};
 

package/lib/components/tile/flex-tile-cell/flex-tile-cell.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BoxProps } from "../../box";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlexTileCellProps extends TagProps, BoxProps {
+    /** The content to render within the responsive cell. */
+    children: React.ReactNode;
+}
+export declare const FlexTileCell: ({ children, flexGrow, flexBasis, flexShrink, ...rest }: FlexTileCellProps) => JSX.Element;
+export default FlexTileCell;