@fluentui/react-migration-v0-v9 9.4.8 → 9.6.0

package/lib/components/Grid/GridShim.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Grid/GridShim.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useGridStyles } from './Grid.styles';\n\nexport interface GridShimProps {\n  /**\n   * The columns of the grid with a space-separated list of values.\n   * The values represent the track size, and the space between them represents the grid line.\n   */\n  columns?: 1 | 2 | 3;\n\n  /**\n   * The rows of the grid with a space-separated list of values.\n   * The values represent the track size, and the space between them represents the grid line.\n   */\n  rows?: 1 | 2 | 3;\n}\n\nexport const gridShimClassName = 'fui-Grid';\n\nexport const GridShim = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & GridShimProps>(\n  (props, ref) => {\n    const { rows, columns, className, ...rest } = props;\n    const classes = useGridStyles();\n\n    const classMaps = React.useMemo(\n      () => ({\n        rowsClasses: {\n          1: classes.rows1,\n          2: classes.rows2,\n          3: classes.rows3,\n        },\n        columnsClasses: {\n          1: classes.columns1,\n          2: classes.columns2,\n          3: classes.columns3,\n        },\n      }),\n      [classes],\n    );\n\n    const gridClasses = mergeClasses(\n      gridShimClassName,\n      classes.grid,\n      !rows && !columns && classes.columnsDefault,\n      rows && !columns && classes.onlyRows,\n      rows && classMaps.rowsClasses[rows],\n      columns && classMaps.columnsClasses[columns],\n      className,\n    );\n    return <div ref={ref} className={gridClasses} {...rest} />;\n  },\n);\n\nGridShim.displayName = 'GridShim';\n"],"names":["mergeClasses","React","useGridStyles","gridShimClassName","GridShim","forwardRef","props","ref","rows","columns","className","rest","classes","classMaps","useMemo","rowsClasses","rows1","rows2","rows3","columnsClasses","columns1","columns2","columns3","gridClasses","grid","columnsDefault","onlyRows","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,gBAAgB;AAgB9C,OAAO,MAAMC,oBAAoB,WAAW;AAE5C,OAAO,MAAMC,yBAAWH,MAAMI,UAAU,CACtC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAC9C,MAAMM,UAAUV;IAEhB,MAAMW,YAAYZ,MAAMa,OAAO,CAC7B,IAAO,CAAA;YACLC,aAAa;gBACX,GAAGH,QAAQI,KAAK;gBAChB,GAAGJ,QAAQK,KAAK;gBAChB,GAAGL,QAAQM,KAAK;YAClB;YACAC,gBAAgB;gBACd,GAAGP,QAAQQ,QAAQ;gBACnB,GAAGR,QAAQS,QAAQ;gBACnB,GAAGT,QAAQU,QAAQ;YACrB;QACF,CAAA,GACA;QAACV;KAAQ;IAGX,MAAMW,cAAcvB,aAClBG,mBACAS,QAAQY,IAAI,EACZ,CAAChB,QAAQ,CAACC,WAAWG,QAAQa,cAAc,EAC3CjB,QAAQ,CAACC,WAAWG,QAAQc,QAAQ,EACpClB,QAAQK,UAAUE,WAAW,CAACP,KAAK,EACnCC,WAAWI,UAAUM,cAAc,CAACV,QAAQ,EAC5CC;IAEF,qBAAO,oBAACiB;QAAIpB,KAAKA;QAAKG,WAAWa;QAAc,GAAGZ,IAAI;;AACxD,GACA;AAEFP,SAASwB,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Grid/GridShim.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useGridStyles } from './Grid.styles';\n\nexport interface GridShimProps {\n  /**\n   * The columns of the grid with a space-separated list of values.\n   * The values represent the track size, and the space between them represents the grid line.\n   */\n  columns?: 1 | 2 | 3;\n\n  /**\n   * The rows of the grid with a space-separated list of values.\n   * The values represent the track size, and the space between them represents the grid line.\n   */\n  rows?: 1 | 2 | 3;\n}\n\nexport const gridShimClassName = 'fui-Grid';\n\nexport const GridShim = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & GridShimProps>(\n  (props, ref) => {\n    const { rows, columns, className, ...rest } = props;\n    const classes = useGridStyles();\n\n    const classMaps = React.useMemo(\n      () => ({\n        rowsClasses: {\n          1: classes.rows1,\n          2: classes.rows2,\n          3: classes.rows3,\n        },\n        columnsClasses: {\n          1: classes.columns1,\n          2: classes.columns2,\n          3: classes.columns3,\n        },\n      }),\n      [classes],\n    );\n\n    const gridClasses = mergeClasses(\n      gridShimClassName,\n      classes.grid,\n      !rows && !columns && classes.columnsDefault,\n      rows && !columns && classes.onlyRows,\n      rows && classMaps.rowsClasses[rows],\n      columns && classMaps.columnsClasses[columns],\n      className,\n    );\n    return <div ref={ref} className={gridClasses} {...rest} />;\n  },\n);\n\nGridShim.displayName = 'GridShim';\n"],"names":["mergeClasses","React","useGridStyles","gridShimClassName","GridShim","forwardRef","props","ref","rows","columns","className","rest","classes","classMaps","useMemo","rowsClasses","rows1","rows2","rows3","columnsClasses","columns1","columns2","columns3","gridClasses","grid","columnsDefault","onlyRows","div","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,gBAAgB;AAgB9C,OAAO,MAAMC,oBAAoB,WAAW;AAE5C,OAAO,MAAMC,yBAAWH,MAAMI,UAAU,CACtC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAC9C,MAAMM,UAAUV;IAEhB,MAAMW,YAAYZ,MAAMa,OAAO,CAC7B,IAAO,CAAA;YACLC,aAAa;gBACX,GAAGH,QAAQI,KAAK;gBAChB,GAAGJ,QAAQK,KAAK;gBAChB,GAAGL,QAAQM,KAAK;YAClB;YACAC,gBAAgB;gBACd,GAAGP,QAAQQ,QAAQ;gBACnB,GAAGR,QAAQS,QAAQ;gBACnB,GAAGT,QAAQU,QAAQ;YACrB;QACF,CAAA,GACA;QAACV;KAAQ;IAGX,MAAMW,cAAcvB,aAClBG,mBACAS,QAAQY,IAAI,EACZ,CAAChB,QAAQ,CAACC,WAAWG,QAAQa,cAAc,EAC3CjB,QAAQ,CAACC,WAAWG,QAAQc,QAAQ,EACpClB,QAAQK,UAAUE,WAAW,CAACP,KAAK,EACnCC,WAAWI,UAAUM,cAAc,CAACV,QAAQ,EAC5CC;IAEF,qBAAO,oBAACiB;QAAIpB,KAAKA;QAAKG,WAAWa;QAAc,GAAGZ,IAAI;;AACxD,GACA;AAEFP,SAASwB,WAAW,GAAG"}

