synapse-react-client 4.0.19 → 4.0.21

package/dist/components/TanStackTable/ColumnHeaderEnumFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeaderEnumFilter.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeaderEnumFilter.tsx"],"sourcesContent":["import { Column, RowData } from '@tanstack/react-table'\nimport { isEmpty, isEqual, noop } from 'lodash-es'\nimport { useMemo } from 'react'\nimport EnumFacetFilterUI, {\n  EnumFacetFilterUIProps,\n  RenderedFacetValue,\n} from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI'\n\nfunction setEnumFilterValue<TData extends RowData, TValue = unknown>(\n  column: Column<TData, TValue>,\n  newValue: TValue,\n) {\n  if (column.columnDef.meta?.enableMultipleSelect) {\n    // Append the value to the list, or create the list if it does not exist\n    column.setFilterValue((curr: TValue[] | null): TValue[] | null => {\n      if (curr) {\n        return [...curr, newValue]\n      }\n      return [newValue]\n    })\n  } else {\n    // Replace the list\n    column.setFilterValue([newValue])\n  }\n}\n\nfunction removeEnumFilterValue<TData extends RowData, TValue = unknown>(\n  column: Column<TData, TValue>,\n  valueToRemove: TValue,\n) {\n  column.setFilterValue((curr: TValue[] | null): TValue[] | null => {\n    if (curr) {\n      const newValue = [\n        ...curr.filter(currValue => !isEqual(currValue, valueToRemove)),\n      ]\n      if (!isEmpty(newValue)) {\n        return newValue\n      }\n    }\n    return null\n  })\n}\n\ntype ColumnHeaderEnumFilterProps<TData = unknown, TValue = unknown> = {\n  column: Column<TData, TValue>\n  title: string\n}\n\nfunction getMaybeFacetedUniqueValues<TValue = unknown>(\n  columnFacetedUniqueValues: Map<TValue, number>,\n): {\n  value: TValue\n  count?: number\n}[] {\n  if (columnFacetedUniqueValues) {\n    // @tanstack/table currently has no API to define a unique set of values for a column without count statistics\n    // In each instance, we manually defined a set of unique values and set the count to 0\n    const hasFacetCounts = Array.from(columnFacetedUniqueValues.values()).some(\n      v => v != 0,\n    )\n    return Array.from(columnFacetedUniqueValues.entries()).map(\n      (entry: [TValue, number]) => ({\n        value: entry[0],\n        count: hasFacetCounts ? entry[1] : undefined,\n      }),\n    )\n  }\n  return []\n}\n\n/**\n * Used to create {@link EnumFacetFilterUIProps} that can be used to create a control to filter column values based on\n * the provided @tanstack/react-table {@link Column}. The custom properties used to configure the filter should be set\n * in the column's `meta` field.\n * @param props\n * @constructor\n */\nexport function ColumnHeaderEnumFilter<TData = unknown, TValue = unknown>(\n  props: ColumnHeaderEnumFilterProps<TData, TValue>,\n) {\n  type EnumFilterValue = TValue[]\n  const { column, title } = props\n\n  const canMultiSelect = column.columnDef.meta?.enableMultipleSelect || false\n\n  const _uncheckedFilterValues = column.getFilterValue() as EnumFilterValue\n  const filterValues = useMemo(\n    () => _uncheckedFilterValues || [],\n    [_uncheckedFilterValues],\n  )\n\n  // Use the column's enumValues and filterValues to create the facet value objects used by EnumFacetFilterUI\n  const facetedUniqueValues = column.getFacetedUniqueValues() as Map<\n    TValue,\n    number\n  >\n  const transformedFilterValues: RenderedFacetValue<TValue>[] = useMemo(\n    () =>\n      getMaybeFacetedUniqueValues(facetedUniqueValues).map(\n        (facetValue): RenderedFacetValue<TValue> => {\n          let displayText: string = facetValue.value as unknown as string\n          if (column.columnDef?.meta?.getDisplayText) {\n            displayText = column.columnDef.meta.getDisplayText(facetValue.value)\n          }\n          const currentFilterValue = filterValues || []\n          const isSelected = Boolean(\n            currentFilterValue.find(\n              filterValue => filterValue === facetValue.value,\n            ),\n          )\n          return { ...facetValue, displayText, isSelected }\n        },\n      ),\n    [column, filterValues, facetedUniqueValues],\n  )\n  return (\n    <EnumFacetFilterUI\n      facetTitle={title}\n      facetValues={transformedFilterValues}\n      filterIsActive={column.getIsFiltered()}\n      containerAs={'Dropdown'}\n      dropdownType={'Icon'}\n      defaultShowAllValues={true}\n      onAddValueToSelection={newFilterValue => {\n        setEnumFilterValue(column, newFilterValue)\n      }}\n      onRemoveValueFromSelection={valueToRemove => {\n        removeEnumFilterValue(column, valueToRemove)\n      }}\n      onRemoveAllFacetSelections={() => {\n        column.setFilterValue(null)\n      }}\n      onHoverOverValue={noop}\n      canMultiSelect={canMultiSelect}\n    />\n  )\n}\n"],"mappings":";;;;;AAQA,SAAS,EACP,GACA,GACA;AACA,CAAI,EAAO,UAAU,MAAM,uBAEzB,EAAO,gBAAgB,MACjB,IACK,CAAC,GAAG,GAAM,EAAS,GAErB,CAAC,EAAS,CACjB,GAGF,EAAO,eAAe,CAAC,EAAS,CAAC;;AAIrC,SAAS,EACP,GACA,GACA;AACA,GAAO,gBAAgB,MAA2C;AAChE,MAAI,GAAM;GACR,IAAM,IAAW,CACf,GAAG,EAAK,QAAO,MAAa,CAAC,EAAQ,GAAW,EAAc,CAAC,CAChE;AACD,OAAI,CAAC,EAAQ,EAAS,CACpB,QAAO;;AAGX,SAAO;GACP;;AAQJ,SAAS,EACP,GAIE;AACF,KAAI,GAA2B;EAG7B,IAAM,IAAiB,MAAM,KAAK,EAA0B,QAAQ,CAAC,CAAC,MACpE,MAAK,KAAK,EACX;AACD,SAAO,MAAM,KAAK,EAA0B,SAAS,CAAC,CAAC,KACpD,OAA6B;GAC5B,OAAO,EAAM;GACb,OAAO,IAAiB,EAAM,KAAK,KAAA;GACpC,EACF;;AAEH,QAAO,EAAE;;AAUX,SAAgB,EACd,GACA;CAEA,IAAM,EAAE,WAAQ,aAAU,GAEpB,IAAiB,EAAO,UAAU,MAAM,wBAAwB,IAEhE,IAAyB,EAAO,gBAAgB,EAChD,IAAe,QACb,KAA0B,EAAE,EAClC,CAAC,EAAuB,CACzB,EAGK,IAAsB,EAAO,wBAAwB;AAuB3D,QACE,kBAAC,GAAD;EACE,YAAY;EACZ,aAtB0D,QAE1D,EAA4B,EAAoB,CAAC,KAC9C,MAA2C;GAC1C,IAAI,IAAsB,EAAW;AACrC,GAAI,EAAO,WAAW,MAAM,mBAC1B,IAAc,EAAO,UAAU,KAAK,eAAe,EAAW,MAAM;GAGtE,IAAM,IAAa,GADQ,KAAgB,EAAE,EAExB,MACjB,MAAe,MAAgB,EAAW,MAC3C;AAEH,UAAO;IAAE,GAAG;IAAY;IAAa;IAAY;IAEpD,EACH;GAAC;GAAQ;GAAc;GAAoB,CAK5B;EACb,gBAAgB,EAAO,eAAe;EACtC,aAAa;EACb,cAAc;EACd,sBAAsB;EACtB,wBAAuB,MAAkB;AACvC,KAAmB,GAAQ,EAAe;;EAE5C,6BAA4B,MAAiB;AAC3C,KAAsB,GAAQ,EAAc;;EAE9C,kCAAkC;AAChC,KAAO,eAAe,KAAK;;EAE7B,kBAAkB;EACF;EAChB,CAAA"}
+{"version":3,"file":"ColumnHeaderEnumFilter.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeaderEnumFilter.tsx"],"sourcesContent":["import { Column, RowData } from '@tanstack/react-table'\nimport { isEmpty, isEqual, noop } from 'lodash-es'\nimport { useMemo } from 'react'\nimport EnumFacetFilterUI, {\n  EnumFacetFilterUIProps,\n  RenderedFacetValue,\n} from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI'\n\nfunction setEnumFilterValue<TData extends RowData, TValue = unknown>(\n  column: Column<TData, TValue>,\n  newValue: TValue,\n) {\n  if (column.columnDef.meta?.enableMultipleSelect) {\n    // Append the value to the list, or create the list if it does not exist\n    column.setFilterValue((curr: TValue[] | null): TValue[] | null => {\n      if (curr) {\n        return [...curr, newValue]\n      }\n      return [newValue]\n    })\n  } else {\n    // Replace the list\n    column.setFilterValue([newValue])\n  }\n}\n\nfunction removeEnumFilterValue<TData extends RowData, TValue = unknown>(\n  column: Column<TData, TValue>,\n  valueToRemove: TValue,\n) {\n  column.setFilterValue((curr: TValue[] | null): TValue[] | null => {\n    if (curr) {\n      const newValue = [\n        ...curr.filter(currValue => !isEqual(currValue, valueToRemove)),\n      ]\n      if (!isEmpty(newValue)) {\n        return newValue\n      }\n    }\n    return null\n  })\n}\n\ntype ColumnHeaderEnumFilterProps<TData = unknown, TValue = unknown> = {\n  column: Column<TData, TValue>\n  title: string\n}\n\nfunction getMaybeFacetedUniqueValues<TValue = unknown>(\n  columnFacetedUniqueValues: Map<TValue, number>,\n): {\n  value: TValue\n  count?: number\n}[] {\n  if (columnFacetedUniqueValues) {\n    // @tanstack/table currently has no API to define a unique set of values for a column without count statistics\n    // In each instance, we manually defined a set of unique values and set the count to 0\n    const hasFacetCounts = Array.from(columnFacetedUniqueValues.values()).some(\n      v => v != 0,\n    )\n    return Array.from(columnFacetedUniqueValues.entries()).map(\n      (entry: [TValue, number]) => ({\n        value: entry[0],\n        count: hasFacetCounts ? entry[1] : undefined,\n      }),\n    )\n  }\n  return []\n}\n\n/**\n * Used to create {@link EnumFacetFilterUIProps} that can be used to create a control to filter column values based on\n * the provided @tanstack/react-table {@link Column}. The custom properties used to configure the filter should be set\n * in the column's `meta` field.\n * @param props\n * @constructor\n */\nexport function ColumnHeaderEnumFilter<TData = unknown, TValue = unknown>(\n  props: ColumnHeaderEnumFilterProps<TData, TValue>,\n) {\n  type EnumFilterValue = TValue[]\n  const { column, title } = props\n\n  const canMultiSelect = column.columnDef.meta?.enableMultipleSelect || false\n\n  const _uncheckedFilterValues = column.getFilterValue() as EnumFilterValue\n  const filterValues = useMemo(\n    () => _uncheckedFilterValues || [],\n    [_uncheckedFilterValues],\n  )\n\n  // Use the column's enumValues and filterValues to create the facet value objects used by EnumFacetFilterUI\n  const facetedUniqueValues = column.getFacetedUniqueValues() as Map<\n    TValue,\n    number\n  >\n  const transformedFilterValues: RenderedFacetValue<TValue>[] = useMemo(\n    () =>\n      getMaybeFacetedUniqueValues(facetedUniqueValues).map(\n        (facetValue): RenderedFacetValue<TValue> => {\n          let displayText: string = facetValue.value as unknown as string\n          if (column.columnDef?.meta?.getDisplayText) {\n            displayText = column.columnDef.meta.getDisplayText(facetValue.value)\n          }\n          const currentFilterValue = filterValues || []\n          const isSelected = Boolean(\n            currentFilterValue.find(\n              filterValue => filterValue === facetValue.value,\n            ),\n          )\n          return { ...facetValue, displayText, isSelected }\n        },\n      ),\n    [column, filterValues, facetedUniqueValues],\n  )\n  return (\n    <EnumFacetFilterUI\n      facetTitle={title}\n      facetValues={transformedFilterValues}\n      filterIsActive={column.getIsFiltered()}\n      containerAs={'Dropdown'}\n      dropdownType={'Icon'}\n      defaultShowAllValues={true}\n      onAddValueToSelection={newFilterValue => {\n        setEnumFilterValue(column, newFilterValue)\n      }}\n      onRemoveValueFromSelection={valueToRemove => {\n        removeEnumFilterValue(column, valueToRemove)\n      }}\n      onRemoveAllFacetSelections={() => {\n        column.setFilterValue(null)\n      }}\n      onHoverOverValue={noop}\n      canMultiSelect={canMultiSelect}\n    />\n  )\n}\n"],"mappings":";;;;;AAQA,SAAS,EACP,GACA,GACA;CACA,AAAI,EAAO,UAAU,MAAM,uBAEzB,EAAO,gBAAgB,MACjB,IACK,CAAC,GAAG,GAAM,CAAQ,IAEpB,CAAC,CAAQ,CACjB,IAGD,EAAO,eAAe,CAAC,CAAQ,CAAC;AAEpC;AAEA,SAAS,EACP,GACA,GACA;CACA,EAAO,gBAAgB,MAA2C;EAChE,IAAI,GAAM;GACR,IAAM,IAAW,CACf,GAAG,EAAK,QAAO,MAAa,CAAC,EAAQ,GAAW,CAAa,CAAC,CAChE;GACA,IAAI,CAAC,EAAQ,CAAQ,GACnB,OAAO;EAEX;EACA,OAAO;CACT,CAAC;AACH;AAOA,SAAS,EACP,GAIE;CACF,IAAI,GAA2B;EAG7B,IAAM,IAAiB,MAAM,KAAK,EAA0B,OAAO,CAAC,EAAE,MACpE,MAAK,KAAK,CACZ;EACA,OAAO,MAAM,KAAK,EAA0B,QAAQ,CAAC,EAAE,KACpD,OAA6B;GAC5B,OAAO,EAAM;GACb,OAAO,IAAiB,EAAM,KAAK,KAAA;EACrC,EACF;CACF;CACA,OAAO,CAAC;AACV;AASA,SAAgB,EACd,GACA;CAEA,IAAM,EAAE,WAAQ,aAAU,GAEpB,IAAiB,EAAO,UAAU,MAAM,wBAAwB,IAEhE,IAAyB,EAAO,eAAe,GAC/C,IAAe,QACb,KAA0B,CAAC,GACjC,CAAC,CAAsB,CACzB,GAGM,IAAsB,EAAO,uBAAuB;CAuB1D,OACE,kBAAC,GAAD;EACE,YAAY;EACZ,aAtB0D,QAE1D,EAA4B,CAAmB,EAAE,KAC9C,MAA2C;GAC1C,IAAI,IAAsB,EAAW;GACrC,AAAI,EAAO,WAAW,MAAM,mBAC1B,IAAc,EAAO,UAAU,KAAK,eAAe,EAAW,KAAK;GAGrE,IAAM,IAAa,GADQ,KAAgB,CAAC,GAEvB,MACjB,MAAe,MAAgB,EAAW,KAC5C;GAEF,OAAO;IAAE,GAAG;IAAY;IAAa;GAAW;EAClD,CACF,GACF;GAAC;GAAQ;GAAc;EAAmB,CAK3B;EACb,gBAAgB,EAAO,cAAc;EACrC,aAAa;EACb,cAAc;EACd,sBAAsB;EACtB,wBAAuB,MAAkB;GACvC,EAAmB,GAAQ,CAAc;EAC3C;EACA,6BAA4B,MAAiB;GAC3C,EAAsB,GAAQ,CAAa;EAC7C;EACA,kCAAkC;GAChC,EAAO,eAAe,IAAI;EAC5B;EACA,kBAAkB;EACF;CACjB,CAAA;AAEL"}

