carbon-react 106.6.1 → 106.6.2

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

@@ -1,2 +1,13 @@
+import React from "react";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+export declare type OverflowWrap = "break-word" | "anywhere";
+export declare type ScrollVariant = "light" | "dark";
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
+    overflowWrap?: OverflowWrap;
+    /** scroll styling attribute */
+    scrollVariant?: ScrollVariant;
+}
+declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;
-declare const Box: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/box/box.component.js

@@ -1,15 +1,23 @@
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { space, layout, flexbox } from "styled-system";
 import BaseTheme from "../../style/themes/base";
-import color from "../../style/utils/color";
+import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
-  ${color}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 
   ${({
   overflowWrap
@@ -34,25 +42,6 @@ const Box = styled.div`
       }
     `}
 `;
-Box.propTypes = {
-  /** Styled system box props */
-  ...propTypes.space,
-
-  /** Styled system flex props */
-  ...propTypes.flexbox,
-
-  /** Styled system layout props */
-  ...propTypes.layout,
-
-  /** Styled system color props */
-  ...propTypes.color,
-
-  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari and IE11 */
-  overflowWrap: PropTypes.oneOf(["break-word", "anywhere"]),
-
-  /** scroll styling attribute */
-  scrollVariant: PropTypes.oneOf(["light", "dark"])
-};
 Box.defaultProps = {
   theme: BaseTheme
 };

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

@@ -1,13 +1,11 @@
-declare namespace _default {
-    namespace light {
-        const thumb: string;
-        const track: string;
-    }
-    namespace dark {
-        const thumb_1: string;
-        export { thumb_1 as thumb };
-        const track_1: string;
-        export { track_1 as track };
-    }
-}
+declare const _default: {
+    light: {
+        thumb: string;
+        track: string;
+    };
+    dark: {
+        thumb: string;
+        track: string;
+    };
+};
 export default _default;

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

@@ -1 +1,2 @@
-export { default } from "./box";
+export { default } from "./box.component";
+export type { BoxProps } from "./box.component";

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,3 +1,2 @@
-declare var _default: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+declare var _default: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export default _default;
-import Box from "../box";

package/esm/components/drawer/drawer.style.d.ts

@@ -2,9 +2,8 @@ export const StyledSidebarHeader: import("styled-components").StyledComponent<"d
 export const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledDrawerSidebar: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButton: import("styled-components").StyledComponent<"button", any, {
     type: "button";
 }, "type">;
-import Box from "../box";

package/esm/components/duelling-picklist/picklist/picklist.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledPicklist: import("styled-components").StyledComponent<typeof Box, any, {
-    as: "ul";
+export const StyledPicklist: import("styled-components").StyledComponent<"div", any, import("../../box").BoxProps & {
+    as: string;
 }, "as">;
 export const StyledEmptyContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
-import Box from "../../box";

package/esm/components/flat-table/flat-table.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Box from "../box";

package/esm/components/form/form.component.js

@@ -27,6 +27,7 @@ const Form = ({
   } = useContext(SidebarContext);
   const formRef = useRef();
   const formFooterRef = useRef();
+  const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -40,7 +41,7 @@ const Form = ({
     "data-element": "form-content",
     stickyFooter: stickyFooter,
     className: stickyFooter ? "sticky" : ""
-  }, children), /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,

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

@@ -1,2 +1,13 @@
+import React from "react";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+export declare type OverflowWrap = "break-word" | "anywhere";
+export declare type ScrollVariant = "light" | "dark";
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
+    overflowWrap?: OverflowWrap;
+    /** scroll styling attribute */
+    scrollVariant?: ScrollVariant;
+}
+declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;
-declare const Box: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
@@ -19,17 +15,27 @@ var _color = _interopRequireDefault(require("../../style/utils/color"));
 
 var _box = _interopRequireDefault(require("./box.config"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  ${_color.default}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => (0, _color.default)({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 
   ${({
   overflowWrap
@@ -54,25 +60,6 @@ const Box = _styledComponents.default.div`
       }
     `}
 `;
-Box.propTypes = {
-  /** Styled system box props */
-  ..._propTypes.default.space,
-
-  /** Styled system flex props */
-  ..._propTypes.default.flexbox,
-
-  /** Styled system layout props */
-  ..._propTypes.default.layout,
-
-  /** Styled system color props */
-  ..._propTypes.default.color,
-
-  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari and IE11 */
-  overflowWrap: _propTypes2.default.oneOf(["break-word", "anywhere"]),
-
-  /** scroll styling attribute */
-  scrollVariant: _propTypes2.default.oneOf(["light", "dark"])
-};
 Box.defaultProps = {
   theme: _base.default
 };

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

@@ -1,13 +1,11 @@
-declare namespace _default {
-    namespace light {
-        const thumb: string;
-        const track: string;
-    }
-    namespace dark {
-        const thumb_1: string;
-        export { thumb_1 as thumb };
-        const track_1: string;
-        export { track_1 as track };
-    }
-}
+declare const _default: {
+    light: {
+        thumb: string;
+        track: string;
+    };
+    dark: {
+        thumb: string;
+        track: string;
+    };
+};
 export default _default;

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

@@ -1 +1,2 @@
-export { default } from "./box";
+export { default } from "./box.component";
+export type { BoxProps } from "./box.component";

package/lib/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,3 +1,2 @@
-declare var _default: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+declare var _default: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export default _default;
-import Box from "../box";

package/lib/components/drawer/drawer.style.d.ts

@@ -2,9 +2,8 @@ export const StyledSidebarHeader: import("styled-components").StyledComponent<"d
 export const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledDrawerSidebar: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButton: import("styled-components").StyledComponent<"button", any, {
     type: "button";
 }, "type">;
-import Box from "../box";

package/lib/components/duelling-picklist/picklist/picklist.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledPicklist: import("styled-components").StyledComponent<typeof Box, any, {
-    as: "ul";
+export const StyledPicklist: import("styled-components").StyledComponent<"div", any, import("../../box").BoxProps & {
+    as: string;
 }, "as">;
 export const StyledEmptyContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
-import Box from "../../box";

package/lib/components/flat-table/flat-table.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Box from "../box";

package/lib/components/form/form.component.js

@@ -45,6 +45,7 @@ const Form = ({
   } = (0, _react.useContext)(_sidebar.SidebarContext);
   const formRef = (0, _react.useRef)();
   const formFooterRef = (0, _react.useRef)();
+  const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
   return /*#__PURE__*/_react.default.createElement(_form.StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -58,7 +59,7 @@ const Form = ({
     "data-element": "form-content",
     stickyFooter: stickyFooter,
     className: stickyFooter ? "sticky" : ""
-  }, children), /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, {
+  }, children), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.6.1",
+  "version": "106.6.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/box/box.d.ts

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { StyledComponentProps } from "styled-components";
-import {
-  ColorProps,
-  FlexboxProps,
-  LayoutProps,
-  SpaceProps,
-} from "styled-system";
-
-export interface BoxProps
-  extends SpaceProps,
-    ColorProps,
-    LayoutProps,
-    FlexboxProps {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
-  overflowWrap?: "break-word" | "anywhere";
-  scrollVariant?: "light" | "dark";
-}
-
-/**
- * HTML color prop have to be removed from the StyledComponentProps
- * as it's type conflicts with StyledSystem color prop
- */
-type PropsWithoutColor = Omit<
-  StyledComponentProps<"div", Record<string, unknown>, BoxProps, "">,
-  "color"
->;
-
-declare function Box(attrs: PropsWithoutColor & ColorProps): JSX.Element;
-
-export default Box;

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

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { StyledComponentProps } from "styled-components";
-import {
-  ColorProps,
-  FlexboxProps,
-  LayoutProps,
-  SpaceProps,
-} from "styled-system";
-
-export interface BoxProps
-  extends SpaceProps,
-    ColorProps,
-    LayoutProps,
-    FlexboxProps {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
-  overflowWrap?: "break-word" | "anywhere";
-  scrollVariant?: "light" | "dark";
-}
-
-/**
- * HTML color prop have to be removed from the StyledComponentProps
- * as it's type conflicts with StyledSystem color prop
- */
-type PropsWithoutColor = Omit<
-  StyledComponentProps<"div", Record<string, unknown>, BoxProps, "">,
-  "color"
->;
-
-declare function Box(attrs: PropsWithoutColor & ColorProps): JSX.Element;
-
-export default Box;