package/lib/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Grid/index.ts"],"sourcesContent":["export { GridShim, gridShimClassName as gridClassName } from './GridShim';\nexport type { GridShimProps } from './GridShim';\nexport { useGridStyles } from './Grid.styles';\nexport { grid } from './Grid.mixins';\n"],"names":["GridShim","gridShimClassName","gridClassName","useGridStyles","grid"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,qBAAqBC,aAAa,QAAQ,aAAa;AAE1E,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,IAAI,QAAQ,gBAAgB"}
+{"version":3,"sources":["../src/components/Grid/index.ts"],"sourcesContent":["export { GridShim, gridShimClassName as gridClassName } from './GridShim';\nexport type { GridShimProps } from './GridShim';\nexport { useGridStyles } from './Grid.styles';\nexport { grid } from './Grid.mixins';\n"],"names":["GridShim","gridShimClassName","gridClassName","useGridStyles","grid"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,qBAAqBC,aAAa,QAAQ,aAAa;AAE1E,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,IAAI,QAAQ,gBAAgB"}

package/lib/components/Input/Input.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import { GriffelStyle, tokens } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nconst error = (): GriffelStyle => ({ border: `1px solid ${tokens.colorPaletteRedBorderActive}` });\n\nconst errorIndicator = (): GriffelStyle => ({\n  color: tokens.colorPaletteRedBorderActive,\n});\n\nconst successIndicator = (): GriffelStyle => ({\n  color: tokens.colorPaletteGreenForeground1,\n});\n\nexport const input = {\n  error,\n  errorIndicator,\n  fluid,\n  successIndicator,\n};\n"],"names":["tokens","fluid","width","error","border","colorPaletteRedBorderActive","errorIndicator","color","successIndicator","colorPaletteGreenForeground1","input"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAuBA,MAAM,QAAQ,6BAA6B;AAElE,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,QAAQ,CAAC,UAAU,EAAEJ,OAAOK,2BAA2B,CAAC,CAAC;IAAC,CAAA;AAE/F,MAAMC,iBAAiB,IAAqB,CAAA;QAC1CC,OAAOP,OAAOK,2BAA2B;IAC3C,CAAA;AAEA,MAAMG,mBAAmB,IAAqB,CAAA;QAC5CD,OAAOP,OAAOS,4BAA4B;IAC5C,CAAA;AAEA,OAAO,MAAMC,QAAQ;IACnBP;IACAG;IACAL;IACAO;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import { GriffelStyle, tokens } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nconst error = (): GriffelStyle => ({ border: `1px solid ${tokens.colorPaletteRedBorderActive}` });\n\nconst errorIndicator = (): GriffelStyle => ({\n  color: tokens.colorPaletteRedBorderActive,\n});\n\nconst successIndicator = (): GriffelStyle => ({\n  color: tokens.colorPaletteGreenForeground1,\n});\n\nexport const input = {\n  error,\n  errorIndicator,\n  fluid,\n  successIndicator,\n};\n"],"names":["tokens","fluid","width","error","border","colorPaletteRedBorderActive","errorIndicator","color","successIndicator","colorPaletteGreenForeground1","input"],"mappings":"AAAA,SAAuBA,MAAM,QAAQ,6BAA6B;AAElE,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,QAAQ,CAAC,UAAU,EAAEJ,OAAOK,2BAA2B,EAAE;IAAC,CAAA;AAE/F,MAAMC,iBAAiB,IAAqB,CAAA;QAC1CC,OAAOP,OAAOK,2BAA2B;IAC3C,CAAA;AAEA,MAAMG,mBAAmB,IAAqB,CAAA;QAC5CD,OAAOP,OAAOS,4BAA4B;IAC5C,CAAA;AAEA,OAAO,MAAMC,QAAQ;IACnBP;IACAG;IACAL;IACAO;AACF,EAAE"}

package/lib/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { input } from './Input.mixins';\n"],"names":["input"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,QAAQ,iBAAiB"}
+{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { input } from './Input.mixins';\n"],"names":["input"],"mappings":"AAAA,SAASA,KAAK,QAAQ,iBAAiB"}

package/lib/components/ItemLayout/ItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ItemLayout/ItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  ComponentProps,\n  ComponentState,\n  getIntrinsicElementProps,\n  Slot,\n  slot,\n  assertSlots,\n} from '@fluentui/react-utilities';\n\nimport { useItemLayoutStyles } from './ItemLayout.styles';\n\ntype ItemLayoutSlots = {\n  root: Slot<'div'>;\n\n  contentMedia?: Slot<'div'>;\n  contentWrapper?: Slot<'div'>;\n\n  header?: Slot<'div'>;\n  headerMedia?: Slot<'div'>;\n\n  startMedia?: Slot<'div'>;\n  endMedia?: Slot<'div'>;\n};\n\ntype ItemLayoutProps = ComponentProps<ItemLayoutSlots>;\n\ntype ItemLayoutState = ComponentState<ItemLayoutSlots>;\n\nexport const itemLayoutClassName = 'fui-ItemLayout';\n\nexport const ItemLayout = React.forwardRef<HTMLDivElement, ItemLayoutProps>((props, ref) => {\n  const state: ItemLayoutState = {\n    components: {\n      root: 'div',\n      contentWrapper: 'div',\n      contentMedia: 'div',\n      header: 'div',\n      headerMedia: 'div',\n      startMedia: 'div',\n      endMedia: 'div',\n    },\n    root: slot.always(getIntrinsicElementProps('div', { ...props, ref }), { elementType: 'div' }),\n    contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n    contentWrapper: slot.optional(props.contentWrapper, { renderByDefault: true, elementType: 'div' }),\n    header: slot.optional(props.header, { elementType: 'div' }),\n    headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n    startMedia: slot.optional(props.startMedia, { elementType: 'div' }),\n    endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n  };\n  const styles = useItemLayoutStyles();\n\n  state.root.className = mergeClasses(itemLayoutClassName, styles.root, state.root.className);\n  if (state.contentWrapper) {\n    state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.contentWrapper.className);\n  }\n\n  if (state.contentMedia) {\n    state.contentMedia.className = mergeClasses(styles.contentMedia, state.contentMedia.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(styles.header, state.header.className);\n  }\n\n  if (state.headerMedia) {\n    state.headerMedia.className = mergeClasses(styles.headerMedia, state.headerMedia.className);\n  }\n\n  if (state.startMedia) {\n    state.startMedia.className = mergeClasses(styles.startMedia, state.startMedia.className);\n  }\n\n  if (state.endMedia) {\n    state.endMedia.className = mergeClasses(styles.endMedia, state.endMedia.className);\n  }\n\n  assertSlots<ItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.startMedia && <state.startMedia />}\n      {state.header && <state.header />}\n      {state.headerMedia && <state.headerMedia />}\n      {state.contentWrapper && <state.contentWrapper>{state.root.children}</state.contentWrapper>}\n      {state.contentMedia && <state.contentMedia />}\n      {state.endMedia && <state.endMedia />}\n    </state.root>\n  );\n});\n\nItemLayout.displayName = 'ItemLayout';\n"],"names":["React","mergeClasses","getIntrinsicElementProps","slot","assertSlots","useItemLayoutStyles","itemLayoutClassName","ItemLayout","forwardRef","props","ref","state","components","root","contentWrapper","contentMedia","header","headerMedia","startMedia","endMedia","always","elementType","optional","renderByDefault","styles","className","children","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/ItemLayout/ItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  ComponentProps,\n  ComponentState,\n  getIntrinsicElementProps,\n  Slot,\n  slot,\n  assertSlots,\n} from '@fluentui/react-utilities';\n\nimport { useItemLayoutStyles } from './ItemLayout.styles';\n\ntype ItemLayoutSlots = {\n  root: Slot<'div'>;\n\n  contentMedia?: Slot<'div'>;\n  contentWrapper?: Slot<'div'>;\n\n  header?: Slot<'div'>;\n  headerMedia?: Slot<'div'>;\n\n  startMedia?: Slot<'div'>;\n  endMedia?: Slot<'div'>;\n};\n\ntype ItemLayoutProps = ComponentProps<ItemLayoutSlots>;\n\ntype ItemLayoutState = ComponentState<ItemLayoutSlots>;\n\nexport const itemLayoutClassName = 'fui-ItemLayout';\n\nexport const ItemLayout = React.forwardRef<HTMLDivElement, ItemLayoutProps>((props, ref) => {\n  const state: ItemLayoutState = {\n    components: {\n      root: 'div',\n      contentWrapper: 'div',\n      contentMedia: 'div',\n      header: 'div',\n      headerMedia: 'div',\n      startMedia: 'div',\n      endMedia: 'div',\n    },\n    root: slot.always(getIntrinsicElementProps('div', { ...props, ref }), { elementType: 'div' }),\n    contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n    contentWrapper: slot.optional(props.contentWrapper, { renderByDefault: true, elementType: 'div' }),\n    header: slot.optional(props.header, { elementType: 'div' }),\n    headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n    startMedia: slot.optional(props.startMedia, { elementType: 'div' }),\n    endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n  };\n  const styles = useItemLayoutStyles();\n\n  state.root.className = mergeClasses(itemLayoutClassName, styles.root, state.root.className);\n  if (state.contentWrapper) {\n    state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.contentWrapper.className);\n  }\n\n  if (state.contentMedia) {\n    state.contentMedia.className = mergeClasses(styles.contentMedia, state.contentMedia.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(styles.header, state.header.className);\n  }\n\n  if (state.headerMedia) {\n    state.headerMedia.className = mergeClasses(styles.headerMedia, state.headerMedia.className);\n  }\n\n  if (state.startMedia) {\n    state.startMedia.className = mergeClasses(styles.startMedia, state.startMedia.className);\n  }\n\n  if (state.endMedia) {\n    state.endMedia.className = mergeClasses(styles.endMedia, state.endMedia.className);\n  }\n\n  assertSlots<ItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.startMedia && <state.startMedia />}\n      {state.header && <state.header />}\n      {state.headerMedia && <state.headerMedia />}\n      {state.contentWrapper && <state.contentWrapper>{state.root.children}</state.contentWrapper>}\n      {state.contentMedia && <state.contentMedia />}\n      {state.endMedia && <state.endMedia />}\n    </state.root>\n  );\n});\n\nItemLayout.displayName = 'ItemLayout';\n"],"names":["React","mergeClasses","getIntrinsicElementProps","slot","assertSlots","useItemLayoutStyles","itemLayoutClassName","ItemLayout","forwardRef","props","ref","state","components","root","contentWrapper","contentMedia","header","headerMedia","startMedia","endMedia","always","elementType","optional","renderByDefault","styles","className","children","displayName"],"mappings":"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"}