package/dist/components/TanStackTable/StyledTanStackTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n  StyledTableContainer,\n  StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport {\n  ColumnSizingState,\n  flexRender,\n  Row,\n  Table,\n} from '@tanstack/react-table'\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n  getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n  table: Table<TData>\n  styledTableContainerProps?: StyledTableContainerProps\n  fullWidth?: boolean\n  /**\n   * When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n   * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n   * Resizing still works — dragging a column sets a new minimum width.\n   * Defaults to false (fixed layout).\n   */\n  autoColumnSizing?: boolean\n  slots?: StyledTanStackTableSlots<TData, TRowType>\n  slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' | 'rowTransform'>\n\n/**\n * Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n */\nexport default function StyledTanStackTable<\n  TData = unknown,\n  TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    autoColumnSizing = false,\n    slots = {},\n    slotProps = {},\n  } = props\n  const {\n    Thead = 'thead',\n    Th = 'th',\n    Table = 'table',\n    ...tableBodySlots\n  } = slots\n  const {\n    Table: tableSlotProps = {},\n    Thead: theadSlotProps = {},\n    Th: thSlotProps = {},\n    ...tableBodySlotProps\n  } = slotProps\n\n  const tableBodyProps: TableBodyProps<TData, TRowType> = {\n    table,\n    slots: tableBodySlots,\n    slotProps: tableBodySlotProps,\n    rows: props.rows!,\n    rowTransform: props.rowTransform!,\n  }\n\n  /**\n   * When autoColumnSizing is true we do a two-phase render:\n   *  1. Render with table-layout: auto and no width constraints so the browser\n   *     natively sizes each column to its content.\n   *  2. After the first paint, measure each <th> and write the real pixel widths\n   *     into TanStack's columnSizing state, then switch to table-layout: fixed.\n   *\n   * This gives content-based initial sizes while still allowing the user to drag\n   * a column narrower than its content.\n   */\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  // Track what columns+visibility combination was last measured so we know when\n  // a re-measurement is needed (e.g. columns change or visibility is toggled).\n  const columnVisibility = table.getState().columnVisibility\n  const [lastMeasuredState, setLastMeasuredState] = useState<{\n    columns: typeof table.options.columns\n    columnVisibility: typeof columnVisibility\n  } | null>(null)\n\n  // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n  // current columns+visibility matches the last measured snapshot.\n  const hasMeasured =\n    !autoColumnSizing ||\n    (lastMeasuredState?.columns === table.options.columns &&\n      lastMeasuredState?.columnVisibility === columnVisibility)\n\n  // After the browser has laid out the auto-sized table, capture the widths and\n  // switch to fixed layout so that the user can resize below the content width.\n  // useLayoutEffect runs synchronously after DOM mutations, before the browser\n  // paints, which is required for accurate DOM measurements.\n  useLayoutEffect(() => {\n    if (!autoColumnSizing || hasMeasured || !tableRef.current) return\n\n    const ths = tableRef.current.querySelectorAll(\n      ':scope > thead > tr:first-child > th',\n    )\n    const headers = table.getFlatHeaders()\n    const newSizes: ColumnSizingState = {}\n    headers.forEach((header, i) => {\n      const th = ths[i] as HTMLElement | undefined\n      if (th) {\n        newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n      }\n    })\n    if (Object.keys(newSizes).length > 0) {\n      table.setColumnSizing(newSizes)\n      setLastMeasuredState({\n        columns: table.options.columns,\n        columnVisibility,\n      })\n    }\n  }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   *\n   * See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n   */\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders()\n    const colSizes: { [key: string]: number } = {}\n    for (let i = 0; i < headers.length; i++) {\n      const header = headers[i]\n      colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n      colSizes[getColumnSizeCssVariable(header.column.id)] =\n        header.column.getSize()\n    }\n    return colSizes\n    // Intentionally limit the dependencies to only recompute when the column sizes change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    table.getState().columnSizingInfo,\n    table.getState().columnSizing,\n    table.getState().columnVisibility, // If a column is added, its width should be recalculated\n  ])\n\n  // Before measurement: let the browser shrink the table to content width so we\n  // can read accurate sizes. After measurement: use the exact measured total.\n  let tableWidth: string\n  if (fullWidth) {\n    tableWidth = '100%'\n  } else if (!hasMeasured) {\n    tableWidth = 'max-content'\n  } else {\n    tableWidth = `${table.getTotalSize()}px`\n  }\n\n  /* When resizing any column we will render this special memoized version of our table body */\n  const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n    ? MemoizedTableBody\n    : TableBody\n\n  return (\n    <StyledTableContainer {...styledTableContainerProps}>\n      <Table\n        {...tableSlotProps}\n        ref={tableRef}\n        style={{\n          ...columnSizeVars,\n          // Pre-measurement: auto layout so the browser can size columns to content.\n          // Post-measurement: fixed layout so the user can resize below content width.\n          tableLayout: hasMeasured ? 'fixed' : 'auto',\n          width: tableWidth,\n          ...tableSlotProps['style'],\n        }}\n      >\n        <Thead {...theadSlotProps}>\n          {table.getHeaderGroups().map(headerGroup => {\n            return (\n              <tr key={headerGroup.id}>\n                {headerGroup.headers.map(header => (\n                  <Th\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    {...thSlotProps}\n                    style={{\n                      // Pre-measurement: no width hint — let the browser size freely.\n                      // Post-measurement: exact width from the measured/resized value.\n                      ...(hasMeasured && {\n                        width: `calc(var(${getHeaderSizeCssVariable(\n                          header.id,\n                        )}) * 1px)`,\n                      }),\n                      ...getCommonPinningStyles(header.column),\n                      ...thSlotProps['style'],\n                    }}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                    {header.column.getCanResize() && (\n                      <div\n                        className={`resizer ${\n                          header.column.getIsResizing() ? 'isResizing' : ''\n                        }`}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                      />\n                    )}\n                  </Th>\n                ))}\n              </tr>\n            )\n          })}\n        </Thead>\n        <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n      </Table>\n    </StyledTableContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n  StyledTableContainer,\n  StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport {\n  ColumnSizingState,\n  flexRender,\n  Row,\n  Table,\n} from '@tanstack/react-table'\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n  getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n  table: Table<TData>\n  styledTableContainerProps?: StyledTableContainerProps\n  fullWidth?: boolean\n  /**\n   * When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n   * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n   * Resizing still works — dragging a column sets a new minimum width.\n   * Defaults to false (fixed layout).\n   */\n  autoColumnSizing?: boolean\n  slots?: StyledTanStackTableSlots<TData, TRowType>\n  slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' | 'rowTransform'>\n\n/**\n * Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n */\nexport default function StyledTanStackTable<\n  TData = unknown,\n  TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    autoColumnSizing = false,\n    slots = {},\n    slotProps = {},\n  } = props\n  const {\n    Thead = 'thead',\n    Th = 'th',\n    Table = 'table',\n    ...tableBodySlots\n  } = slots\n  const {\n    Table: tableSlotProps = {},\n    Thead: theadSlotProps = {},\n    Th: thSlotProps = {},\n    ...tableBodySlotProps\n  } = slotProps\n\n  const tableBodyProps: TableBodyProps<TData, TRowType> = {\n    table,\n    slots: tableBodySlots,\n    slotProps: tableBodySlotProps,\n    rows: props.rows!,\n    rowTransform: props.rowTransform!,\n  }\n\n  /**\n   * When autoColumnSizing is true we do a two-phase render:\n   *  1. Render with table-layout: auto and no width constraints so the browser\n   *     natively sizes each column to its content.\n   *  2. After the first paint, measure each <th> and write the real pixel widths\n   *     into TanStack's columnSizing state, then switch to table-layout: fixed.\n   *\n   * This gives content-based initial sizes while still allowing the user to drag\n   * a column narrower than its content.\n   */\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  // Track what columns+visibility combination was last measured so we know when\n  // a re-measurement is needed (e.g. columns change or visibility is toggled).\n  const columnVisibility = table.getState().columnVisibility\n  const [lastMeasuredState, setLastMeasuredState] = useState<{\n    columns: typeof table.options.columns\n    columnVisibility: typeof columnVisibility\n  } | null>(null)\n\n  // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n  // current columns+visibility matches the last measured snapshot.\n  const hasMeasured =\n    !autoColumnSizing ||\n    (lastMeasuredState?.columns === table.options.columns &&\n      lastMeasuredState?.columnVisibility === columnVisibility)\n\n  // After the browser has laid out the auto-sized table, capture the widths and\n  // switch to fixed layout so that the user can resize below the content width.\n  // useLayoutEffect runs synchronously after DOM mutations, before the browser\n  // paints, which is required for accurate DOM measurements.\n  useLayoutEffect(() => {\n    if (!autoColumnSizing || hasMeasured || !tableRef.current) return\n\n    const ths = tableRef.current.querySelectorAll(\n      ':scope > thead > tr:first-child > th',\n    )\n    const headers = table.getFlatHeaders()\n    const newSizes: ColumnSizingState = {}\n    headers.forEach((header, i) => {\n      const th = ths[i] as HTMLElement | undefined\n      if (th) {\n        newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n      }\n    })\n    if (Object.keys(newSizes).length > 0) {\n      table.setColumnSizing(newSizes)\n      setLastMeasuredState({\n        columns: table.options.columns,\n        columnVisibility,\n      })\n    }\n  }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   *\n   * See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n   */\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders()\n    const colSizes: { [key: string]: number } = {}\n    for (let i = 0; i < headers.length; i++) {\n      const header = headers[i]\n      colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n      colSizes[getColumnSizeCssVariable(header.column.id)] =\n        header.column.getSize()\n    }\n    return colSizes\n    // Intentionally limit the dependencies to only recompute when the column sizes change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    table.getState().columnSizingInfo,\n    table.getState().columnSizing,\n    table.getState().columnVisibility, // If a column is added, its width should be recalculated\n  ])\n\n  // Before measurement: let the browser shrink the table to content width so we\n  // can read accurate sizes. After measurement: use the exact measured total.\n  let tableWidth: string\n  if (fullWidth) {\n    tableWidth = '100%'\n  } else if (!hasMeasured) {\n    tableWidth = 'max-content'\n  } else {\n    tableWidth = `${table.getTotalSize()}px`\n  }\n\n  /* When resizing any column we will render this special memoized version of our table body */\n  const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n    ? MemoizedTableBody\n    : TableBody\n\n  return (\n    <StyledTableContainer {...styledTableContainerProps}>\n      <Table\n        {...tableSlotProps}\n        ref={tableRef}\n        style={{\n          ...columnSizeVars,\n          // Pre-measurement: auto layout so the browser can size columns to content.\n          // Post-measurement: fixed layout so the user can resize below content width.\n          tableLayout: hasMeasured ? 'fixed' : 'auto',\n          width: tableWidth,\n          ...tableSlotProps['style'],\n        }}\n      >\n        <Thead {...theadSlotProps}>\n          {table.getHeaderGroups().map(headerGroup => {\n            return (\n              <tr key={headerGroup.id}>\n                {headerGroup.headers.map(header => (\n                  <Th\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    {...thSlotProps}\n                    style={{\n                      // Pre-measurement: no width hint — let the browser size freely.\n                      // Post-measurement: exact width from the measured/resized value.\n                      ...(hasMeasured && {\n                        width: `calc(var(${getHeaderSizeCssVariable(\n                          header.id,\n                        )}) * 1px)`,\n                      }),\n                      ...getCommonPinningStyles(header.column),\n                      ...thSlotProps['style'],\n                    }}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                    {header.column.getCanResize() && (\n                      <div\n                        className={`resizer ${\n                          header.column.getIsResizing() ? 'isResizing' : ''\n                        }`}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                      />\n                    )}\n                  </Th>\n                ))}\n              </tr>\n            )\n          })}\n        </Thead>\n        <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n      </Table>\n    </StyledTableContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/components/TanStackTable/StyledVirtualTanStackTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledVirtualTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"sourcesContent":["import { mergeSlotProps } from '@/utils/slots/SlotUtils'\nimport { VirtualItem, Virtualizer } from '@tanstack/react-virtual'\nimport { noop } from 'lodash-es'\nimport React, { useContext } from 'react'\nimport StyledTanStackTable, {\n  StyledTanStackTableProps,\n} from './StyledTanStackTable'\n\nimport { TrProps } from './types'\n\ntype StyledVirtualTanStackTableProps<T = unknown> = Omit<\n  StyledTanStackTableProps<T, VirtualItem>,\n  'slots' | 'rows' | 'rowTransform'\n> & {\n  rowVirtualizer: Virtualizer<any, any>\n  onTableContainerScroll?: (target: EventTarget) => void\n}\n\n// Context to pass the row virtualizer to the Tr component\nconst RowVirtualizerContext = React.createContext<\n  Virtualizer<any, any> | undefined\n>(undefined)\n\n/**\n * A table row component modified to be used with @tanstack/react-virtual.\n */\nexport function VirtualizedTr<TData = unknown>(\n  props: TrProps<TData, VirtualItem>,\n) {\n  const { row: virtualItem, tableRow: _tableRow, ...rest } = props\n  const rowVirtualizer = useContext(RowVirtualizerContext)\n  return (\n    <tr\n      data-index={virtualItem.index} // needed for dynamic row height measurement\n      ref={node => rowVirtualizer?.measureElement(node)} //measure dynamic row height\n      {...rest}\n      style={{\n        ...rest.style,\n        display: 'flex',\n        position: 'absolute',\n        transform: `translateY(${virtualItem.start}px)`, //this should always be a `style` as it changes on scroll\n        width: '100%',\n        alignItems: 'center',\n      }}\n    />\n  )\n}\n\n/**\n * Stylized table component that is compatible with @tanstack/react-table and @tanstack/react-virtual to display a\n * virtualized table, i.e. a table that uses a virtualizer to only render the DOM nodes that contain data that is visible\n * within the viewport. For cases where the table rows do not need to be virtualized, use {@link StyledTanStackTable}.\n */\nexport default function StyledVirtualTanStackTable<T = unknown>(\n  props: StyledVirtualTanStackTableProps<T>,\n) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    rowVirtualizer,\n    slotProps = {},\n    onTableContainerScroll = noop,\n  } = props\n\n  const virtualRows = rowVirtualizer.getVirtualItems()\n\n  return (\n    <RowVirtualizerContext.Provider value={rowVirtualizer}>\n      <StyledTanStackTable<T, VirtualItem>\n        table={table}\n        rows={virtualRows}\n        rowTransform={row => table.getRowModel().rows[row.index]}\n        fullWidth={fullWidth}\n        styledTableContainerProps={{\n          noStripedRows: true,\n          ...styledTableContainerProps,\n          style: {\n            overflow: 'auto', //our scrollable table container\n            position: 'relative', //needed for sticky header\n            ...styledTableContainerProps?.style,\n          },\n          sx: {\n            'thead > tr': {\n              display: 'flex',\n              width: '100%',\n            },\n          },\n          onScroll: e => onTableContainerScroll(e.target),\n        }}\n        {...styledTableContainerProps}\n        slots={{\n          Tr: VirtualizedTr,\n        }}\n        slotProps={mergeSlotProps(slotProps, {\n          Table: {\n            style: {\n              display: 'grid',\n            },\n          },\n          Thead: {\n            style: {\n              display: 'grid',\n              position: 'sticky',\n              top: 0,\n              zIndex: 1,\n            },\n          },\n          Th: {\n            style: {\n              display: 'flex',\n            },\n          },\n          Tbody: {\n            style: {\n              display: 'grid',\n              height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n              position: 'relative', //needed for absolute positioning of rows\n            },\n          },\n        })}\n      />\n    </RowVirtualizerContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAmBA,IAAM,IAAwB,EAAM,cAElC,KAAA,EAAU;AAKZ,SAAgB,EACd,GACA;CACA,IAAM,EAAE,KAAK,GAAa,UAAU,GAAW,GAAG,MAAS,GACrD,IAAiB,EAAW,EAAsB;AACxD,QACE,kBAAC,MAAD;EACE,cAAY,EAAY;EACxB,MAAK,MAAQ,GAAgB,eAAe,EAAK;EACjD,GAAI;EACJ,OAAO;GACL,GAAG,EAAK;GACR,SAAS;GACT,UAAU;GACV,WAAW,cAAc,EAAY,MAAM;GAC3C,OAAO;GACP,YAAY;GACb;EACD,CAAA;;AASN,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,UACA,8BACA,eAAY,IACZ,mBACA,eAAY,EAAE,EACd,4BAAyB,MACvB,GAEE,IAAc,EAAe,iBAAiB;AAEpD,QACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,GAAD;GACS;GACP,MAAM;GACN,eAAc,MAAO,EAAM,aAAa,CAAC,KAAK,EAAI;GACvC;GACX,2BAA2B;IACzB,eAAe;IACf,GAAG;IACH,OAAO;KACL,UAAU;KACV,UAAU;KACV,GAAG,GAA2B;KAC/B;IACD,IAAI,EACF,cAAc;KACZ,SAAS;KACT,OAAO;KACR,EACF;IACD,WAAU,MAAK,EAAuB,EAAE,OAAO;IAChD;GACD,GAAI;GACJ,OAAO,EACL,IAAI,GACL;GACD,WAAW,EAAe,GAAW;IACnC,OAAO,EACL,OAAO,EACL,SAAS,QACV,EACF;IACD,OAAO,EACL,OAAO;KACL,SAAS;KACT,UAAU;KACV,KAAK;KACL,QAAQ;KACT,EACF;IACD,IAAI,EACF,OAAO,EACL,SAAS,QACV,EACF;IACD,OAAO,EACL,OAAO;KACL,SAAS;KACT,QAAQ,GAAG,EAAe,cAAc,CAAC;KACzC,UAAU;KACX,EACF;IACF,CAAC;GACF,CAAA;EAC6B,CAAA"}
+{"version":3,"file":"StyledVirtualTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"sourcesContent":["import { mergeSlotProps } from '@/utils/slots/SlotUtils'\nimport { VirtualItem, Virtualizer } from '@tanstack/react-virtual'\nimport { noop } from 'lodash-es'\nimport React, { useContext } from 'react'\nimport StyledTanStackTable, {\n  StyledTanStackTableProps,\n} from './StyledTanStackTable'\n\nimport { TrProps } from './types'\n\ntype StyledVirtualTanStackTableProps<T = unknown> = Omit<\n  StyledTanStackTableProps<T, VirtualItem>,\n  'slots' | 'rows' | 'rowTransform'\n> & {\n  rowVirtualizer: Virtualizer<any, any>\n  onTableContainerScroll?: (target: EventTarget) => void\n}\n\n// Context to pass the row virtualizer to the Tr component\nconst RowVirtualizerContext = React.createContext<\n  Virtualizer<any, any> | undefined\n>(undefined)\n\n/**\n * A table row component modified to be used with @tanstack/react-virtual.\n */\nexport function VirtualizedTr<TData = unknown>(\n  props: TrProps<TData, VirtualItem>,\n) {\n  const { row: virtualItem, tableRow: _tableRow, ...rest } = props\n  const rowVirtualizer = useContext(RowVirtualizerContext)\n  return (\n    <tr\n      data-index={virtualItem.index} // needed for dynamic row height measurement\n      ref={node => rowVirtualizer?.measureElement(node)} //measure dynamic row height\n      {...rest}\n      style={{\n        ...rest.style,\n        display: 'flex',\n        position: 'absolute',\n        transform: `translateY(${virtualItem.start}px)`, //this should always be a `style` as it changes on scroll\n        width: '100%',\n        alignItems: 'center',\n      }}\n    />\n  )\n}\n\n/**\n * Stylized table component that is compatible with @tanstack/react-table and @tanstack/react-virtual to display a\n * virtualized table, i.e. a table that uses a virtualizer to only render the DOM nodes that contain data that is visible\n * within the viewport. For cases where the table rows do not need to be virtualized, use {@link StyledTanStackTable}.\n */\nexport default function StyledVirtualTanStackTable<T = unknown>(\n  props: StyledVirtualTanStackTableProps<T>,\n) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    rowVirtualizer,\n    slotProps = {},\n    onTableContainerScroll = noop,\n  } = props\n\n  const virtualRows = rowVirtualizer.getVirtualItems()\n\n  return (\n    <RowVirtualizerContext.Provider value={rowVirtualizer}>\n      <StyledTanStackTable<T, VirtualItem>\n        table={table}\n        rows={virtualRows}\n        rowTransform={row => table.getRowModel().rows[row.index]}\n        fullWidth={fullWidth}\n        styledTableContainerProps={{\n          noStripedRows: true,\n          ...styledTableContainerProps,\n          style: {\n            overflow: 'auto', //our scrollable table container\n            position: 'relative', //needed for sticky header\n            ...styledTableContainerProps?.style,\n          },\n          sx: {\n            'thead > tr': {\n              display: 'flex',\n              width: '100%',\n            },\n          },\n          onScroll: e => onTableContainerScroll(e.target),\n        }}\n        {...styledTableContainerProps}\n        slots={{\n          Tr: VirtualizedTr,\n        }}\n        slotProps={mergeSlotProps(slotProps, {\n          Table: {\n            style: {\n              display: 'grid',\n            },\n          },\n          Thead: {\n            style: {\n              display: 'grid',\n              position: 'sticky',\n              top: 0,\n              zIndex: 1,\n            },\n          },\n          Th: {\n            style: {\n              display: 'flex',\n            },\n          },\n          Tbody: {\n            style: {\n              display: 'grid',\n              height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n              position: 'relative', //needed for absolute positioning of rows\n            },\n          },\n        })}\n      />\n    </RowVirtualizerContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAmBA,IAAM,IAAwB,EAAM,cAElC,KAAA,CAAS;AAKX,SAAgB,EACd,GACA;CACA,IAAM,EAAE,KAAK,GAAa,UAAU,GAAW,GAAG,MAAS,GACrD,IAAiB,EAAW,CAAqB;CACvD,OACE,kBAAC,MAAD;EACE,cAAY,EAAY;EACxB,MAAK,MAAQ,GAAgB,eAAe,CAAI;EAChD,GAAI;EACJ,OAAO;GACL,GAAG,EAAK;GACR,SAAS;GACT,UAAU;GACV,WAAW,cAAc,EAAY,MAAM;GAC3C,OAAO;GACP,YAAY;EACd;CACD,CAAA;AAEL;AAOA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,UACA,8BACA,eAAY,IACZ,mBACA,eAAY,CAAC,GACb,4BAAyB,MACvB,GAEE,IAAc,EAAe,gBAAgB;CAEnD,OACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,GAAD;GACS;GACP,MAAM;GACN,eAAc,MAAO,EAAM,YAAY,EAAE,KAAK,EAAI;GACvC;GACX,2BAA2B;IACzB,eAAe;IACf,GAAG;IACH,OAAO;KACL,UAAU;KACV,UAAU;KACV,GAAG,GAA2B;IAChC;IACA,IAAI,EACF,cAAc;KACZ,SAAS;KACT,OAAO;IACT,EACF;IACA,WAAU,MAAK,EAAuB,EAAE,MAAM;GAChD;GACA,GAAI;GACJ,OAAO,EACL,IAAI,EACN;GACA,WAAW,EAAe,GAAW;IACnC,OAAO,EACL,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,UAAU;KACV,KAAK;KACL,QAAQ;IACV,EACF;IACA,IAAI,EACF,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,QAAQ,GAAG,EAAe,aAAa,EAAE;KACzC,UAAU;IACZ,EACF;GACF,CAAC;EACF,CAAA;CAC6B,CAAA;AAEpC"}

package/dist/components/TanStackTable/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/TanStackTable/TableBody.tsx"],"sourcesContent":["import { getSlotProps } from '@/utils/slots/SlotUtils'\nimport { styled } from '@mui/material'\nimport { Row, Table } from '@tanstack/react-table'\nimport { identity } from 'lodash-es'\nimport { memo } from 'react'\nimport { TableCellRenderer as DefaultTableCellRenderer } from './TableCellRenderer'\nimport {\n  TableBodyPropsRowOverride,\n  TableBodySlotProps,\n  TableBodySlots,\n  TrOwnerState,\n} from './types'\n\n// Simple wrapper around 'tr' to prevent forwarding invalid HTML attributes\nconst TableRow = styled('tr', {\n  shouldForwardProp: prop => prop !== 'row' && prop !== 'tableRow',\n})({})\n\nexport type TableBodyProps<TData = unknown, TRowType = Row<TData>> = {\n  /** The table instance */\n  table: Table<TData>\n  slots?: TableBodySlots<TData, TRowType>\n  slotProps?: TableBodySlotProps<TData, TRowType>\n} & TableBodyPropsRowOverride<TData, TRowType>\n\n/**\n * A table body component for use with @tanstack/react-table. This component renders the rows of the table.\n * @param props\n * @constructor\n */\nexport function TableBody<TData = unknown, TRowType = Row<TData>>(\n  props: TableBodyProps<TData, TRowType>,\n) {\n  const { table, slots = {}, slotProps = {} } = props\n\n  // By default, use TanStack Table Rows and the identity function as a transform.\n  // This can be overridden e.g. to accomplish row virtualization.\n  const {\n    rows = table.getRowModel().rows as TRowType[],\n    rowTransform = identity,\n  } = props\n\n  const {\n    Tbody = 'tbody',\n    Tr = TableRow,\n    TableCellRenderer = DefaultTableCellRenderer<TData>,\n  } = slots\n  const { Tbody: tbodySlotProps = {}, Tr: _trSlotProps = {} } = slotProps\n\n  return (\n    <Tbody {...tbodySlotProps}>\n      {rows.map((row, index) => {\n        const tableRow: Row<TData> | undefined = rowTransform(row)\n\n        const trOwnerState: TrOwnerState<TData, TRowType> = { row, tableRow }\n        const trSlotProps = getSlotProps(_trSlotProps, trOwnerState)\n\n        let mergedClassNames = trSlotProps.className ?? ''\n        if (table.options.meta?.getRowClassNames) {\n          mergedClassNames =\n            `${mergedClassNames} ${table.options.meta.getRowClassNames(\n              row,\n            )}`.trim()\n        }\n\n        return (\n          <Tr\n            key={tableRow?.id ?? index}\n            {...trSlotProps}\n            row={row}\n            tableRow={tableRow}\n            className={mergedClassNames}\n          >\n            {tableRow?.getVisibleCells().map((props, index) => (\n              <TableCellRenderer key={index} {...props} />\n            ))}\n          </Tr>\n        )\n      })}\n    </Tbody>\n  )\n}\n\n// special memoized wrapper for our table body that we will use during column resizing\n// see https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\nexport const MemoizedTableBody = memo(TableBody, (prev, next) => {\n  return prev.table.options.data === next.table.options.data\n}) as typeof TableBody\n"],"mappings":";;;;;;;AAcA,IAAM,IAAW,EAAO,MAAM,EAC5B,oBAAmB,MAAQ,MAAS,SAAS,MAAS,YACvD,CAAC,CAAC,EAAE,CAAC;AAcN,SAAgB,EACd,GACA;CACA,IAAM,EAAE,UAAO,WAAQ,EAAE,EAAE,eAAY,EAAE,KAAK,GAIxC,EACJ,UAAO,EAAM,aAAa,CAAC,MAC3B,kBAAe,MACb,GAEE,EACJ,WAAQ,SACR,QAAK,GACL,mBAAA,IAAoB,MAClB,GACE,EAAE,OAAO,IAAiB,EAAE,EAAE,IAAI,IAAe,EAAE,KAAK;AAE9D,QACE,kBAAC,GAAD;EAAO,GAAI;YACR,EAAK,KAAK,GAAK,MAAU;GACxB,IAAM,IAAmC,EAAa,EAAI,EAGpD,IAAc,EAAa,GAAc;IADO;IAAK;IACZ,CAAa,EAExD,IAAmB,EAAY,aAAa;AAQhD,UAPI,EAAM,QAAQ,MAAM,qBACtB,IACE,GAAG,EAAiB,GAAG,EAAM,QAAQ,KAAK,iBACxC,EACD,GAAG,MAAM,GAIZ,kBAAC,GAAD;IAEE,GAAI;IACC;IACK;IACV,WAAW;cAEV,GAAU,iBAAiB,CAAC,KAAK,GAAO,MACvC,kBAAC,GAAD,EAA+B,GAAI,GAAS,EAApB,EAAoB,CAC5C;IACC,EATE,GAAU,MAAM,EASlB;IAEP;EACI,CAAA;;AAMZ,IAAa,IAAoB,EAAK,IAAY,GAAM,MAC/C,EAAK,MAAM,QAAQ,SAAS,EAAK,MAAM,QAAQ,KACtD"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/TanStackTable/TableBody.tsx"],"sourcesContent":["import { getSlotProps } from '@/utils/slots/SlotUtils'\nimport { styled } from '@mui/material'\nimport { Row, Table } from '@tanstack/react-table'\nimport { identity } from 'lodash-es'\nimport { memo } from 'react'\nimport { TableCellRenderer as DefaultTableCellRenderer } from './TableCellRenderer'\nimport {\n  TableBodyPropsRowOverride,\n  TableBodySlotProps,\n  TableBodySlots,\n  TrOwnerState,\n} from './types'\n\n// Simple wrapper around 'tr' to prevent forwarding invalid HTML attributes\nconst TableRow = styled('tr', {\n  shouldForwardProp: prop => prop !== 'row' && prop !== 'tableRow',\n})({})\n\nexport type TableBodyProps<TData = unknown, TRowType = Row<TData>> = {\n  /** The table instance */\n  table: Table<TData>\n  slots?: TableBodySlots<TData, TRowType>\n  slotProps?: TableBodySlotProps<TData, TRowType>\n} & TableBodyPropsRowOverride<TData, TRowType>\n\n/**\n * A table body component for use with @tanstack/react-table. This component renders the rows of the table.\n * @param props\n * @constructor\n */\nexport function TableBody<TData = unknown, TRowType = Row<TData>>(\n  props: TableBodyProps<TData, TRowType>,\n) {\n  const { table, slots = {}, slotProps = {} } = props\n\n  // By default, use TanStack Table Rows and the identity function as a transform.\n  // This can be overridden e.g. to accomplish row virtualization.\n  const {\n    rows = table.getRowModel().rows as TRowType[],\n    rowTransform = identity,\n  } = props\n\n  const {\n    Tbody = 'tbody',\n    Tr = TableRow,\n    TableCellRenderer = DefaultTableCellRenderer<TData>,\n  } = slots\n  const { Tbody: tbodySlotProps = {}, Tr: _trSlotProps = {} } = slotProps\n\n  return (\n    <Tbody {...tbodySlotProps}>\n      {rows.map((row, index) => {\n        const tableRow: Row<TData> | undefined = rowTransform(row)\n\n        const trOwnerState: TrOwnerState<TData, TRowType> = { row, tableRow }\n        const trSlotProps = getSlotProps(_trSlotProps, trOwnerState)\n\n        let mergedClassNames = trSlotProps.className ?? ''\n        if (table.options.meta?.getRowClassNames) {\n          mergedClassNames =\n            `${mergedClassNames} ${table.options.meta.getRowClassNames(\n              row,\n            )}`.trim()\n        }\n\n        return (\n          <Tr\n            key={tableRow?.id ?? index}\n            {...trSlotProps}\n            row={row}\n            tableRow={tableRow}\n            className={mergedClassNames}\n          >\n            {tableRow?.getVisibleCells().map((props, index) => (\n              <TableCellRenderer key={index} {...props} />\n            ))}\n          </Tr>\n        )\n      })}\n    </Tbody>\n  )\n}\n\n// special memoized wrapper for our table body that we will use during column resizing\n// see https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\nexport const MemoizedTableBody = memo(TableBody, (prev, next) => {\n  return prev.table.options.data === next.table.options.data\n}) as typeof TableBody\n"],"mappings":";;;;;;;AAcA,IAAM,IAAW,EAAO,MAAM,EAC5B,oBAAmB,MAAQ,MAAS,SAAS,MAAS,WACxD,CAAC,EAAE,CAAC,CAAC;AAcL,SAAgB,EACd,GACA;CACA,IAAM,EAAE,UAAO,WAAQ,CAAC,GAAG,eAAY,CAAC,MAAM,GAIxC,EACJ,UAAO,EAAM,YAAY,EAAE,MAC3B,kBAAe,MACb,GAEE,EACJ,WAAQ,SACR,QAAK,GACL,mBAAA,IAAoB,MAClB,GACE,EAAE,OAAO,IAAiB,CAAC,GAAG,IAAI,IAAe,CAAC,MAAM;CAE9D,OACE,kBAAC,GAAD;EAAO,GAAI;YACR,EAAK,KAAK,GAAK,MAAU;GACxB,IAAM,IAAmC,EAAa,CAAG,GAGnD,IAAc,EAAa,GAAc;IADO;IAAK;GACZ,CAAY,GAEvD,IAAmB,EAAY,aAAa;GAQhD,OAPI,EAAM,QAAQ,MAAM,qBACtB,IACE,GAAG,EAAiB,GAAG,EAAM,QAAQ,KAAK,iBACxC,CACF,IAAI,KAAK,IAIX,kBAAC,GAAD;IAEE,GAAI;IACC;IACK;IACV,WAAW;cAEV,GAAU,gBAAgB,EAAE,KAAK,GAAO,MACvC,kBAAC,GAAD,EAA+B,GAAI,EAAQ,GAAnB,CAAmB,CAC5C;GACC,GATG,GAAU,MAAM,CASnB;EAER,CAAC;CACI,CAAA;AAEX;AAIA,IAAa,IAAoB,EAAK,IAAY,GAAM,MAC/C,EAAK,MAAM,QAAQ,SAAS,EAAK,MAAM,QAAQ,IACvD"}

package/dist/components/TanStackTable/TableCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellRenderer.js","names":[],"sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { Cell, flexRender } from '@tanstack/react-table'\nimport ExpandableTableDataCell from '../SynapseTable/ExpandableTableDataCell'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n} from './TanStackTableUtils'\n\nexport function TableCellRenderer<T = unknown>(cell: Cell<T, unknown>) {\n  const getWrapInExpandableTd =\n    cell.getContext().table.options.meta?.getWrapInExpandableTd\n  const wrapInExpandableTd =\n    getWrapInExpandableTd && getWrapInExpandableTd(cell)\n  const TableDataCellElement = wrapInExpandableTd\n    ? ExpandableTableDataCell\n    : 'td'\n\n  const renderPlaceholderData =\n    cell.getContext().table.options.meta?.renderPlaceholderData\n\n  return (\n    <TableDataCellElement\n      key={cell.id}\n      style={{\n        width: `calc(var(${getColumnSizeCssVariable(cell.column.id)}) * 1px)`,\n        textAlign: cell.column.columnDef.meta?.textAlign,\n        ...getCommonPinningStyles(cell.column),\n      }}\n    >\n      {renderPlaceholderData ? (\n        <p>\n          <Skeleton width={'80%'} height={'20px'} />\n        </p>\n      ) : (\n        flexRender(cell.column.columnDef.cell, cell.getContext())\n      )}\n    </TableDataCellElement>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgB,EAA+B,GAAwB;CACrE,IAAM,IACJ,EAAK,YAAY,CAAC,MAAM,QAAQ,MAAM,uBAGlC,IADJ,KAAyB,EAAsB,EAAK,GAElD,IACA,MAEE,IACJ,EAAK,YAAY,CAAC,MAAM,QAAQ,MAAM;AAExC,QACE,kBAAC,GAAD;EAEE,OAAO;GACL,OAAO,YAAY,EAAyB,EAAK,OAAO,GAAG,CAAC;GAC5D,WAAW,EAAK,OAAO,UAAU,MAAM;GACvC,GAAG,EAAuB,EAAK,OAAO;GACvC;YAEA,IACC,kBAAC,KAAD,EAAA,UACE,kBAAC,GAAD;GAAU,OAAO;GAAO,QAAQ;GAAU,CAAA,EACxC,CAAA,GAEJ,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,YAAY,CAAC;EAEtC,EAdhB,EAAK,GAcW"}
+{"version":3,"file":"TableCellRenderer.js","names":[],"sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { Cell, flexRender } from '@tanstack/react-table'\nimport ExpandableTableDataCell from '../SynapseTable/ExpandableTableDataCell'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n} from './TanStackTableUtils'\n\nexport function TableCellRenderer<T = unknown>(cell: Cell<T, unknown>) {\n  const getWrapInExpandableTd =\n    cell.getContext().table.options.meta?.getWrapInExpandableTd\n  const wrapInExpandableTd =\n    getWrapInExpandableTd && getWrapInExpandableTd(cell)\n  const TableDataCellElement = wrapInExpandableTd\n    ? ExpandableTableDataCell\n    : 'td'\n\n  const renderPlaceholderData =\n    cell.getContext().table.options.meta?.renderPlaceholderData\n\n  return (\n    <TableDataCellElement\n      key={cell.id}\n      style={{\n        width: `calc(var(${getColumnSizeCssVariable(cell.column.id)}) * 1px)`,\n        textAlign: cell.column.columnDef.meta?.textAlign,\n        ...getCommonPinningStyles(cell.column),\n      }}\n    >\n      {renderPlaceholderData ? (\n        <p>\n          <Skeleton width={'80%'} height={'20px'} />\n        </p>\n      ) : (\n        flexRender(cell.column.columnDef.cell, cell.getContext())\n      )}\n    </TableDataCellElement>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgB,EAA+B,GAAwB;CACrE,IAAM,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM,uBAGlC,IADJ,KAAyB,EAAsB,CAAI,IAEjD,IACA,MAEE,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM;CAExC,OACE,kBAAC,GAAD;EAEE,OAAO;GACL,OAAO,YAAY,EAAyB,EAAK,OAAO,EAAE,EAAE;GAC5D,WAAW,EAAK,OAAO,UAAU,MAAM;GACvC,GAAG,EAAuB,EAAK,MAAM;EACvC;YAEC,IACC,kBAAC,KAAD,EAAA,UACE,kBAAC,GAAD;GAAU,OAAO;GAAO,QAAQ;EAAS,CAAA,EACxC,CAAA,IAEH,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC;CAEtC,GAdf,EAAK,EAcU;AAE1B"}

package/dist/components/TanStackTable/TanStackTableUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackTableUtils.js","names":[],"sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table'\nimport { CSSProperties } from 'react'\n\nexport function getColumnSizeCssVariable(columnId: string) {\n  return `--col-${columnId}-size`\n}\n\nexport function getHeaderSizeCssVariable(headerId: string) {\n  return `--header-${headerId}-size`\n}\n\n// Styles for column pinning, retrieved from TanStack docs examples with very minor modifications\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky\nexport function getCommonPinningStyles(column: Column<any>): CSSProperties {\n  const isPinned = column.getIsPinned()\n  const isLastLeftPinnedColumn =\n    isPinned === 'left' && column.getIsLastColumn('left')\n  const isFirstRightPinnedColumn =\n    isPinned === 'right' && column.getIsFirstColumn('right')\n\n  return {\n    background: isPinned ? 'inherit' : undefined,\n    boxShadow: isLastLeftPinnedColumn\n      ? '-4px 0 4px -4px gray inset'\n      : isFirstRightPinnedColumn\n        ? '4px 0 4px -4px gray inset'\n        : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    opacity: isPinned ? 0.95 : 1,\n    position: isPinned ? 'sticky' : 'relative',\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  }\n}\n"],"mappings":";AAGA,SAAgB,EAAyB,GAAkB;AACzD,QAAO,SAAS,EAAS;;AAG3B,SAAgB,EAAyB,GAAkB;AACzD,QAAO,YAAY,EAAS;;AAK9B,SAAgB,EAAuB,GAAoC;CACzE,IAAM,IAAW,EAAO,aAAa,EAC/B,IACJ,MAAa,UAAU,EAAO,gBAAgB,OAAO,EACjD,IACJ,MAAa,WAAW,EAAO,iBAAiB,QAAQ;AAE1D,QAAO;EACL,YAAY,IAAW,YAAY,KAAA;EACnC,WAAW,IACP,+BACA,IACE,8BACA,KAAA;EACN,MAAM,MAAa,SAAS,GAAG,EAAO,SAAS,OAAO,CAAC,MAAM,KAAA;EAC7D,OAAO,MAAa,UAAU,GAAG,EAAO,SAAS,QAAQ,CAAC,MAAM,KAAA;EAChE,SAAS,IAAW,MAAO;EAC3B,UAAU,IAAW,WAAW;EAChC,OAAO,EAAO,SAAS;EACvB,QAAQ;EACT"}
+{"version":3,"file":"TanStackTableUtils.js","names":[],"sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table'\nimport { CSSProperties } from 'react'\n\nexport function getColumnSizeCssVariable(columnId: string) {\n  return `--col-${columnId}-size`\n}\n\nexport function getHeaderSizeCssVariable(headerId: string) {\n  return `--header-${headerId}-size`\n}\n\n// Styles for column pinning, retrieved from TanStack docs examples with very minor modifications\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky\nexport function getCommonPinningStyles(column: Column<any>): CSSProperties {\n  const isPinned = column.getIsPinned()\n  const isLastLeftPinnedColumn =\n    isPinned === 'left' && column.getIsLastColumn('left')\n  const isFirstRightPinnedColumn =\n    isPinned === 'right' && column.getIsFirstColumn('right')\n\n  return {\n    background: isPinned ? 'inherit' : undefined,\n    boxShadow: isLastLeftPinnedColumn\n      ? '-4px 0 4px -4px gray inset'\n      : isFirstRightPinnedColumn\n        ? '4px 0 4px -4px gray inset'\n        : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    opacity: isPinned ? 0.95 : 1,\n    position: isPinned ? 'sticky' : 'relative',\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  }\n}\n"],"mappings":";AAGA,SAAgB,EAAyB,GAAkB;CACzD,OAAO,SAAS,EAAS;AAC3B;AAEA,SAAgB,EAAyB,GAAkB;CACzD,OAAO,YAAY,EAAS;AAC9B;AAIA,SAAgB,EAAuB,GAAoC;CACzE,IAAM,IAAW,EAAO,YAAY,GAC9B,IACJ,MAAa,UAAU,EAAO,gBAAgB,MAAM,GAChD,IACJ,MAAa,WAAW,EAAO,iBAAiB,OAAO;CAEzD,OAAO;EACL,YAAY,IAAW,YAAY,KAAA;EACnC,WAAW,IACP,+BACA,IACE,8BACA,KAAA;EACN,MAAM,MAAa,SAAS,GAAG,EAAO,SAAS,MAAM,EAAE,MAAM,KAAA;EAC7D,OAAO,MAAa,UAAU,GAAG,EAAO,SAAS,OAAO,EAAE,MAAM,KAAA;EAChE,SAAS,IAAW,MAAO;EAC3B,UAAU,IAAW,WAAW;EAChC,OAAO,EAAO,QAAQ;EACtB,QAAQ;CACV;AACF"}

package/dist/components/TeamBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamBadge.js","names":[],"sources":["../../src/components/TeamBadge.tsx"],"sourcesContent":["import { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Box, Link } from '@mui/material'\nimport { useUserOrTeam } from './UserOrTeamBadge/useUserOrTeam'\n\nexport const AUTHENTICATED_GROUP_DISPLAY_TEXT = 'All registered Synapse users'\nexport const PUBLIC_GROUP_DISPLAY_TEXT = 'Anyone on the web'\n\nexport type TeamBadgeProps = {\n  teamId: string | number\n  teamName: string\n  disableHref?: boolean\n  openLinkInNewTab?: boolean\n}\n\nexport default function TeamBadge(props: TeamBadgeProps) {\n  const { teamId, openLinkInNewTab } = props\n  let { teamName, disableHref } = props\n\n  const { specialGroupType, IconComponent } = useUserOrTeam(String(teamId))\n\n  if (specialGroupType === 'authenticatedUsers') {\n    teamName = AUTHENTICATED_GROUP_DISPLAY_TEXT\n    disableHref = true\n  } else if (specialGroupType === 'publicGroup') {\n    teamName = PUBLIC_GROUP_DISPLAY_TEXT\n    disableHref = true\n  }\n\n  const Tag = disableHref ? 'span' : Link\n\n  return (\n    <Box\n      component={'span'}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      <IconComponent />\n      <Tag\n        style={{ marginLeft: '5px' }}\n        href={\n          disableHref\n            ? undefined\n            : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Team:${teamId}`\n        }\n        target={openLinkInNewTab ? '_blank' : ''}\n      >\n        {teamName}\n      </Tag>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAIA,IAAa,IAAmC,gCACnC,IAA4B;AASzC,SAAwB,EAAU,GAAuB;CACvD,IAAM,EAAE,WAAQ,wBAAqB,GACjC,EAAE,aAAU,mBAAgB,GAE1B,EAAE,qBAAkB,qBAAkB,EAAc,OAAO,EAAO,CAAC;AAYzE,QAVI,MAAqB,wBACvB,IAAW,GACX,IAAc,MACL,MAAqB,kBAC9B,IAAW,GACX,IAAc,KAMd,kBAAC,GAAD;EACE,WAAW;EACX,IAAI;GACF,SAAS;GACT,YAAY;GACb;YALH,CAOE,kBAAC,GAAD,EAAiB,CAAA,EACjB,kBAXQ,IAAc,SAAS,GAW/B;GACE,OAAO,EAAE,YAAY,OAAO;GAC5B,MACE,IACI,KAAA,IACA,GAAG,EAA2B,OAAO,OAAO;GAElD,QAAQ,IAAmB,WAAW;aAErC;GACG,CAAA,CACF"}
+{"version":3,"file":"TeamBadge.js","names":[],"sources":["../../src/components/TeamBadge.tsx"],"sourcesContent":["import { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Box, Link } from '@mui/material'\nimport { useUserOrTeam } from './UserOrTeamBadge/useUserOrTeam'\n\nexport const AUTHENTICATED_GROUP_DISPLAY_TEXT = 'All registered Synapse users'\nexport const PUBLIC_GROUP_DISPLAY_TEXT = 'Anyone on the web'\n\nexport type TeamBadgeProps = {\n  teamId: string | number\n  teamName: string\n  disableHref?: boolean\n  openLinkInNewTab?: boolean\n}\n\nexport default function TeamBadge(props: TeamBadgeProps) {\n  const { teamId, openLinkInNewTab } = props\n  let { teamName, disableHref } = props\n\n  const { specialGroupType, IconComponent } = useUserOrTeam(String(teamId))\n\n  if (specialGroupType === 'authenticatedUsers') {\n    teamName = AUTHENTICATED_GROUP_DISPLAY_TEXT\n    disableHref = true\n  } else if (specialGroupType === 'publicGroup') {\n    teamName = PUBLIC_GROUP_DISPLAY_TEXT\n    disableHref = true\n  }\n\n  const Tag = disableHref ? 'span' : Link\n\n  return (\n    <Box\n      component={'span'}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      <IconComponent />\n      <Tag\n        style={{ marginLeft: '5px' }}\n        href={\n          disableHref\n            ? undefined\n            : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Team:${teamId}`\n        }\n        target={openLinkInNewTab ? '_blank' : ''}\n      >\n        {teamName}\n      </Tag>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAIA,IAAa,IAAmC,gCACnC,IAA4B;AASzC,SAAwB,EAAU,GAAuB;CACvD,IAAM,EAAE,WAAQ,wBAAqB,GACjC,EAAE,aAAU,mBAAgB,GAE1B,EAAE,qBAAkB,qBAAkB,EAAc,OAAO,CAAM,CAAC;CAYxE,OAVI,MAAqB,wBACvB,IAAW,GACX,IAAc,MACL,MAAqB,kBAC9B,IAAW,GACX,IAAc,KAMd,kBAAC,GAAD;EACE,WAAW;EACX,IAAI;GACF,SAAS;GACT,YAAY;EACd;YALF,CAOE,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAXQ,IAAc,SAAS,GAW/B;GACE,OAAO,EAAE,YAAY,MAAM;GAC3B,MACE,IACI,KAAA,IACA,GAAG,EAA2B,OAAO,OAAO;GAElD,QAAQ,IAAmB,WAAW;aAErC;EACE,CAAA,CACF;;AAET"}

package/dist/components/TeamSubjectsSelector/TeamBadgeOrError.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamBadgeOrError.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamBadgeOrError.tsx"],"sourcesContent":["import { useGetTeam } from '@/synapse-queries'\nimport { ErrorTwoTone } from '@mui/icons-material'\nimport { Skeleton, Stack, Typography } from '@mui/material'\nimport TeamBadge from '../TeamBadge'\n\nexport type TeamBadgeOrErrorProps = {\n  teamId: string\n}\n\nexport function TeamBadgeOrError(props: TeamBadgeOrErrorProps) {\n  const { teamId } = props\n\n  const { data: team, isLoading, error } = useGetTeam(teamId)\n\n  if (error) {\n    return (\n      <Stack\n        direction=\"row\"\n        role=\"alert\"\n        sx={{\n          gap: '5px',\n          alignItems: 'center',\n        }}\n      >\n        <ErrorTwoTone color=\"error\" />\n        <Typography variant=\"smallText1\" color=\"error\">\n          {error?.reason || `Error: ${teamId}`}\n        </Typography>\n      </Stack>\n    )\n  } else if (isLoading || !team) {\n    return <Skeleton width={125} height={30} />\n  }\n  return <TeamBadge teamId={team.id} teamName={team.name} />\n}\n"],"mappings":";;;;;;;AASA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,cAAW,GAEb,EAAE,MAAM,GAAM,cAAW,aAAU,EAAW,EAAO;AAqB3D,QAnBI,IAEA,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,IAAI;GACF,KAAK;GACL,YAAY;GACb;YANH,CAQE,kBAAC,GAAD,EAAc,OAAM,SAAU,CAAA,EAC9B,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC,GAAO,UAAU,UAAU;GACjB,CAAA,CACP;MAED,KAAa,CAAC,IAChB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;EAAM,CAAA,GAEtC,kBAAC,GAAD;EAAW,QAAQ,EAAK;EAAI,UAAU,EAAK;EAAQ,CAAA"}
+{"version":3,"file":"TeamBadgeOrError.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamBadgeOrError.tsx"],"sourcesContent":["import { useGetTeam } from '@/synapse-queries'\nimport { ErrorTwoTone } from '@mui/icons-material'\nimport { Skeleton, Stack, Typography } from '@mui/material'\nimport TeamBadge from '../TeamBadge'\n\nexport type TeamBadgeOrErrorProps = {\n  teamId: string\n}\n\nexport function TeamBadgeOrError(props: TeamBadgeOrErrorProps) {\n  const { teamId } = props\n\n  const { data: team, isLoading, error } = useGetTeam(teamId)\n\n  if (error) {\n    return (\n      <Stack\n        direction=\"row\"\n        role=\"alert\"\n        sx={{\n          gap: '5px',\n          alignItems: 'center',\n        }}\n      >\n        <ErrorTwoTone color=\"error\" />\n        <Typography variant=\"smallText1\" color=\"error\">\n          {error?.reason || `Error: ${teamId}`}\n        </Typography>\n      </Stack>\n    )\n  } else if (isLoading || !team) {\n    return <Skeleton width={125} height={30} />\n  }\n  return <TeamBadge teamId={team.id} teamName={team.name} />\n}\n"],"mappings":";;;;;;;AASA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,cAAW,GAEb,EAAE,MAAM,GAAM,cAAW,aAAU,EAAW,CAAM;CAqB1D,OAnBI,IAEA,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,IAAI;GACF,KAAK;GACL,YAAY;EACd;YANF,CAQE,kBAAC,GAAD,EAAc,OAAM,QAAS,CAAA,GAC7B,kBAAC,GAAD;GAAY,SAAQ;GAAa,OAAM;aACpC,GAAO,UAAU,UAAU;EAClB,CAAA,CACP;MAEA,KAAa,CAAC,IAChB,kBAAC,GAAD;EAAU,OAAO;EAAK,QAAQ;CAAK,CAAA,IAErC,kBAAC,GAAD;EAAW,QAAQ,EAAK;EAAI,UAAU,EAAK;CAAO,CAAA;AAC3D"}

package/dist/components/TeamSubjectsSelector/TeamSubjectsSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamSubjectsSelector.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"sourcesContent":["import { AddCircleTwoTone, HelpOutlineTwoTone } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Button,\n  IconButton,\n  InputLabel,\n  Stack,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport {\n  RestrictableObjectDescriptor,\n  RestrictableObjectType,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport IconSvg from '../IconSvg'\nimport { TeamBadgeOrError } from './TeamBadgeOrError'\n\nexport type TeamSubjectsSelectorProps = {\n  // will be filtered to only team subjects\n  subjects: RestrictableObjectDescriptor[]\n  onUpdate: (subjects: RestrictableObjectDescriptor[]) => void\n  onUpdateTeamIDsTextbox?: (value: string) => void // called when the team IDs text box is updated\n}\n\nexport const TEAM_ALREADY_SELECTED = (teamId: string) =>\n  `Team ${teamId} has already been added to this AR.`\nexport const TEAM_PARSING_ERROR = (teamId: string) =>\n  `Parsing errors encountered. Invalid Team ID: ${teamId}`\nexport const NO_TEAMS_SELECTED = 'No teams selected.'\nexport const REMOVE_TEXT = 'Remove from Access Requirement'\nexport const HELP_TEXT = 'Enter Team IDs (i.e. 123, 456)'\nconst teamIdsStringDefault = ''\n\nfunction TeamSubjectsSelector(props: TeamSubjectsSelectorProps) {\n  const { subjects, onUpdate, onUpdateTeamIDsTextbox = noop } = props\n  const [teamIdsString, setTeamIdsString] =\n    useState<string>(teamIdsStringDefault)\n  const [error, setError] = useState<string | null>(null)\n\n  const teamSubjects = useMemo(() => {\n    return subjects.filter(subject => {\n      return subject.type === RestrictableObjectType.TEAM ? subject : null\n    })\n  }, [subjects])\n\n  const onChangeTeamIdsTextbox = (value: string) => {\n    setTeamIdsString(value)\n    onUpdateTeamIDsTextbox(value)\n  }\n\n  const onRemove = (subjectId: string) => {\n    const updatedSubjects = teamSubjects.filter(subject => {\n      return subject.id !== subjectId\n    })\n    onUpdate(updatedSubjects)\n  }\n\n  const onAddTeams = (teamIdsString: string | null) => {\n    const teamIds = teamIdsString?.split(',').map(item => item.trim())\n    const dedupedTeamIds = [...new Set(teamIds)]\n    if (dedupedTeamIds && dedupedTeamIds.length > 0) {\n      const updatedTeamSubjects = [...teamSubjects]\n      for (const teamId of dedupedTeamIds) {\n        const validId = /^\\d+$/.test(teamId)\n        const alreadyAdded = teamSubjects.some(subject => subject.id === teamId)\n        if (!validId) {\n          setError(TEAM_PARSING_ERROR(teamId))\n          return\n        } else if (alreadyAdded) {\n          setError(TEAM_ALREADY_SELECTED(teamId))\n          return\n        } else {\n          const newSubject: RestrictableObjectDescriptor = {\n            id: teamId,\n            type: RestrictableObjectType.TEAM,\n          }\n          updatedTeamSubjects.push(newSubject)\n        }\n      }\n      onChangeTeamIdsTextbox(teamIdsStringDefault)\n      onUpdate(updatedTeamSubjects)\n    }\n    setError(null)\n  }\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '0px 15px',\n          pb: '10px',\n        }}\n      >\n        {teamSubjects.length === 0 && (\n          <Typography\n            variant=\"body1Italic\"\n            sx={{\n              pb: 2,\n            }}\n          >\n            {NO_TEAMS_SELECTED}\n          </Typography>\n        )}\n        {teamSubjects.map(subject => {\n          return (\n            <Stack\n              key={subject.id}\n              direction=\"row\"\n              data-testid=\"selected-team\"\n              sx={{\n                alignItems: 'center',\n                pb: 1,\n              }}\n            >\n              <TeamBadgeOrError teamId={subject.id} />\n              <IconButton\n                aria-label={REMOVE_TEXT}\n                onClick={() => onRemove(subject.id)}\n                sx={{\n                  '&:hover': {\n                    color: 'error.main',\n                  },\n                }}\n              >\n                <IconSvg icon={'delete'} fontSize={'inherit'} wrap={false} />\n              </IconButton>\n            </Stack>\n          )\n        })}\n      </Box>\n      <InputLabel htmlFor=\"teamIDs\">Add Team IDs</InputLabel>\n      <Stack\n        direction=\"row\"\n        sx={{\n          gap: 1,\n          alignItems: 'center',\n          mb: 2,\n        }}\n      >\n        <TextField\n          id=\"teamIDs\"\n          name=\"teamIDs\"\n          placeholder={HELP_TEXT}\n          value={teamIdsString}\n          onChange={event => onChangeTeamIdsTextbox(event.target.value)}\n          fullWidth\n        />\n        <Button\n          startIcon={<AddCircleTwoTone />}\n          variant=\"outlined\"\n          sx={{ flexShrink: 0, height: '53px' }}\n          onClick={() => onAddTeams(teamIdsString)}\n          disabled={teamIdsString === ''}\n        >\n          Add Teams\n        </Button>\n        <Tooltip title={HELP_TEXT} placement=\"right\">\n          <HelpOutlineTwoTone sx={{ color: 'grey.600' }} />\n        </Tooltip>\n      </Stack>\n      {error && <Alert severity=\"warning\">{error}</Alert>}\n    </>\n  )\n}\n\nexport default TeamSubjectsSelector\n"],"mappings":"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"}
+{"version":3,"file":"TeamSubjectsSelector.js","names":[],"sources":["../../../src/components/TeamSubjectsSelector/TeamSubjectsSelector.tsx"],"sourcesContent":["import { AddCircleTwoTone, HelpOutlineTwoTone } from '@mui/icons-material'\nimport {\n  Alert,\n  Box,\n  Button,\n  IconButton,\n  InputLabel,\n  Stack,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport {\n  RestrictableObjectDescriptor,\n  RestrictableObjectType,\n} from '@sage-bionetworks/synapse-types'\nimport { noop } from 'lodash-es'\nimport { useMemo, useState } from 'react'\nimport IconSvg from '../IconSvg'\nimport { TeamBadgeOrError } from './TeamBadgeOrError'\n\nexport type TeamSubjectsSelectorProps = {\n  // will be filtered to only team subjects\n  subjects: RestrictableObjectDescriptor[]\n  onUpdate: (subjects: RestrictableObjectDescriptor[]) => void\n  onUpdateTeamIDsTextbox?: (value: string) => void // called when the team IDs text box is updated\n}\n\nexport const TEAM_ALREADY_SELECTED = (teamId: string) =>\n  `Team ${teamId} has already been added to this AR.`\nexport const TEAM_PARSING_ERROR = (teamId: string) =>\n  `Parsing errors encountered. Invalid Team ID: ${teamId}`\nexport const NO_TEAMS_SELECTED = 'No teams selected.'\nexport const REMOVE_TEXT = 'Remove from Access Requirement'\nexport const HELP_TEXT = 'Enter Team IDs (i.e. 123, 456)'\nconst teamIdsStringDefault = ''\n\nfunction TeamSubjectsSelector(props: TeamSubjectsSelectorProps) {\n  const { subjects, onUpdate, onUpdateTeamIDsTextbox = noop } = props\n  const [teamIdsString, setTeamIdsString] =\n    useState<string>(teamIdsStringDefault)\n  const [error, setError] = useState<string | null>(null)\n\n  const teamSubjects = useMemo(() => {\n    return subjects.filter(subject => {\n      return subject.type === RestrictableObjectType.TEAM ? subject : null\n    })\n  }, [subjects])\n\n  const onChangeTeamIdsTextbox = (value: string) => {\n    setTeamIdsString(value)\n    onUpdateTeamIDsTextbox(value)\n  }\n\n  const onRemove = (subjectId: string) => {\n    const updatedSubjects = teamSubjects.filter(subject => {\n      return subject.id !== subjectId\n    })\n    onUpdate(updatedSubjects)\n  }\n\n  const onAddTeams = (teamIdsString: string | null) => {\n    const teamIds = teamIdsString?.split(',').map(item => item.trim())\n    const dedupedTeamIds = [...new Set(teamIds)]\n    if (dedupedTeamIds && dedupedTeamIds.length > 0) {\n      const updatedTeamSubjects = [...teamSubjects]\n      for (const teamId of dedupedTeamIds) {\n        const validId = /^\\d+$/.test(teamId)\n        const alreadyAdded = teamSubjects.some(subject => subject.id === teamId)\n        if (!validId) {\n          setError(TEAM_PARSING_ERROR(teamId))\n          return\n        } else if (alreadyAdded) {\n          setError(TEAM_ALREADY_SELECTED(teamId))\n          return\n        } else {\n          const newSubject: RestrictableObjectDescriptor = {\n            id: teamId,\n            type: RestrictableObjectType.TEAM,\n          }\n          updatedTeamSubjects.push(newSubject)\n        }\n      }\n      onChangeTeamIdsTextbox(teamIdsStringDefault)\n      onUpdate(updatedTeamSubjects)\n    }\n    setError(null)\n  }\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '0px 15px',\n          pb: '10px',\n        }}\n      >\n        {teamSubjects.length === 0 && (\n          <Typography\n            variant=\"body1Italic\"\n            sx={{\n              pb: 2,\n            }}\n          >\n            {NO_TEAMS_SELECTED}\n          </Typography>\n        )}\n        {teamSubjects.map(subject => {\n          return (\n            <Stack\n              key={subject.id}\n              direction=\"row\"\n              data-testid=\"selected-team\"\n              sx={{\n                alignItems: 'center',\n                pb: 1,\n              }}\n            >\n              <TeamBadgeOrError teamId={subject.id} />\n              <IconButton\n                aria-label={REMOVE_TEXT}\n                onClick={() => onRemove(subject.id)}\n                sx={{\n                  '&:hover': {\n                    color: 'error.main',\n                  },\n                }}\n              >\n                <IconSvg icon={'delete'} fontSize={'inherit'} wrap={false} />\n              </IconButton>\n            </Stack>\n          )\n        })}\n      </Box>\n      <InputLabel htmlFor=\"teamIDs\">Add Team IDs</InputLabel>\n      <Stack\n        direction=\"row\"\n        sx={{\n          gap: 1,\n          alignItems: 'center',\n          mb: 2,\n        }}\n      >\n        <TextField\n          id=\"teamIDs\"\n          name=\"teamIDs\"\n          placeholder={HELP_TEXT}\n          value={teamIdsString}\n          onChange={event => onChangeTeamIdsTextbox(event.target.value)}\n          fullWidth\n        />\n        <Button\n          startIcon={<AddCircleTwoTone />}\n          variant=\"outlined\"\n          sx={{ flexShrink: 0, height: '53px' }}\n          onClick={() => onAddTeams(teamIdsString)}\n          disabled={teamIdsString === ''}\n        >\n          Add Teams\n        </Button>\n        <Tooltip title={HELP_TEXT} placement=\"right\">\n          <HelpOutlineTwoTone sx={{ color: 'grey.600' }} />\n        </Tooltip>\n      </Stack>\n      {error && <Alert severity=\"warning\">{error}</Alert>}\n    </>\n  )\n}\n\nexport default TeamSubjectsSelector\n"],"mappings":";;;;;;;;;AA4BA,IAAa,KAAyB,MACpC,QAAQ,EAAO,sCACJ,KAAsB,MACjC,gDAAgD,KACrC,IAAoB,sBACpB,IAAc,kCACd,IAAY,kCACnB,IAAuB;AAE7B,SAAS,EAAqB,GAAkC;CAC9D,IAAM,EAAE,aAAU,aAAU,4BAAyB,MAAS,GACxD,CAAC,GAAe,KACpB,EAAiB,CAAoB,GACjC,CAAC,GAAO,KAAY,EAAwB,IAAI,GAEhD,IAAe,QACZ,EAAS,QAAO,MACd,EAAQ,SAAS,EAAuB,OAAO,IAAU,IACjE,GACA,CAAC,CAAQ,CAAC,GAEP,KAA0B,MAAkB;EAEhD,AADA,EAAiB,CAAK,GACtB,EAAuB,CAAK;CAC9B,GAEM,KAAY,MAAsB;EAItC,EAHwB,EAAa,QAAO,MACnC,EAAQ,OAAO,CAEf,CAAe;CAC1B,GAEM,KAAc,MAAiC;EACnD,IAAM,IAAU,GAAe,MAAM,GAAG,EAAE,KAAI,MAAQ,EAAK,KAAK,CAAC,GAC3D,IAAiB,CAAC,GAAG,IAAI,IAAI,CAAO,CAAC;EAC3C,IAAI,KAAkB,EAAe,SAAS,GAAG;GAC/C,IAAM,IAAsB,CAAC,GAAG,CAAY;GAC5C,KAAK,IAAM,KAAU,GAAgB;IACnC,IAAM,IAAU,QAAQ,KAAK,CAAM,GAC7B,IAAe,EAAa,MAAK,MAAW,EAAQ,OAAO,CAAM;IACvE,IAAI,CAAC,GAAS;KACZ,EAAS,EAAmB,CAAM,CAAC;KACnC;IACF,OAAO,IAAI,GAAc;KACvB,EAAS,EAAsB,CAAM,CAAC;KACtC;IACF,OAAO;KACL,IAAM,IAA2C;MAC/C,IAAI;MACJ,MAAM,EAAuB;KAC/B;KACA,EAAoB,KAAK,CAAU;IACrC;GACF;GAEA,AADA,EAAuB,CAAoB,GAC3C,EAAS,CAAmB;EAC9B;EACA,EAAS,IAAI;CACf;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,UAAU;IACV,KAAK;IACL,IAAI;GACN;aANF,CAQG,EAAa,WAAW,KACvB,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI,EACF,IAAI,EACN;;GAGU,CAAA,GAEb,EAAa,KAAI,MAEd,kBAAC,GAAD;IAEE,WAAU;IACV,eAAY;IACZ,IAAI;KACF,YAAY;KACZ,IAAI;IACN;cAPF,CASE,kBAAC,GAAD,EAAkB,QAAQ,EAAQ,GAAK,CAAA,GACvC,kBAAC,GAAD;KACE,cAAY;KACZ,eAAe,EAAS,EAAQ,EAAE;KAClC,IAAI,EACF,WAAW,EACT,OAAO,aACT,EACF;eAEA,kBAAC,GAAD;MAAS,MAAM;MAAU,UAAU;MAAW,MAAM;KAAQ,CAAA;IAClD,CAAA,CACP;MApBA,EAAQ,EAoBR,CAEV,CACE;;EACL,kBAAC,GAAD;GAAY,SAAQ;aAAU;EAAwB,CAAA;EACtD,kBAAC,GAAD;GACE,WAAU;GACV,IAAI;IACF,KAAK;IACL,YAAY;IACZ,IAAI;GACN;aANF;IAQE,kBAAC,GAAD;KACE,IAAG;KACH,MAAK;KACL,aAAa;KACb,OAAO;KACP,WAAU,MAAS,EAAuB,EAAM,OAAO,KAAK;KAC5D,WAAA;IACD,CAAA;IACD,kBAAC,GAAD;KACE,WAAW,kBAAC,GAAD,CAAmB,CAAA;KAC9B,SAAQ;KACR,IAAI;MAAE,YAAY;MAAG,QAAQ;KAAO;KACpC,eAAe,EAAW,CAAa;KACvC,UAAU,MAAkB;eAC7B;IAEO,CAAA;IACR,kBAAC,GAAD;KAAS,OAAO;KAAW,WAAU;eACnC,kBAAC,GAAD,EAAoB,IAAI,EAAE,OAAO,WAAW,EAAI,CAAA;IACzC,CAAA;GACJ;;EACN,KAAS,kBAAC,GAAD;GAAO,UAAS;aAAW;EAAa,CAAA;CAClD,EAAA,CAAA;AAEN"}

package/dist/components/TemplateComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateComponent.js","names":[],"sources":["../../src/components/TemplateComponent.tsx"],"sourcesContent":["import { useState } from 'react'\n\ntype Props = {\n  userId: string\n}\n\nexport default function TemplateComponent({ userId }: Props) {\n  const [count, setCount] = useState<number>(0)\n\n  return (\n    <div>\n      <button\n        style={{ backgroundColor: 'blue', color: 'white' }}\n        onClick={() => setCount(count + 1)}\n      >\n        Click to increment count!\n      </button>\n      <p> Count = {count} </p>\n\n      <p> Passed in userId = {userId} </p>\n    </div>\n  )\n}\n"],"mappings":";;;AAMA,SAAwB,EAAkB,EAAE,aAAiB;CAC3D,IAAM,CAAC,GAAO,KAAY,EAAiB,EAAE;AAE7C,QACE,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,UAAD;GACE,OAAO;IAAE,iBAAiB;IAAQ,OAAO;IAAS;GAClD,eAAe,EAAS,IAAQ,EAAE;aACnC;GAEQ,CAAA;EACT,kBAAC,KAAD,EAAA,UAAA;GAAG;GAAU;GAAM;GAAK,EAAA,CAAA;EAExB,kBAAC,KAAD,EAAA,UAAA;GAAG;GAAqB;GAAO;GAAK,EAAA,CAAA;EAChC,EAAA,CAAA"}
+{"version":3,"file":"TemplateComponent.js","names":[],"sources":["../../src/components/TemplateComponent.tsx"],"sourcesContent":["import { useState } from 'react'\n\ntype Props = {\n  userId: string\n}\n\nexport default function TemplateComponent({ userId }: Props) {\n  const [count, setCount] = useState<number>(0)\n\n  return (\n    <div>\n      <button\n        style={{ backgroundColor: 'blue', color: 'white' }}\n        onClick={() => setCount(count + 1)}\n      >\n        Click to increment count!\n      </button>\n      <p> Count = {count} </p>\n\n      <p> Passed in userId = {userId} </p>\n    </div>\n  )\n}\n"],"mappings":";;;AAMA,SAAwB,EAAkB,EAAE,aAAiB;CAC3D,IAAM,CAAC,GAAO,KAAY,EAAiB,CAAC;CAE5C,OACE,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,UAAD;GACE,OAAO;IAAE,iBAAiB;IAAQ,OAAO;GAAQ;GACjD,eAAe,EAAS,IAAQ,CAAC;aAClC;EAEO,CAAA;EACR,kBAAC,KAAD,EAAA,UAAA;GAAG;GAAU;GAAM;EAAI,EAAA,CAAA;EAEvB,kBAAC,KAAD,EAAA,UAAA;GAAG;GAAqB;GAAO;EAAI,EAAA,CAAA;CAChC,EAAA,CAAA;AAET"}

package/dist/components/TemporaryBanner/TemporaryBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemporaryBanner.js","names":[],"sources":["../../../src/components/TemporaryBanner/TemporaryBanner.tsx"],"sourcesContent":["import React from 'react'\nimport FullWidthAlert from '../FullWidthAlert'\nimport type { FullWidthAlertProps } from '../FullWidthAlert'\n\nexport type TemporaryBannerProps = {\n  deadline: string\n  content?: React.ReactNode\n} & Partial<FullWidthAlertProps>\n\nconst TemporaryBanner = ({\n  deadline,\n  content,\n  ...props\n}: TemporaryBannerProps): React.ReactNode => {\n  const trimmedDeadline = deadline.trim()\n  const deadlineDate = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmedDeadline) // date-only pattern YYYY-MM-DD\n    ? // Append a local end-of-day timestamp so \"YYYY-MM-DD\" deadlines last through 11:59 PM.\n      new Date(`${trimmedDeadline}T23:59:59.999`)\n    : new Date(trimmedDeadline)\n  const currentDate = new Date()\n  if (isNaN(deadlineDate.getTime())) {\n    console.error('TemporaryBanner: Invalid deadline date:', deadline)\n    return null\n  }\n  const isBeforeDeadline = currentDate <= deadlineDate\n\n  if (!isBeforeDeadline) {\n    return null\n  }\n\n  if (content) return <>{content}</>\n\n  return <FullWidthAlert {...props} />\n}\nexport default TemporaryBanner\n"],"mappings":";;;;AASA,IAAM,KAAmB,EACvB,aACA,YACA,GAAG,QACwC;CAC3C,IAAM,IAAkB,EAAS,MAAM,EACjC,IAAe,sBAAsB,KAAK,EAAgB,mBAE5D,IAAI,KAAK,GAAG,EAAgB,eAAe,GAC3C,IAAI,KAAK,EAAgB,EACvB,oBAAc,IAAI,MAAM;AAa9B,QAZI,MAAM,EAAa,SAAS,CAAC,IAC/B,QAAQ,MAAM,2CAA2C,EAAS,EAC3D,QAEgB,KAAe,IAMpC,IAAgB,kBAAA,GAAA,EAAA,UAAG,GAAW,CAAA,GAE3B,kBAAC,GAAD,EAAgB,GAAI,GAAS,CAAA,GAL3B"}
+{"version":3,"file":"TemporaryBanner.js","names":[],"sources":["../../../src/components/TemporaryBanner/TemporaryBanner.tsx"],"sourcesContent":["import React from 'react'\nimport FullWidthAlert from '../FullWidthAlert'\nimport type { FullWidthAlertProps } from '../FullWidthAlert'\n\nexport type TemporaryBannerProps = {\n  deadline: string\n  content?: React.ReactNode\n} & Partial<FullWidthAlertProps>\n\nconst TemporaryBanner = ({\n  deadline,\n  content,\n  ...props\n}: TemporaryBannerProps): React.ReactNode => {\n  const trimmedDeadline = deadline.trim()\n  const deadlineDate = /^\\d{4}-\\d{2}-\\d{2}$/.test(trimmedDeadline) // date-only pattern YYYY-MM-DD\n    ? // Append a local end-of-day timestamp so \"YYYY-MM-DD\" deadlines last through 11:59 PM.\n      new Date(`${trimmedDeadline}T23:59:59.999`)\n    : new Date(trimmedDeadline)\n  const currentDate = new Date()\n  if (isNaN(deadlineDate.getTime())) {\n    console.error('TemporaryBanner: Invalid deadline date:', deadline)\n    return null\n  }\n  const isBeforeDeadline = currentDate <= deadlineDate\n\n  if (!isBeforeDeadline) {\n    return null\n  }\n\n  if (content) return <>{content}</>\n\n  return <FullWidthAlert {...props} />\n}\nexport default TemporaryBanner\n"],"mappings":";;;;AASA,IAAM,KAAmB,EACvB,aACA,YACA,GAAG,QACwC;CAC3C,IAAM,IAAkB,EAAS,KAAK,GAChC,IAAe,sBAAsB,KAAK,CAAe,oBAE3D,IAAI,KAAK,GAAG,EAAgB,cAAc,IAC1C,IAAI,KAAK,CAAe,GACtB,oBAAc,IAAI,KAAK;CAa7B,OAZI,MAAM,EAAa,QAAQ,CAAC,KAC9B,QAAQ,MAAM,2CAA2C,CAAQ,GAC1D,QAEgB,KAAe,IAMpC,IAAgB,kBAAA,GAAA,EAAA,UAAG,EAAU,CAAA,IAE1B,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA,IAL1B;AAMX"}

package/dist/components/TermsAndConditions/TermsAndConditions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  BUNDLE_MASK_QUERY_RESULTS,\n  URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n  LoadingItem,\n  tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n  onFormChange: (formComplete: boolean) => void\n  termsAndConditionsTableID: string\n  termsAndConditionsTableVersion: string\n  hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n  termsAndConditionsTableID,\n  termsAndConditionsTableVersion,\n  onFormChange,\n  hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n  const [tcList, setTcList] = useState<tcItem[]>([])\n  // Fetch the table data\n  const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n    {\n      entityId: termsAndConditionsTableID,\n      query: {\n        sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n      },\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    { staleTime: Infinity },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n  if (isTermsAndConditionsTableNotFound) {\n    // \"Pledge\" Synapse table is unavailable on this stack.  Allow agreement to the terms, but we will show a warning below\n    onFormChange(true)\n  }\n\n  // update tcList when data changes (transform)\n  useEffect(() => {\n    if (data && data.queryResult && data.queryResult.queryResults) {\n      const { rows, headers } = data.queryResult.queryResults\n      const iconColIndex = headers.findIndex(col => col.name === 'icon')\n      const labelColIndex = headers.findIndex(col => col.name === 'label')\n      const descriptionColIndex = headers.findIndex(\n        col => col.name === 'description',\n      )\n      const newTcList: tcItem[] = []\n      rows.forEach(row => {\n        const { values } = row\n        const item: tcItem = {\n          iconFileHandleId: values[iconColIndex] ?? '',\n          label: values[labelColIndex] ?? '',\n          description: values[descriptionColIndex] ?? '',\n        }\n        newTcList.push(item)\n      })\n      setTcList(newTcList)\n      const checkboxCount = newTcList.length\n      setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n      // disabled all checkbox except the first one\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n      )\n    }\n  }, [data])\n\n  const sageTermsOfService =\n    'https://www.synapse.org/TrustCenter:TermsOfService'\n  const trustCenter = 'https://sagebionetworks.org/trust-center'\n  const getInitialCheckboxState = (checkboxCount: number) =>\n    Array.from(Array(checkboxCount).fill(false))\n  let mounted = true\n\n  // State variables\n  const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n  const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n  useEffect(() => {\n    if (mounted) {\n      checkFormCompleted()\n    }\n    return () => {\n      mounted = false\n    }\n  }, [checkboxEnabled, checkboxChecked])\n\n  // Placeholder function to check if all checkboxes are checked and agreement is signed\n  const checkFormCompleted = () => {\n    const allCheckboxChecked =\n      checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n    onFormChange(allCheckboxChecked)\n  }\n\n  const updateCheckboxState = (id: number) => {\n    const newState = !checkboxChecked[id]\n    const checkboxCount = checkboxChecked.length\n    if (newState) {\n      // if the checkbox is checked (i.e. newState is true)\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n      if (id + 2 <= tcList.length) {\n        setCheckboxEnabled(\n          getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n        )\n      }\n    } else {\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n      )\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n    }\n  }\n\n  return (\n    <section className=\"terms-conditions\">\n      <h3 className=\"page-header\">Pledge</h3>\n      <form>\n        <label>\n          I affirm my commitment to Sage&apos;s{' '}\n          <Link target=\"_blank\" href={sageTermsOfService}>\n            Terms of Service\n          </Link>{' '}\n          and policies for responsible research and data handling (\n          <Link target=\"_blank\" href={trustCenter}>\n            Trust Center\n          </Link>\n          ), including:\n        </label>\n        {isTermsAndConditionsTableNotFound && (\n          <Alert severity=\"warning\">\n            <AlertTitle>Source data unavailable</AlertTitle>\n            <Typography variant=\"body1\">\n              We are unable to display the source table content for the Synapse\n              Pledge at this time. Please review the full{' '}\n              <Link target=\"_blank\" href={sageTermsOfService}>\n                {' '}\n                Terms of Service{' '}\n              </Link>{' '}\n              carefully before proceeding. By clicking \"Agree And Continue,\" you\n              confirm that you have read and understood the Terms and Conditions\n              for use.\n            </Typography>\n          </Alert>\n        )}\n        <ul className=\"term-list\">\n          {isLoading && <LoadingItem numLoadingItems={6} />}\n          {tcList.length > 0 &&\n            tcList.map((item, i) => {\n              return (\n                <TermsAndConditionsItem\n                  key={`tc-item-${i}`}\n                  item={item}\n                  id={i}\n                  checked={checkboxChecked[i]}\n                  enabled={checkboxEnabled[i]}\n                  termsAndConditionsTableID={termsAndConditionsTableID}\n                  onChange={updateCheckboxState}\n                />\n              )\n            })}\n        </ul>\n        {!hideLinkToFullTC && (\n          <div className=\"view-terms\">\n            <Button\n              variant={'contained'}\n              href={URL_TERMS_CONDITIONS_AGREEMENT}\n              target=\"_blank\"\n            >\n              View Complete Terms and Conditions for Use\n            </Button>\n          </div>\n        )}\n      </form>\n    </section>\n  )\n}\n\nexport default TermsAndConditions\n"],"mappings":"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"}
+{"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  BUNDLE_MASK_QUERY_RESULTS,\n  URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n  LoadingItem,\n  tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n  onFormChange: (formComplete: boolean) => void\n  termsAndConditionsTableID: string\n  termsAndConditionsTableVersion: string\n  hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n  termsAndConditionsTableID,\n  termsAndConditionsTableVersion,\n  onFormChange,\n  hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n  const [tcList, setTcList] = useState<tcItem[]>([])\n  // Fetch the table data\n  const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n    {\n      entityId: termsAndConditionsTableID,\n      query: {\n        sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n      },\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    { staleTime: Infinity },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n  if (isTermsAndConditionsTableNotFound) {\n    // \"Pledge\" Synapse table is unavailable on this stack.  Allow agreement to the terms, but we will show a warning below\n    onFormChange(true)\n  }\n\n  // update tcList when data changes (transform)\n  useEffect(() => {\n    if (data && data.queryResult && data.queryResult.queryResults) {\n      const { rows, headers } = data.queryResult.queryResults\n      const iconColIndex = headers.findIndex(col => col.name === 'icon')\n      const labelColIndex = headers.findIndex(col => col.name === 'label')\n      const descriptionColIndex = headers.findIndex(\n        col => col.name === 'description',\n      )\n      const newTcList: tcItem[] = []\n      rows.forEach(row => {\n        const { values } = row\n        const item: tcItem = {\n          iconFileHandleId: values[iconColIndex] ?? '',\n          label: values[labelColIndex] ?? '',\n          description: values[descriptionColIndex] ?? '',\n        }\n        newTcList.push(item)\n      })\n      setTcList(newTcList)\n      const checkboxCount = newTcList.length\n      setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n      // disabled all checkbox except the first one\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n      )\n    }\n  }, [data])\n\n  const sageTermsOfService =\n    'https://www.synapse.org/TrustCenter:TermsOfService'\n  const trustCenter = 'https://sagebionetworks.org/trust-center'\n  const getInitialCheckboxState = (checkboxCount: number) =>\n    Array.from(Array(checkboxCount).fill(false))\n  let mounted = true\n\n  // State variables\n  const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n  const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n  useEffect(() => {\n    if (mounted) {\n      checkFormCompleted()\n    }\n    return () => {\n      mounted = false\n    }\n  }, [checkboxEnabled, checkboxChecked])\n\n  // Placeholder function to check if all checkboxes are checked and agreement is signed\n  const checkFormCompleted = () => {\n    const allCheckboxChecked =\n      checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n    onFormChange(allCheckboxChecked)\n  }\n\n  const updateCheckboxState = (id: number) => {\n    const newState = !checkboxChecked[id]\n    const checkboxCount = checkboxChecked.length\n    if (newState) {\n      // if the checkbox is checked (i.e. newState is true)\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n      if (id + 2 <= tcList.length) {\n        setCheckboxEnabled(\n          getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n        )\n      }\n    } else {\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n      )\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n    }\n  }\n\n  return (\n    <section className=\"terms-conditions\">\n      <h3 className=\"page-header\">Pledge</h3>\n      <form>\n        <label>\n          I affirm my commitment to Sage&apos;s{' '}\n          <Link target=\"_blank\" href={sageTermsOfService}>\n            Terms of Service\n          </Link>{' '}\n          and policies for responsible research and data handling (\n          <Link target=\"_blank\" href={trustCenter}>\n            Trust Center\n          </Link>\n          ), including:\n        </label>\n        {isTermsAndConditionsTableNotFound && (\n          <Alert severity=\"warning\">\n            <AlertTitle>Source data unavailable</AlertTitle>\n            <Typography variant=\"body1\">\n              We are unable to display the source table content for the Synapse\n              Pledge at this time. Please review the full{' '}\n              <Link target=\"_blank\" href={sageTermsOfService}>\n                {' '}\n                Terms of Service{' '}\n              </Link>{' '}\n              carefully before proceeding. By clicking \"Agree And Continue,\" you\n              confirm that you have read and understood the Terms and Conditions\n              for use.\n            </Typography>\n          </Alert>\n        )}\n        <ul className=\"term-list\">\n          {isLoading && <LoadingItem numLoadingItems={6} />}\n          {tcList.length > 0 &&\n            tcList.map((item, i) => {\n              return (\n                <TermsAndConditionsItem\n                  key={`tc-item-${i}`}\n                  item={item}\n                  id={i}\n                  checked={checkboxChecked[i]}\n                  enabled={checkboxEnabled[i]}\n                  termsAndConditionsTableID={termsAndConditionsTableID}\n                  onChange={updateCheckboxState}\n                />\n              )\n            })}\n        </ul>\n        {!hideLinkToFullTC && (\n          <div className=\"view-terms\">\n            <Button\n              variant={'contained'}\n              href={URL_TERMS_CONDITIONS_AGREEMENT}\n              target=\"_blank\"\n            >\n              View Complete Terms and Conditions for Use\n            </Button>\n          </div>\n        )}\n      </form>\n    </section>\n  )\n}\n\nexport default TermsAndConditions\n"],"mappings":"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"}

package/dist/components/TermsAndConditions/TermsAndConditionsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TermsAndConditionsItem.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditionsItem.tsx"],"sourcesContent":["import { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport { useGetPresignedUrlContentFromFHA } from '@/synapse-queries/file/useFiles'\nimport { Link, Skeleton } from '@mui/material'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { times } from 'lodash-es'\nimport { MouseEvent, useEffect, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonParagraph } from '../Skeleton'\n\nexport type tcItem = {\n  iconFileHandleId: string\n  label: string\n  description: string\n}\n\nexport type TermsAndConditionsItemProps = {\n  id: number\n  enabled: boolean\n  checked: boolean\n  item: tcItem\n  termsAndConditionsTableID: string\n  onChange: (id: number) => void\n}\n\nfunction TermsAndConditionsItem(props: TermsAndConditionsItemProps) {\n  const { id, item, enabled, checked, onChange, termsAndConditionsTableID } =\n    props\n  const { iconFileHandleId, label, description } = item\n  const { data: iconFileContent } = useGetPresignedUrlContentFromFHA(\n    {\n      associateObjectId: termsAndConditionsTableID,\n      associateObjectType: FileHandleAssociateType.TableEntity,\n      fileHandleId: iconFileHandleId,\n    },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const [showDesc, setShowDes] = useState<boolean>(false)\n  const [isChecked, setIsChecked] = useState<boolean>(false)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setIsChecked(checked)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [enabled, checked])\n\n  const handleShowDescLink = (e: MouseEvent) => {\n    e.preventDefault()\n    if (enabled) {\n      setShowDes(!showDesc)\n    }\n  }\n\n  const handleCheckboxClick = (e: MouseEvent) => {\n    if (enabled) {\n      onChange(id)\n    }\n  }\n\n  return (\n    <li className={enabled ? 'terms-enabled' : ''}>\n      <span\n        className=\"terms-icon\"\n        dangerouslySetInnerHTML={{ __html: iconFileContent ?? '' }}\n      />\n      <span className=\"terms-desc\">\n        <label id={`toc-item-${id}`}>\n          <MarkdownSynapse markdown={label} />\n        </label>\n        {showDesc && description && (\n          <div className=\"terms-desc-content\">\n            <MarkdownSynapse markdown={description} />\n          </div>\n        )}\n        {description && (\n          <div>\n            <Link\n              className=\"terms-show-desc highlight-link\"\n              href=\"\"\n              onClick={handleShowDescLink}\n            >\n              {showDesc ? 'Show Less' : 'Show More'}\n            </Link>\n          </div>\n        )}\n      </span>\n      <span className=\"terms-checkbox\">\n        <span\n          role=\"checkbox\"\n          aria-labelledby={`toc-item-${id}`}\n          className={isChecked ? 'terms-circle terms-checked' : 'terms-circle'}\n          onClick={handleCheckboxClick}\n        >\n          <CheckIcon />\n        </span>\n        I agree\n      </span>\n    </li>\n  )\n}\n\nexport function LoadingItem(props: { numLoadingItems: number }) {\n  const { numLoadingItems } = props\n  return (\n    <>\n      {times(numLoadingItems).map(index => {\n        return (\n          <li\n            key={index}\n            aria-busy=\"true\"\n            aria-live=\"polite\"\n            data-testid=\"loading-terms-and-conditions\"\n          >\n            <span className=\"terms-icon\">\n              <Skeleton\n                variant=\"rectangular\"\n                height=\"30px\"\n                width=\"30px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n            <span className=\"terms-desc\">\n              <SkeletonParagraph numRows={5} />\n            </span>\n            <span className=\"terms-checkbox\">\n              <Skeleton\n                variant=\"circular\"\n                height=\"40px\"\n                width=\"40px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n          </li>\n        )\n      })}\n    </>\n  )\n}\n\nexport default TermsAndConditionsItem\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,EAAuB,GAAoC;CAClE,IAAM,EAAE,OAAI,SAAM,YAAS,YAAS,aAAU,iCAC5C,GACI,EAAE,qBAAkB,UAAO,mBAAgB,GAC3C,EAAE,MAAM,MAAoB,EAChC;EACE,mBAAmB;EACnB,qBAAqB,EAAwB;EAC7C,cAAc;EACf,EACD,GACD,EAEK,CAAC,GAAU,KAAc,EAAkB,GAAM,EACjD,CAAC,GAAW,KAAgB,EAAkB,GAAM,EACtD,IAAU;AAwBd,QAtBA,SACM,KACF,EAAa,EAAQ,QAEV;AACX,MAAU;KAEX,CAAC,GAAS,EAAQ,CAAC,EAgBpB,kBAAC,MAAD;EAAI,WAAW,IAAU,kBAAkB;YAA3C;GACE,kBAAC,QAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAmB,IAAI;IAC1D,CAAA;GACF,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,SAAD;MAAO,IAAI,YAAY;gBACrB,kBAAC,GAAD,EAAiB,UAAU,GAAS,CAAA;MAC9B,CAAA;KACP,KAAY,KACX,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAiB,UAAU,GAAe,CAAA;MACtC,CAAA;KAEP,KACC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MACE,WAAU;MACV,MAAK;MACL,UAjCgB,MAAkB;AAE5C,OADA,EAAE,gBAAgB,EACd,KACF,EAAW,CAAC,EAAS;;gBAgCZ,IAAW,cAAc;MACrB,CAAA,EACH,CAAA;KAEH;;GACP,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KACE,MAAK;KACL,mBAAiB,YAAY;KAC7B,WAAW,IAAY,+BAA+B;KACtD,UAtCqB,MAAkB;AAC7C,MAAI,KACF,EAAS,EAAG;;eAsCR,kBAAC,GAAD,EAAa,CAAA;KACR,CAAA,EAAA,UAEF;;GACJ;;;AAIT,SAAgB,EAAY,GAAoC;CAC9D,IAAM,EAAE,uBAAoB;AAC5B,QACE,kBAAA,GAAA,EAAA,UACG,EAAM,EAAgB,CAAC,KAAI,MAExB,kBAAC,MAAD;EAEE,aAAU;EACV,aAAU;EACV,eAAY;YAJd;GAME,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,QAAQ;KACtB,CAAA;IACG,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD,EAAmB,SAAS,GAAK,CAAA;IAC5B,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,QAAQ;KACtB,CAAA;IACG,CAAA;GACJ;IAxBE,EAwBF,CAEP,EACD,CAAA"}
+{"version":3,"file":"TermsAndConditionsItem.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditionsItem.tsx"],"sourcesContent":["import { CheckIcon } from '@/assets/icons/terms/CheckIcon'\nimport { useGetPresignedUrlContentFromFHA } from '@/synapse-queries/file/useFiles'\nimport { Link, Skeleton } from '@mui/material'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { times } from 'lodash-es'\nimport { MouseEvent, useEffect, useState } from 'react'\nimport MarkdownSynapse from '../Markdown/MarkdownSynapse'\nimport { SkeletonParagraph } from '../Skeleton'\n\nexport type tcItem = {\n  iconFileHandleId: string\n  label: string\n  description: string\n}\n\nexport type TermsAndConditionsItemProps = {\n  id: number\n  enabled: boolean\n  checked: boolean\n  item: tcItem\n  termsAndConditionsTableID: string\n  onChange: (id: number) => void\n}\n\nfunction TermsAndConditionsItem(props: TermsAndConditionsItemProps) {\n  const { id, item, enabled, checked, onChange, termsAndConditionsTableID } =\n    props\n  const { iconFileHandleId, label, description } = item\n  const { data: iconFileContent } = useGetPresignedUrlContentFromFHA(\n    {\n      associateObjectId: termsAndConditionsTableID,\n      associateObjectType: FileHandleAssociateType.TableEntity,\n      fileHandleId: iconFileHandleId,\n    },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const [showDesc, setShowDes] = useState<boolean>(false)\n  const [isChecked, setIsChecked] = useState<boolean>(false)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setIsChecked(checked)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [enabled, checked])\n\n  const handleShowDescLink = (e: MouseEvent) => {\n    e.preventDefault()\n    if (enabled) {\n      setShowDes(!showDesc)\n    }\n  }\n\n  const handleCheckboxClick = (e: MouseEvent) => {\n    if (enabled) {\n      onChange(id)\n    }\n  }\n\n  return (\n    <li className={enabled ? 'terms-enabled' : ''}>\n      <span\n        className=\"terms-icon\"\n        dangerouslySetInnerHTML={{ __html: iconFileContent ?? '' }}\n      />\n      <span className=\"terms-desc\">\n        <label id={`toc-item-${id}`}>\n          <MarkdownSynapse markdown={label} />\n        </label>\n        {showDesc && description && (\n          <div className=\"terms-desc-content\">\n            <MarkdownSynapse markdown={description} />\n          </div>\n        )}\n        {description && (\n          <div>\n            <Link\n              className=\"terms-show-desc highlight-link\"\n              href=\"\"\n              onClick={handleShowDescLink}\n            >\n              {showDesc ? 'Show Less' : 'Show More'}\n            </Link>\n          </div>\n        )}\n      </span>\n      <span className=\"terms-checkbox\">\n        <span\n          role=\"checkbox\"\n          aria-labelledby={`toc-item-${id}`}\n          className={isChecked ? 'terms-circle terms-checked' : 'terms-circle'}\n          onClick={handleCheckboxClick}\n        >\n          <CheckIcon />\n        </span>\n        I agree\n      </span>\n    </li>\n  )\n}\n\nexport function LoadingItem(props: { numLoadingItems: number }) {\n  const { numLoadingItems } = props\n  return (\n    <>\n      {times(numLoadingItems).map(index => {\n        return (\n          <li\n            key={index}\n            aria-busy=\"true\"\n            aria-live=\"polite\"\n            data-testid=\"loading-terms-and-conditions\"\n          >\n            <span className=\"terms-icon\">\n              <Skeleton\n                variant=\"rectangular\"\n                height=\"30px\"\n                width=\"30px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n            <span className=\"terms-desc\">\n              <SkeletonParagraph numRows={5} />\n            </span>\n            <span className=\"terms-checkbox\">\n              <Skeleton\n                variant=\"circular\"\n                height=\"40px\"\n                width=\"40px\"\n                sx={{ margin: 'auto' }}\n              />\n            </span>\n          </li>\n        )\n      })}\n    </>\n  )\n}\n\nexport default TermsAndConditionsItem\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,EAAuB,GAAoC;CAClE,IAAM,EAAE,OAAI,SAAM,YAAS,YAAS,aAAU,iCAC5C,GACI,EAAE,qBAAkB,UAAO,mBAAgB,GAC3C,EAAE,MAAM,MAAoB,EAChC;EACE,mBAAmB;EACnB,qBAAqB,EAAwB;EAC7C,cAAc;CAChB,GACA,EACF,GAEM,CAAC,GAAU,KAAc,EAAkB,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAkB,EAAK,GACrD,IAAU;CAwBd,OAtBA,SACM,KACF,EAAa,CAAO,SAET;EACX,IAAU;CACZ,IACC,CAAC,GAAS,CAAO,CAAC,GAgBnB,kBAAC,MAAD;EAAI,WAAW,IAAU,kBAAkB;YAA3C;GACE,kBAAC,QAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAmB,GAAG;GAC1D,CAAA;GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,SAAD;MAAO,IAAI,YAAY;gBACrB,kBAAC,GAAD,EAAiB,UAAU,EAAQ,CAAA;KAC9B,CAAA;KACN,KAAY,KACX,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAiB,UAAU,EAAc,CAAA;KACtC,CAAA;KAEN,KACC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MACE,WAAU;MACV,MAAK;MACL,UAjCgB,MAAkB;OAE5C,AADA,EAAE,eAAe,GACb,KACF,EAAW,CAAC,CAAQ;MAExB;gBA8Ba,IAAW,cAAc;KACtB,CAAA,EACH,CAAA;IAEH;;GACN,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KACE,MAAK;KACL,mBAAiB,YAAY;KAC7B,WAAW,IAAY,+BAA+B;KACtD,UAtCqB,MAAkB;MAC7C,AAAI,KACF,EAAS,CAAE;KAEf;eAoCQ,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,GAAC,SAEH;;EACJ;;AAER;AAEA,SAAgB,EAAY,GAAoC;CAC9D,IAAM,EAAE,uBAAoB;CAC5B,OACE,kBAAA,GAAA,EAAA,UACG,EAAM,CAAe,EAAE,KAAI,MAExB,kBAAC,MAAD;EAEE,aAAU;EACV,aAAU;EACV,eAAY;YAJd;GAME,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,OAAO;IACtB,CAAA;GACG,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD,EAAmB,SAAS,EAAI,CAAA;GAC5B,CAAA;GACN,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,GAAD;KACE,SAAQ;KACR,QAAO;KACP,OAAM;KACN,IAAI,EAAE,QAAQ,OAAO;IACtB,CAAA;GACG,CAAA;EACJ;IAxBG,CAwBH,CAEP,EACD,CAAA;AAEN"}

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  Box,\n  inputBaseClasses,\n  TextField as MuiTextField,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { ReactNode, useId } from 'react'\n\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).\n   * Always rendered in a neutral color regardless of form state.\n   * For error or status messages, use `helperText` instead.\n   */\n  description?: ReactNode\n  maxCharacterCount?: number\n}\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n *\n * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.\n * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.\n * - `helperText`: Status or error message shown below the input. Color-reactive to form state.\n * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.\n */\nexport default function TextField({\n  description,\n  maxCharacterCount,\n  slotProps,\n  id: idProp,\n  label,\n  fullWidth = true,\n  className,\n  sx,\n  value,\n  ...rest\n}: TextFieldProps) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n\n  const currentLength = typeof value === 'string' ? value.length : 0\n\n  const compositeLabel =\n    label != null || description != null ? (\n      <>\n        {label}\n        {description != null && (\n          <span className={styles.description}>{description}</span>\n        )}\n      </>\n    ) : undefined\n\n  return (\n    <Box className={className} sx={sx}>\n      <MuiTextField\n        id={id}\n        variant=\"standard\"\n        label={compositeLabel}\n        fullWidth={fullWidth}\n        value={value}\n        sx={{\n          [`& .${inputBaseClasses.root}`]: {\n            // The theme default applies spacing(3) for the floating-label pattern (absolute\n            // positioned label). Our label is in document flow (position: relative), so it\n            // already occupies vertical space — no top margin needed on the input.\n            marginTop: 0,\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          htmlInput: {\n            maxLength: maxCharacterCount,\n            ...slotProps?.htmlInput,\n          },\n          inputLabel: {\n            className: styles.inputLabel,\n            ...slotProps?.inputLabel,\n          },\n          input: {\n            disableUnderline: true,\n            ...slotProps?.input,\n          },\n        }}\n        {...rest}\n      />\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAwB,EAAU,EAChC,gBACA,sBACA,cACA,IAAI,GACJ,UACA,eAAY,IACZ,cACA,OACA,UACA,GAAG,KACc;CACjB,IAAM,IAAc,GAAO,EACrB,IAAK,KAAU,GAEf,IAAgB,OAAO,KAAU,WAAW,EAAM,SAAS;AAYjE,QACE,kBAAC,GAAD;EAAgB;EAAe;YAA/B,CACE,kBAAC,GAAD;GACM;GACJ,SAAQ;GACR,OAdJ,KAAS,QAAQ,KAAe,OAC9B,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAe,QACd,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAc;IAAmB,CAAA,CAE1D,EAAA,CAAA,GACD,KAAA;GAQW;GACJ;GACP,IAAI,GACD,MAAM,EAAiB,SAAS,EAI/B,WAAW,GACZ,EACF;GACD,WAAW;IACT,GAAG;IACH,WAAW;KACT,WAAW;KACX,GAAG,GAAW;KACf;IACD,YAAY;KACV,WAAW,EAAO;KAClB,GAAG,GAAW;KACf;IACD,OAAO;KACL,kBAAkB;KAClB,GAAG,GAAW;KACf;IACF;GACD,GAAI;GACJ,CAAA,EACD,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;IACN;KAEX"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  Box,\n  inputBaseClasses,\n  TextField as MuiTextField,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { ReactNode, useId } from 'react'\n\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Neutral supplementary text shown below the label and above the input (similar to an inline tooltip).\n   * Always rendered in a neutral color regardless of form state.\n   * For error or status messages, use `helperText` instead.\n   */\n  description?: ReactNode\n  maxCharacterCount?: number\n}\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n *\n * - `label`: Bold label text above the input. Changes color on focus/error/disabled states.\n * - `description`: Neutral supplementary text shown below the label, above the input. Always neutral color.\n * - `helperText`: Status or error message shown below the input. Color-reactive to form state.\n * - `maxCharacterCount`: Renders a character count indicator below the input and sets the `maxLength` on the input.\n */\nexport default function TextField({\n  description,\n  maxCharacterCount,\n  slotProps,\n  id: idProp,\n  label,\n  fullWidth = true,\n  className,\n  sx,\n  value,\n  ...rest\n}: TextFieldProps) {\n  const generatedId = useId()\n  const id = idProp ?? generatedId\n\n  const currentLength = typeof value === 'string' ? value.length : 0\n\n  const compositeLabel =\n    label != null || description != null ? (\n      <>\n        {label}\n        {description != null && (\n          <span className={styles.description}>{description}</span>\n        )}\n      </>\n    ) : undefined\n\n  return (\n    <Box className={className} sx={sx}>\n      <MuiTextField\n        id={id}\n        variant=\"standard\"\n        label={compositeLabel}\n        fullWidth={fullWidth}\n        value={value}\n        sx={{\n          [`& .${inputBaseClasses.root}`]: {\n            // The theme default applies spacing(3) for the floating-label pattern (absolute\n            // positioned label). Our label is in document flow (position: relative), so it\n            // already occupies vertical space — no top margin needed on the input.\n            marginTop: 0,\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          htmlInput: {\n            maxLength: maxCharacterCount,\n            ...slotProps?.htmlInput,\n          },\n          inputLabel: {\n            className: styles.inputLabel,\n            ...slotProps?.inputLabel,\n          },\n          input: {\n            disableUnderline: true,\n            ...slotProps?.input,\n          },\n        }}\n        {...rest}\n      />\n      {maxCharacterCount !== undefined && (\n        <Typography variant=\"body2\" className={styles.charCount}>\n          {currentLength}/{maxCharacterCount}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAwB,EAAU,EAChC,gBACA,sBACA,cACA,IAAI,GACJ,UACA,eAAY,IACZ,cACA,OACA,UACA,GAAG,KACc;CACjB,IAAM,IAAc,EAAM,GACpB,IAAK,KAAU,GAEf,IAAgB,OAAO,KAAU,WAAW,EAAM,SAAS;CAYjE,OACE,kBAAC,GAAD;EAAgB;EAAe;YAA/B,CACE,kBAAC,GAAD;GACM;GACJ,SAAQ;GACR,OAdJ,KAAS,QAAQ,KAAe,OAC9B,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,KAAe,QACd,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAc;GAAkB,CAAA,CAE1D,EAAA,CAAA,IACA,KAAA;GAQW;GACJ;GACP,IAAI,GACD,MAAM,EAAiB,SAAS,EAI/B,WAAW,EACb,EACF;GACA,WAAW;IACT,GAAG;IACH,WAAW;KACT,WAAW;KACX,GAAG,GAAW;IAChB;IACA,YAAY;KACV,WAAW,EAAO;KAClB,GAAG,GAAW;IAChB;IACA,OAAO;KACL,kBAAkB;KAClB,GAAG,GAAW;IAChB;GACF;GACA,GAAI;EACL,CAAA,GACA,MAAsB,KAAA,KACrB,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW,EAAO;aAA9C;IACG;IAAc;IAAE;GACP;IAEX;;AAET"}

package/dist/components/TextField/TextFieldWithWordLimit.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldWithWordLimit.js","names":[],"sources":["../../../src/components/TextField/TextFieldWithWordLimit.tsx"],"sourcesContent":["import {\n  Box,\n  FormControl,\n  Input,\n  InputLabel,\n  InputProps,\n  Typography,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { ChangeEvent, ReactNode, useId, useState } from 'react'\n\n// TODO: In MUI v6, use TextFieldProps and only add `minWords` and `maxWords`.\nexport type TextFieldWithWordLimitProps = InputProps & {\n  label?: ReactNode\n  helperText?: ReactNode\n  minWords?: number\n  maxWords?: number\n}\n\nexport function getWordCount(s: string) {\n  return (\n    s\n      .trim()\n      .split(/\\W+/)\n      // remove empty string(s)\n      .filter(s => !!s).length\n  )\n}\n\nfunction DisplayedWordCount(props: {\n  maxWords?: number\n  minWords?: number\n  wordCount: number\n}) {\n  const { wordCount, maxWords, minWords } = props\n\n  let color = 'grey.700'\n  if (\n    wordCount > 0 &&\n    ((minWords != null && wordCount < minWords) ||\n      (maxWords != null && wordCount > maxWords))\n  ) {\n    color = 'error.main'\n  } else if (wordCount > 0) {\n    color = 'success.main'\n  }\n\n  let wordCountText = `${wordCount.toLocaleString()}`\n  if (maxWords) {\n    wordCountText += ` of ${maxWords.toLocaleString()}`\n  }\n  wordCountText += ' words'\n  if (minWords) {\n    wordCountText += ` (min. ${minWords.toLocaleString()})`\n  }\n\n  return (\n    <Typography component={'div'} variant={'smallText1'} sx={{ color: color }}>\n      {wordCountText}\n    </Typography>\n  )\n}\n\n/**\n * Wrapper around MUI input components that displays the word count of the input. The appearance of the word count changes\n * based on the validity of the current input.\n * @param props\n * @constructor\n */\nexport default function TextFieldWithWordLimit(\n  props: TextFieldWithWordLimitProps,\n) {\n  const { minWords, maxWords, label, helperText, ...inputProps } = props\n  const { value, onChange } = inputProps\n\n  const generatedId = useId()\n  const id = props.id ?? generatedId\n\n  const helperTextId = id + '-helperText'\n\n  const [trackedWordCount, setTrackedWordCount] = useState(0)\n\n  const wordCount =\n    typeof value === 'string' ? getWordCount(value) : trackedWordCount\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value\n    setTrackedWordCount(getWordCount(newValue))\n    onChange?.(event)\n  }\n\n  const inputLabelWithWordCount = (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'baseline',\n        width: '100%',\n      }}\n    >\n      <InputLabel sx={{ position: 'static' }} htmlFor={id}>\n        {label}\n      </InputLabel>\n      <DisplayedWordCount\n        wordCount={wordCount}\n        minWords={minWords}\n        maxWords={maxWords}\n      />\n    </Box>\n  )\n\n  // TODO: In MUI v6, use MUI TextField and override slots.inputLabel with inputLabelWithWordCount.\n  return (\n    <FormControl required={props.required} fullWidth={props.fullWidth}>\n      {inputLabelWithWordCount}\n      <Input\n        {...inputProps}\n        aria-describedby={helperTextId}\n        id={id}\n        onChange={handleChange}\n      />\n      <FormHelperText id={helperTextId}>{props.helperText}</FormHelperText>\n    </FormControl>\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAa,GAAW;AACtC,QACE,EACG,MAAM,CACN,MAAM,MAAM,CAEZ,QAAO,MAAK,CAAC,CAAC,EAAE,CAAC;;AAIxB,SAAS,EAAmB,GAIzB;CACD,IAAM,EAAE,cAAW,aAAU,gBAAa,GAEtC,IAAQ;AACZ,CACE,IAAY,MACV,KAAY,QAAQ,IAAY,KAC/B,KAAY,QAAQ,IAAY,KAEnC,IAAQ,eACC,IAAY,MACrB,IAAQ;CAGV,IAAI,IAAgB,GAAG,EAAU,gBAAgB;AASjD,QARI,MACF,KAAiB,OAAO,EAAS,gBAAgB,KAEnD,KAAiB,UACb,MACF,KAAiB,UAAU,EAAS,gBAAgB,CAAC,KAIrD,kBAAC,GAAD;EAAY,WAAW;EAAO,SAAS;EAAc,IAAI,EAAS,UAAO;YACtE;EACU,CAAA;;AAUjB,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU,aAAU,UAAO,eAAY,GAAG,MAAe,GAC3D,EAAE,UAAO,gBAAa,GAEtB,IAAc,GAAO,EACrB,IAAK,EAAM,MAAM,GAEjB,IAAe,IAAK,eAEpB,CAAC,GAAkB,KAAuB,EAAS,EAAE,EAErD,IACJ,OAAO,KAAU,WAAW,EAAa,EAAM,GAAG,GAE9C,KAAgB,MAAyC;EAC7D,IAAM,IAAW,EAAM,OAAO;AAE9B,EADA,EAAoB,EAAa,EAAS,CAAC,EAC3C,IAAW,EAAM;IAGb,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,OAAO;GACR;YANH,CAQE,kBAAC,GAAD;GAAY,IAAI,EAAE,UAAU,UAAU;GAAE,SAAS;aAC9C;GACU,CAAA,EACb,kBAAC,GAAD;GACa;GACD;GACA;GACV,CAAA,CACE;;AAIR,QACE,kBAAC,GAAD;EAAa,UAAU,EAAM;EAAU,WAAW,EAAM;YAAxD;GACG;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,oBAAkB;IACd;IACJ,UAAU;IACV,CAAA;GACF,kBAAC,GAAD;IAAgB,IAAI;cAAe,EAAM;IAA4B,CAAA;GACzD"}
+{"version":3,"file":"TextFieldWithWordLimit.js","names":[],"sources":["../../../src/components/TextField/TextFieldWithWordLimit.tsx"],"sourcesContent":["import {\n  Box,\n  FormControl,\n  Input,\n  InputLabel,\n  InputProps,\n  Typography,\n} from '@mui/material'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport { ChangeEvent, ReactNode, useId, useState } from 'react'\n\n// TODO: In MUI v6, use TextFieldProps and only add `minWords` and `maxWords`.\nexport type TextFieldWithWordLimitProps = InputProps & {\n  label?: ReactNode\n  helperText?: ReactNode\n  minWords?: number\n  maxWords?: number\n}\n\nexport function getWordCount(s: string) {\n  return (\n    s\n      .trim()\n      .split(/\\W+/)\n      // remove empty string(s)\n      .filter(s => !!s).length\n  )\n}\n\nfunction DisplayedWordCount(props: {\n  maxWords?: number\n  minWords?: number\n  wordCount: number\n}) {\n  const { wordCount, maxWords, minWords } = props\n\n  let color = 'grey.700'\n  if (\n    wordCount > 0 &&\n    ((minWords != null && wordCount < minWords) ||\n      (maxWords != null && wordCount > maxWords))\n  ) {\n    color = 'error.main'\n  } else if (wordCount > 0) {\n    color = 'success.main'\n  }\n\n  let wordCountText = `${wordCount.toLocaleString()}`\n  if (maxWords) {\n    wordCountText += ` of ${maxWords.toLocaleString()}`\n  }\n  wordCountText += ' words'\n  if (minWords) {\n    wordCountText += ` (min. ${minWords.toLocaleString()})`\n  }\n\n  return (\n    <Typography component={'div'} variant={'smallText1'} sx={{ color: color }}>\n      {wordCountText}\n    </Typography>\n  )\n}\n\n/**\n * Wrapper around MUI input components that displays the word count of the input. The appearance of the word count changes\n * based on the validity of the current input.\n * @param props\n * @constructor\n */\nexport default function TextFieldWithWordLimit(\n  props: TextFieldWithWordLimitProps,\n) {\n  const { minWords, maxWords, label, helperText, ...inputProps } = props\n  const { value, onChange } = inputProps\n\n  const generatedId = useId()\n  const id = props.id ?? generatedId\n\n  const helperTextId = id + '-helperText'\n\n  const [trackedWordCount, setTrackedWordCount] = useState(0)\n\n  const wordCount =\n    typeof value === 'string' ? getWordCount(value) : trackedWordCount\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value\n    setTrackedWordCount(getWordCount(newValue))\n    onChange?.(event)\n  }\n\n  const inputLabelWithWordCount = (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'baseline',\n        width: '100%',\n      }}\n    >\n      <InputLabel sx={{ position: 'static' }} htmlFor={id}>\n        {label}\n      </InputLabel>\n      <DisplayedWordCount\n        wordCount={wordCount}\n        minWords={minWords}\n        maxWords={maxWords}\n      />\n    </Box>\n  )\n\n  // TODO: In MUI v6, use MUI TextField and override slots.inputLabel with inputLabelWithWordCount.\n  return (\n    <FormControl required={props.required} fullWidth={props.fullWidth}>\n      {inputLabelWithWordCount}\n      <Input\n        {...inputProps}\n        aria-describedby={helperTextId}\n        id={id}\n        onChange={handleChange}\n      />\n      <FormHelperText id={helperTextId}>{props.helperText}</FormHelperText>\n    </FormControl>\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAa,GAAW;CACtC,OACE,EACG,KAAK,EACL,MAAM,KAAK,EAEX,QAAO,MAAK,CAAC,CAAC,CAAC,EAAE;AAExB;AAEA,SAAS,EAAmB,GAIzB;CACD,IAAM,EAAE,cAAW,aAAU,gBAAa,GAEtC,IAAQ;CACZ,AACE,IAAY,MACV,KAAY,QAAQ,IAAY,KAC/B,KAAY,QAAQ,IAAY,KAEnC,IAAQ,eACC,IAAY,MACrB,IAAQ;CAGV,IAAI,IAAgB,GAAG,EAAU,eAAe;CAShD,OARI,MACF,KAAiB,OAAO,EAAS,eAAe,MAElD,KAAiB,UACb,MACF,KAAiB,UAAU,EAAS,eAAe,EAAE,KAIrD,kBAAC,GAAD;EAAY,WAAW;EAAO,SAAS;EAAc,IAAI,EAAS,SAAM;YACrE;CACS,CAAA;AAEhB;AAQA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,aAAU,aAAU,UAAO,eAAY,GAAG,MAAe,GAC3D,EAAE,UAAO,gBAAa,GAEtB,IAAc,EAAM,GACpB,IAAK,EAAM,MAAM,GAEjB,IAAe,IAAK,eAEpB,CAAC,GAAkB,KAAuB,EAAS,CAAC,GAEpD,IACJ,OAAO,KAAU,WAAW,EAAa,CAAK,IAAI,GAE9C,KAAgB,MAAyC;EAC7D,IAAM,IAAW,EAAM,OAAO;EAE9B,AADA,EAAoB,EAAa,CAAQ,CAAC,GAC1C,IAAW,CAAK;CAClB,GAEM,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,OAAO;EACT;YANF,CAQE,kBAAC,GAAD;GAAY,IAAI,EAAE,UAAU,SAAS;GAAG,SAAS;aAC9C;EACS,CAAA,GACZ,kBAAC,GAAD;GACa;GACD;GACA;EACX,CAAA,CACE;;CAIP,OACE,kBAAC,GAAD;EAAa,UAAU,EAAM;EAAU,WAAW,EAAM;YAAxD;GACG;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,oBAAkB;IACd;IACJ,UAAU;GACX,CAAA;GACD,kBAAC,GAAD;IAAgB,IAAI;cAAe,EAAM;GAA2B,CAAA;EACzD;;AAEjB"}

package/dist/components/TextToComponentCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextToComponentCollapse.js","names":[],"sources":["../../src/components/TextToComponentCollapse.tsx"],"sourcesContent":["import { SxProps, Typography, TypographyOwnProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\nimport ComponentCollapse from './ComponentCollapse'\n\nexport type TextToComponentCollapseProps = PropsWithChildren<{\n  text: string\n  defaultVisible?: boolean // default to false (collapsed)\n  textVariant?: TypographyOwnProps['variant']\n  textSx?: SxProps\n  textContainerSx?: SxProps\n  collapseBoxSx?: SxProps\n  iconSx?: SxProps\n}>\n\n/**\n * Wrap any child components in a collapse, using a Typography as the trigger\n */\nexport default function TextToComponentCollapse({\n  text,\n  defaultVisible,\n  textVariant = 'smallLink',\n  textSx,\n  textContainerSx,\n  collapseBoxSx,\n  iconSx,\n  children,\n}: TextToComponentCollapseProps) {\n  return (\n    <ComponentCollapse\n      component={\n        <Typography variant={textVariant} sx={textSx}>\n          {text}\n        </Typography>\n      }\n      componentContainerSx={textContainerSx}\n      defaultVisible={defaultVisible}\n      collapseBoxSx={collapseBoxSx}\n      iconSx={iconSx}\n    >\n      {children}\n    </ComponentCollapse>\n  )\n}\n"],"mappings":";;;;AAiBA,SAAwB,EAAwB,EAC9C,SACA,mBACA,iBAAc,aACd,WACA,oBACA,kBACA,WACA,eAC+B;AAC/B,QACE,kBAAC,GAAD;EACE,WACE,kBAAC,GAAD;GAAY,SAAS;GAAa,IAAI;aACnC;GACU,CAAA;EAEf,sBAAsB;EACN;EACD;EACP;EAEP;EACiB,CAAA"}
+{"version":3,"file":"TextToComponentCollapse.js","names":[],"sources":["../../src/components/TextToComponentCollapse.tsx"],"sourcesContent":["import { SxProps, Typography, TypographyOwnProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\nimport ComponentCollapse from './ComponentCollapse'\n\nexport type TextToComponentCollapseProps = PropsWithChildren<{\n  text: string\n  defaultVisible?: boolean // default to false (collapsed)\n  textVariant?: TypographyOwnProps['variant']\n  textSx?: SxProps\n  textContainerSx?: SxProps\n  collapseBoxSx?: SxProps\n  iconSx?: SxProps\n}>\n\n/**\n * Wrap any child components in a collapse, using a Typography as the trigger\n */\nexport default function TextToComponentCollapse({\n  text,\n  defaultVisible,\n  textVariant = 'smallLink',\n  textSx,\n  textContainerSx,\n  collapseBoxSx,\n  iconSx,\n  children,\n}: TextToComponentCollapseProps) {\n  return (\n    <ComponentCollapse\n      component={\n        <Typography variant={textVariant} sx={textSx}>\n          {text}\n        </Typography>\n      }\n      componentContainerSx={textContainerSx}\n      defaultVisible={defaultVisible}\n      collapseBoxSx={collapseBoxSx}\n      iconSx={iconSx}\n    >\n      {children}\n    </ComponentCollapse>\n  )\n}\n"],"mappings":";;;;AAiBA,SAAwB,EAAwB,EAC9C,SACA,mBACA,iBAAc,aACd,WACA,oBACA,kBACA,WACA,eAC+B;CAC/B,OACE,kBAAC,GAAD;EACE,WACE,kBAAC,GAAD;GAAY,SAAS;GAAa,IAAI;aACnC;EACS,CAAA;EAEd,sBAAsB;EACN;EACD;EACP;EAEP;CACgB,CAAA;AAEvB"}

package/dist/components/ThemeGallery/ThemeGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeGallery.js","names":[],"sources":["../../../src/components/ThemeGallery/ThemeGallery.tsx"],"sourcesContent":["const COLOR_VARS = [\n  /* Primary Palette */\n  '--synapse-primary-action-color',\n  '--synapse-primary-focus-border',\n  '--synapse-primary-focus-shadow',\n  '--synapse-primary-active',\n  '--synapse-primary-100',\n  '--synapse-primary-200',\n  '--synapse-primary-300',\n  '--synapse-primary-400',\n  '--synapse-primary-500',\n  '--synapse-primary-600',\n  '--synapse-primary-700',\n  '--synapse-primary-800',\n  '--synapse-primary-900',\n\n  /* Secondary Palette */\n  '--synapse-secondary-action-color',\n  '--synapse-secondary-200-hover',\n  '--synapse-secondary-100',\n  '--synapse-secondary-200',\n  '--synapse-secondary-300',\n  '--synapse-secondary-400',\n  '--synapse-secondary-500',\n  '--synapse-secondary-600',\n  '--synapse-secondary-700',\n  '--synapse-secondary-800',\n  '--synapse-secondary-900',\n\n  /* Tertiary Palette */\n  '--synapse-tertiary-action-color',\n  '--synapse-tertiary-100',\n  '--synapse-tertiary-200',\n  '--synapse-tertiary-300',\n  '--synapse-tertiary-400',\n  '--synapse-tertiary-500',\n  '--synapse-tertiary-600',\n  '--synapse-tertiary-700',\n  '--synapse-tertiary-800',\n  '--synapse-tertiary-900',\n\n  /* Alpha Variants */\n  '--synapse-primary-action-color-alpha-4',\n  '--synapse-primary-action-color-alpha-10',\n  '--synapse-primary-alpha-05',\n  '--synapse-primary-alpha-08',\n  '--synapse-secondary-action-color-alpha-10',\n  '--synapse-secondary-action-color-alpha-20',\n  '--synapse-secondary-action-color-alpha-50',\n\n  /* Status Colors */\n  '--synapse-info',\n  '--synapse-success',\n  '--synapse-warning',\n  '--synapse-error',\n  '--synapse-green-affirmative',\n  '--synapse-yellow-warning',\n  '--synapse-red-delete',\n  '--synapse-red-required',\n\n  /* Grays */\n  '--synapse-white',\n  '--synapse-black',\n  '--synapse-gray-100',\n  '--synapse-gray-200',\n  '--synapse-gray-300',\n  '--synapse-gray-400',\n  '--synapse-gray-500',\n  '--synapse-gray-600',\n  '--synapse-gray-700',\n  '--synapse-gray-800',\n  '--synapse-gray-900',\n  '--synapse-gray-1000',\n  '--synapse-dark-gray',\n  '--synapse-gray-dark',\n  '--synapse-gray-light',\n\n  /* UI Specific */\n  '--synapse-link-underline-color',\n  '--synapse-text-color-dark',\n  '--synapse-text-color-disabled',\n  '--synapse-active-tab-text',\n  '--synapse-inactive-tab-text',\n  '--synapse-dropdown-disabled-text',\n]\n\nexport const ThemeGallery = () => {\n  return (\n    <div\n      style={{\n        padding: '20px',\n      }}\n    >\n      <h3>Theme Gallery</h3>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',\n          gap: '20px',\n          marginTop: '20px',\n        }}\n      >\n        {COLOR_VARS.map(v => (\n          <div\n            key={v}\n            style={{\n              border: '1px solid #ddd',\n              padding: '10px',\n              borderRadius: '8px',\n            }}\n          >\n            <div\n              style={{\n                backgroundColor: `var(${v})`,\n                height: '50px',\n                borderRadius: '4px',\n                border: '1px solid #eee',\n              }}\n            />\n            <code\n              style={{ fontSize: '12px', display: 'block', marginTop: '8px' }}\n            >\n              {v}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;AAAA,IAAM,IAAa,+sDAoFlB,EAEY,UAET,kBAAC,OAAD;CACE,OAAO,EACL,SAAS,QACV;WAHH,CAKE,kBAAC,MAAD,EAAA,UAAI,iBAAkB,CAAA,EACtB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACL,WAAW;GACZ;YAEA,EAAW,KAAI,MACd,kBAAC,OAAD;GAEE,OAAO;IACL,QAAQ;IACR,SAAS;IACT,cAAc;IACf;aANH,CAQE,kBAAC,OAAD,EACE,OAAO;IACL,iBAAiB,OAAO,EAAE;IAC1B,QAAQ;IACR,cAAc;IACd,QAAQ;IACT,EACD,CAAA,EACF,kBAAC,QAAD;IACE,OAAO;KAAE,UAAU;KAAQ,SAAS;KAAS,WAAW;KAAO;cAE9D;IACI,CAAA,CACH;KApBC,EAoBD,CACN;EACE,CAAA,CACF"}
+{"version":3,"file":"ThemeGallery.js","names":[],"sources":["../../../src/components/ThemeGallery/ThemeGallery.tsx"],"sourcesContent":["const COLOR_VARS = [\n  /* Primary Palette */\n  '--synapse-primary-action-color',\n  '--synapse-primary-focus-border',\n  '--synapse-primary-focus-shadow',\n  '--synapse-primary-active',\n  '--synapse-primary-100',\n  '--synapse-primary-200',\n  '--synapse-primary-300',\n  '--synapse-primary-400',\n  '--synapse-primary-500',\n  '--synapse-primary-600',\n  '--synapse-primary-700',\n  '--synapse-primary-800',\n  '--synapse-primary-900',\n\n  /* Secondary Palette */\n  '--synapse-secondary-action-color',\n  '--synapse-secondary-200-hover',\n  '--synapse-secondary-100',\n  '--synapse-secondary-200',\n  '--synapse-secondary-300',\n  '--synapse-secondary-400',\n  '--synapse-secondary-500',\n  '--synapse-secondary-600',\n  '--synapse-secondary-700',\n  '--synapse-secondary-800',\n  '--synapse-secondary-900',\n\n  /* Tertiary Palette */\n  '--synapse-tertiary-action-color',\n  '--synapse-tertiary-100',\n  '--synapse-tertiary-200',\n  '--synapse-tertiary-300',\n  '--synapse-tertiary-400',\n  '--synapse-tertiary-500',\n  '--synapse-tertiary-600',\n  '--synapse-tertiary-700',\n  '--synapse-tertiary-800',\n  '--synapse-tertiary-900',\n\n  /* Alpha Variants */\n  '--synapse-primary-action-color-alpha-4',\n  '--synapse-primary-action-color-alpha-10',\n  '--synapse-primary-alpha-05',\n  '--synapse-primary-alpha-08',\n  '--synapse-secondary-action-color-alpha-10',\n  '--synapse-secondary-action-color-alpha-20',\n  '--synapse-secondary-action-color-alpha-50',\n\n  /* Status Colors */\n  '--synapse-info',\n  '--synapse-success',\n  '--synapse-warning',\n  '--synapse-error',\n  '--synapse-green-affirmative',\n  '--synapse-yellow-warning',\n  '--synapse-red-delete',\n  '--synapse-red-required',\n\n  /* Grays */\n  '--synapse-white',\n  '--synapse-black',\n  '--synapse-gray-100',\n  '--synapse-gray-200',\n  '--synapse-gray-300',\n  '--synapse-gray-400',\n  '--synapse-gray-500',\n  '--synapse-gray-600',\n  '--synapse-gray-700',\n  '--synapse-gray-800',\n  '--synapse-gray-900',\n  '--synapse-gray-1000',\n  '--synapse-dark-gray',\n  '--synapse-gray-dark',\n  '--synapse-gray-light',\n\n  /* UI Specific */\n  '--synapse-link-underline-color',\n  '--synapse-text-color-dark',\n  '--synapse-text-color-disabled',\n  '--synapse-active-tab-text',\n  '--synapse-inactive-tab-text',\n  '--synapse-dropdown-disabled-text',\n]\n\nexport const ThemeGallery = () => {\n  return (\n    <div\n      style={{\n        padding: '20px',\n      }}\n    >\n      <h3>Theme Gallery</h3>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',\n          gap: '20px',\n          marginTop: '20px',\n        }}\n      >\n        {COLOR_VARS.map(v => (\n          <div\n            key={v}\n            style={{\n              border: '1px solid #ddd',\n              padding: '10px',\n              borderRadius: '8px',\n            }}\n          >\n            <div\n              style={{\n                backgroundColor: `var(${v})`,\n                height: '50px',\n                borderRadius: '4px',\n                border: '1px solid #eee',\n              }}\n            />\n            <code\n              style={{ fontSize: '12px', display: 'block', marginTop: '8px' }}\n            >\n              {v}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;AAAA,IAAM,IAAa,8sDAoFnB,GAEa,UAET,kBAAC,OAAD;CACE,OAAO,EACL,SAAS,OACX;WAHF,CAKE,kBAAC,MAAD,EAAA,UAAI,gBAAiB,CAAA,GACrB,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,qBAAqB;GACrB,KAAK;GACL,WAAW;EACb;YAEC,EAAW,KAAI,MACd,kBAAC,OAAD;GAEE,OAAO;IACL,QAAQ;IACR,SAAS;IACT,cAAc;GAChB;aANF,CAQE,kBAAC,OAAD,EACE,OAAO;IACL,iBAAiB,OAAO,EAAE;IAC1B,QAAQ;IACR,cAAc;IACd,QAAQ;GACV,EACD,CAAA,GACD,kBAAC,QAAD;IACE,OAAO;KAAE,UAAU;KAAQ,SAAS;KAAS,WAAW;IAAM;cAE7D;GACG,CAAA,CACH;KApBE,CAoBF,CACN;CACE,CAAA,CACF"}

package/dist/components/TimelinePlot/TimelineLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineLegendItem.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelineLegendItem.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '@mui/system'\nimport { Typography } from '@mui/material'\n\ntype TimelineLegendItemProps = {\n  color: string\n  phaseName: string | null\n}\nconst TimelineLegendItem = ({\n  color,\n  phaseName,\n}: TimelineLegendItemProps): React.ReactNode => {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: '7px' }}>\n      <Box\n        sx={{\n          backgroundColor: color,\n          width: '20px',\n          height: '20px',\n        }}\n      />\n      <Typography variant=\"body1\">{phaseName?.toUpperCase()}</Typography>\n    </Box>\n  )\n}\n\nexport default TimelineLegendItem\n"],"mappings":";;;;;AAQA,IAAM,KAAsB,EAC1B,UACA,mBAGE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO;WAA9D,CACE,kBAAC,GAAD,EACE,IAAI;EACF,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACT,EACD,CAAA,EACF,kBAAC,GAAD;EAAY,SAAQ;YAAS,GAAW,aAAa;EAAc,CAAA,CAC/D"}
+{"version":3,"file":"TimelineLegendItem.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelineLegendItem.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '@mui/system'\nimport { Typography } from '@mui/material'\n\ntype TimelineLegendItemProps = {\n  color: string\n  phaseName: string | null\n}\nconst TimelineLegendItem = ({\n  color,\n  phaseName,\n}: TimelineLegendItemProps): React.ReactNode => {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: '7px' }}>\n      <Box\n        sx={{\n          backgroundColor: color,\n          width: '20px',\n          height: '20px',\n        }}\n      />\n      <Typography variant=\"body1\">{phaseName?.toUpperCase()}</Typography>\n    </Box>\n  )\n}\n\nexport default TimelineLegendItem\n"],"mappings":";;;;;AAQA,IAAM,KAAsB,EAC1B,UACA,mBAGE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;CAAM;WAA7D,CACE,kBAAC,GAAD,EACE,IAAI;EACF,iBAAiB;EACjB,OAAO;EACP,QAAQ;CACV,EACD,CAAA,GACD,kBAAC,GAAD;EAAY,SAAQ;YAAS,GAAW,YAAY;CAAc,CAAA,CAC/D"}

package/dist/components/TimelinePlot/TimelinePhase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n  ColumnSingleValueFilterOperator,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n  timepoints: dayjs.Dayjs[]\n  hoverOverIndex: number\n}\n\nconst getTimepointData = (\n  start: dayjs.Dayjs,\n  rowData: Row[],\n  schema: ObservationCardSchema,\n  hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n  let hoverOverIndex = -1\n  const timepoints = rowData.map((row, index) => {\n    const time = parseFloat(row.values[schema.observationTime]!)\n    const timeUnit = row.values[schema.observationTimeUnits]\n    if (row.rowId == hoverEventRowId) {\n      hoverOverIndex = index\n    }\n    return start.add(time, timeUnit as ManipulateType)\n  })\n  return {\n    timepoints,\n    hoverOverIndex,\n  }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n  if (timepoints.length == 0) {\n    return dayjs().add(1, 'days')\n  }\n  return timepoints.reduce(\n    (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n      if (!maxDateItem || currentDateItem.isAfter(maxDateItem)) {\n        return currentDateItem\n      }\n      return maxDateItem\n    },\n  )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n  // If this phase has no data, return an empty data line\n  if (\n    timepointData.timepoints == undefined ||\n    timepointData.timepoints.length == 0\n  ) {\n    return [\n      {\n        x: [dayjs().format()],\n        y: [0.5],\n        mode: 'lines',\n        line: {\n          color: 'blue',\n          width: 2,\n        },\n        customdata: [],\n        hoverinfo: 'none',\n      },\n    ]\n  }\n\n  // first combine all of the Rows that share the same timepoint\n  const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n    (result, currentTimepoint, index) => {\n      const resultRecord = result as Record<string, Row[]>\n      if (!resultRecord[currentTimepoint.format()]) {\n        resultRecord[currentTimepoint.format()] = []\n      }\n      resultRecord[currentTimepoint.format()].push(rowData[index])\n      return result\n    },\n    {},\n  )\n\n  const data = timepointData.timepoints.map((timepoint, index) => {\n    const utcFormattedTimepoint = timepoint.format()\n    const isHoveredOver = index == timepointData.hoverOverIndex\n    const rows = combinedData[utcFormattedTimepoint]\n    const rowIds = rows.map(row => {\n      return row.rowId\n    })\n    return {\n      x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n      y: [0, 0.5, 1],\n      mode: 'lines',\n      line: {\n        color: isHoveredOver ? 'black' : 'gray',\n        width: isHoveredOver ? 2 : 1,\n      },\n      // Add event into in the customdata\n      customdata: [rowIds, rowIds, rowIds],\n      // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n      hoverinfo: 'none',\n    }\n  })\n  return data\n}\n\nconst getLayout = (\n  start: dayjs.Dayjs,\n  end: dayjs.Dayjs,\n  color: string,\n  timelineData: Plotly.Data[],\n  rowData: Row[],\n  schema: ObservationCardSchema,\n): Partial<Layout> => {\n  const xTickVals = timelineData.map(value => {\n    // return the utcFormattedTimepoint\n    return (value as PlotData).x[0]\n  })\n  const xTickText = timelineData.map(value => {\n    const rowIds = (value as PlotData).customdata[0] as number[] | undefined\n    if (rowIds && rowIds.length > 0) {\n      const count = rowIds.length\n      const rows = rowData?.filter(row => {\n        return rowIds[0] == row.rowId\n      })\n      if (rows && rows.length > 0) {\n        const row = rows[0]\n        const time = parseFloat(row.values[schema.observationTime]!)\n        const timeUnits = row.values[\n          schema.observationTimeUnits\n        ] as ManipulateType\n        const countString = count > 1 ? `(${count})` : ''\n        return `${time} ${timeUnits} ${countString}`\n      }\n    }\n    return ''\n  })\n\n  return {\n    hovermode: 'closest',\n    dragmode: false, //disallow interaction\n    showlegend: false,\n    xaxis: {\n      showgrid: false,\n      showticklabels: true,\n      showline: false,\n      zeroline: false,\n      tickvals: xTickVals,\n      ticktext: xTickText,\n      tickangle: -45,\n    },\n\n    yaxis: {\n      range: [0, 1.25],\n      showgrid: false,\n      zeroline: false,\n      showline: false,\n      showticklabels: false,\n    },\n    // Each phase has a shape\n    shapes: [\n      {\n        type: 'rect',\n        x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n        x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n        y0: 0.25,\n        y1: 0.75,\n        fillcolor: color,\n        opacity: 0.8,\n        line: {\n          width: 0,\n        },\n      },\n    ],\n    margin: {\n      l: 0,\n      r: 0,\n      t: 60,\n      b: 60,\n    },\n    // autosize: false,\n  }\n}\n\ntype TimelinePhaseProps = {\n  name: string\n  color: string\n  rowData: Row[]\n  schema: ObservationCardSchema\n  widthPx: number\n  sql: string\n}\n\nconst TimelinePhase = ({\n  color,\n  rowData,\n  schema,\n  widthPx,\n  sql,\n}: TimelinePhaseProps): React.ReactNode => {\n  const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n  const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n  const [plotKey, setPlotKey] = useState(1)\n  const start = dayjs()\n  // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n  const componentRef = useRef<HTMLDivElement>(null)\n  const rowIds = clickEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n  const selectedRows = rowData?.filter(row => {\n    return rowIds?.includes(row.rowId)\n  })\n\n  const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n\n  const timepointData = useMemo(() => {\n    return getTimepointData(\n      start,\n      rowData,\n      schema,\n      hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n    )\n  }, [hoverEventRowIds, rowData, schema, start])\n\n  const end = getMaxDate(timepointData.timepoints)\n\n  const timelineData = useMemo(() => {\n    return getTimelineData(timepointData, rowData)\n  }, [timepointData, rowData])\n\n  const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n  return (\n    <div ref={componentRef} style={{ width: widthPx }}>\n      <Plot\n        key={`Plot-${color}-${plotKey}`}\n        style={{ width: widthPx, height: '220px' }}\n        data={timelineData}\n        layout={getLayout(start, end, color, timelineData, rowData, schema)}\n        config={{ displayModeBar: false }}\n        useResizeHandler={true}\n        onClick={eventData => {\n          setClickEvent(eventData)\n          setHoverEvent(undefined)\n        }}\n        // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n        // to the click event is invalid.\n        onDoubleClick={() => {\n          setPlotKey(plotKey + 1)\n        }}\n        onHover={eventData => {\n          setHoverEvent(eventData)\n        }}\n        onUnhover={() => {\n          setHoverEvent(undefined)\n        }}\n      />\n      <Dialog\n        onClose={() => setClickEvent(undefined)}\n        open={selectedRows && selectedRows.length > 0}\n      >\n        <DialogContent>\n          <CardContainerLogic\n            topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n            sql={sql}\n            searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n            sqlOperator={ColumnSingleValueFilterOperator.IN}\n            lockedColumn={{ columnName: 'ROW_ID' }}\n            cardConfiguration={{ type: OBSERVATION_CARD }}\n            initialLimit={3}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}
+{"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n  ColumnSingleValueFilterOperator,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n  timepoints: dayjs.Dayjs[]\n  hoverOverIndex: number\n}\n\nconst getTimepointData = (\n  start: dayjs.Dayjs,\n  rowData: Row[],\n  schema: ObservationCardSchema,\n  hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n  let hoverOverIndex = -1\n  const timepoints = rowData.map((row, index) => {\n    const time = parseFloat(row.values[schema.observationTime]!)\n    const timeUnit = row.values[schema.observationTimeUnits]\n    if (row.rowId == hoverEventRowId) {\n      hoverOverIndex = index\n    }\n    return start.add(time, timeUnit as ManipulateType)\n  })\n  return {\n    timepoints,\n    hoverOverIndex,\n  }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n  if (timepoints.length == 0) {\n    return dayjs().add(1, 'days')\n  }\n  return timepoints.reduce(\n    (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n      if (!maxDateItem || currentDateItem.isAfter(maxDateItem)) {\n        return currentDateItem\n      }\n      return maxDateItem\n    },\n  )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n  // If this phase has no data, return an empty data line\n  if (\n    timepointData.timepoints == undefined ||\n    timepointData.timepoints.length == 0\n  ) {\n    return [\n      {\n        x: [dayjs().format()],\n        y: [0.5],\n        mode: 'lines',\n        line: {\n          color: 'blue',\n          width: 2,\n        },\n        customdata: [],\n        hoverinfo: 'none',\n      },\n    ]\n  }\n\n  // first combine all of the Rows that share the same timepoint\n  const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n    (result, currentTimepoint, index) => {\n      const resultRecord = result as Record<string, Row[]>\n      if (!resultRecord[currentTimepoint.format()]) {\n        resultRecord[currentTimepoint.format()] = []\n      }\n      resultRecord[currentTimepoint.format()].push(rowData[index])\n      return result\n    },\n    {},\n  )\n\n  const data = timepointData.timepoints.map((timepoint, index) => {\n    const utcFormattedTimepoint = timepoint.format()\n    const isHoveredOver = index == timepointData.hoverOverIndex\n    const rows = combinedData[utcFormattedTimepoint]\n    const rowIds = rows.map(row => {\n      return row.rowId\n    })\n    return {\n      x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n      y: [0, 0.5, 1],\n      mode: 'lines',\n      line: {\n        color: isHoveredOver ? 'black' : 'gray',\n        width: isHoveredOver ? 2 : 1,\n      },\n      // Add event into in the customdata\n      customdata: [rowIds, rowIds, rowIds],\n      // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n      hoverinfo: 'none',\n    }\n  })\n  return data\n}\n\nconst getLayout = (\n  start: dayjs.Dayjs,\n  end: dayjs.Dayjs,\n  color: string,\n  timelineData: Plotly.Data[],\n  rowData: Row[],\n  schema: ObservationCardSchema,\n): Partial<Layout> => {\n  const xTickVals = timelineData.map(value => {\n    // return the utcFormattedTimepoint\n    return (value as PlotData).x[0]\n  })\n  const xTickText = timelineData.map(value => {\n    const rowIds = (value as PlotData).customdata[0] as number[] | undefined\n    if (rowIds && rowIds.length > 0) {\n      const count = rowIds.length\n      const rows = rowData?.filter(row => {\n        return rowIds[0] == row.rowId\n      })\n      if (rows && rows.length > 0) {\n        const row = rows[0]\n        const time = parseFloat(row.values[schema.observationTime]!)\n        const timeUnits = row.values[\n          schema.observationTimeUnits\n        ] as ManipulateType\n        const countString = count > 1 ? `(${count})` : ''\n        return `${time} ${timeUnits} ${countString}`\n      }\n    }\n    return ''\n  })\n\n  return {\n    hovermode: 'closest',\n    dragmode: false, //disallow interaction\n    showlegend: false,\n    xaxis: {\n      showgrid: false,\n      showticklabels: true,\n      showline: false,\n      zeroline: false,\n      tickvals: xTickVals,\n      ticktext: xTickText,\n      tickangle: -45,\n    },\n\n    yaxis: {\n      range: [0, 1.25],\n      showgrid: false,\n      zeroline: false,\n      showline: false,\n      showticklabels: false,\n    },\n    // Each phase has a shape\n    shapes: [\n      {\n        type: 'rect',\n        x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n        x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n        y0: 0.25,\n        y1: 0.75,\n        fillcolor: color,\n        opacity: 0.8,\n        line: {\n          width: 0,\n        },\n      },\n    ],\n    margin: {\n      l: 0,\n      r: 0,\n      t: 60,\n      b: 60,\n    },\n    // autosize: false,\n  }\n}\n\ntype TimelinePhaseProps = {\n  name: string\n  color: string\n  rowData: Row[]\n  schema: ObservationCardSchema\n  widthPx: number\n  sql: string\n}\n\nconst TimelinePhase = ({\n  color,\n  rowData,\n  schema,\n  widthPx,\n  sql,\n}: TimelinePhaseProps): React.ReactNode => {\n  const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n  const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n  const [plotKey, setPlotKey] = useState(1)\n  const start = dayjs()\n  // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n  const componentRef = useRef<HTMLDivElement>(null)\n  const rowIds = clickEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n  const selectedRows = rowData?.filter(row => {\n    return rowIds?.includes(row.rowId)\n  })\n\n  const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n    | number\n    | undefined\n  )[]\n\n  const timepointData = useMemo(() => {\n    return getTimepointData(\n      start,\n      rowData,\n      schema,\n      hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n    )\n  }, [hoverEventRowIds, rowData, schema, start])\n\n  const end = getMaxDate(timepointData.timepoints)\n\n  const timelineData = useMemo(() => {\n    return getTimelineData(timepointData, rowData)\n  }, [timepointData, rowData])\n\n  const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n  return (\n    <div ref={componentRef} style={{ width: widthPx }}>\n      <Plot\n        key={`Plot-${color}-${plotKey}`}\n        style={{ width: widthPx, height: '220px' }}\n        data={timelineData}\n        layout={getLayout(start, end, color, timelineData, rowData, schema)}\n        config={{ displayModeBar: false }}\n        useResizeHandler={true}\n        onClick={eventData => {\n          setClickEvent(eventData)\n          setHoverEvent(undefined)\n        }}\n        // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n        // to the click event is invalid.\n        onDoubleClick={() => {\n          setPlotKey(plotKey + 1)\n        }}\n        onHover={eventData => {\n          setHoverEvent(eventData)\n        }}\n        onUnhover={() => {\n          setHoverEvent(undefined)\n        }}\n      />\n      <Dialog\n        onClose={() => setClickEvent(undefined)}\n        open={selectedRows && selectedRows.length > 0}\n      >\n        <DialogContent>\n          <CardContainerLogic\n            topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n            sql={sql}\n            searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n            sqlOperator={ColumnSingleValueFilterOperator.IN}\n            lockedColumn={{ columnName: 'ROW_ID' }}\n            cardConfiguration={{ type: OBSERVATION_CARD }}\n            initialLimit={3}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}