carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/action-popover/action-popover.component.js

@@ -1,227 +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, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef, useContext } from "react";
-import invariant from "invariant";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
-import Events from "../../__internal__/utils/helpers/events";
-import Popover from "../../__internal__/popover";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-import ActionPopoverMenu from "./action-popover-menu/action-popover-menu.component";
-import ActionPopoverItem from "./action-popover-item/action-popover-item.component";
-import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
-import { ActionPopoverProvider } from "./__internal__/action-popover.context";
-import useModalManager from "../../hooks/__internal__/useModalManager";
-import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
-import FlatTableContext from "../flat-table/__internal__/flat-table.context";
-const onOpenDefault = () => {};
-const onCloseDefault = () => {};
-export const ActionPopover = /*#__PURE__*/forwardRef(({
-  children,
-  id,
-  onOpen = onOpenDefault,
-  onClose = onCloseDefault,
-  rightAlignMenu,
-  renderButton,
-  placement = "bottom",
-  horizontalAlignment = "left",
-  submenuPosition = "left",
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-describedby": ariaDescribedBy,
-  ...rest
-}, ref) => {
-  const l = useLocale();
-  const [isOpen, setOpenState] = useState(false);
-  const [focusIndex, setFocusIndex] = useState(0);
-  const [guid] = useState(createGuid());
-  const buttonRef = useRef(null);
-  const menu = useRef(null);
-  const {
-    isInFlatTable
-  } = useContext(FlatTableContext);
-  const hasProperChildren = useMemo(() => {
-    const incorrectChild = React.Children.toArray(children).find(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return true;
-      }
-      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
-    });
-    return !incorrectChild;
-  }, [children]);
-  const items = useMemo(() => getItems(children), [children]);
-  const firstFocusableItem = findFirstFocusableItem(items);
-  const lastFocusableItem = findLastFocusableItem(items);
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`) : invariant(false) : void 0;
-  const mappedPlacement = useMemo(() => {
-    if (placement === "top" && !rightAlignMenu) {
-      return "top-end";
-    }
-    if (placement === "top" && rightAlignMenu) {
-      return "top-start";
-    }
-    if (placement === "bottom" && rightAlignMenu) {
-      return "bottom-start";
-    }
-    return "bottom-end";
-  }, [placement, rightAlignMenu]);
-  const setOpen = useCallback(value => {
-    if (value && !isOpen) {
-      onOpen();
-    }
-    if (!value && isOpen) {
-      onClose();
-    }
-    setOpenState(value);
-  }, [isOpen, onOpen, onClose]);
-  const focusButton = useCallback(() => {
-    const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
-    button?.focus();
-  }, []);
-  useImperativeHandle(ref, () => ({
-    focusButton() {
-      focusButton();
-    }
-  }), [focusButton]);
-  const onButtonClick = useCallback(e => {
-    e.stopPropagation();
-    const isOpening = !isOpen;
-    setFocusIndex(firstFocusableItem);
-    setOpen(isOpening);
-    if (!isOpening) {
-      // Closing the menu should focus the MenuButton
-      focusButton();
-    }
-  }, [isOpen, firstFocusableItem, setOpen, focusButton]);
-
-  // Keyboard commands implemented as recommended by WAI-ARIA best practices
-  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
-
-  const onButtonKeyDown = useCallback(e => {
-    if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusIndex(firstFocusableItem);
-      setOpen(true);
-    } else if (Events.isUpKey(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusIndex(lastFocusableItem);
-      setOpen(true);
-    }
-  }, [firstFocusableItem, lastFocusableItem, setOpen]);
-  const handleEscapeKey = useCallback(e => {
-    /* istanbul ignore else */
-    if (Events.isEscKey(e)) {
-      setOpen(false);
-      focusButton();
-    }
-  }, [setOpen, focusButton]);
-  useModalManager({
-    open: isOpen,
-    closeModal: handleEscapeKey,
-    modalRef: buttonRef
-  });
-  useEffect(() => {
-    const handler = ({
-      target
-    }) => {
-      // If the event didn't come from part of this component, close the menu.
-      // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
-      // other instances on the same page
-
-      const isInMenu = menu?.current?.contains(target);
-      const isInButton = buttonRef?.current?.contains(target);
-      if (!isInMenu && !isInButton) {
-        setOpen(false);
-      }
-    };
-    const event = "click";
-    document.addEventListener(event, handler, {
-      capture: true
-    });
-    return function cleanup() {
-      document.removeEventListener(event, handler, {
-        capture: true
-      });
-    };
-  }, [setOpen]);
-  const menuButton = menuID => {
-    if (renderButton) {
-      const renderButtonComponent = renderButton({
-        tabIndex: isOpen ? -1 : 0,
-        "data-element": "action-popover-button",
-        ariaAttributes: {
-          "aria-haspopup": "true",
-          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          "aria-controls": menuID,
-          "aria-expanded": `${isOpen}`
-        }
-      });
-      const buttonHasString = checkChildrenForString(renderButtonComponent);
-      return renderButton({
-        tabIndex: isOpen ? -1 : 0,
-        "data-element": "action-popover-button",
-        ariaAttributes: {
-          "aria-haspopup": "true",
-          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
-          "aria-labelledby": ariaLabelledBy,
-          "aria-describedby": ariaDescribedBy,
-          "aria-controls": menuID,
-          "aria-expanded": `${isOpen}`
-        }
-      });
-    }
-    return /*#__PURE__*/React.createElement(StyledButtonIcon, {
-      role: "button",
-      "aria-haspopup": "true",
-      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-controls": menuID,
-      "aria-expanded": isOpen,
-      tabIndex: isOpen ? -1 : 0,
-      "data-element": "action-popover-button"
-    }, /*#__PURE__*/React.createElement(ButtonIcon, {
-      type: "ellipsis_vertical"
-    }));
-  };
-  const parentID = id || `ActionPopoverButton_${guid}`;
-  const menuID = `ActionPopoverMenu_${guid}`;
-  const menuProps = {
-    buttonRef,
-    parentID,
-    setFocusIndex,
-    focusIndex,
-    menuID,
-    isOpen,
-    setOpen,
-    rightAlignMenu,
-    placement,
-    horizontalAlignment
-  };
-  return /*#__PURE__*/React.createElement(MenuButton, _extends({
-    id: parentID,
-    onKeyDown: onButtonKeyDown,
-    onClick: onButtonClick,
-    isOpen,
-    ref: buttonRef
-  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverProvider, {
-    value: {
-      setOpenPopover: setOpen,
-      focusButton,
-      submenuPosition,
-      isOpenPopover: isOpen
-    }
-  }, isOpen && /*#__PURE__*/React.createElement(Popover, {
-    placement: mappedPlacement,
-    reference: buttonRef,
-    disableBackgroundUI: isInFlatTable
-  }, /*#__PURE__*/React.createElement(ActionPopoverMenu, _extends({
-    "data-component": "action-popover",
-    ref: menu
-  }, menuProps), children))));
-});
-export default ActionPopover;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o,{forwardRef as r,useState as n,useRef as a,useContext as i,useMemo as l,useCallback as p,useImperativeHandle as c,useEffect as s}from"react";import u from"invariant";import d from"../../__internal__/utils/helpers/tags/tags.js";import{MenuItemDivider as b,MenuButton as m,StyledButtonIcon as f,ButtonIcon as v}from"./action-popover.style.js";import y from"../../__internal__/utils/helpers/events/events.js";import _ from"../../__internal__/popover/popover.component.js";import O from"../../__internal__/utils/helpers/guid/index.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import j from"./action-popover-menu/action-popover-menu.component.js";import{ActionPopoverItem as h}from"./action-popover-item/action-popover-item.component.js";import"./action-popover-divider/action-popover-divider.component.js";import{ActionPopoverProvider as P}from"./__internal__/action-popover.context.js";import x from"../../hooks/__internal__/useModalManager/useModalManager.js";import{getItems as w,findFirstFocusableItem as A,findLastFocusableItem as D,checkChildrenForString as I}from"./__internal__/action-popover.utils.js";import M from"../flat-table/__internal__/flat-table.context.js";function k(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function E(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){k(e,t,o[t])}))}return e}function S(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 o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const L=()=>{},B=()=>{},K=r(((r,k)=>{var{children:K,id:$,onOpen:C=L,onClose:z=B,rightAlignMenu:F,renderButton:N,placement:R="bottom",horizontalAlignment:U="left",submenuPosition:q="left","aria-label":T,"aria-labelledby":V,"aria-describedby":G}=r,H=function(e,t){if(null==e)return{};var o,r,n=function(e,t){if(null==e)return{};var o,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||(n[o]=e[o]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(r,["children","id","onOpen","onClose","rightAlignMenu","renderButton","placement","horizontalAlignment","submenuPosition","aria-label","aria-labelledby","aria-describedby"]);const J=g(),[Q,W]=n(!1),[X,Y]=n(0),[Z]=n(O()),ee=a(null),te=a(null),{isInFlatTable:oe}=i(M),re=l((()=>!o.Children.toArray(K).find((e=>!o.isValidElement(e)||e.type!==h&&e.type!==b))),[K]),ne=l((()=>w(K)),[K]),ae=A(ne),ie=D(ne);u(re,`ActionPopover only accepts children of type \`${h.displayName}\` and \`${b.displayName}\`.`);const le=l((()=>"top"!==R||F?"top"===R&&F?"top-start":"bottom"===R&&F?"bottom-start":"bottom-end":"top-end"),[R,F]),pe=p((e=>{e&&!Q&&C(),!e&&Q&&z(),W(e)}),[Q,C,z]),ce=p((()=>{var e;const t=null===(e=ee.current)||void 0===e?void 0:e.querySelector("[data-element='action-popover-button']");null==t||t.focus()}),[]);c(k,(()=>({focusButton(){ce()}})),[ce]);const se=p((e=>{e.stopPropagation();const t=!Q;Y(ae),pe(t),t||ce()}),[Q,ae,pe,ce]),ue=p((e=>{y.isSpaceKey(e)||y.isDownKey(e)||y.isEnterKey(e)?(e.preventDefault(),e.stopPropagation(),Y(ae),pe(!0)):y.isUpKey(e)&&(e.preventDefault(),e.stopPropagation(),Y(ie),pe(!0))}),[ae,ie,pe]),de=p((e=>{y.isEscKey(e)&&(pe(!1),ce())}),[pe,ce]);x({open:Q,closeModal:de,modalRef:ee}),s((()=>{const e=({target:e})=>{var t,o;const r=null==te||null===(t=te.current)||void 0===t?void 0:t.contains(e),n=null==ee||null===(o=ee.current)||void 0===o?void 0:o.contains(e);r||n||pe(!1)},t="click";return document.addEventListener(t,e,{capture:!0}),function(){document.removeEventListener(t,e,{capture:!0})}}),[pe]);const be=$||`ActionPopoverButton_${Z}`,me=`ActionPopoverMenu_${Z}`,fe={buttonRef:ee,parentID:be,setFocusIndex:Y,focusIndex:X,menuID:me,isOpen:Q,setOpen:pe,rightAlignMenu:F,placement:R,horizontalAlignment:U};return e(m,S(E({id:be,onKeyDown:ue,onClick:se,isOpen:Q,ref:ee},H,d("action-popover-wrapper",H)),{children:[(e=>{if(N){const t=N({tabIndex:Q?-1:0,"data-element":"action-popover-button",ariaAttributes:{"aria-haspopup":"true","aria-label":T||J.actionPopover.ariaLabel(),"aria-labelledby":V,"aria-describedby":G,"aria-controls":e,"aria-expanded":`${Q}`}}),o=I(t);return N({tabIndex:Q?-1:0,"data-element":"action-popover-button",ariaAttributes:{"aria-haspopup":"true","aria-label":o?void 0:T||J.actionPopover.ariaLabel(),"aria-labelledby":V,"aria-describedby":G,"aria-controls":e,"aria-expanded":`${Q}`}})}return t(f,{role:"button","aria-haspopup":"true","aria-label":T||J.actionPopover.ariaLabel(),"aria-labelledby":V,"aria-describedby":G,"aria-controls":e,"aria-expanded":Q,tabIndex:Q?-1:0,"data-element":"action-popover-button",children:t(v,{type:"ellipsis_vertical"})})})(me),t(P,{value:{setOpenPopover:pe,focusButton:ce,submenuPosition:q,isOpenPopover:Q},children:Q&&t(_,{placement:le,reference:ee,disableBackgroundUI:oe,children:t(j,S(E({"data-component":"action-popover",ref:te},fe),{children:K}))})})]}))}));export{K as ActionPopover,K as default};