package/lib/components/ItemLayout/ItemLayout.styles.raw.js

@@ -0,0 +1,60 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useItemLayoutStyles = makeStyles({
+    root: {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto auto',
+        minHeight: '48px'
+    },
+    contentMedia: {
+        alignSelf: 'start',
+        gridColumnStart: 3,
+        gridColumnEnd: 4,
+        gridRowStart: 2,
+        gridRowEnd: 3,
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    contentWrapper: {
+        alignSelf: 'start',
+        gridColumnStart: 2,
+        gridColumnEnd: 3,
+        gridRowStart: 2,
+        gridRowEnd: 3,
+        marginRight: '8px',
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    header: {
+        alignSelf: 'end',
+        gridColumnStart: 2,
+        gridColumnEnd: 3,
+        gridRowStart: 1,
+        gridRowEnd: 2,
+        fontSize: '14px',
+        marginRight: '8px'
+    },
+    headerMedia: {
+        alignSelf: 'end',
+        gridColumnStart: 3,
+        gridColumnEnd: 4,
+        gridRowStart: 1,
+        gridRowEnd: 2,
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    startMedia: {
+        alignSelf: 'center',
+        gridColumnStart: 1,
+        gridColumnEnd: 2,
+        gridRowStart: 1,
+        gridRowEnd: 3,
+        marginRight: '8px'
+    },
+    endMedia: {
+        alignSelf: 'center',
+        gridColumnStart: 4,
+        gridColumnEnd: 5,
+        gridRowStart: 1,
+        gridRowEnd: 3
+    }
+});

package/lib/components/ItemLayout/ItemLayout.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ItemLayout/ItemLayout.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useItemLayoutStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto auto',\n    minHeight: '48px',\n  },\n  contentMedia: {\n    alignSelf: 'start',\n    gridColumnStart: 3,\n    gridColumnEnd: 4,\n    gridRowStart: 2,\n    gridRowEnd: 3,\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  contentWrapper: {\n    alignSelf: 'start',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    gridRowStart: 2,\n    gridRowEnd: 3,\n    marginRight: '8px',\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  header: {\n    alignSelf: 'end',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    gridRowStart: 1,\n    gridRowEnd: 2,\n    fontSize: '14px',\n    marginRight: '8px',\n  },\n  headerMedia: {\n    alignSelf: 'end',\n    gridColumnStart: 3,\n    gridColumnEnd: 4,\n    gridRowStart: 1,\n    gridRowEnd: 2,\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  startMedia: {\n    alignSelf: 'center',\n    gridColumnStart: 1,\n    gridColumnEnd: 2,\n    gridRowStart: 1,\n    gridRowEnd: 3,\n    marginRight: '8px',\n  },\n  endMedia: {\n    alignSelf: 'center',\n    gridColumnStart: 4,\n    gridColumnEnd: 5,\n    gridRowStart: 1,\n    gridRowEnd: 3,\n  },\n});\n"],"names":["makeStyles","useItemLayoutStyles","root","display","gridTemplateColumns","minHeight","contentMedia","alignSelf","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","fontSize","lineHeight","contentWrapper","marginRight","header","headerMedia","startMedia","endMedia"],"mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,sBAAsBD,WAAW;IAC5CE,MAAM;QACJC,SAAS;QACTC,qBAAqB;QACrBC,WAAW;IACb;IACAC,cAAc;QACZC,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVC,YAAY;IACd;IACAC,gBAAgB;QACdP,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZI,aAAa;QACbH,UAAU;QACVC,YAAY;IACd;IACAG,QAAQ;QACNT,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVG,aAAa;IACf;IACAE,aAAa;QACXV,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVC,YAAY;IACd;IACAK,YAAY;QACVX,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZI,aAAa;IACf;IACAI,UAAU;QACRZ,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;IACd;AACF,GAAG"}

package/lib/components/ItemLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ItemLayout/index.tsx"],"sourcesContent":["export { ItemLayout, itemLayoutClassName } from './ItemLayout';\nexport { useItemLayoutStyles } from './ItemLayout.styles';\n"],"names":["ItemLayout","itemLayoutClassName","useItemLayoutStyles"],"rangeMappings":";","mappings":"AAAA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,eAAe;AAC/D,SAASC,mBAAmB,QAAQ,sBAAsB"}
+{"version":3,"sources":["../src/components/ItemLayout/index.tsx"],"sourcesContent":["export { ItemLayout, itemLayoutClassName } from './ItemLayout';\nexport { useItemLayoutStyles } from './ItemLayout.styles';\n"],"names":["ItemLayout","itemLayoutClassName","useItemLayoutStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,eAAe;AAC/D,SAASC,mBAAmB,QAAQ,sBAAsB"}

package/lib/components/List/List/List.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n  const state = useList_unstable(props, ref);\n  const contextValues = useListContextValues_unstable(state);\n\n  useListStyles_unstable(state);\n  useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n  return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n  const state = useList_unstable(props, ref);\n  const contextValues = useListContextValues_unstable(state);\n\n  useListStyles_unstable(state);\n  useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n  return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

package/lib/components/List/List/List.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  /**\n   * Defines the layout orientation.\n   *\n   * @default vertical\n   */\n  layout?: ListLayout;\n\n  /**\n   * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n   *\n   * @default false\n   */\n  navigable?: boolean;\n\n  /**\n   * Defines if the List items should be selectable.\n   *\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * Defines selection mode for the List.\n   *\n   * @default single\n   */\n  selectionMode?: SelectionMode;\n\n  /**\n   * For controlled selection - defines selected items\n   */\n  selectedItems?: SelectionItemId[];\n\n  /**\n   * For uncontrolled selection - defines default selected items\n   */\n  defaultSelectedItems?: SelectionItemId[];\n\n  /**\n   * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n  /**\n   * Truncates header\n   *\n   * @default false\n   */\n  truncateHeader?: boolean;\n\n  /**\n   * Truncates content\n   *\n   * @default false\n   */\n  truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n  navigable: boolean;\n  selection?: ListSelectionState;\n  as?: 'div' | 'ol' | 'ul';\n  truncateHeader?: ListProps['truncateHeader'];\n  truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  /**\n   * Defines the layout orientation.\n   *\n   * @default vertical\n   */\n  layout?: ListLayout;\n\n  /**\n   * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n   *\n   * @default false\n   */\n  navigable?: boolean;\n\n  /**\n   * Defines if the List items should be selectable.\n   *\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * Defines selection mode for the List.\n   *\n   * @default single\n   */\n  selectionMode?: SelectionMode;\n\n  /**\n   * For controlled selection - defines selected items\n   */\n  selectedItems?: SelectionItemId[];\n\n  /**\n   * For uncontrolled selection - defines default selected items\n   */\n  defaultSelectedItems?: SelectionItemId[];\n\n  /**\n   * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n  /**\n   * Truncates header\n   *\n   * @default false\n   */\n  truncateHeader?: boolean;\n\n  /**\n   * Truncates content\n   *\n   * @default false\n   */\n  truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n  navigable: boolean;\n  selection?: ListSelectionState;\n  as?: 'div' | 'ol' | 'ul';\n  truncateHeader?: ListProps['truncateHeader'];\n  truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/List/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type { ListContextValue, ListContextValues, ListProps, ListSlots, ListState } from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/components/List/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type { ListContextValue, ListContextValues, ListProps, ListSlots, ListState } from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

package/lib/components/List/List/listContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/listContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n  navigable: false,\n  selection: undefined,\n  as: undefined,\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigable","selection","undefined","as","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["../src/components/List/List/listContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n  navigable: false,\n  selection: undefined,\n  as: undefined,\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigable","selection","undefined","as","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}

package/lib/components/List/List/renderList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <state.root />\n    </ListContextProvider>\n  );\n};\n"],"names":["assertSlots","ListContextProvider","renderList_unstable","state","contextValues","value","listContext","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/List/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <state.root />\n    </ListContextProvider>\n  );\n};\n"],"names":["assertSlots","ListContextProvider","renderList_unstable","state","contextValues","value","listContext","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/List/List/useList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  OnSelectionChangeData,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../hooks/useListSelection';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement | HTMLUListElement>): ListState => {\n  const {\n    layout = 'vertical',\n    navigable = false,\n    selectable = false,\n    selectionMode = 'single',\n    selectedItems,\n    defaultSelectedItems,\n    as,\n    onSelectionChange,\n    truncateContent = false,\n    truncateHeader = false,\n  } = props;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: layout === 'grid' ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode,\n    selectedItems: selectionState,\n    defaultSelectedItems,\n  });\n\n  return {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n        ref,\n        ...(navigable && { role: 'menu' }),\n        ...(selectable && {\n          role: 'listbox',\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: DEFAULT_ROOT_EL_TYPE },\n    ),\n    layout,\n    // context:\n    navigable,\n    as: as || DEFAULT_ROOT_EL_TYPE,\n    truncateContent,\n    truncateHeader,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectable ? selection : undefined,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useListSelection","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","selection","components","root","always","role","undefined","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAM,EACJC,SAAS,UAAU,EACnBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,gBAAgB,QAAQ,EACxBC,aAAa,EACbC,oBAAoB,EACpBC,EAAE,EACFC,iBAAiB,EACjBC,kBAAkB,KAAK,EACvBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,MAAMY,4BAA4BhB,wBAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,qBAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWzB,iBAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,8BAAAA,wCAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,YAAY7B,iBAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,KAAKoC,MAAM,CACfrC,yBAAyBM,sBAAsB;YAC7CG;YACA,GAAIE,aAAa;gBAAE2B,MAAM;YAAO,CAAC;YACjC,GAAI1B,cAAc;gBAChB0B,MAAM;gBACN,wBAAwBzB,kBAAkB,gBAAgB,OAAO0B;YACnE,CAAC;YACD,GAAGnB,yBAAyB;YAC5B,GAAGZ,KAAK;QACV,IACA;YAAEgC,aAAalC;QAAqB;QAEtCI;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMV;QACVY;QACAC;QACA,6FAA6F;QAC7Fe,WAAWtB,aAAasB,YAAYK;IACtC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  OnSelectionChangeData,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../hooks/useListSelection';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/**\n * Create the state required to render List.\n *\n * The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n *\n * @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement | HTMLUListElement>): ListState => {\n  const {\n    layout = 'vertical',\n    navigable = false,\n    selectable = false,\n    selectionMode = 'single',\n    selectedItems,\n    defaultSelectedItems,\n    as,\n    onSelectionChange,\n    truncateContent = false,\n    truncateHeader = false,\n  } = props;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({\n    axis: layout === 'grid' ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const [selectionState, setSelectionState] = useControllableState({\n    state: selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n    const selectedItemsAsArray = Array.from(data.selectedItems);\n    setSelectionState(selectedItemsAsArray);\n    onSelectionChange?.(e, { selectedItems: selectedItemsAsArray });\n  });\n\n  const selection = useListSelection({\n    onSelectionChange: onChange,\n    selectionMode,\n    selectedItems: selectionState,\n    defaultSelectedItems,\n  });\n\n  return {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n        ref,\n        ...(navigable && { role: 'menu' }),\n        ...(selectable && {\n          role: 'listbox',\n          'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        }),\n        ...arrowNavigationAttributes,\n        ...props,\n      }),\n      { elementType: DEFAULT_ROOT_EL_TYPE },\n    ),\n    layout,\n    // context:\n    navigable,\n    as: as || DEFAULT_ROOT_EL_TYPE,\n    truncateContent,\n    truncateHeader,\n    // only pass down selection state if its handled internally, otherwise just report the events\n    selection: selectable ? selection : undefined,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useListSelection","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","selection","components","root","always","role","undefined","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAM,EACJC,SAAS,UAAU,EACnBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,gBAAgB,QAAQ,EACxBC,aAAa,EACbC,oBAAoB,EACpBC,EAAE,EACFC,iBAAiB,EACjBC,kBAAkB,KAAK,EACvBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,MAAMY,4BAA4BhB,wBAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,qBAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWzB,iBAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,8BAAAA,wCAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,YAAY7B,iBAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,KAAKoC,MAAM,CACfrC,yBAAyBM,sBAAsB;YAC7CG;YACA,GAAIE,aAAa;gBAAE2B,MAAM;YAAO,CAAC;YACjC,GAAI1B,cAAc;gBAChB0B,MAAM;gBACN,wBAAwBzB,kBAAkB,gBAAgB,OAAO0B;YACnE,CAAC;YACD,GAAGnB,yBAAyB;YAC5B,GAAGZ,KAAK;QACV,IACA;YAAEgC,aAAalC;QAAqB;QAEtCI;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMV;QACVY;QACAC;QACA,6FAA6F;QAC7Fe,WAAWtB,aAAasB,YAAYK;IACtC;AACF,EAAE"}

package/lib/components/List/List/useListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n  const listContext = {\n    navigable,\n    selection,\n    as,\n    truncateContent,\n    truncateHeader,\n  };\n\n  return {\n    listContext,\n  };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
+{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n  const listContext = {\n    navigable,\n    selection,\n    as,\n    truncateContent,\n    truncateHeader,\n  };\n\n  return {\n    listContext,\n  };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}

package/lib/components/List/List/useListStyles.styles.raw.js

@@ -0,0 +1,34 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    rootHorizontal: {
+        display: 'flex'
+    },
+    rootGrid: {
+        display: 'grid'
+    }
+});
+/**
+ * Apply styling to the List slots based on the state
+ */ export const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    const styles = useStyles();
+    const layoutToStyles = {
+        ['horizontal']: styles.rootHorizontal,
+        ['grid']: styles.rootGrid,
+        ['vertical']: undefined
+    };
+    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
+    return state;
+};

