carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,89 +1 @@
-import styled, { css } from "styled-components";
-import { space } from "styled-system";
-import BaseTheme from "../../style/themes/base";
-import StyledIcon from "../icon/icon.style";
-import StyledIconButton from "../icon-button/icon-button.style";
-const StyledButtonBar = styled.div`
-  ${space}
-  ${({
-  fullWidth,
-  size
-}) => css`
-    ${fullWidth && css`
-      width: 100%;
-      display: flex;
-      button {
-        box-sizing: content-box;
-        padding: 0;
-        width: 100%;
-        ${size === "small" && "min-height: 28px"}
-        ${size === "medium" && "min-height: 36px"}
-          ${size === "large" && "min-height: 44px"}
-      }
-    `}
-
-    button {
-      margin: 0;
-      position: relative;
-
-      &:not(:first-child):not(:last-child) {
-        border-radius: var(--borderRadius000);
-      }
-      &:first-child:not(:last-child) {
-        border-top-right-radius: var(--borderRadius000);
-        border-bottom-right-radius: var(--borderRadius000);
-      }
-      &:last-child:not(:first-child) {
-        border-top-left-radius: var(--borderRadius000);
-        border-bottom-left-radius: var(--borderRadius000);
-      }
-
-      &:not(:first-of-type) {
-        margin-left: -2px;
-      }
-
-      &:not(:disabled) {
-        z-index: 1;
-      }
-
-      &:hover:not(:disabled) {
-        z-index: 2;
-      }
-
-      &:focus {
-        z-index: 3;
-      }
-    }
-
-    ${StyledIconButton}:not(:disabled) {
-      border: 2px solid var(--colorsActionMajor500);
-
-      &:focus {
-        border-right-color: var(--colorsActionMajor500);
-      }
-
-      &:hover {
-        background-color: var(--colorsActionMajor600);
-        border-color: var(--colorsActionMajor600);
-        color: var(--colorsActionMajorYang100);
-      }
-
-      ${StyledIcon} {
-        color: var(--colorsActionMajor500);
-
-        &:hover {
-          color: var(--colorsActionMajorYang100);
-        }
-      }
-    }
-
-    ${StyledIconButton}:disabled {
-      border: 2px solid var(--colorsActionDisabled500);
-    }
-  `}
-`;
-StyledButtonBar.defaultProps = {
-  theme: BaseTheme,
-  size: "medium"
-};
-export default StyledButtonBar;
+import o,{css as r}from"styled-components";import{space as t}from"styled-system";import i from"../../style/themes/base/index.js";import d from"../icon/icon.style.js";import e from"../icon-button/icon-button.style.js";const s=o.div.withConfig({displayName:"button-bar.style__StyledButtonBar",componentId:"sc-f257d590-0"})([""," ",""],t,(({fullWidth:o,size:t})=>r([""," button{margin:0;position:relative;&:not(:first-child):not(:last-child){border-radius:var(--borderRadius000);}&:first-child:not(:last-child){border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);}&:last-child:not(:first-child){border-top-left-radius:var(--borderRadius000);border-bottom-left-radius:var(--borderRadius000);}&:not(:first-of-type){margin-left:-2px;}&:not(:disabled){z-index:1;}&:hover:not(:disabled){z-index:2;}&:focus{z-index:3;}}",":not(:disabled){border:2px solid var(--colorsActionMajor500);&:focus{border-right-color:var(--colorsActionMajor500);}&:hover{background-color:var(--colorsActionMajor600);border-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);}","{color:var(--colorsActionMajor500);&:hover{color:var(--colorsActionMajorYang100);}}}",":disabled{border:2px solid var(--colorsActionDisabled500);}"],o&&r(["width:100%;display:flex;button{box-sizing:content-box;padding:0;width:100%;"," "," ","}"],"small"===t&&"min-height: 28px","medium"===t&&"min-height: 36px","large"===t&&"min-height: 44px"),e,d,e)));s.defaultProps={theme:i,size:"medium"};export{s as default};

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

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

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