package/esm/components/action-popover/action-popover.style.js

@@ -1,241 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import Icon from "../icon";
-import StyledIcon from "../icon/icon.style";
-import StyledButton from "../button/button.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import baseTheme from "../../style/themes/base";
-const Menu = styled.ul`
-  ${({
-  isOpen
-}) => isOpen ? "display: block;" : "visibility: hidden;"}
-  margin: 0;
-  list-style: none;
-  padding: var(--spacing100) 0;
-  box-shadow: var(--boxShadow100);
-  position: absolute;
-  border-radius: var(--borderRadius100);
-  background-color: var(--colorsUtilityYang100);
-  z-index: ${({
-  theme
-}) => `${theme.zIndex?.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
-`;
-function getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu) {
-  // computing padding for "inner text" element of a menu item.
-  // childHasSubmenu - ANY sibling (including itself?) has the 'submenu' prop
-  // childHasIcon - ANY sibling (including itself?) has the 'icon' prop
-  // hasIcon - has the 'icon' prop
-  // hasSubmenu - has the 'submenu' prop
-  if (!childHasIcon && childHasSubmenu && !hasIcon && !hasSubmenu) {
-    return "var(--spacing400)";
-  }
-  if (childHasIcon && childHasSubmenu && !hasIcon && hasSubmenu) {
-    return "var(--spacing600)";
-  }
-  if (childHasIcon && childHasSubmenu && !hasIcon && !hasSubmenu) {
-    return "var(--spacing900)";
-  }
-  return "var(--spacing100)";
-}
-function getIconPaddingValues(index, horizontalAlignment, submenuPosition, siblingsHaveIconAndSubmenu, isASubmenu) {
-  const sameAlignment = horizontalAlignment === "left" && submenuPosition === "left" || horizontalAlignment === "right" && submenuPosition === "right";
-  if (siblingsHaveIconAndSubmenu && sameAlignment) {
-    if (horizontalAlignment === "left") {
-      return index === 1 ? "var(--spacing100)" : "var(--spacing400)";
-    }
-    return index === 1 ? "var(--spacing400)" : "var(--spacing100)";
-  }
-  if (isASubmenu) {
-    if (horizontalAlignment === "left") {
-      return index === 1 ? "var(--spacing100)" : "var(--spacing000)";
-    }
-    return index === 1 ? "var(--spacing000)" : "var(--spacing100)";
-  }
-  return "var(--spacing100)";
-}
-const StyledMenuItemInnerText = styled.div`
-  ${({
-  childHasSubmenu,
-  childHasIcon,
-  hasIcon,
-  hasSubmenu,
-  submenuPosition,
-  horizontalAlignment,
-  isASubmenu
-}) => css`
-    padding-left: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
-    padding-right: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
-
-    ${horizontalAlignment === "left" && submenuPosition === "left" && !isASubmenu && css`
-      padding-left: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
-    `}
-
-    ${horizontalAlignment === "right" && submenuPosition === "right" && !isASubmenu && css`
-      padding-right: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
-    `}
-  `}
-`;
-const StyledMenuItemOuterContainer = styled.div`
-  display: inherit;
-`;
-const StyledMenuItem = styled.button`
-  ${({
-  horizontalAlignment,
-  submenuPosition,
-  childHasSubmenu,
-  hasSubmenu
-}) => css`
-    justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
-
-    ${horizontalAlignment === "left" && submenuPosition === "right" && css`
-      justify-content: space-between;
-    `}
-
-    ${horizontalAlignment === "right" && submenuPosition === "left" && css`
-      ${childHasSubmenu && hasSubmenu && css`
-        justify-content: space-between;
-      `}
-    `}
-  `}
-
-  text-decoration: none;
-  background-color: var(--colorsActionMajorYang100);
-  cursor: pointer;
-  box-sizing: border-box;
-  padding: 0 var(--spacing150);
-  position: relative;
-  line-height: 40px;
-  white-space: nowrap;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  border: none;
-  width: 100%;
-  color: var(--colorsUtilityYin090);
-  font-size: 14px;
-  font-weight: 500;
-
-  &:focus {
-    ${addFocusStyling()}
-    z-index: 1;
-    border-radius: var(--borderRadius000);
-  }
-
-  ${({
-  isDisabled
-}) => isDisabled && css`
-      color: var(--colorsUtilityYin030);
-      cursor: not-allowed;
-
-      && ${StyledIcon} {
-        cursor: not-allowed;
-        color: var(--colorsUtilityYin030);
-      }
-
-      :focus {
-        border: none;
-        outline: none;
-        -webkit-appearance: none;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-      }
-    `}
-
-  ${({
-  isDisabled
-}) => !isDisabled && css`
-      &:focus,
-      &:hover {
-        background-color: var(--colorsUtilityMajor100);
-      }
-      && ${StyledIcon} {
-        cursor: pointer;
-      }
-    `}
-`;
-StyledMenuItem.defaultProps = {
-  theme: baseTheme
-};
-const StyledMenuItemWrapper = styled.li`
-  position: relative;
-`;
-const MenuItemDivider = styled.li.attrs({
-  "data-element": "action-popover-divider"
-})`
-  background-color: var(--colorsUtilityMajor050);
-  height: var(--borderWidth100);
-  margin: var(--spacing100) var(--spacing150);
-`;
-const MenuButton = styled.div`
-  position: relative;
-  && ${StyledIcon} {
-    cursor: pointer;
-  }
-  width: fit-content;
-  margin: auto;
-  ${margin}
-`;
-const ButtonIcon = styled(Icon)`
-  color: var(--colorsActionMinor500);
-
-  :hover {
-    color: var(--colorsActionMinor600);
-  }
-`;
-const StyledButtonIcon = styled.div`
-  &:focus {
-    ${addFocusStyling()}
-  }
-  border-radius: var(--borderRadius050);
-`;
-const MenuItemIcon = styled(Icon)`
-  ${({
-  horizontalAlignment,
-  submenuPosition,
-  childHasIcon,
-  childHasSubmenu,
-  hasIcon,
-  hasSubmenu,
-  isASubmenu
-}) => css`
-    justify-content: ${horizontalAlignment};
-    padding: var(--spacing100)
-      ${getIconPaddingValues(1, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)}
-      var(--spacing100)
-      ${getIconPaddingValues(2, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)};
-    color: var(--colorsUtilityYin065);
-  `}
-`;
-StyledButtonIcon.defaultProps = {
-  theme: baseTheme
-};
-const SubMenuItemIcon = styled(ButtonIcon)`
-  ${({
-  type
-}) => css`
-    ${type === "chevron_left_thick" && css`
-      left: -5px;
-    `}
-
-    ${type === "chevron_right_thick" && css`
-      right: -5px;
-    `}
-  `}
-`;
-const MenuButtonOverrideWrapper = styled.div`
-  ${StyledButton} {
-    padding: 0px var(--sizing100);
-    width: 100%;
-
-    &:hover,
-    &:focus {
-      background-color: var(--colorsActionMajorTransparent);
-      color: var(--colorsActionMajor600);
-
-      span[color] {
-        color: var(--colorsActionMajor600);
-      }
-    }
-  }
-`;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItem, StyledMenuItemWrapper };
+import o,{css as n}from"styled-components";import{margin as i}from"styled-system";import t from"../icon/icon.component.js";import e from"../icon/icon.style.js";import r from"../button/button.style.js";import a from"../../style/utils/add-focus-styling.js";import c from"../../style/themes/base/index.js";const s=o.ul.withConfig({displayName:"action-popover.style__Menu",componentId:"sc-8c736c8-0"})([""," margin:0;list-style:none;padding:var(--spacing100) 0;box-shadow:var(--boxShadow100);position:absolute;border-radius:var(--borderRadius100);background-color:var(--colorsUtilityYang100);z-index:",";"],(({isOpen:o})=>o?"display: block;":"visibility: hidden;"),(({theme:o})=>{var n;return`${null===(n=o.zIndex)||void 0===n?void 0:n.popover}`}));function l(o,n,i,t){return n||!o||i||t?n&&o&&!i&&t?"var(--spacing600)":n&&o&&!i&&!t?"var(--spacing900)":"var(--spacing100)":"var(--spacing400)"}function p(o,n,i,t,e){return t&&("left"===n&&"left"===i||"right"===n&&"right"===i)?"left"===n?1===o?"var(--spacing100)":"var(--spacing400)":1===o?"var(--spacing400)":"var(--spacing100)":e?"left"===n?1===o?"var(--spacing100)":"var(--spacing000)":1===o?"var(--spacing000)":"var(--spacing100)":"var(--spacing100)"}const d=o.div.withConfig({displayName:"action-popover.style__StyledMenuItemInnerText",componentId:"sc-8c736c8-1"})(["",""],(({childHasSubmenu:o,childHasIcon:i,hasIcon:t,hasSubmenu:e,submenuPosition:r,horizontalAlignment:a,isASubmenu:c})=>n(["padding-left:",";padding-right:",";"," ",""],c?"var(--spacing000)":"var(--spacing100)",c?"var(--spacing000)":"var(--spacing100)","left"===a&&"left"===r&&!c&&n(["padding-left:",";"],l(o,i,t,e)),"right"===a&&"right"===r&&!c&&n(["padding-right:",";"],l(o,i,t,e))))),u=o.div.withConfig({displayName:"action-popover.style__StyledMenuItemOuterContainer",componentId:"sc-8c736c8-2"})(["display:inherit;"]),v=o.button.withConfig({displayName:"action-popover.style__StyledMenuItem",componentId:"sc-8c736c8-3"})([""," text-decoration:none;background-color:var(--colorsActionMajorYang100);cursor:pointer;box-sizing:border-box;padding:0 var(--spacing150);position:relative;line-height:40px;white-space:nowrap;user-select:none;display:flex;align-items:center;border:none;width:100%;color:var(--colorsUtilityYin090);font-size:14px;font-weight:500;&:focus{"," z-index:1;border-radius:var(--borderRadius000);}"," ",""],(({horizontalAlignment:o,submenuPosition:i,childHasSubmenu:t,hasSubmenu:e})=>n(["justify-content:",";"," ",""],"left"===o?"flex-start":"flex-end","left"===o&&"right"===i&&n(["justify-content:space-between;"]),"right"===o&&"left"===i&&n(["",""],t&&e&&n(["justify-content:space-between;"])))),a(),(({isDisabled:o})=>o&&n(["color:var(--colorsUtilityYin030);cursor:not-allowed;&& ","{cursor:not-allowed;color:var(--colorsUtilityYin030);}:focus{border:none;outline:none;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;}"],e)),(({isDisabled:o})=>!o&&n(["&:focus,&:hover{background-color:var(--colorsUtilityMajor100);}&& ","{cursor:pointer;}"],e)));v.defaultProps={theme:c};const g=o.li.withConfig({displayName:"action-popover.style__StyledMenuItemWrapper",componentId:"sc-8c736c8-4"})(["position:relative;"]),m=o.li.attrs({"data-element":"action-popover-divider"}).withConfig({displayName:"action-popover.style__MenuItemDivider",componentId:"sc-8c736c8-5"})(["background-color:var(--colorsUtilityMajor050);height:var(--borderWidth100);margin:var(--spacing100) var(--spacing150);"]),h=o.div.withConfig({displayName:"action-popover.style__MenuButton",componentId:"sc-8c736c8-6"})(["position:relative;&& ","{cursor:pointer;}width:fit-content;margin:auto;",""],e,i),y=o(t).withConfig({displayName:"action-popover.style__ButtonIcon",componentId:"sc-8c736c8-7"})(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),f=o.div.withConfig({displayName:"action-popover.style__StyledButtonIcon",componentId:"sc-8c736c8-8"})(["&:focus{","}border-radius:var(--borderRadius050);"],a()),b=o(t).withConfig({displayName:"action-popover.style__MenuItemIcon",componentId:"sc-8c736c8-9"})(["",""],(({horizontalAlignment:o,submenuPosition:i,childHasIcon:t,childHasSubmenu:e,hasIcon:r,hasSubmenu:a,isASubmenu:c})=>n(["justify-content:",";padding:var(--spacing100) "," var(--spacing100) ",";color:var(--colorsUtilityYin065);"],o,p(1,o,i,t&&e&&r&&!a,c),p(2,o,i,t&&e&&r&&!a,c))));f.defaultProps={theme:c};const I=o(y).withConfig({displayName:"action-popover.style__SubMenuItemIcon",componentId:"sc-8c736c8-10"})(["",""],(({type:o})=>n([""," ",""],"chevron_left_thick"===o&&n(["left:-5px;"]),"chevron_right_thick"===o&&n(["right:-5px;"])))),w=o.div.withConfig({displayName:"action-popover.style__MenuButtonOverrideWrapper",componentId:"sc-8c736c8-11"})(["","{padding:0px var(--sizing100);width:100%;&:hover,&:focus{background-color:var(--colorsActionMajorTransparent);color:var(--colorsActionMajor600);span[color]{color:var(--colorsActionMajor600);}}}"],r);export{y as ButtonIcon,s as Menu,h as MenuButton,w as MenuButtonOverrideWrapper,m as MenuItemDivider,b as MenuItemIcon,f as StyledButtonIcon,v as StyledMenuItem,d as StyledMenuItemInnerText,u as StyledMenuItemOuterContainer,g as StyledMenuItemWrapper,I as SubMenuItemIcon};

package/esm/components/action-popover/index.js

@@ -1,5 +1 @@
-export { default as ActionPopover } from "./action-popover.component";
-export { default as ActionPopoverMenu } from "./action-popover-menu/action-popover-menu.component";
-export { default as ActionPopoverItem } from "./action-popover-item/action-popover-item.component";
-export { default as ActionPopoverMenuButton } from "./action-popover-menu-button/action-popover-menu-button.component";
-export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";
+export{ActionPopover}from"./action-popover.component.js";export{default as ActionPopoverMenu}from"./action-popover-menu/action-popover-menu.component.js";export{ActionPopoverItem}from"./action-popover-item/action-popover-item.component.js";export{ActionPopoverMenuButton}from"./action-popover-menu-button/action-popover-menu-button.component.js";import"./action-popover-divider/action-popover-divider.component.js";export{MenuItemDivider as ActionPopoverDivider}from"./action-popover.style.js";

package/esm/components/adaptive-sidebar/__internal__/utils.js

@@ -1,23 +1 @@
-export const getColors = backgroundColor => {
-  switch (backgroundColor) {
-    case "app":
-      return {
-        "background-color": "var(--colorsUtilityMajor025)",
-        color: "var(--colorsUtilityYin090)"
-      };
-    case "black":
-      return {
-        "background-color": "var(--colorsUtilityYin100)",
-        color: "var(--colorsUtilityYang100)"
-      };
-    case "white":
-    default:
-      return {
-        "background-color": "var(--colorsUtilityYang100)",
-        color: "var(--colorsUtilityYin090)"
-      };
-  }
-};
-export const kebabToCamelCase = str => {
-  return str.replace(/-./g, match => match.charAt(1).toUpperCase());
-};
+const r=r=>{switch(r){case"app":return{"background-color":"var(--colorsUtilityMajor025)",color:"var(--colorsUtilityYin090)"};case"black":return{"background-color":"var(--colorsUtilityYin100)",color:"var(--colorsUtilityYang100)"};default:return{"background-color":"var(--colorsUtilityYang100)",color:"var(--colorsUtilityYin090)"}}},o=r=>r.replace(/-./g,(r=>r.charAt(1).toUpperCase()));export{r as getColors,o as kebabToCamelCase};

package/esm/components/adaptive-sidebar/adaptive-sidebar.component.js

@@ -1,56 +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, { useEffect, useRef } from "react";
-import { getColors, kebabToCamelCase } from "./__internal__/utils";
-import Box from "../box";
-import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
-import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import { StyledAdaptiveSidebar, StyledSidebar } from "./adaptive-sidebar.style";
-export const AdaptiveSidebar = ({
-  adaptiveBreakpoint = 768,
-  backgroundColor = "white",
-  borderColor = "none",
-  children,
-  height = "100%",
-  open,
-  renderAsModal = false,
-  width = "320px",
-  ...props
-}) => {
-  const largeScreen = useIsAboveBreakpoint(adaptiveBreakpoint);
-  const adaptiveSidebarRef = useRef(null);
-  const colours = Object.entries(getColors(backgroundColor)).reduce((acc, [key, value]) => {
-    acc[kebabToCamelCase(key)] = value;
-    return acc;
-  }, {});
-  useEffect(() => {
-    /* istanbul ignore next */
-    if (adaptiveSidebarRef.current) {
-      adaptiveSidebarRef.current.focus();
-    }
-  }, [open]);
-  if (renderAsModal || !largeScreen) {
-    return /*#__PURE__*/React.createElement(StyledSidebar, {
-      backgroundColor: backgroundColor,
-      open: open,
-      p: 0,
-      ref: adaptiveSidebarRef
-    }, /*#__PURE__*/React.createElement(Box, _extends({
-      height: "100%",
-      "data-role": "adaptive-sidebar-content-wrapper"
-    }, colours), children));
-  }
-  return open ? /*#__PURE__*/React.createElement(StyledAdaptiveSidebar, _extends({
-    backgroundColor: backgroundColor,
-    borderColor: borderColor === "none" ? undefined : borderColor,
-    "data-element": "adaptive-sidebar",
-    "data-role": "adaptive-sidebar",
-    height: height,
-    ref: adaptiveSidebarRef,
-    role: "region",
-    tabIndex: -1,
-    width: width
-  }, filterStyledSystemMarginProps(props), filterStyledSystemPaddingProps(props)), /*#__PURE__*/React.createElement(Box, {
-    "data-role": "adaptive-sidebar-content-wrapper"
-  }, children)) : null;
-};
-export default AdaptiveSidebar;
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{getColors as o,kebabToCamelCase as n}from"./__internal__/utils.js";import{Box as i}from"../box/box.component.js";import a from"../../style/utils/filter-styled-system-padding-props.js";import l from"../../style/utils/filter-styled-system-margin-props.js";import c from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{StyledSidebar as p,StyledAdaptiveSidebar as s}from"./adaptive-sidebar.style.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){d(e,r,t[r])}))}return e}function u(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=d=>{var{adaptiveBreakpoint:f=768,backgroundColor:y="white",borderColor:m="none",children:O,height:j="100%",open:g,renderAsModal:h=!1,width:v="320px"}=d,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(d,["adaptiveBreakpoint","backgroundColor","borderColor","children","height","open","renderAsModal","width"]);const P=c(f),k=r(null),x=Object.entries(o(y)).reduce(((e,[r,t])=>(e[n(r)]=t,e)),{});return t((()=>{k.current&&k.current.focus()}),[g]),h||!P?e(p,{backgroundColor:y,open:g,p:0,ref:k,children:e(i,u(b({height:"100%","data-role":"adaptive-sidebar-content-wrapper"},x),{children:O}))}):g?e(s,u(b({backgroundColor:y,borderColor:"none"===m?void 0:m,"data-element":"adaptive-sidebar","data-role":"adaptive-sidebar",height:j,ref:k,role:"region",tabIndex:-1,width:v},l(w),a(w)),{children:e(i,{"data-role":"adaptive-sidebar-content-wrapper",children:O})})):null};export{f as AdaptiveSidebar,f as default};

package/esm/components/adaptive-sidebar/adaptive-sidebar.style.d.ts

@@ -2,7 +2,7 @@
 import { MarginProps, PaddingProps } from "styled-system";
 import { SidebarProps } from "../sidebar";
 import { AdaptiveSidebarProps } from "./adaptive-sidebar.component";
-declare const StyledAdaptiveSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, Pick<AdaptiveSidebarProps, "width" | "backgroundColor" | "height" | "borderColor"> & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const StyledAdaptiveSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, Pick<AdaptiveSidebarProps, "backgroundColor" | "width" | "height" | "borderColor"> & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     tabIndex: number;
 }, never>;
 interface StyledSidebarProps extends SidebarProps {

package/esm/components/adaptive-sidebar/adaptive-sidebar.style.js

@@ -1,35 +1 @@
-import styled, { css } from "styled-components";
-import { margin, padding } from "styled-system";
-import Box from "../box";
-import Sidebar from "../sidebar";
-import { getColors } from "./__internal__/utils";
-const StyledAdaptiveSidebar = styled(Box)`
-  ${({
-  backgroundColor,
-  borderColor,
-  height,
-  width
-}) => css`
-    ${getColors(backgroundColor)}
-    ${borderColor && css`
-      border-left: 1px solid var(${borderColor});
-    `}
-    max-height: ${height};
-    max-width: ${width};
-    min-width: ${width};
-    overflow-y: auto;
-
-    ${margin}
-    ${padding}
-  `};
-`;
-const StyledSidebar = styled(Sidebar)`
-  ${({
-  backgroundColor
-}) => css`
-    div[data-element="sidebar-content"] {
-      ${getColors(backgroundColor)}
-    }
-  `}
-`;
-export { StyledAdaptiveSidebar, StyledSidebar };
+import o,{css as t}from"styled-components";import{margin as e,padding as i}from"styled-system";import{Box as r}from"../box/box.component.js";import{Sidebar as d}from"../sidebar/sidebar.component.js";import{getColors as a}from"./__internal__/utils.js";const m=o(r).withConfig({displayName:"adaptive-sidebar.style__StyledAdaptiveSidebar",componentId:"sc-f7102bc-0"})(["",";"],(({backgroundColor:o,borderColor:r,height:d,width:m})=>t([""," "," max-height:",";max-width:",";min-width:",";overflow-y:auto;"," ",""],a(o),r&&t(["border-left:1px solid var(",");"],r),d,m,m,e,i))),s=o(d).withConfig({displayName:"adaptive-sidebar.style__StyledSidebar",componentId:"sc-f7102bc-1"})(["",""],(({backgroundColor:o})=>t(['div[data-element="sidebar-content"]{',"}"],a(o))));export{m as StyledAdaptiveSidebar,s as StyledSidebar};

package/esm/components/adaptive-sidebar/index.js

@@ -1 +1 @@
-export { default } from "./adaptive-sidebar.component";
+export{AdaptiveSidebar as default}from"./adaptive-sidebar.component.js";