1 | {"version":3,"file":"ButtonGrid.base.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGrid.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6CAAsG;AACtG,6CAA4C;AAC5C,qDAA8C;AAG9C,IAAM,aAAa,GAAG,8BAAkB,EAA4C,CAAC;AAExE,QAAA,cAAc,GAA8C,KAAK,CAAC,UAAU,CAGvF,UAAC,KAAK,EAAE,YAAY;IACpB,IAAM,EAAE,GAAG,mBAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAGpC,IAAA,KAAK,GAUH,KAAK,MAVF,EACL,WAAW,GAST,KAAK,YATI,EACX,YAAY,GAQV,KAAK,aARK,EACZ,eAAe,GAOb,KAAK,gBAPQ;IACf,mDAAmD;IACnD,KAKE,KAAK,aAL2B;IADlC,mDAAmD;IACnD,YAAY,mBAAG,KAAK,CAAC,aAAa,KAAA;IAClC,mDAAmD;IACnD,KAGE,KAAK,YAHoB;IAD3B,mDAAmD;IACnD,WAAW,mBAAG,KAAK,CAAC,OAAO,KAAA,EAC3B,MAAM,GAEJ,KAAK,OAFD,EACN,2BAA2B,GACzB,KAAK,4BADoB,CACnB;IAEV,IAAM,SAAS,GAAG,0BAAc,CAC9B,KAAK,EACL,iCAAqB;IACrB,yEAAyE;IACzE,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC9C,CAAC;IAEF,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAM,EAAE,CAAC,CAAC;IAEnE,oDAAoD;IACpD,IAAM,WAAW,GAAY,oBAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAE1D,IAAM,OAAO,GAAG,CACd,iEACiB,YAAY,kBACb,WAAW,EACzB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,IACzC,SAAS,IACb,SAAS,EAAE,UAAU,CAAC,IAAI;QAE1B,+BAAO,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,IACvD,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,QAAQ;YAC9B,OAAO,CACL,4BAAI,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,IAC9D,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAiB;gBAChC,OAAO,CACL,4BAAI,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,SAAS,GAAG,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,IAC9E,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAC3B,CACN,CAAC;YACJ,CAAC,CAAC,CACC,CACN,CAAC;QACJ,CAAC,CAAC,CACI,CACF,CACT,CAAC;IAEF,OAAO,2BAA2B,CAAC,CAAC,CAAC,CACnC,OAAO,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAS,IACR,UAAU,EAAE,YAAY,EACxB,oBAAoB,EAAE,KAAK,CAAC,2BAA2B,EACvD,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,MAAM,EAAE,KAAK,CAAC,MAAM,IAEnB,OAAO,CACE,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { FocusZone } from '../../FocusZone';\nimport { useId } from '@fluentui/react-hooks';\nimport type { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types';\n\nconst getClassNames = classNamesFunction<IButtonGridStyleProps, IButtonGridStyles>();\n\nexport const ButtonGridBase: React.FunctionComponent<IButtonGridProps> = React.forwardRef<\n HTMLElement,\n IButtonGridProps\n>((props, forwardedRef) => {\n const id = useId(undefined, props.id);\n\n const {\n items,\n columnCount,\n onRenderItem,\n isSemanticRadio,\n // eslint-disable-next-line deprecation/deprecation\n ariaPosInSet = props.positionInSet,\n // eslint-disable-next-line deprecation/deprecation\n ariaSetSize = props.setSize,\n styles,\n doNotContainWithinFocusZone,\n } = props;\n\n const htmlProps = getNativeProps<React.HTMLAttributes<HTMLTableElement>>(\n props,\n htmlElementProperties,\n // avoid applying onBlur on the table if it's being used in the FocusZone\n doNotContainWithinFocusZone ? [] : ['onBlur'],\n );\n\n const classNames = getClassNames(styles!, { theme: props.theme! });\n\n // Array to store the cells in the correct row index\n const rowsOfItems: any[][] = toMatrix(items, columnCount);\n\n const content = (\n <table\n aria-posinset={ariaPosInSet}\n aria-setsize={ariaSetSize}\n id={id}\n role={isSemanticRadio ? 'radiogroup' : 'grid'}\n {...htmlProps}\n className={classNames.root}\n >\n <tbody role={isSemanticRadio ? 'presentation' : 'rowgroup'}>\n {rowsOfItems.map((rows, rowIndex) => {\n return (\n <tr role={isSemanticRadio ? 'presentation' : 'row'} key={rowIndex}>\n {rows.map((cell, cellIndex: number) => {\n return (\n <td role=\"presentation\" key={cellIndex + '-cell'} className={classNames.tableCell}>\n {onRenderItem(cell, cellIndex)}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n );\n\n return doNotContainWithinFocusZone ? (\n content\n ) : (\n <FocusZone\n elementRef={forwardedRef}\n isCircularNavigation={props.shouldFocusCircularNavigate}\n className={classNames.focusedContainer}\n onBlur={props.onBlur}\n >\n {content}\n </FocusZone>\n );\n});\n"]} |