package/lib/components/List/List/useListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n  root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rootHorizontal: {\n    display: 'flex',\n  },\n\n  rootGrid: {\n    display: 'grid',\n  },\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n  'use no memo';\n\n  const rootStyles = useRootBaseStyles();\n  const styles = useStyles();\n\n  const layoutToStyles = {\n    ['horizontal']: styles.rootHorizontal,\n    ['grid']: styles.rootGrid,\n    ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n  };\n\n  state.root.className = mergeClasses(\n    listClassNames.root,\n    rootStyles,\n    layoutToStyles[state.layout],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEAJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/List/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement | HTMLDivElement>(\n  (props, ref) => {\n    const state = useListItem_unstable(props, ref);\n\n    useListItemStyles_unstable(state);\n    useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n    return renderListItem_unstable(state);\n  },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement | HTMLDivElement>(\n  (props, ref) => {\n    const state = useListItem_unstable(props, ref);\n\n    useListItemStyles_unstable(state);\n    useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n    return renderListItem_unstable(state);\n  },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

package/lib/components/List/ListItem/ListItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n  header?: React.ComponentProps<typeof ItemLayout>['header'];\n  contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n  headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n  contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n  endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: string | number;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable?: boolean;\n  selected?: boolean;\n  navigable?: boolean;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n  root: NonNullable<Slot<'li', 'div'>>;\n  media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n  header?: React.ComponentProps<typeof ItemLayout>['header'];\n  contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n  headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n  contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n  endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n  value?: string | number;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n  selectable?: boolean;\n  selected?: boolean;\n  navigable?: boolean;\n  truncateHeader?: boolean;\n  truncateContent?: boolean;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/List/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/List/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/List/ListItem/renderListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { ItemLayout } from '../../ItemLayout';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState) => {\n  assertSlots<ListItemSlots>(state);\n\n  return (\n    <state.root>\n      <ItemLayout\n        startMedia={state.media}\n        header={state.header}\n        headerMedia={state.headerMedia}\n        contentWrapper={state.contentWrapper}\n        contentMedia={state.contentMedia}\n        endMedia={state.endMedia}\n      >\n        {state.root.children}\n      </ItemLayout>\n    </state.root>\n  );\n};\n"],"names":["ItemLayout","assertSlots","renderListItem_unstable","state","root","startMedia","media","header","headerMedia","contentWrapper","contentMedia","endMedia","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;YACCK,YAAYF,MAAMG,KAAK;YACvBC,QAAQJ,MAAMI,MAAM;YACpBC,aAAaL,MAAMK,WAAW;YAC9BC,gBAAgBN,MAAMM,cAAc;YACpCC,cAAcP,MAAMO,YAAY;YAChCC,UAAUR,MAAMQ,QAAQ;sBAEvBR,MAAMC,IAAI,CAACQ,QAAQ;;;AAI5B,EAAE"}
+{"version":3,"sources":["../src/components/List/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { ItemLayout } from '../../ItemLayout';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState) => {\n  assertSlots<ListItemSlots>(state);\n\n  return (\n    <state.root>\n      <ItemLayout\n        startMedia={state.media}\n        header={state.header}\n        headerMedia={state.headerMedia}\n        contentWrapper={state.contentWrapper}\n        contentMedia={state.contentMedia}\n        endMedia={state.endMedia}\n      >\n        {state.root.children}\n      </ItemLayout>\n    </state.root>\n  );\n};\n"],"names":["ItemLayout","assertSlots","renderListItem_unstable","state","root","startMedia","media","header","headerMedia","contentWrapper","contentMedia","endMedia","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;YACCK,YAAYF,MAAMG,KAAK;YACvBC,QAAQJ,MAAMI,MAAM;YACpBC,aAAaL,MAAMK,WAAW;YAC9BC,gBAAgBN,MAAMM,cAAc;YACpCC,cAAcP,MAAMO,YAAY;YAChCC,UAAUR,MAAMQ,QAAQ;sBAEvBR,MAAMC,IAAI,CAACQ,QAAQ;;;AAI5B,EAAE"}

package/lib/components/List/ListItem/useListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' | 'ul' | 'ol', renderedAs?: 'div' | 'li') {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (renderedAs === 'li' && parentRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (onClick && !navigable) {\n    throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n  }\n}\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n  props: ListItemProps,\n  ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n  const id = useId('listItem');\n  const { value = id, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n  const navigable = useListContext_unstable(ctx => ctx.navigable);\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n  const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n  const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n  const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n  const renderedAs = props.as || DEFAULT_ROOT_EL_TYPE;\n\n  validateProperElementTypes(parentRenderedAs, renderedAs);\n\n  validateNavigableWhenOnClickPresent(navigable, onClick);\n\n  const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n    onClick?.(e);\n\n    if (!isSelectionEnabled || e.defaultPrevented) {\n      return;\n    }\n\n    toggleItem?.(e, value);\n  });\n\n  // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n  // see https://github.com/microsoft/fluentui/issues/20658\n  const passClickHandler = !!onClick || isSelectionEnabled;\n\n  const clickHandlerProps = {\n    onClick: passClickHandler ? handleClick : undefined,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  };\n\n  // This will give us the onKeyDown and onKeyUp props for Enter and Space\n  const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n  // v0 ListItem adds keyboard handling only for navigable or selectable items\n  const buttonProps = navigable || isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\n\n  const root = slot.always(\n    getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n      ref: ref as React.Ref<HTMLLIElement & HTMLDivElement>,\n      tabIndex: navigable || isSelectionEnabled ? 0 : undefined,\n      role: navigable ? 'menuitem' : 'listitem',\n      id: String(value),\n      ...(isSelectionEnabled && {\n        role: 'option',\n        'aria-selected': isSelected,\n      }),\n      ...props,\n      onKeyDown: buttonProps.onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onKeyUp: buttonProps.onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onClick: buttonProps.onClick as React.MouseEventHandler<HTMLLIElement & HTMLDivElement>,\n    }),\n    { elementType: DEFAULT_ROOT_EL_TYPE },\n  );\n\n  const state: ListItemState = {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n      media: 'div',\n      header: 'div',\n      contentWrapper: 'div',\n      headerMedia: 'div',\n      contentMedia: 'div',\n      endMedia: 'div',\n    },\n    root,\n    navigable,\n    selectable: isSelectionEnabled,\n    selected: isSelected,\n    media: slot.optional(props.media, { elementType: 'div' }),\n    header: slot.optional(props.header, { elementType: 'div' }),\n    contentWrapper: slot.optional(props.contentWrapper, { elementType: 'div', renderByDefault: true }),\n    headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n    contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n    endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n    truncateHeader: truncateHeader ?? truncateHeaderOnList,\n    truncateContent: truncateContent ?? truncateContentOnList,\n  };\n\n  return state;\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","slot","useEventCallback","useId","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["import { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' | 'ul' | 'ol', renderedAs?: 'div' | 'li') {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (renderedAs === 'li' && parentRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n  if (process.env.NODE_ENV === 'production') {\n    return;\n  }\n\n  if (onClick && !navigable) {\n    throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n  }\n}\n\n/**\n * Create the state required to render ListItem.\n *\n * The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n *\n * @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n  props: ListItemProps,\n  ref: React.Ref<HTMLLIElement | HTMLDivElement>,\n): ListItemState => {\n  const id = useId('listItem');\n  const { value = id, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n  const navigable = useListContext_unstable(ctx => ctx.navigable);\n  const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n  const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n  const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n  const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n  const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n  const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n  const renderedAs = props.as || DEFAULT_ROOT_EL_TYPE;\n\n  validateProperElementTypes(parentRenderedAs, renderedAs);\n\n  validateNavigableWhenOnClickPresent(navigable, onClick);\n\n  const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n    onClick?.(e);\n\n    if (!isSelectionEnabled || e.defaultPrevented) {\n      return;\n    }\n\n    toggleItem?.(e, value);\n  });\n\n  // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n  // see https://github.com/microsoft/fluentui/issues/20658\n  const passClickHandler = !!onClick || isSelectionEnabled;\n\n  const clickHandlerProps = {\n    onClick: passClickHandler ? handleClick : undefined,\n    onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n    onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n  };\n\n  // This will give us the onKeyDown and onKeyUp props for Enter and Space\n  const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n  // v0 ListItem adds keyboard handling only for navigable or selectable items\n  const buttonProps = navigable || isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\n\n  const root = slot.always(\n    getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n      ref: ref as React.Ref<HTMLLIElement & HTMLDivElement>,\n      tabIndex: navigable || isSelectionEnabled ? 0 : undefined,\n      role: navigable ? 'menuitem' : 'listitem',\n      id: String(value),\n      ...(isSelectionEnabled && {\n        role: 'option',\n        'aria-selected': isSelected,\n      }),\n      ...props,\n      onKeyDown: buttonProps.onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onKeyUp: buttonProps.onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n      onClick: buttonProps.onClick as React.MouseEventHandler<HTMLLIElement & HTMLDivElement>,\n    }),\n    { elementType: DEFAULT_ROOT_EL_TYPE },\n  );\n\n  const state: ListItemState = {\n    components: {\n      root: DEFAULT_ROOT_EL_TYPE,\n      media: 'div',\n      header: 'div',\n      contentWrapper: 'div',\n      headerMedia: 'div',\n      contentMedia: 'div',\n      endMedia: 'div',\n    },\n    root,\n    navigable,\n    selectable: isSelectionEnabled,\n    selected: isSelected,\n    media: slot.optional(props.media, { elementType: 'div' }),\n    header: slot.optional(props.header, { elementType: 'div' }),\n    contentWrapper: slot.optional(props.contentWrapper, { elementType: 'div', renderByDefault: true }),\n    headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n    contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n    endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n    truncateHeader: truncateHeader ?? truncateHeaderOnList,\n    truncateContent: truncateContent ?? truncateContentOnList,\n  };\n\n  return state;\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","slot","useEventCallback","useId","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"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"}

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js

@@ -0,0 +1,66 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const listItemClassNames = {
+    root: 'fui-ListItem',
+    media: 'fui-ListItem__media',
+    header: 'fui-ListItem__header',
+    contentWrapper: 'fui-ListItem__contentWrapper',
+    headerMedia: 'fui-ListItem__headerMedia',
+    contentMedia: 'fui-ListItem__contentMedia',
+    endMedia: 'fui-ListItem__endMedia'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: '0 10px',
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        borderRadius: tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    contentWrapper: {
+        fontSize: tokens.fontSizeBase200
+    },
+    // The content should go all the way to the end if the content media is not present
+    contentWrapperWithoutMedia: {
+        gridColumnEnd: 4
+    },
+    truncate: {
+        overflow: 'hidden',
+        textWrap: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    rootSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    rootClickable: {
+        cursor: 'pointer',
+        '&:hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    }
+});
+/**
+ * Apply styling to the ListItem slots based on the state
+ */ export const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);
+    if (state.header) {
+        var _state_header;
+        state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);
+    }
+    if (state.contentWrapper) {
+        var _state_contentWrapper;
+        state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);
+    }
+    return state;
+};

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n  root: 'fui-ListItem',\n  media: 'fui-ListItem__media',\n  header: 'fui-ListItem__header',\n  contentWrapper: 'fui-ListItem__contentWrapper',\n  headerMedia: 'fui-ListItem__headerMedia',\n  contentMedia: 'fui-ListItem__contentMedia',\n  endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: '0 10px',\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    { selector: 'focus' },\n  ),\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  contentWrapper: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  // The content should go all the way to the end if the content media is not present\n  contentWrapperWithoutMedia: {\n    gridColumnEnd: 4,\n  },\n  truncate: {\n    overflow: 'hidden',\n    textWrap: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n  rootSelected: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n  },\n  rootClickable: {\n    cursor: 'pointer',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n  },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    listItemClassNames.root,\n    rootBaseStyles,\n    (state.selectable || state.navigable) && styles.rootClickable,\n    state.selected && styles.rootSelected,\n    state.root.className,\n  );\n\n  if (state.header) {\n    state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n  }\n\n  if (state.contentWrapper) {\n    state.contentWrapper.className = mergeClasses(\n      styles.contentWrapper,\n      state.truncateContent && styles.truncate,\n      !state.contentMedia && styles.contentWrapperWithoutMedia,\n      state.contentWrapper?.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,GAAGd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/List/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"rangeMappings":"","mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB"}
+{"version":3,"sources":["../src/components/List/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB"}

package/lib/components/List/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n  isSelected: (item: string | number) => boolean;\n  toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n  deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n  clearSelection: (e: React.SyntheticEvent) => void;\n  toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n  setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n  selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/List/hooks/useListSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["import { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAA8BA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}
+{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["import { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n  const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n  const [selectedItems, setSelectedItems] = useControllableState({\n    state: options.selectedItems,\n    defaultState: defaultSelectedItems,\n    initialState: [],\n  });\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange: (e, data) => {\n      setSelectedItems(data.selectedItems);\n      onSelectionChange?.(e, data);\n    },\n  });\n\n  const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n    selectionMethods.toggleItem(e, itemId),\n  );\n\n  const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n    selectionMethods.toggleAllItems(e, itemIds);\n  });\n\n  const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.deselectItem(e, itemId),\n  );\n\n  const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n    selectionMethods.selectItem(e, itemId),\n  );\n\n  const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n  return {\n    selectedItems: selectedArray,\n    toggleItem,\n    toggleAllItems,\n    deselectItem,\n    selectItem,\n    setSelectedItems,\n    isSelected: (id: string | number) => selectionMethods.isSelected(id),\n    clearSelection,\n  };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA,SAA8BA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}

package/lib/components/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\nexport type { ListProps, ListSlots, ListState } from './List';\n\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n\nexport { useListSelection } from './hooks';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection"],"rangeMappings":";;","mappings":"AAAA,SAASA,IAAI,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,EAAEC,gBAAgB,QAAQ,SAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAGpB,SAASC,gBAAgB,QAAQ,UAAU"}
+{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\nexport type { ListProps, ListSlots, ListState } from './List';\n\nexport {\n  ListItem,\n  listItemClassNames,\n  renderListItem_unstable,\n  useListItemStyles_unstable,\n  useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n\nexport { useListSelection } from './hooks';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable","useListSelection"],"mappings":"AAAA,SAASA,IAAI,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,EAAEC,gBAAgB,QAAQ,SAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAGpB,SAASC,gBAAgB,QAAQ,UAAU"}

package/lib/components/Primitive/Primitive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Primitive/Primitive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\n\n// Simplified version from https://github.com/reach/reach-ui/blob/55d28eda39afc4c667e97f5f62a48d1de034b93f/packages/utils/src/polymorphic.ts\ninterface PrimitiveComponent {\n  /**\n   * Infers props from JSX.IntrinsicElements based on \"as\" value. Explicitly avoids `React.ElementType` and manually\n   * narrow the prop types so that events are typed when using JSX.IntrinsicElements.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  <As extends keyof JSX.IntrinsicElements>(props: { as?: As } & JSX.IntrinsicElements[As]): React.ReactElement | null;\n\n  displayName: string;\n}\n\nexport const primitiveClassName = 'fui-Primitive';\n\nexport const Primitive = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & { as: 'div' }>(\n  (props, ref) => {\n    const { as: Component = 'div', ...rest } = props;\n\n    const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n    const className = mergeClasses(primitiveClassName, props.className);\n\n    return <Component dir={dir} {...rest} className={className} ref={ref} />;\n  },\n) as PrimitiveComponent;\n\nPrimitive.displayName = 'Primitive';\n"],"names":["React","mergeClasses","primitiveClassName","Primitive","forwardRef","props","ref","as","Component","rest","dir","children","undefined","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAc1D,OAAO,MAAMC,qBAAqB,gBAAgB;AAElD,OAAO,MAAMC,0BAAYH,MAAMI,UAAU,CACvC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAIC,YAAY,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE3C,MAAMK,MAAM,OAAOL,MAAMM,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,YAAYZ,aAAaC,oBAAoBG,MAAMQ,SAAS;IAElE,qBAAO,oBAACL;QAAUE,KAAKA;QAAM,GAAGD,IAAI;QAAEI,WAAWA;QAAWP,KAAKA;;AACnE,GACsB;AAExBH,UAAUW,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Primitive/Primitive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport type { JSXIntrinsicElement, JSXIntrinsicElementKeys } from '@fluentui/react-utilities';\n\n// Simplified version from https://github.com/reach/reach-ui/blob/55d28eda39afc4c667e97f5f62a48d1de034b93f/packages/utils/src/polymorphic.ts\ninterface PrimitiveComponent {\n  /**\n   * Infers props from JSX.IntrinsicElements based on \"as\" value. Explicitly avoids `React.ElementType` and manually\n   * narrow the prop types so that events are typed when using JSX.IntrinsicElements.\n   */\n  <As extends JSXIntrinsicElementKeys>(props: { as?: As } & JSXIntrinsicElement<As>): React.ReactElement | null;\n\n  displayName: string;\n}\n\nexport const primitiveClassName = 'fui-Primitive';\n\nexport const Primitive = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & { as: 'div' }>(\n  (props, ref) => {\n    const { as: Component = 'div', ...rest } = props;\n\n    const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n    const className = mergeClasses(primitiveClassName, props.className);\n\n    return <Component dir={dir} {...rest} className={className} ref={ref} />;\n  },\n) as PrimitiveComponent;\n\nPrimitive.displayName = 'Primitive';\n"],"names":["React","mergeClasses","primitiveClassName","Primitive","forwardRef","props","ref","as","Component","rest","dir","children","undefined","className","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAc1D,OAAO,MAAMC,qBAAqB,gBAAgB;AAElD,OAAO,MAAMC,0BAAYH,MAAMI,UAAU,CACvC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAIC,YAAY,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE3C,MAAMK,MAAM,OAAOL,MAAMM,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,YAAYZ,aAAaC,oBAAoBG,MAAMQ,SAAS;IAElE,qBAAO,oBAACL;QAAUE,KAAKA;QAAM,GAAGD,IAAI;QAAEI,WAAWA;QAAWP,KAAKA;;AACnE,GACsB;AAExBH,UAAUW,WAAW,GAAG"}

package/lib/components/Primitive/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Primitive/index.tsx"],"sourcesContent":["export { Primitive, primitiveClassName } from './Primitive';\n"],"names":["Primitive","primitiveClassName"],"rangeMappings":"","mappings":"AAAA,SAASA,SAAS,EAAEC,kBAAkB,QAAQ,cAAc"}
+{"version":3,"sources":["../src/components/Primitive/index.tsx"],"sourcesContent":["export { Primitive, primitiveClassName } from './Primitive';\n"],"names":["Primitive","primitiveClassName"],"mappings":"AAAA,SAASA,SAAS,EAAEC,kBAAkB,QAAQ,cAAc"}

package/lib/components/Segment/Segment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Segment/Segment.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useSegmentStyles } from './Segment.styles';\n\nexport const segmentClassName = 'fui-Segment';\n\nexport const Segment = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...rest } = props;\n  const classes = useSegmentStyles();\n\n  const segmentClasses = mergeClasses(segmentClassName, classes.segment, className);\n\n  return (\n    <div ref={ref} className={segmentClasses} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nSegment.displayName = 'Segment';\n"],"names":["mergeClasses","React","useSegmentStyles","segmentClassName","Segment","forwardRef","props","ref","children","className","rest","classes","segmentClasses","segment","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,OAAO,MAAMC,mBAAmB,cAAc;AAE9C,OAAO,MAAMC,wBAAUH,MAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,MAAMU,iBAAiBZ,aAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,qBACE,oBAACK;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Segment/Segment.tsx"],"sourcesContent":["import { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useSegmentStyles } from './Segment.styles';\n\nexport const segmentClassName = 'fui-Segment';\n\nexport const Segment = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>((props, ref) => {\n  const { children, className, ...rest } = props;\n  const classes = useSegmentStyles();\n\n  const segmentClasses = mergeClasses(segmentClassName, classes.segment, className);\n\n  return (\n    <div ref={ref} className={segmentClasses} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nSegment.displayName = 'Segment';\n"],"names":["mergeClasses","React","useSegmentStyles","segmentClassName","Segment","forwardRef","props","ref","children","className","rest","classes","segmentClasses","segment","div","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,OAAO,MAAMC,mBAAmB,cAAc;AAE9C,OAAO,MAAMC,wBAAUH,MAAMI,UAAU,CAAoD,CAACC,OAAOC;IACjG,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,MAAMU,iBAAiBZ,aAAaG,kBAAkBQ,QAAQE,OAAO,EAAEJ;IAEvE,qBACE,oBAACK;QAAIP,KAAKA;QAAKE,WAAWG;QAAiB,GAAGF,IAAI;OAC/CF;AAGP,GAAG;AAEHJ,QAAQW,WAAW,GAAG"}

package/lib/components/Segment/Segment.styles.raw.js

@@ -0,0 +1,11 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+export const useSegmentStyles = makeStyles({
+    segment: {
+        padding: '1em',
+        ...shorthands.borderWidth('2px', 0, 0),
+        ...shorthands.borderColor('transparent'),
+        ...shorthands.borderStyle('solid'),
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`
+    }
+});

package/lib/components/Segment/Segment.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Segment/Segment.styles.ts"],"sourcesContent":["import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\n\nexport const useSegmentStyles = makeStyles({\n  segment: {\n    padding: '1em',\n    ...shorthands.borderWidth('2px', 0, 0),\n    ...shorthands.borderColor('transparent'),\n    ...shorthands.borderStyle('solid'),\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`,\n  },\n});\n"],"names":["makeStyles","shorthands","tokens","useSegmentStyles","segment","padding","borderWidth","borderColor","borderStyle","backgroundColor","colorNeutralBackground1","boxShadow","colorNeutralShadowKey"],"mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAE5E,OAAO,MAAMC,mBAAmBH,WAAW;IACzCI,SAAS;QACPC,SAAS;QACT,GAAGJ,WAAWK,WAAW,CAAC,OAAO,GAAG,EAAE;QACtC,GAAGL,WAAWM,WAAW,CAAC,cAAc;QACxC,GAAGN,WAAWO,WAAW,CAAC,QAAQ;QAClCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW,CAAC,cAAc,EAAET,OAAOU,qBAAqB,EAAE;IAC5D;AACF,GAAG"}

package/lib/components/Segment/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Segment/index.ts"],"sourcesContent":["export { Segment, segmentClassName } from './Segment';\n"],"names":["Segment","segmentClassName"],"rangeMappings":"","mappings":"AAAA,SAASA,OAAO,EAAEC,gBAAgB,QAAQ,YAAY"}
+{"version":3,"sources":["../src/components/Segment/index.ts"],"sourcesContent":["export { Segment, segmentClassName } from './Segment';\n"],"names":["Segment","segmentClassName"],"mappings":"AAAA,SAASA,OAAO,EAAEC,gBAAgB,QAAQ,YAAY"}

package/lib/components/Slider/Slider.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n  fluid,\n};\n"],"names":["fluid","width","slider"],"rangeMappings":";;;;;","mappings":"AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,OAAO,MAAMC,SAAS;IACpBF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n  fluid,\n};\n"],"names":["fluid","width","slider"],"mappings":"AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,OAAO,MAAMC,SAAS;IACpBF;AACF,EAAE"}

package/lib/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { slider } from './Slider.mixins';\n"],"names":["slider"],"rangeMappings":"","mappings":"AAAA,SAASA,MAAM,QAAQ,kBAAkB"}
+{"version":3,"sources":["../src/components/Slider/index.ts"],"sourcesContent":["export { slider } from './Slider.mixins';\n"],"names":["slider"],"mappings":"AAAA,SAASA,MAAM,QAAQ,kBAAkB"}

package/lib/components/Spinner/SpinnerMigration.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle, tokens, labelClassNames } from '@fluentui/react-components';\n\nconst v0Inline = (): GriffelStyle => ({ display: 'inline-flex' });\n\nconst v0SpinnerLabelStyle = (): GriffelStyle => ({\n  [`& .${labelClassNames.root}`]: {\n    fontSize: '14px',\n    fontWeight: tokens.fontWeightMedium,\n  },\n});\n\nexport const spinner = {\n  v0Inline,\n  v0SpinnerLabelStyle,\n};\n"],"names":["tokens","labelClassNames","v0Inline","display","v0SpinnerLabelStyle","root","fontSize","fontWeight","fontWeightMedium","spinner"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAAuBA,MAAM,EAAEC,eAAe,QAAQ,6BAA6B;AAEnF,MAAMC,WAAW,IAAqB,CAAA;QAAEC,SAAS;IAAc,CAAA;AAE/D,MAAMC,sBAAsB,IAAqB,CAAA;QAC/C,CAAC,CAAC,GAAG,EAAEH,gBAAgBI,IAAI,CAAC,CAAC,CAAC,EAAE;YAC9BC,UAAU;YACVC,YAAYP,OAAOQ,gBAAgB;QACrC;IACF,CAAA;AAEA,OAAO,MAAMC,UAAU;IACrBP;IACAE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle, tokens, labelClassNames } from '@fluentui/react-components';\n\nconst v0Inline = (): GriffelStyle => ({ display: 'inline-flex' });\n\nconst v0SpinnerLabelStyle = (): GriffelStyle => ({\n  [`& .${labelClassNames.root}`]: {\n    fontSize: '14px',\n    fontWeight: tokens.fontWeightMedium,\n  },\n});\n\nexport const spinner = {\n  v0Inline,\n  v0SpinnerLabelStyle,\n};\n"],"names":["tokens","labelClassNames","v0Inline","display","v0SpinnerLabelStyle","root","fontSize","fontWeight","fontWeightMedium","spinner"],"mappings":"AAAA,SAAuBA,MAAM,EAAEC,eAAe,QAAQ,6BAA6B;AAEnF,MAAMC,WAAW,IAAqB,CAAA;QAAEC,SAAS;IAAc,CAAA;AAE/D,MAAMC,sBAAsB,IAAqB,CAAA;QAC/C,CAAC,CAAC,GAAG,EAAEH,gBAAgBI,IAAI,EAAE,CAAC,EAAE;YAC9BC,UAAU;YACVC,YAAYP,OAAOQ,gBAAgB;QACrC;IACF,CAAA;AAEA,OAAO,MAAMC,UAAU;IACrBP;IACAE;AACF,EAAE"}

package/lib/components/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.tsx"],"sourcesContent":["export { spinner } from './SpinnerMigration.mixins';\n"],"names":["spinner"],"rangeMappings":"","mappings":"AAAA,SAASA,OAAO,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Spinner/index.tsx"],"sourcesContent":["export { spinner } from './SpinnerMigration.mixins';\n"],"names":["spinner"],"mappings":"AAAA,SAASA,OAAO,QAAQ,4BAA4B"}