carbon-react 102.20.1 → 102.22.2

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

@@ -1,2 +1,3 @@
+import { MarginProps } from "styled-system";
+declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export default StyledHr;
-declare const StyledHr: import("styled-components").StyledComponent<"hr", any, {}, never>;

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

@@ -1 +1 @@
-export { default } from "./hr";
+export { default } from "./hr.component";

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

@@ -1,23 +1,27 @@
 export default Loader;
-declare function Loader({ isInsideButton, isActive, size, ...rest }: {
+declare function Loader({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: {
     [x: string]: any;
+    "aria-label": any;
     isInsideButton: any;
     isActive: any;
     size: any;
 }): JSX.Element;
 declare namespace Loader {
-    namespace defaultProps {
-        const size: string;
-        const isInsideButton: boolean;
-        const isActive: boolean;
-    }
-    namespace propTypes {
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        const isInsideButton_1: PropTypes.Requireable<boolean>;
-        export { isInsideButton_1 as isInsideButton };
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-    }
+    const defaultProps: {
+        size: string;
+        isInsideButton: boolean;
+        isActive: boolean;
+        "aria-label": string;
+    };
+    const propTypes: {
+        /** Specify an aria-label for the Loader component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Size of the loader. */
+        size: PropTypes.Requireable<string>;
+        /** Applies white color. */
+        isInsideButton: PropTypes.Requireable<boolean>;
+        /** Applies slate color. Available only when isInsideButton is true. */
+        isActive: PropTypes.Requireable<boolean>;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/loader/loader.component.js

@@ -26,12 +26,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Loader = ({
+  "aria-label": ariaLabel,
   isInsideButton,
   isActive,
   size,
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, rest, (0, _tags.default)("loader", rest)), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+    "aria-label": ariaLabel,
+    role: "progressbar"
+  }, (0, _tags.default)("loader", rest), rest), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
@@ -49,10 +53,14 @@ const Loader = ({
 Loader.defaultProps = {
   size: "medium",
   isInsideButton: false,
-  isActive: true
+  isActive: true,
+  "aria-label": "loader"
 };
 Loader.propTypes = { ...marginPropTypes,
 
+  /** Specify an aria-label for the Loader component */
+  "aria-label": _propTypes.default.string,
+
   /** Size of the loader. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 

package/lib/components/loader/loader.d.ts

@@ -1,6 +1,8 @@
 import { MarginProps } from "styled-system";
 
 export interface LoaderProps extends MarginProps {
+  /** Specify an aria-label for the Loader component */
+  "aria-label"?: string;
   /** Size of the loader. */
   size?: "small" | "medium" | "large";
   /** Applies white color. */

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -36,27 +36,24 @@ const StyledMultiActionButton = _styledComponents.default.div`
     }
 
     &:focus {
-      border: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
       margin: -1px;
     }
 
     ${({
-  displayed,
-  theme
+  displayed
 }) => displayed && (0, _styledComponents.css)`
-        background-color: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
+        background-color: var(--colorsActionMajor700);
+        border-color: var(--colorsActionMajor700);
 
         &,
         ${_icon.default} {
-          color: ${theme.colors.white};
+          color: var(--colorsActionMajorYang100);
         }
 
         &:focus {
-          border-color: ${theme.colors.focus};
+          border-color: var(--colorsSemanticFocus500);
           margin: 0 -1px;
         }
       `}
@@ -68,12 +65,13 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
   theme,
   align
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.secondary};
+    background-color: var(--colorsActionMajorYang100);
     min-width: ${({
   minWidth
 }) => minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
 
     ${_icon.default} {
       margin-left: 0;
@@ -81,20 +79,18 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
     }
 
     ${_button.default} {
-      background-color: ${theme.colors.secondary};
-      border: 1px solid ${theme.colors.secondary};
-      color: ${theme.colors.white};
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
       display: block;
       margin-left: 0;
-      margin-top: 3px;
-      margin-bottom: 3px;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
       &:focus,
       &:hover {
-        background-color: ${theme.colors.tertiary};
+        background-color: var(--colorsActionMajor600);
+        color: var(--colorsActionMajorYang100);
       }
 
       & + & {

package/lib/components/navigation-bar/index.d.ts

@@ -1,2 +1 @@
-export { default } from "./navigation-bar";
-export * from "./navigation-bar";
+export { default } from "./navigation-bar.component";

package/lib/components/navigation-bar/navigation-bar.component.d.ts

@@ -1,13 +1,18 @@
-export default NavigationBar;
-declare function NavigationBar({ navigationType, isLoading, children, ariaLabel, stickyOffset, stickyPosition, ...props }: {
-    [x: string]: any;
-    navigationType?: string | undefined;
-    isLoading?: boolean | undefined;
-    children: any;
-    ariaLabel: any;
-    stickyOffset?: string | undefined;
-    stickyPosition: any;
-}): JSX.Element;
-declare namespace NavigationBar {
-    const propTypes: any;
+import React from "react";
+import { PaddingProps, FlexboxProps } from "styled-system";
+export declare type StickyPosition = "top" | "bottom";
+export declare type NavigationType = "light" | "dark" | "white" | "black";
+export interface NavigationBarProps extends PaddingProps, FlexboxProps {
+    children?: React.ReactNode;
+    ariaLabel?: string;
+    /** Color scheme of navigation component */
+    navigationType?: NavigationType;
+    /** If 'true' the children will not be visible */
+    isLoading?: boolean;
+    /** Defines the position of sticky navigation bar */
+    stickyPosition?: StickyPosition;
+    /** Defines the offset of sticky navigation bar */
+    stickyOffset?: string;
 }
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, stickyOffset, stickyPosition, ...props }: NavigationBarProps) => JSX.Element;
+export default NavigationBar;