carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.66 kB
JavaScript
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 u from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import p from"../icon/icon.component.js";import d from"../button/button.component.js";import m 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 _ from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import O from"../../hooks/__internal__/useChildButtons/useChildButtons.js";import v from"../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";import w from"./__internal__/split-button.context.js";import P from"../../hooks/__internal__/useLocale/useLocale.js";import x from"../flat-table/__internal__/flat-table.context.js";function k(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function S(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){k(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,k)=>{var{align:B="left",position:C="right",buttonType:D="secondary",children:A,disabled:L=!1,iconPosition:z="before",iconType:F,onClick:W,size:E="medium",subtext:I,text:M,"data-element":K,"data-role":N,"aria-label":U,isWhite:V=!1}=r,q=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 G=P(),H=n(s)||_,J=i(y()),Q=i(y()),R=i(null),X=i(null),{isInFlatTable:Y}=n(x),Z="secondary"===D&&V;l(k,(()=>({focusMainButton(){var t;null===(t=R.current)||void 0===t||t.focus()},focusToggleButton(){var t;null===(t=X.current)||void 0===t||t.focus()}})),[]);const{showAdditionalButtons:$,showButtons:tt,hideButtons:et,buttonNode:ot,handleToggleButtonKeyDown:rt,wrapperProps:nt,contextValue:it}=O(X,.75),lt=S({onFocus:et,onTouchStart:et,iconPosition:z,buttonType:D,disabled:L,iconType:F,onClick:t=>{var e;null===(e=R.current)||void 0===e||e.focus(),W&&W(t)},size:E,subtext:I,isWhite:Z},j(q));v((()=>et()));const st={isWhite:Z,disabled:L,displayed:$,onTouchStart:tt,onKeyDown:rt,onClick:()=>{var t;null===(t=X.current)||void 0===t||t.focus({preventScroll:!0}),$?et():tt()},buttonType:D,size:E},at=u(et),ct=g(q);return t(m,T(S({onClick:at,ref:ot},{"data-component":"split-button","data-element":K,"data-role":N},ct),{children:[[e(d,T(S({"data-element":"main-button",id:J.current,ref:R},lt),{children:M}),"main-button"),e(b,T(S({"aria-expanded":$,"aria-controls":Q.current,"aria-label":U||G.splitButton.ariaLabel(),"data-element":"toggle-button",type:"button",ref:X},st),{children:e(p,{type:"dropdown",color:{primary:H.colors.white,secondary:H.colors.primary}[D],bg:"transparent",disabled:L})}),"toggle-button")],$?e(h,{disableBackgroundUI:Y,disablePortal:!0,placement:"left"===C?"bottom-start":"bottom-end",popoverStrategy:"fixed",reference:ot,middleware:[a(6),c({fallbackStrategy:"initialPlacement"})],children:e(f,T(S({id:Q.current},nt),{align:B,children:e(w.Provider,{value:it,children:o.Children.map(A,(t=>e("li",{children:t})))})}))}):null]}))}));export{B as SplitButton,B as default};