carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -1,186 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useState, useRef, useMemo, useImperativeHandle } from "react";
-import invariant from "invariant";
-import Events from "../../__internal__/utils/helpers/events";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Fieldset from "../../__internal__/fieldset";
-import SimpleColor from "./simple-color";
-import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
-import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
-import ValidationIcon from "../../__internal__/validations/validation-icon.component";
-import { InputGroupContext } from "../../__internal__/input-behaviour";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import Logger from "../../__internal__/utils/logger";
-let deprecateUncontrolledWarnTriggered = false;
-export const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    error,
-    warning,
-    info,
-    name,
-    legend,
-    onChange,
-    onBlur,
-    onKeyDown,
-    value,
-    maxWidth = 300,
-    childWidth = 58,
-    validationOnLegend,
-    required,
-    ...rest
-  } = props;
-  const hasProperChildren = useMemo(() => {
-    const invalidChild = React.Children.toArray(children).find(child => {
-      return typeof child === "string" || /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== "SimpleColor";
-    });
-    return !invalidChild;
-  }, [children]);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `SimpleColorPicker accepts only children of type \`${SimpleColor.displayName}\`.`) : invariant(false) : void 0;
-  const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)), [children]);
-  const internalRef = useRef(null);
-  const [focusedElement, setFocusedElement] = useState(null);
-  const itemsPerRow = Math.floor(+maxWidth / +childWidth);
-  const rowCount = Math.ceil(filteredChildren?.length / itemsPerRow);
-  let blankSlots = itemsPerRow * rowCount - filteredChildren?.length;
-  let currentRow = 1;
-  let loopCounter = 1;
-  const gridItemRefs = useRef([]);
-  const navigationGrid = filteredChildren.map((child, index) => {
-    const allowUp = currentRow !== 1;
-    let allowDown = false;
-    if (currentRow + 1 === rowCount && blankSlots - itemsPerRow < 0) {
-      allowDown = true;
-      blankSlots += 1;
-    } else if (currentRow + 1 !== rowCount && currentRow !== rowCount && rowCount > 1) {
-      allowDown = true;
-    }
-    if (loopCounter === itemsPerRow) {
-      loopCounter = 0;
-      currentRow += 1;
-    }
-    let upItem;
-    if (allowUp) {
-      upItem = index - itemsPerRow;
-    }
-    let downItem;
-    if (allowDown) {
-      downItem = itemsPerRow + index;
-    }
-    const childProps = {
-      ref: element => {
-        gridItemRefs.current[index] = element;
-      },
-      "data-up": allowUp,
-      "data-down": allowDown,
-      "data-item-up": upItem,
-      "data-item-down": downItem,
-      required
-    };
-    loopCounter += 1;
-    return /*#__PURE__*/React.cloneElement(child, childProps);
-  });
-  useImperativeHandle(ref, () => ({
-    gridItemRefs: gridItemRefs.current
-  }), [gridItemRefs]);
-  const getElementPosition = useCallback(target => {
-    return navigationGrid.findIndex(element => {
-      return target.getAttribute("value") === element.props.value;
-    });
-  }, [navigationGrid]);
-  const onKeyDownHandler = useCallback(e => {
-    if (onKeyDown) {
-      onKeyDown(e);
-    }
-    const arrowKeys = [Events.isLeftKey(e), Events.isUpKey(e), Events.isRightKey(e), Events.isDownKey(e)];
-    if (!arrowKeys.includes(true)) return;
-    e.preventDefault();
-    let itemIndex = null;
-    const target = e.target;
-    if (Events.isUpKey(e)) {
-      if (target.getAttribute("data-up") !== "true") return;
-      itemIndex = +target.getAttribute("data-item-up");
-    } else if (Events.isDownKey(e)) {
-      if (target.getAttribute("data-down") !== "true") return;
-      itemIndex = +target.getAttribute("data-item-down");
-    }
-    if (Events.isLeftKey(e) || Events.isRightKey(e)) {
-      if (Events.isLeftKey(e)) {
-        itemIndex = getElementPosition(target) - 1;
-      } else {
-        itemIndex = getElementPosition(target) + 1;
-      }
-      if (itemIndex < 0) {
-        itemIndex = navigationGrid.length - 1;
-      } else if (itemIndex > navigationGrid.length - 1) {
-        itemIndex = 0;
-      }
-    }
-
-    /* istanbul ignore else */
-    if (itemIndex !== null) {
-      const item = gridItemRefs.current[itemIndex];
-      item?.focus();
-      item?.click();
-    }
-  }, [onKeyDown, navigationGrid, getElementPosition]);
-  const handleOnBlur = ev => {
-    ev.preventDefault();
-    setTimeout(() => {
-      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
-      /* istanbul ignore else */
-      if (onBlur && hasBlurred) {
-        onBlur(ev);
-      }
-    }, 5);
-  };
-  const handleOnMouseDown = ev => {
-    // If the mousedown event occurred on the currently-focused <SimpleColor>
-    if (focusedElement !== null && focusedElement === ev.target) {
-      ev.preventDefault();
-
-      // If a different <SimpleColor> is currently focused
-    } else if (focusedElement !== null) {
-      ev.preventDefault();
-      setFocusedElement(ev.target);
-
-      // If no <SimpleColor> is currently focused
-    } else {
-      setFocusedElement(ev.target);
-    }
-  };
-  const validationProps = {
-    error,
-    warning,
-    info
-  };
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  return /*#__PURE__*/React.createElement(Fieldset, _extends({
-    role: "radiogroup",
-    legend: legend,
-    isRequired: required
-  }, validationOnLegend && validationProps, tagComponent("simple-color-picker", props), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
-    onMouseEnter,
-    onMouseLeave
-  }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
-    maxWidth: maxWidth,
-    childWidth: childWidth,
-    ref: internalRef,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
-    name: name,
-    value: value,
-    onChange: onChange,
-    onMouseDown: handleOnMouseDown,
-    onKeyDown: onKeyDownHandler,
-    onBlur: handleOnBlur
-  }, navigationGrid))), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
-    tooltipFlipOverrides: ["top", "bottom"]
-  }))));
-});
-SimpleColorPicker.displayName = "SimpleColorPicker";
-export default SimpleColorPicker;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as b}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import h from"../../style/utils/filter-styled-system-margin-props.js";import v from"../../__internal__/utils/logger/index.js";function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){O(e,t,r[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let w=!1;const P=r.forwardRef(((O,P)=>{const{children:D,error:K,warning:k,info:C,name:S,legend:x,onChange:E,onBlur:A,onKeyDown:L,value:M,maxWidth:W=300,childWidth:R=58,validationOnLegend:q,required:B}=O,I=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(O,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),N=n((()=>!r.Children.toArray(D).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[D]);u(N,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const U=n((()=>r.Children.toArray(D).filter((e=>r.isValidElement(e)))),[D]),V=o(null),[F,T]=i(null),$=Math.floor(+W/+R),z=Math.ceil((null==U?void 0:U.length)/$);let G=$*z-(null==U?void 0:U.length),H=1,J=1;const Q=o([]),X=U.map(((e,t)=>{const n=1!==H;let o,i,l=!1;H+1===z&&G-$<0?(l=!0,G+=1):H+1!==z&&H!==z&&z>1&&(l=!0),J===$&&(J=0,H+=1),n&&(o=t-$),l&&(i=$+t);const a={ref:e=>{Q.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:B};return J+=1,r.cloneElement(e,a)}));l(P,(()=>({gridItemRefs:Q.current})),[Q]);const Y=a((e=>X.findIndex((t=>e.getAttribute("value")===t.props.value))),[X]),Z=a((e=>{if(L&&L(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Y(r)-1:Y(r)+1,t<0?t=X.length-1:t>X.length-1&&(t=0)),null!==t){const e=Q.current[t];null==e||e.focus(),null==e||e.click()}}),[L,X,Y]),ee=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==Q||null===(t=Q.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));A&&r&&A(e)}),5)},te=e=>{null!==F&&F===e.target?e.preventDefault():null!==F?(e.preventDefault(),T(e.target)):T(e.target)},re={error:K,warning:k,info:C};return w||E||(w=!0,v.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),e(c,_(j({role:"radiogroup",legend:x,isRequired:B},q&&re,p("simple-color-picker",O),h(I)),{children:t(f,{children:[e(b.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,_(j({maxWidth:W,childWidth:R,ref:V,onMouseEnter:t,onMouseLeave:r},re),{children:e(m,{name:S,value:M,onChange:E,onMouseDown:te,onKeyDown:Z,onBlur:ee,children:X})}))}),!q&&e(g,_(j({},re),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));P.displayName="SimpleColorPicker";export{P as SimpleColorPicker,P as default};

package/esm/components/simple-color-picker/simple-color-picker.style.js

@@ -1,42 +1 @@
-import styled, { css } from "styled-components";
-import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
-const BORDER_WIDTH = 2;
-const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(+maxWidth / +childWidth) * +childWidth;
-const StyledContent = styled.div`
-  display: flex;
-  align-items: center;
-
-  ${StyledValidationIcon} {
-    margin-left: 4px;
-  }
-`;
-const StyledColorOptions = styled.div`
-  max-width: ${({
-  maxWidth,
-  childWidth
-}) => getRoundedMaxWidth(maxWidth, childWidth)}px;
-
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  border-left: ${BORDER_WIDTH}px solid transparent;
-  border-top: ${BORDER_WIDTH}px solid transparent;
-
-  ${({
-  error,
-  info,
-  warning
-}) => {
-  if (error) return css`
-        outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
-      `;
-  if (warning) return css`
-        outline: var(--borderWidth200) solid var(--colorsSemanticCaution500);
-      `;
-  if (info) return css`
-        outline: var(--borderWidth200) solid var(--colorsSemanticInfo500);
-      `;
-  return "";
-}}
-`;
-export { StyledContent, StyledColorOptions };
+import o,{css as i}from"styled-components";import e from"../../__internal__/validations/validation-icon.style.js";const t=o.div.withConfig({displayName:"simple-color-picker.style__StyledContent",componentId:"sc-e2fee886-0"})(["display:flex;align-items:center;","{margin-left:4px;}"],e),r=o.div.withConfig({displayName:"simple-color-picker.style__StyledColorOptions",componentId:"sc-e2fee886-1"})(["max-width:","px;padding:0;display:flex;flex-wrap:wrap;border-left:","px solid transparent;border-top:","px solid transparent;",""],(({maxWidth:o,childWidth:i})=>((o,i)=>Math.floor(+o/+i)*+i)(o,i)),2,2,(({error:o,info:e,warning:t})=>o?i(["outline:var(--borderWidth200) solid var(--colorsSemanticNegative500);"]):t?i(["outline:var(--borderWidth200) solid var(--colorsSemanticCaution500);"]):e?i(["outline:var(--borderWidth200) solid var(--colorsSemanticInfo500);"]):""));export{r as StyledColorOptions,t as StyledContent};

package/esm/components/split-button/__internal__/split-button.context.js

@@ -1,4 +1 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  inSplitButton: false
-});
+import t from"react";var e=t.createContext({inSplitButton:!1});export{e as default};

package/esm/components/split-button/index.js

@@ -1 +1 @@
-export { default } from "./split-button.component";
+export{SplitButton as default}from"./split-button.component.js";

package/esm/components/split-button/split-button-children.style.js

@@ -1,65 +1 @@
-import styled, { css } from "styled-components";
-import BaseTheme from "../../style/themes/base";
-import StyledButton from "../button/button.style";
-export const borderRadiusStyling = `
-  > {
-    &:first-child:last-child > * {
-      border-radius: var(--borderRadius100);
-    }
-
-    &:first-child:not(:last-child) > * {
-      border-top-left-radius: var(--borderRadius100);
-      border-top-right-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius000);
-      border-bottom-left-radius: var(--borderRadius000);
-    }
-
-    &:not(:first-child):not(:last-child) > * {
-      border-radius: var(--borderRadius000);
-    }
-
-    &:last-child:not(:first-child) > * {
-      border-top-right-radius: var(--borderRadius000);
-      border-top-left-radius: var(--borderRadius000);
-      border-bottom-left-radius: var(--borderRadius100);
-      border-bottom-right-radius: var(--borderRadius100);
-    }
-  }
-`;
-const StyledSplitButtonChildrenContainer = styled.ul`
-  border-radius: var(--borderRadius100);
-  ${({
-  theme,
-  align,
-  minWidth
-}) => css`
-    background-color: var(--colorsActionMajorYang100);
-    min-width: ${minWidth}px;
-    white-space: nowrap;
-    z-index: ${theme.zIndex.popover};
-    box-shadow: var(--boxShadow100);
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    ${borderRadiusStyling}
-
-    ${StyledButton} {
-      border: 1px solid var(--colorsActionMajorTransparent);
-      display: flex;
-      justify-content: ${align};
-      margin-left: 0;
-      min-width: 100%;
-      text-align: ${align};
-      z-index: ${theme.zIndex.overlay};
-
-      & + & {
-        margin-top: 3px;
-      }
-    }
-  `}
-`;
-StyledSplitButtonChildrenContainer.defaultProps = {
-  theme: BaseTheme
-};
-export default StyledSplitButtonChildrenContainer;
+import r,{css as o}from"styled-components";import t from"../../style/themes/base/index.js";import d from"../button/button.style.js";const i="\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n",n=r.ul.withConfig({displayName:"split-button-children.style__StyledSplitButtonChildrenContainer",componentId:"sc-90888bca-0"})(["border-radius:var(--borderRadius100);",""],(({theme:r,align:t,minWidth:n})=>o(["background-color:var(--colorsActionMajorYang100);min-width:","px;white-space:nowrap;z-index:",";box-shadow:var(--boxShadow100);list-style:none;padding:0;margin:0;"," ","{border:1px solid var(--colorsActionMajorTransparent);display:flex;justify-content:",";margin-left:0;min-width:100%;text-align:",";z-index:",";& + &{margin-top:3px;}}"],n,r.zIndex.popover,i,d,t,t,r.zIndex.overlay)));n.defaultProps={theme:t};export{i as borderRadiusStyling,n as default};

package/esm/components/split-button/split-button-toggle.style.js

@@ -1,99 +1 @@
-import styled, { css } from "styled-components";
-import StyledButton from "../button/button.style";
-import StyledIcon from "../icon/icon.style";
-import baseTheme from "../../style/themes/base";
-const horizontalPaddingSizes = {
-  small: 5,
-  medium: 10,
-  large: 14
-};
-const StyledSplitButtonToggle = styled(StyledButton)`
-  ${({
-  buttonType,
-  disabled,
-  displayed,
-  size,
-  isWhite
-}) => css`
-    border-top-left-radius: var(--borderRadius000);
-    border-bottom-left-radius: var(--borderRadius000);
-
-    ${!disabled && displayed && !isWhite ? css`
-          background-color: var(--colorsActionMajor500);
-          border-color: var(--colorsActionMajor500);
-
-          &,
-          ${StyledIcon} {
-            color: var(--colorsActionMajorYang100);
-          }
-
-          &:focus {
-            border-left-color: var(--colorsSemanticFocus500);
-          }
-        ` : ""}
-
-    ${!disabled && displayed && isWhite ? css`
-          background-color: var(--colorsActionMajorYang100);
-          border-color: var(--colorsActionMajorYang100);
-
-          &,
-          ${StyledIcon} {
-            color: var(--colorsYin100);
-          }
-
-          &:focus {
-            border-left-color: var(--colorsSemanticFocus500);
-          }
-        ` : ""}
-
-    ${!disabled && buttonType === "primary" && `
-      position: relative;
-      &::before {
-        content: '';
-        width: 2px;
-        height: 100%;
-        background: var(--colorsActionMajorYang100);
-        position: absolute;
-        left: -2px;
-        z-index: 2;
-      }  
-    `}
-
-    ${buttonType === "secondary" && "border-left-width: 0;"}
-    padding: 0 ${horizontalPaddingSizes[size]}px;
-
-    ${StyledButton} + & {
-      margin-left: 0;
-    }
-
-    ${StyledButton} + & ${StyledIcon} {
-      margin-left: 0;
-    }
-
-    &:focus {
-      background-color: var(--colorsActionMajor700);
-      border-color: var(--colorsActionMajor700);
-
-      &,
-      ${StyledIcon} {
-        color: var(--colorsActionMajorYang100);
-      }
-    }
-
-    ${!disabled && isWhite && `
-      &:focus {
-        background-color: var(--colorsActionMajorYang100);
-        border-color: var(--colorsActionMajorYang100);
-
-        &,
-        ${StyledIcon} {
-          color: var(--colorsYin100);
-        }
-      }
-    `}
-  `}
-`;
-StyledSplitButtonToggle.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSplitButtonToggle;
+import o,{css as r}from"styled-components";import n from"../button/button.style.js";import t from"../icon/icon.style.js";import a from"../../style/themes/base/index.js";const c={small:5,medium:10,large:14},e=o(n).withConfig({displayName:"split-button-toggle.style__StyledSplitButtonToggle",componentId:"sc-1225a24a-0"})(["",""],(({buttonType:o,disabled:a,displayed:e,size:l,isWhite:s})=>r(["border-top-left-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);"," "," "," "," padding:0 ","px;"," + &{margin-left:0;}"," + & ","{margin-left:0;}&:focus{background-color:var(--colorsActionMajor700);border-color:var(--colorsActionMajor700);&,","{color:var(--colorsActionMajorYang100);}}",""],a||!e||s?"":r(["background-color:var(--colorsActionMajor500);border-color:var(--colorsActionMajor500);&,","{color:var(--colorsActionMajorYang100);}&:focus{border-left-color:var(--colorsSemanticFocus500);}"],t),!a&&e&&s?r(["background-color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorYang100);&,","{color:var(--colorsYin100);}&:focus{border-left-color:var(--colorsSemanticFocus500);}"],t):"",!a&&"primary"===o&&"\n      position: relative;\n      &::before {\n        content: '';\n        width: 2px;\n        height: 100%;\n        background: var(--colorsActionMajorYang100);\n        position: absolute;\n        left: -2px;\n        z-index: 2;\n      }  \n    ","secondary"===o&&"border-left-width: 0;",c[l],n,n,t,t,!a&&s&&`\n      &:focus {\n        background-color: var(--colorsActionMajorYang100);\n        border-color: var(--colorsActionMajorYang100);\n\n        &,\n        ${t} {\n          color: var(--colorsYin100);\n        }\n      }\n    `)));e.defaultProps={theme:a};export{e as default};

package/esm/components/split-button/split-button.component.js

@@ -1,156 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useRef, forwardRef, useImperativeHandle } from "react";
-import { ThemeContext } from "styled-components";
-import { flip, offset } from "@floating-ui/dom";
-import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-import Icon from "../icon";
-import Button from "../button";
-import StyledSplitButton from "./split-button.style";
-import StyledSplitButtonToggle from "./split-button-toggle.style";
-import StyledSplitButtonChildrenContainer from "./split-button-children.style";
-import guid from "../../__internal__/utils/helpers/guid";
-import Popover from "../../__internal__/popover";
-import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
-import { baseTheme } from "../../style/themes";
-import useChildButtons from "../../hooks/__internal__/useChildButtons";
-import SplitButtonContext from "./__internal__/split-button.context";
-import useLocale from "../../hooks/__internal__/useLocale";
-import FlatTableContext from "../flat-table/__internal__/flat-table.context";
-const CONTENT_WIDTH_RATIO = 0.75;
-export const SplitButton = /*#__PURE__*/forwardRef(({
-  align = "left",
-  position = "right",
-  buttonType = "secondary",
-  children,
-  disabled = false,
-  iconPosition = "before",
-  iconType,
-  onClick,
-  size = "medium",
-  subtext,
-  text,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  "aria-label": ariaLabel,
-  isWhite = false,
-  ...rest
-}, ref) => {
-  const locale = useLocale();
-  const theme = useContext(ThemeContext) || baseTheme;
-  const buttonLabelId = useRef(guid());
-  const mainButtonRef = useRef(null);
-  const toggleButtonRef = useRef(null);
-  const {
-    isInFlatTable
-  } = useContext(FlatTableContext);
-  const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
-  useImperativeHandle(ref, () => ({
-    focusMainButton() {
-      mainButtonRef.current?.focus();
-    },
-    focusToggleButton() {
-      toggleButtonRef.current?.focus();
-    }
-  }), []);
-  const {
-    showAdditionalButtons,
-    showButtons,
-    hideButtons,
-    buttonNode,
-    handleToggleButtonKeyDown,
-    wrapperProps,
-    contextValue
-  } = useChildButtons(toggleButtonRef, CONTENT_WIDTH_RATIO);
-  const handleMainClick = ev => {
-    // ensure button is focused when clicked (Safari)
-    mainButtonRef.current?.focus();
-    if (onClick) {
-      onClick(ev);
-    }
-  };
-  const mainButtonProps = {
-    onFocus: hideButtons,
-    onTouchStart: hideButtons,
-    iconPosition,
-    buttonType,
-    disabled,
-    iconType,
-    onClick: handleMainClick,
-    size,
-    subtext,
-    isWhite: shouldRenderIsWhiteVariant,
-    ...filterOutStyledSystemSpacingProps(rest)
-  };
-  const handleToggleClick = () => {
-    showButtons();
-  };
-  const toggleButtonProps = {
-    isWhite: shouldRenderIsWhiteVariant,
-    disabled,
-    displayed: showAdditionalButtons,
-    onTouchStart: showButtons,
-    onKeyDown: handleToggleButtonKeyDown,
-    onClick: handleToggleClick,
-    buttonType,
-    size
-  };
-  function componentTags() {
-    return {
-      "data-component": "split-button",
-      "data-element": dataElement,
-      "data-role": dataRole
-    };
-  }
-  function getIconColor() {
-    const colorsMap = {
-      primary: theme.colors.white,
-      secondary: theme.colors.primary
-    };
-    return colorsMap[buttonType];
-  }
-  function renderMainButton() {
-    return [/*#__PURE__*/React.createElement(Button, _extends({
-      "data-element": "main-button",
-      key: "main-button",
-      id: buttonLabelId.current,
-      ref: mainButtonRef
-    }, mainButtonProps), text), /*#__PURE__*/React.createElement(StyledSplitButtonToggle, _extends({
-      "aria-haspopup": "true",
-      "aria-expanded": showAdditionalButtons,
-      "aria-label": ariaLabel || locale.splitButton.ariaLabel(),
-      "data-element": "toggle-button",
-      key: "toggle-button",
-      type: "button",
-      ref: toggleButtonRef
-    }, toggleButtonProps), /*#__PURE__*/React.createElement(Icon, {
-      type: "dropdown",
-      color: getIconColor(),
-      bg: "transparent",
-      disabled: disabled
-    }))];
-  }
-  function renderAdditionalButtons() {
-    if (!showAdditionalButtons) return null;
-    return /*#__PURE__*/React.createElement(Popover, {
-      disableBackgroundUI: isInFlatTable,
-      disablePortal: true,
-      placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
-      popoverStrategy: "fixed",
-      reference: buttonNode,
-      middleware: [offset(6), flip({
-        fallbackStrategy: "initialPlacement"
-      })]
-    }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
-      align: align
-    }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
-      value: contextValue
-    }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
-  }
-  const handleClick = useClickAwayListener(hideButtons);
-  const marginProps = filterStyledSystemMarginProps(rest);
-  return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
-    onClick: handleClick,
-    ref: buttonNode
-  }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
-});
-export default SplitButton;
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o,{forwardRef as r,useContext as n,useRef as i,useImperativeHandle as l}from"react";import{ThemeContext as s}from"styled-components";import{offset as a,flip as c}from"@floating-ui/dom";import p from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import u from"../icon/icon.component.js";import m from"../button/button.component.js";import d from"./split-button.style.js";import b from"./split-button-toggle.style.js";import f from"./split-button-children.style.js";import y from"../../__internal__/utils/helpers/guid/index.js";import h from"../../__internal__/popover/popover.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import"../../style/themes/sage/index.js";import O from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import _ from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import w from"./__internal__/split-button.context.js";import v from"../../hooks/__internal__/useLocale/useLocale.js";import P from"../flat-table/__internal__/flat-table.context.js";function x(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function k(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),r.forEach((function(e){x(t,e,o[e])}))}return t}function T(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}const B=r(((r,x)=>{var{align:B="left",position:C="right",buttonType:S="secondary",children:D,disabled:L=!1,iconPosition:z="before",iconType:W,onClick:A,size:E="medium",subtext:I,text:F,"data-element":K,"data-role":M,"aria-label":N,isWhite:U=!1}=r,V=function(t,e){if(null==t)return{};var o,r,n=function(t,e){if(null==t)return{};var o,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)o=i[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(r,["align","position","buttonType","children","disabled","iconPosition","iconType","onClick","size","subtext","text","data-element","data-role","aria-label","isWhite"]);const q=v(),G=n(s)||O,H=i(y()),J=i(null),Q=i(null),{isInFlatTable:R}=n(P),X="secondary"===S&&U;l(x,(()=>({focusMainButton(){var t;null===(t=J.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=Q.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:Y,showButtons:Z,hideButtons:$,buttonNode:tt,handleToggleButtonKeyDown:et,wrapperProps:ot,contextValue:rt}=_(Q,.75),nt=k({onFocus:$,onTouchStart:$,iconPosition:z,buttonType:S,disabled:L,iconType:W,onClick:t=>{var e;null===(e=J.current)||void 0===e||e.focus(),A&&A(t)},size:E,subtext:I,isWhite:X},j(V)),it={isWhite:X,disabled:L,displayed:Y,onTouchStart:Z,onKeyDown:et,onClick:()=>{Z()},buttonType:S,size:E},lt=p($),st=g(V);return t(d,T(k({onClick:lt,ref:tt},{"data-component":"split-button","data-element":K,"data-role":M},st),{children:[[e(m,T(k({"data-element":"main-button",id:H.current,ref:J},nt),{children:F}),"main-button"),e(b,T(k({"aria-haspopup":"true","aria-expanded":Y,"aria-label":N||q.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:Q},it),{children:e(u,{type:"dropdown",color:{primary:G.colors.white,secondary:G.colors.primary}[S],bg:"transparent",disabled:L})}),"toggle-button")],Y?e(h,{disableBackgroundUI:R,disablePortal:!0,placement:"left"===C?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:tt,middleware:[a(6),c({fallbackStrategy:"initialPlacement"})],children:e(f,T(k({},ot),{align:B,children:e(w.Provider,{value:rt,children:o.Children.map(D,(t=>e("li",{children:t})))})}))}):null]}))}));export{B as SplitButton,B as default};

package/esm/components/split-button/split-button.config.js

@@ -1,5 +1 @@
-export const SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
-export const SPLIT_BUTTON_THEMES = ["primary", "secondary"];
-export const SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
-export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
-export const SPLIT_BUTTON_POSITIONS = ["left", "right"];
+const e=["before","after"],r=["primary","secondary"],t=["small","medium","large"],a=["left","right"],l=["left","right"];export{a as SPLIT_BUTTON_ALIGNMENTS,e as SPLIT_BUTTON_ICON_POSITIONS,l as SPLIT_BUTTON_POSITIONS,t as SPLIT_BUTTON_SIZES,r as SPLIT_BUTTON_THEMES};

package/esm/components/split-button/split-button.style.js

@@ -1,26 +1 @@
-import styled from "styled-components";
-import { margin } from "styled-system";
-import StyledButton from "../button/button.style";
-import baseTheme from "../../style/themes/base";
-const StyledSplitButton = styled.div`
-  ${margin}
-  display: inline-block;
-  position: relative;
-
-  & > ${StyledButton}:first-of-type {
-    border-top-right-radius: var(--borderRadius000);
-    border-bottom-right-radius: var(--borderRadius000);
-  }
-
-  & > ${StyledButton} {
-    margin: 0;
-    &:focus {
-      position: relative;
-      z-index: 1;
-    }
-  }
-`;
-StyledSplitButton.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSplitButton;
+import t from"styled-components";import{margin as o}from"styled-system";import e from"../button/button.style.js";import i from"../../style/themes/base/index.js";const r=t.div.withConfig({displayName:"split-button.style__StyledSplitButton",componentId:"sc-ff359e9-0"})([""," display:inline-block;position:relative;& > ",":first-of-type{border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}& > ","{margin:0;&:focus{position:relative;z-index:1;}}"],o,e,e);r.defaultProps={theme:i};export{r as default};

package/esm/components/step-flow/__internal__/step-flow.context.js

@@ -1,7 +1 @@
-import createStrictContext from "../../../__internal__/utils/createStrictContext";
-const [StepFlowProvider, useStepFlowContext] = createStrictContext({
-  name: "StepFlowContext",
-  errorMessage: "Carbon StepFlow: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
-  defaultValue: {}
-});
-export { StepFlowProvider, useStepFlowContext };
+import e from"../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"StepFlowContext",errorMessage:"Carbon StepFlow: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{}});export{t as StepFlowProvider,o as useStepFlowContext};

package/esm/components/step-flow/index.js

@@ -1,2 +1 @@
-export { default as StepFlow } from "./step-flow.component";
-export { default as StepFlowTitle } from "./step-flow-title/step-flow-title.component";
+export{StepFlow}from"./step-flow.component.js";export{StepFlowTitle}from"./step-flow-title/step-flow-title.component.js";