carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.29 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import l,{useMemo as n,useRef as r,useContext as i,useState 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";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 v(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 O(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}const w=j=>{var{children:w,fieldHelp:P,fieldHelpInline:x,"aria-label":H,label:I,labelHelp:D,labelSpacing:S,inputHint:B,inputWidth:W,fullWidth:A,labelInline:E,labelWidth:C,onChange:T,value:k,helpAriaLabel:L,id:G,allowDeselect:K=!1,disabled:N=!1}=j,R=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 V=n((()=>!l.Children.toArray(w).find((e=>!l.isValidElement(e)||"ButtonToggle"!==e.type.displayName))),[w]);a(V,`\`ButtonToggleGroup\` only accepts children of type \`${d.displayName}\``);const q=r(u()),M=r(u()),$=r(null),{validationRedesignOptIn:z}=i(y),F=e=>z?void 0:e,J=()=>{var e;return null===(e=$.current)||void 0===e?void 0:e.querySelectorAll('[data-element="button-toggle-button"]')},[Q,U]=o();var X;return e(f,{helpAriaLabel:L,children:e(m,{children:e(p,O(v({label:I,labelHelp:F(D),labelSpacing:F(S),fieldHelp:F(P),fieldHelpInline:F(x),labelInline:F(E),labelWidth:F(C),labelId:q.current,id:G,labelAs:"span",disabled:N},b(R),s(null!==(X=R["data-component"])&&void 0!==X?X:"button-toggle-group",R)),{children:t(h,{value:{onButtonClick:()=>{},handleKeyDown:e=>{const t=J();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:k,onChange:T,allowDeselect:K,isInGroup:!0,isDisabled:N,firstButton:Q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=J();t?e===t[0]&&U(e):U(void 0)}}),0)},hintTextId:B?M.current:void 0},children:[B&&e(_,{id:M.current,isDisabled:N,marginBottom:"var(--spacing150)",children:B}),e(c,O(v({ref:$},I?{"aria-labelledby":q.current}:{"aria-label":H}),{labelInline:E,inputWidth:W,fullWidth:A,role:"group",id:G,disabled:N,children:w}))]})}))})})};w.displayName="ButtonToggleGroup";export{w as default};