@@ -1,41 +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 } from "react";
-import StyledButtonMinor from "./button-minor.style";
-import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
-import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
-export const ButtonMinor = /*#__PURE__*/React.forwardRef(({
-  buttonType: buttonTypeProp = "secondary",
-  disabled = false,
-  destructive = false,
-  size: sizeProp = "medium",
-  iconPosition: iconPositionProp = "before",
-  fullWidth: fullWidthProp = false,
-  ...rest
-}, ref) => {
-  const {
-    buttonType: buttonTypeContext,
-    size: sizeContext,
-    iconPosition: iconPositionContext,
-    fullWidth: fullWidthContext
-  } = useContext(ButtonBarContext);
-  const {
-    batchSelectionDisabled
-  } = useContext(BatchSelectionContext);
-  const buttonType = buttonTypeContext || buttonTypeProp;
-  const size = sizeContext || sizeProp;
-  const iconPosition = iconPositionContext || iconPositionProp;
-  const fullWidth = fullWidthContext || fullWidthProp;
-  const isDisabled = disabled || batchSelectionDisabled;
-  return /*#__PURE__*/React.createElement(StyledButtonMinor, _extends({
-    ref: ref,
-    "data-component": "button-minor",
-    size: size,
-    fullWidth: fullWidth,
-    iconPosition: iconPosition,
-    buttonType: buttonType,
-    disabled: isDisabled,
-    destructive: destructive
-  }, rest));
-});
-ButtonMinor.displayName = "ButtonMinor";
-export default ButtonMinor;
+import{jsx as t}from"react/jsx-runtime";import e,{useContext as r}from"react";import n from"./button-minor.style.js";import o from"../button-bar/__internal__/button-bar.context.js";import i from"../batch-selection/__internal__/batch-selection.context.js";function c(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}const l=e.forwardRef(((e,l)=>{var{buttonType:u="secondary",disabled:a=!1,destructive:b=!1,size:s="medium",iconPosition:f="before",fullWidth:m=!1}=e,p=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(e,["buttonType","disabled","destructive","size","iconPosition","fullWidth"]);const{buttonType:d,size:y,iconPosition:O,fullWidth:j}=r(o),{batchSelectionDisabled:h}=r(i);return t(n,function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){c(t,e,r[e])}))}return t}({ref:l,"data-component":"button-minor",size:y||s,fullWidth:j||m,iconPosition:O||f,buttonType:d||u,disabled:a||h,destructive:b},p))}));l.displayName="ButtonMinor";export{l as ButtonMinor,l as default};

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

@@ -1,100 +1 @@
-import styled, { css } from "styled-components";
-import Button from "../button";
-import StyledIcon from "../icon/icon.style";
-import StyledLoaderSquare from "../loader/loader-square.style";
-function makeColors(color) {
-  return `
-    color: ${color};
-    ${StyledIcon} {
-      color: ${color};
-    }
-    ${StyledLoaderSquare} {
-      background-color: ${color};
-    }
-  `;
-}
-const StyledButtonMinor = styled(Button)`
-  border-radius: var(--borderRadius050);
-
-  ${({
-  children
-}) => !children && css`
-      ${StyledIcon} {
-        position: absolute;
-      }
-    `}
-
-  ${({
-  buttonType,
-  destructive,
-  disabled
-}) => !destructive && !disabled && css`
-      ${buttonType === "primary" && `
-        background: var(--colorsActionMinor500);
-        border-color: var(--colorsActionMinorTransparent);
-        ${makeColors("var(--colorsActionMinorYang100)")}
-        &:hover {
-          background: var(--colorsActionMinor600);
-        }
-      `}
-
-      ${buttonType === "secondary" && `
-        background: transparent;
-        padding: var(--spacing100);
-        border-color: var(--colorsActionMinor500);
-        ${makeColors("var(--colorsActionMinor500)")}
-        &:hover {
-          color: var(--colorsActionMinorYang100);
-          background: var(--colorsActionMinor600);
-        }
-      `}
-
-      ${buttonType === "tertiary" && `
-        background: transparent;
-        padding: var(--spacing100);
-        ${makeColors("var(--colorsActionMinor500)")}
-        &:hover {
-          color: var(--colorsActionMinorYang100);
-          background: var(--colorsActionMinor600);
-        }
-      `}
-    `}
-    
-    ${({
-  isInPassword,
-  disabled
-}) => isInPassword && !disabled && css`
-      ${StyledIcon} {
-        color: var(--colorsUtilityMajor300);
-      }
-
-      &:hover {
-        ${StyledIcon} {
-          color: var(--colorsUtilityMajor300);
-        }
-        color: var(--colorsActionMinor500);
-        background: transparent;
-      }
-    `}
-
-  ${({
-  size
-}) => css`
-    ${size === "small" && `
-      min-height: var(--sizing400);
-      padding: var(--spacing000) var(--spacing100) var(--spacing000)
-        var(--spacing100);
-    `}
-
-    ${size === "medium" && `
-      padding-left: var(--spacing150);
-      padding-right: var(--spacing150);
-    `}
-
-    ${size === "large" && `
-      padding-left: var(--spacing200);
-      padding-right: var(--spacing200);
-    `}
-  `}
-`;
-export default StyledButtonMinor;
+import n,{css as o}from"styled-components";import r from"../button/button.component.js";import a from"../icon/icon.style.js";import i from"../loader/loader-square.style.js";function c(n){return`\n    color: ${n};\n    ${a} {\n      color: ${n};\n    }\n    ${i} {\n      background-color: ${n};\n    }\n  `}const t=n(r).withConfig({displayName:"button-minor.style__StyledButtonMinor",componentId:"sc-e9ee7e36-0"})(["border-radius:var(--borderRadius050);"," "," "," ",""],(({children:n})=>!n&&o(["","{position:absolute;}"],a)),(({buttonType:n,destructive:r,disabled:a})=>!r&&!a&&o([""," "," ",""],"primary"===n&&`\n        background: var(--colorsActionMinor500);\n        border-color: var(--colorsActionMinorTransparent);\n        ${c("var(--colorsActionMinorYang100)")}\n        &:hover {\n          background: var(--colorsActionMinor600);\n        }\n      `,"secondary"===n&&`\n        background: transparent;\n        padding: var(--spacing100);\n        border-color: var(--colorsActionMinor500);\n        ${c("var(--colorsActionMinor500)")}\n        &:hover {\n          color: var(--colorsActionMinorYang100);\n          background: var(--colorsActionMinor600);\n        }\n      `,"tertiary"===n&&`\n        background: transparent;\n        padding: var(--spacing100);\n        ${c("var(--colorsActionMinor500)")}\n        &:hover {\n          color: var(--colorsActionMinorYang100);\n          background: var(--colorsActionMinor600);\n        }\n      `)),(({isInPassword:n,disabled:r})=>n&&!r&&o(["","{color:var(--colorsUtilityMajor300);}&:hover{","{color:var(--colorsUtilityMajor300);}color:var(--colorsActionMinor500);background:transparent;}"],a,a)),(({size:n})=>o([""," "," ",""],"small"===n&&"\n      min-height: var(--sizing400);\n      padding: var(--spacing000) var(--spacing100) var(--spacing000)\n        var(--spacing100);\n    ","medium"===n&&"\n      padding-left: var(--spacing150);\n      padding-right: var(--spacing150);\n    ","large"===n&&"\n      padding-left: var(--spacing200);\n      padding-right: var(--spacing200);\n    ")));export{t as default};

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

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

package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js

@@ -1,14 +1 @@
-import createStrictContext from "../../../../__internal__/utils/createStrictContext";
-const [ButtonToggleGroupProvider, useButtonToggleGroupContext] = createStrictContext({
-  name: "ButtonToggleGroupContext",
-  errorMessage: "Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
-  defaultValue: {
-    onButtonClick: /* istanbul ignore next */() => {},
-    handleKeyDown: /* istanbul ignore next */() => {},
-    pressedButtonValue: undefined,
-    allowDeselect: false,
-    isInGroup: false,
-    isDisabled: false
-  }
-});
-export { ButtonToggleGroupProvider, useButtonToggleGroupContext };
+import e from"../../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{onButtonClick:()=>{},handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isInGroup:!1,isDisabled:!1}});export{t as ButtonToggleGroupProvider,o as useButtonToggleGroupContext};

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -1,153 +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, { useMemo, useState, useRef, useContext } from "react";
-import invariant from "invariant";
-import FormField from "../../../__internal__/form-field";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import guid from "../../../__internal__/utils/helpers/guid";
-import StyledButtonToggleGroup from "./button-toggle-group.style";
-import { ButtonToggle } from "..";
-import { filterStyledSystemMarginProps } from "../../../style/utils";
-import { TooltipProvider } from "../../../__internal__/tooltip-provider";
-import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
-import Events from "../../../__internal__/utils/helpers/events";
-import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
-import { ButtonToggleGroupProvider } from "./__internal__/button-toggle-group.context";
-import HintText from "../../../__internal__/hint-text";
-import Logger from "../../../__internal__/utils/logger";
-let deprecateUncontrolledWarnTriggered = false;
-const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
-const ButtonToggleGroup = ({
-  children,
-  fieldHelp,
-  fieldHelpInline,
-  "aria-label": ariaLabel,
-  label,
-  labelHelp,
-  labelSpacing,
-  inputHint,
-  inputWidth,
-  fullWidth,
-  labelInline,
-  labelWidth,
-  onChange,
-  value,
-  helpAriaLabel,
-  id,
-  allowDeselect = false,
-  disabled = false,
-  ...props
-}) => {
-  const hasCorrectItemStructure = useMemo(() => {
-    const incorrectChild = React.Children.toArray(children).find(child => ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== "ButtonToggle");
-    return !incorrectChild;
-  }, [children]);
-  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``) : invariant(false) : void 0;
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Button Toggle Group` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const labelId = useRef(guid());
-  const hintTextId = useRef(guid());
-  const wrapperRef = useRef(null);
-  const [pressedButtonValue, setPressedButtonValue] = useState();
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  const onButtonClick = buttonValue => {
-    let newValue = buttonValue;
-    const currentValue = value || pressedButtonValue;
-    if (allowDeselect && currentValue === buttonValue) {
-      newValue = undefined;
-    }
-    setPressedButtonValue(newValue);
-  };
-  const getInnerButtons = () => wrapperRef.current?.querySelectorAll(BUTTON_TOGGLE_SELECTOR);
-  // needs to be state not ref, so that a rerender is triggered
-  const [firstButton, setFirstButton] = useState();
-  const handleKeyDown = ev => {
-    const innerButtons = getInnerButtons();
-    // istanbul ignore if
-    if (!innerButtons || !document.activeElement) {
-      return;
-    }
-    const focusedIndex = Array.from(innerButtons).indexOf(document.activeElement);
-    let nextElement;
-    if (Events.isLeftKey(ev)) {
-      const nextIndex = focusedIndex === 0 ? innerButtons.length - 1 : focusedIndex - 1;
-      nextElement = innerButtons[nextIndex];
-    } else if (Events.isRightKey(ev)) {
-      const nextIndex = (focusedIndex + 1) % innerButtons.length;
-      nextElement = innerButtons[nextIndex];
-    }
-    // istanbul ignore else
-    if (nextElement instanceof HTMLButtonElement) {
-      nextElement.focus();
-    }
-  };
-  const childButtonCallbackRef = button => {
-    // setTimeout needed as otherwise innerButtons aren't picked up by the query even though the ref is attached
-    setTimeout(() => {
-      // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
-      // get called with null when the component is about to be unmounted, and it has been unmounted by the time
-      // the setTimeout completes
-      /* istanbul ignore else */
-      if (button) {
-        const innerButtons = getInnerButtons();
-        /* istanbul ignore if */
-        if (!innerButtons) {
-          setFirstButton(undefined);
-        } else if (button === innerButtons[0]) {
-          setFirstButton(button);
-        }
-      }
-    }, 0);
-  };
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel
-  }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
-    label: label,
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelSpacing: computeLabelPropValues(labelSpacing),
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    fieldHelpInline: computeLabelPropValues(fieldHelpInline),
-    labelInline: computeLabelPropValues(labelInline),
-    labelWidth: computeLabelPropValues(labelWidth),
-    labelId: labelId.current,
-    id: id,
-    labelAs: "span",
-    disabled: disabled
-  }, filterStyledSystemMarginProps(props), tagComponent(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/React.createElement(ButtonToggleGroupProvider, {
-    value: {
-      onButtonClick,
-      handleKeyDown,
-      pressedButtonValue: value || pressedButtonValue,
-      onChange,
-      allowDeselect,
-      isInGroup: true,
-      isDisabled: disabled,
-      firstButton,
-      childButtonCallbackRef,
-      hintTextId: inputHint ? hintTextId.current : undefined
-    }
-  }, inputHint && /*#__PURE__*/React.createElement(HintText, {
-    id: hintTextId.current,
-    isDisabled: disabled,
-    marginBottom: "var(--spacing150)"
-  }, inputHint), /*#__PURE__*/React.createElement(StyledButtonToggleGroup, _extends({
-    ref: wrapperRef
-  }, label ? {
-    "aria-labelledby": labelId.current
-  } : {
-    "aria-label": ariaLabel
-  }, {
-    labelInline: labelInline,
-    inputWidth: inputWidth,
-    fullWidth: fullWidth,
-    role: "group",
-    id: id,
-    disabled: disabled
-  }), children)))));
-};
-ButtonToggleGroup.displayName = "ButtonToggleGroup";
-export default ButtonToggleGroup;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import l,{useMemo as n,useRef as r,useState as i,useContext as o}from"react";import a from"invariant";import p from"../../../__internal__/form-field/form-field.component.js";import s from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../__internal__/utils/helpers/guid/index.js";import c from"./button-toggle-group.style.js";import{ButtonToggle as d}from"../button-toggle.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import b from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as f}from"../../../__internal__/tooltip-provider/index.js";import{InputGroupBehaviour as m}from"../../../__internal__/input-behaviour/input-group-behaviour.component.js";import g from"../../../__internal__/utils/helpers/events/events.js";import y from"../../carbon-provider/__internal__/new-validation.context.js";import{ButtonToggleGroupProvider as h}from"./__internal__/button-toggle-group.context.js";import{HintText as _}from"../../../__internal__/hint-text/hint-text.component.js";import v from"../../../__internal__/utils/logger/index.js";function j(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function O(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){j(e,t,l[t])}))}return e}function w(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 l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}let P=!1;const x=j=>{var{children:x,fieldHelp:H,fieldHelpInline:I,"aria-label":B,label:D,labelHelp:S,labelSpacing:W,inputHint:A,inputWidth:E,fullWidth:T,labelInline:k,labelWidth:C,onChange:L,value:G,helpAriaLabel:K,id:N,allowDeselect:R=!1,disabled:V=!1}=j,q=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(j,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled"]);const M=n((()=>!l.Children.toArray(x).find((e=>!l.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[x]);a(M,`\`ButtonToggleGroup\` only accepts children of type \`${d.displayName}\``),P||L||(P=!0,v.deprecate("Uncontrolled behaviour in `Button Toggle Group` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const U=r(u()),$=r(u()),z=r(null),[F,J]=i(),{validationRedesignOptIn:Q}=o(y),X=e=>Q?void 0:e,Y=()=>{var e;return null===(e=z.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[Z,ee]=i();var te;return e(f,{helpAriaLabel:K,children:e(m,{children:e(p,w(O({label:D,labelHelp:X(S),labelSpacing:X(W),fieldHelp:X(H),fieldHelpInline:X(I),labelInline:X(k),labelWidth:X(C),labelId:U.current,id:N,labelAs:"span",disabled:V},b(q),s(null!==(te=q["data-component"])&&void 0!==te?te:"button-toggle-group",q)),{children:t(h,{value:{onButtonClick:e=>{let t=e;R&&(G||F)===e&&(t=void 0),J(t)},handleKeyDown:e=>{const t=Y();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let n;g.isLeftKey(e)?n=t[0===l?t.length-1:l-1]:g.isRightKey(e)&&(n=t[(l+1)%t.length]),n instanceof HTMLButtonElement&&n.focus()},pressedButtonValue:G||F,onChange:L,allowDeselect:R,isInGroup:!0,isDisabled:V,firstButton:Z,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=Y();t?e===t[0]&&ee(e):ee(void 0)}}),0)},hintTextId:A?$.current:void 0},children:[A&&e(_,{id:$.current,isDisabled:V,marginBottom:"var(--spacing150)",children:A}),e(c,w(O({ref:z},D?{"aria-labelledby":U.current}:{"aria-label":B}),{labelInline:k,inputWidth:E,fullWidth:T,role:"group",id:N,disabled:V,children:x}))]})}))})})};x.displayName="ButtonToggleGroup";export{x as default};

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

@@ -1,47 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import { baseTheme } from "../../../style/themes";
-import { StyledButtonToggle, StyledButtonToggleWrapper } from "../button-toggle.style";
-const StyledButtonToggleGroup = styled.div`
-  ${margin}
-
-  display: flex;
-  box-shadow: inset 0px 0px 0px 1px var(--colorsActionMinor500);
-  border-radius: var(--borderRadius100);
-  padding: 4px;
-  gap: 4px;
-  width: fit-content;
-  height: fit-content;
-  flex-wrap: ${({
-  labelInline
-}) => labelInline ? "nowrap" : "wrap"};
-
-  ${({
-  disabled
-}) => disabled && css`
-      cursor: not-allowed;
-      box-shadow: inset 0px 0px 0px 1px var(--colorsActionDisabled600);
-    `}
-
-  ${({
-  fullWidth
-}) => fullWidth && css`
-      width: 100%;
-      ${StyledButtonToggle} {
-        width: 100%;
-      }
-      ${StyledButtonToggleWrapper} {
-        flex: auto;
-      }
-    `}
-
-  ${({
-  inputWidth
-}) => inputWidth && css`
-      width: ${`${inputWidth}%`};
-    `}
-`;
-StyledButtonToggleGroup.defaultProps = {
-  theme: baseTheme
-};
-export default StyledButtonToggleGroup;
+import t,{css as e}from"styled-components";import{margin as o}from"styled-system";import"../../../style/themes/sage/index.js";import s from"../../../style/themes/base/index.js";import"../../../style/themes/none/index.js";import{StyledButtonToggle as i,StyledButtonToggleWrapper as d}from"../button-toggle.style.js";const p=t.div.withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-c5ffb70e-0"})([""," display:flex;box-shadow:inset 0px 0px 0px 1px var(--colorsActionMinor500);border-radius:var(--borderRadius100);padding:4px;gap:4px;width:fit-content;height:fit-content;flex-wrap:",";"," "," ",""],o,(({labelInline:t})=>t?"nowrap":"wrap"),(({disabled:t})=>t&&e(["cursor:not-allowed;box-shadow:inset 0px 0px 0px 1px var(--colorsActionDisabled600);"])),(({fullWidth:t})=>t&&e(["width:100%;","{width:100%;}","{flex:auto;}"],i,d)),(({inputWidth:t})=>t&&e(["width:",";"],`${t}%`)));p.defaultProps={theme:s};export{p as default};

package/esm/components/button-toggle/button-toggle-group/index.js

@@ -1 +1 @@
-export { default } from "./button-toggle-group.component";
+export{default}from"./button-toggle-group.component.js";

package/esm/components/button-toggle/button-toggle-icon.component.js

@@ -1,19 +1 @@
-import React from "react";
-import { StyledButtonToggleIcon } from "./button-toggle.style";
-import Icon from "../icon";
-const ButtonToggleIcon = ({
-  buttonIcon,
-  buttonIconSize,
-  disabled,
-  hasContent
-}) => /*#__PURE__*/React.createElement(StyledButtonToggleIcon, {
-  buttonIconSize: buttonIconSize,
-  hasContent: hasContent,
-  "data-role": "button-toggle-icon"
-}, /*#__PURE__*/React.createElement(Icon, {
-  "aria-hidden": true,
-  type: buttonIcon,
-  fontSize: buttonIconSize,
-  disabled: disabled
-}));
-export default ButtonToggleIcon;
+import{jsx as t}from"react/jsx-runtime";import"react";import{StyledButtonToggleIcon as o}from"./button-toggle.style.js";import n from"../icon/icon.component.js";const e=({buttonIcon:e,buttonIconSize:i,disabled:r,hasContent:a})=>t(o,{buttonIconSize:i,hasContent:a,"data-role":"button-toggle-icon",children:t(n,{"aria-hidden":!0,type:e,fontSize:i,disabled:r})});export{e as default};

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

@@ -1,120 +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 } from "react";
-import invariant from "invariant";
-import { StyledButtonToggle, StyledButtonToggleWrapper } from "./button-toggle.style";
-import guid from "../../__internal__/utils/helpers/guid";
-import { useButtonToggleGroupContext } from "./button-toggle-group/__internal__/button-toggle-group.context";
-import ButtonToggleIcon from "./button-toggle-icon.component";
-import { InputGroupContext } from "../../__internal__/input-behaviour";
-import Logger from "../../__internal__/utils/logger";
-let deprecatePressedWarnTriggered = false;
-export const ButtonToggle = ({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  buttonIcon,
-  buttonIconSize = "small",
-  children,
-  "data-component": dataComponent,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  disabled,
-  onBlur,
-  onFocus,
-  onClick,
-  pressed,
-  size = "medium",
-  value
-}) => {
-  !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
-  if (pressed && !deprecatePressedWarnTriggered) {
-    Logger.deprecate("The `pressed` prop is deprecated.");
-    deprecatePressedWarnTriggered = true;
-  }
-  const buttonRef = useRef(null);
-  const {
-    onMouseEnter,
-    onMouseLeave,
-    onBlur: inputGroupOnBlur,
-    onFocus: inputGroupOnFocus
-  } = useContext(InputGroupContext);
-  const {
-    onButtonClick,
-    handleKeyDown,
-    pressedButtonValue,
-    onChange,
-    allowDeselect,
-    isInGroup,
-    isDisabled,
-    firstButton,
-    childButtonCallbackRef,
-    hintTextId
-  } = useButtonToggleGroupContext();
-  const callbackRef = element => {
-    buttonRef.current = element;
-    childButtonCallbackRef?.(element);
-  };
-  const inputGuid = useRef(guid());
-  function handleClick(ev) {
-    if (onClick) {
-      onClick(ev);
-    }
-    const newValue = allowDeselect && pressedButtonValue && pressedButtonValue === value ? undefined : value;
-    onChange?.(ev, newValue);
-    if (value) {
-      onButtonClick(value);
-    }
-  }
-  function handleFocus(ev) {
-    onFocus?.(ev);
-    inputGroupOnFocus?.();
-  }
-  function handleBlur(ev) {
-    onBlur?.(ev);
-    inputGroupOnBlur?.();
-  }
-  const isPressed = isInGroup ? pressedButtonValue && pressedButtonValue === value : pressed;
-  const isFirstButton = buttonRef.current === firstButton;
-
-  // if we're in a ButtonToggleGroup, only one button should be tabbable - the pressed button if there is one, or
-  // the first one if not
-  const tabbable = !isInGroup || isPressed || !pressedButtonValue && isFirstButton;
-  return /*#__PURE__*/React.createElement(StyledButtonToggleWrapper, {
-    "data-component": dataComponent || "button-toggle",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, /*#__PURE__*/React.createElement(StyledButtonToggle, _extends({
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": hintTextId,
-    "aria-pressed": !!isPressed,
-    buttonIcon: buttonIcon,
-    buttonIconSize: buttonIconSize,
-    "data-element": "button-toggle-button",
-    disabled: disabled || isDisabled,
-    id: inputGuid.current,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    size: size,
-    value: value,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-    // In Safari non-text input elements do not gain focus on click. To get around this, we have to apply a tab-index of 0 here.
-    // This is to allow the ButtonToggle component to be focused when it is the first tabbable element.
-  }, tabbable ? {
-    tabIndex: 0
-  } : {
-    tabIndex: -1
-  }, {
-    allowDeselect: allowDeselect,
-    ref: callbackRef
-  }), buttonIcon && /*#__PURE__*/React.createElement(ButtonToggleIcon, {
-    buttonIcon: buttonIcon,
-    buttonIconSize: buttonIconSize,
-    disabled: disabled,
-    hasContent: !!children
-  }), children));
-};
-ButtonToggle.displayName = "ButtonToggle";
-export default ButtonToggle;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useContext as o}from"react";import r from"invariant";import{StyledButtonToggleWrapper as l,StyledButtonToggle as i}from"./button-toggle.style.js";import a from"../../__internal__/utils/helpers/guid/index.js";import{useButtonToggleGroupContext as u}from"./button-toggle-group/__internal__/button-toggle-group.context.js";import c from"./button-toggle-icon.component.js";import{InputGroupContext as s}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import b from"../../__internal__/utils/logger/index.js";function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){p(e,t,n[t])}))}return e}let m=!1;const f=({"aria-label":p,"aria-labelledby":f,buttonIcon:g,buttonIconSize:y="small",children:O,"data-component":j,"data-element":h,"data-role":_,disabled:v,onBlur:w,onFocus:I,onClick:P,pressed:D,size:x="medium",value:B})=>{r(!(!O&&!g),"Either prop `buttonIcon` must be defined, or this node must have children"),D&&!m&&(b.deprecate("The `pressed` prop is deprecated."),m=!0);const S=n(null),{onMouseEnter:k,onMouseLeave:C,onBlur:z,onFocus:E}=o(s),{onButtonClick:M,handleKeyDown:F,pressedButtonValue:T,onChange:K,allowDeselect:L,isInGroup:G,isDisabled:N,firstButton:R,childButtonCallbackRef:V,hintTextId:q}=u(),A=n(a()),H=G?T&&T===B:D,J=S.current===R,Q=!G||H||!T&&J;return e(l,{"data-component":j||"button-toggle","data-element":h,"data-role":_,children:t(i,(U=d({"aria-label":p,"aria-labelledby":f,"aria-describedby":q,"aria-pressed":!!H,buttonIcon:g,buttonIconSize:y,"data-element":"button-toggle-button",disabled:v||N,id:A.current,onMouseEnter:k,onMouseLeave:C,size:x,value:B,onFocus:function(e){null==I||I(e),null==E||E()},onBlur:function(e){null==w||w(e),null==z||z()},onClick:function(e){P&&P(e),null==K||K(e,L&&T&&T===B?void 0:B),B&&M(B)},onKeyDown:F},Q?{tabIndex:0}:{tabIndex:-1}),W={allowDeselect:L,ref:e=>{S.current=e,null==V||V(e)},children:[g&&e(c,{buttonIcon:g,buttonIconSize:y,disabled:v,hasContent:!!O}),O]},W=null!=W?W:{},Object.getOwnPropertyDescriptors?Object.defineProperties(U,Object.getOwnPropertyDescriptors(W)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(W)).forEach((function(e){Object.defineProperty(U,e,Object.getOwnPropertyDescriptor(W,e))})),U))});var U,W};f.displayName="ButtonToggle";export{f as ButtonToggle,f as default};