@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/dist/esm/labs/DataFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataFilters.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","Trans","useTranslation","styled","Autocomplete","Box","Button","CheckboxGroup","Checkbox","CheckIcon","ChevronRightIcon","CloseCircleFilledIcon","FilterIcon","useOdysseyDesignTokens","RadioGroup","Radio","SearchField","Tag","TagList","TextField","Subordinate","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AutocompleteOuterContainer","shouldForwardProp","prop","odysseyDesignTokens","display","alignItems","gap","Spacing2","AutocompleteInnerContainer","width","FilterTags","activeFilters","updateFilterAndInputValues","filtersWithValues","filter","activeFilter","value","filtersToRender","forEach","Array","isArray","filterValue","formattedValue","push","id","label","getFilter","find","removeValueFromFilterAndInput","removedFilterValue","currentFilter","updatedValues","currentValue","filterId","length","undefined","children","map","onRemove","MemoizedFilterTags","displayName","DataFilters","onChangeSearch","onChangeFilters","hasSearchSubmitButton","searchDelayTime","defaultSearchTerm","additionalActions","filters","filtersProp","isDisabled","setFilters","t","initialInputValues","reduce","accumulator","inputValues","setInputValues","searchValue","setSearchValue","isFiltersMenuOpen","setIsFiltersMenuOpen","filtersMenuAnchorElement","setFiltersMenuAnchorElement","isFilterPopoverOpen","setIsFilterPopoverOpen","filterPopoverAnchorElement","setFilterPopoverAnchorElement","filterPopoverCurrentFilter","setFilterPopoverCurrentFilter","menuRef","debouncer","current","clearTimeout","setTimeout","autocompleteOptions","options","updateInputValue","updateFilters","prevInputValues","updatedFilters","handleCheckboxFilterAndInputValueChange","option","checked","currentValues","inputValue","normalizedUpdatedValues","handleAutocompleteFilterChange","clearAllFilters","updatedInputValues","handleFilterSubmit","filterMenu","ariaControls","ariaExpanded","ariaHasPopup","ariaLabel","endIcon","onClick","event","currentTarget","variant","_Menu","anchorOrigin","horizontal","vertical","transformOrigin","anchorEl","onClose","open","PaperProps","ref","latestFilterValue","f","_MenuItem","selected","className","sx","justifyContent","minWidth","paddingBlock","paddingInlineStart","marginRight","_Typography","fontWeight","marginBlockEnd","component","i18nKey","values","toLowerCase","count","autoCompleteValue","maxWidth","_Popover","elevation","marginLeft","marginTop","ev","menuRect","getBoundingClientRect","clickInsideMenu","clientX","left","right","clientY","top","bottom","padding","onSubmit","preventDefault","noValidate","render","hasMultipleChoices","isCustomValueAllowed","onChange","_","type","hasInitialFocus","endAdornment","_IconButton","size","isRequired","checkFilterInputValuesAsArray","isOptionValueInInputValues","some","isChecked","style","placeholder","onClear","target","borderTopWidth","borderTopColor","borderTopStyle","paddingTop","MemoizedDataFilters"],"sources":["../../../src/labs/DataFilters.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  MutableRefObject,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport {\n  IconButton as MuiIconButton,\n  Menu as MuiMenu,\n  MenuItem as MuiMenuItem,\n  Popover as MuiPopover,\n  Typography as MuiTypography,\n} from \"@mui/material\";\nimport { MRT_ColumnDef, MRT_RowData } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\n\nimport { Autocomplete } from \"../Autocomplete.js\";\nimport { Box } from \"../Box.js\";\nimport { Button } from \"../Buttons/index.js\";\nimport { CheckboxGroup } from \"../CheckboxGroup.js\";\nimport { Checkbox } from \"../Checkbox.js\";\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  CloseCircleFilledIcon,\n  FilterIcon,\n} from \"../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { RadioGroup } from \"../RadioGroup.js\";\nimport { Radio } from \"../Radio.js\";\nimport { SearchField } from \"../SearchField.js\";\nimport { Tag } from \"../Tag.js\";\nimport { TagList } from \"../TagList.js\";\nimport { TextField } from \"../TextField.js\";\nimport { Subordinate } from \"../Typography.js\";\n\nconst AutocompleteOuterContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-end\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst AutocompleteInnerContainer = styled(\"div\")({\n  width: \"100%\",\n});\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nexport type DataFilterValue = string | string[] | Option[] | undefined;\n\nexport type UpdateFiltersOrValues = ({\n  filterId,\n  value,\n}: {\n  filterId: string;\n  value: DataFilterValue;\n}) => void;\n\n// This is the shape of each individual filter\nexport type DataFilter = {\n  /**\n   * A unique ID for the filter, typically the same id\n   * as the column it'll be applied to.\n   */\n  id: Exclude<MRT_ColumnDef<MRT_RowData>[\"accessorKey\"], undefined>;\n  /**\n   * `Autocomplete` normally only allows values that exist in the list box. This feature allows you to enter in any value in the text field and have that be the stored value in `Autocomplete`\n   *\n   * NOTE: This only applies when `variant` is `autocomplete`\n   */\n  isCustomValueAllowed?: boolean;\n  /**\n   * The human-friendly name of the filter.\n   */\n  label: string;\n  /**\n   * The type of filter, which determines which filtering control\n   * is shown.\n   */\n  variant?: MRT_ColumnDef<MRT_RowData>[\"filterVariant\"];\n  /**\n   * The current value of the filter. Typically a string, but\n   * filters that allow for multiple selections (such as multi-select)\n   * can accept an array.\n   */\n  value?: DataFilterValue;\n  /**\n   * If the filter control has preset options (such as a select or multi-select),\n   * these are the options provided.\n   */\n  options?: Option[];\n  /**\n   * A callback which renders a custom filter control\n   */\n  render?: (updateFilters: UpdateFiltersOrValues) => ReactNode;\n};\n\n// This is the type of the DataFilters component itself\nexport type DataFiltersProps = {\n  /**\n   * The callback that's fired when the search input changes\n   * (either on change or on submit, based on the value of `hasSearchSubmitButton`).\n   * If this is undefined, the search input will not be shown.\n   */\n  onChangeSearch?: (value: string) => void;\n  /**\n   * The callback that's fired when filter values change.\n   */\n  onChangeFilters?: (filters: Array<DataFilter>) => void;\n  /**\n   * If true, a Search button will be provided alongside the search input\n   * and `onChangeSearch` will fire when the button is clicked, rather than\n   * whenever the input value changes.\n   */\n  hasSearchSubmitButton?: boolean;\n  /**\n   * The debounce time, in milliseconds, for the search input firing\n   * `onChangeSearch` when changed. If `hasSearchSubmitButton` is true,\n   * this doesn't do anything.\n   */\n  searchDelayTime?: number;\n  /**\n   * The starting value of the search input\n   */\n  defaultSearchTerm?: string;\n  /**\n   * A slot for optional additional actions, like buttons, to be displayed\n   * on the opposite side of the top row from the search and filter controls.\n   */\n  additionalActions?: ReactNode;\n  /**\n   * The filters available in the filter menu. If undefined,\n   * the filter menu won't be shown.\n   */\n  filters?: Array<DataFilter>;\n  /**\n   * If true, the filter and search will be disabled\n   */\n  isDisabled?: boolean;\n};\n\ntype FilterTagsProps = {\n  activeFilters: DataFilter[];\n  updateFilterAndInputValues: UpdateFiltersOrValues;\n};\n\ntype FiltersToRender = {\n  id: string;\n  label: string;\n  value: string;\n};\n\nconst FilterTags = ({\n  activeFilters,\n  updateFilterAndInputValues,\n}: FilterTagsProps) => {\n  const filtersWithValues = activeFilters.filter(\n    (activeFilter: DataFilter) => activeFilter.value,\n  );\n  const filtersToRender: FiltersToRender[] = [];\n\n  filtersWithValues.forEach((filter) => {\n    if (Array.isArray(filter.value)) {\n      filter.value.forEach((filterValue) => {\n        const formattedValue =\n          typeof filterValue === \"string\" ? filterValue : filterValue.value;\n        filtersToRender.push({\n          id: filter.id,\n          label: filter.label,\n          value: formattedValue,\n        });\n      });\n    }\n    if (typeof filter.value === \"string\") {\n      filtersToRender.push({\n        id: filter.id,\n        label: filter.label,\n        value: filter.value,\n      });\n    }\n  });\n\n  const getFilter = (id: string) =>\n    filtersWithValues.find((filter) => filter.id === id);\n\n  const removeValueFromFilterAndInput = (\n    id: string,\n    removedFilterValue: string,\n  ) => {\n    const currentFilter = getFilter(id);\n\n    if (currentFilter) {\n      const { value } = currentFilter;\n\n      if (Array.isArray(value)) {\n        const updatedValues = value.filter((currentValue) => {\n          return (currentValue as Option).value !== removedFilterValue;\n        });\n        updateFilterAndInputValues({\n          filterId: id,\n          value:\n            updatedValues.length > 0 ? (updatedValues as Option[]) : undefined,\n        });\n      }\n\n      if (typeof value === \"string\") {\n        updateFilterAndInputValues({\n          filterId: id,\n          value: undefined,\n        });\n      }\n    }\n  };\n\n  return (\n    <TagList>\n      {filtersToRender.map((filter) => (\n        <Tag\n          key={`${filter.label}: ${filter.value}`}\n          label={`${filter.label}: ${filter.value}`}\n          onRemove={() =>\n            removeValueFromFilterAndInput(filter.id, filter.value)\n          }\n        />\n      ))}\n    </TagList>\n  );\n};\n\nconst MemoizedFilterTags = memo(FilterTags);\nMemoizedFilterTags.displayName = \"FilterTags\";\n\nconst DataFilters = ({\n  onChangeSearch,\n  onChangeFilters,\n  hasSearchSubmitButton = false,\n  searchDelayTime = 200,\n  defaultSearchTerm = \"\",\n  additionalActions,\n  filters: filtersProp = [],\n  isDisabled,\n}: DataFiltersProps) => {\n  const [filters, setFilters] = useState<DataFilter[]>(filtersProp);\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const initialInputValues = useMemo(() => {\n    return filtersProp.reduce(\n      (accumulator, filter) => {\n        accumulator[filter.id] = filter.value;\n        return accumulator;\n      },\n      {} as Record<string, DataFilterValue>,\n    );\n  }, [filtersProp]);\n\n  const [inputValues, setInputValues] = useState(initialInputValues);\n\n  const [searchValue, setSearchValue] = useState<string>(defaultSearchTerm);\n\n  const activeFilters = useMemo(() => {\n    return filters.filter((filter) => filter.value);\n  }, [filters]);\n\n  const [isFiltersMenuOpen, setIsFiltersMenuOpen] = useState<boolean>(false);\n\n  const [filtersMenuAnchorElement, setFiltersMenuAnchorElement] = useState<\n    HTMLElement | undefined\n  >();\n\n  const [isFilterPopoverOpen, setIsFilterPopoverOpen] =\n    useState<boolean>(false);\n\n  const [filterPopoverAnchorElement, setFilterPopoverAnchorElement] = useState<\n    HTMLElement | undefined\n  >();\n\n  const [filterPopoverCurrentFilter, setFilterPopoverCurrentFilter] = useState<\n    DataFilter | undefined\n  >();\n\n  const menuRef = useRef<HTMLDivElement>();\n\n  useEffect(() => {\n    onChangeFilters?.(filters);\n  }, [filters, onChangeFilters]);\n\n  const debouncer = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  useEffect(() => {\n    if (!hasSearchSubmitButton) {\n      if (debouncer.current) {\n        clearTimeout(debouncer.current);\n      }\n\n      debouncer.current = setTimeout(() => {\n        onChangeSearch?.(searchValue ?? \"\");\n      }, searchDelayTime);\n    }\n  }, [onChangeSearch, searchValue, searchDelayTime, hasSearchSubmitButton]);\n\n  const autocompleteOptions = useMemo(() => {\n    return filterPopoverCurrentFilter?.options || [];\n  }, [filterPopoverCurrentFilter]);\n\n  const updateInputValue = useCallback<UpdateFiltersOrValues>(\n    ({ filterId, value }) => {\n      setInputValues({ ...inputValues, [filterId]: value });\n    },\n    [inputValues],\n  );\n\n  const updateFilters = useCallback<UpdateFiltersOrValues>(\n    ({ filterId, value }) => {\n      setInputValues((prevInputValues) => ({\n        ...prevInputValues,\n        [filterId]: value,\n      }));\n      const updatedFilters = filtersProp.map((filter) => ({\n        ...filter,\n        value: filter.id === filterId ? value : inputValues[filter.id],\n      }));\n      setFilters(updatedFilters);\n    },\n    [inputValues, filtersProp],\n  );\n\n  const updateFilterAndInputValues = useCallback<UpdateFiltersOrValues>(\n    ({ filterId, value }) => {\n      updateInputValue({ filterId, value });\n      updateFilters({ filterId, value });\n    },\n    [updateFilters, updateInputValue],\n  );\n\n  const handleCheckboxFilterAndInputValueChange = useCallback<\n    (filterId: string, option: Option, checked: boolean) => void\n  >(\n    (filterId, option, checked) => {\n      const currentValues = (inputValues[filterId] as Option[]) || [];\n\n      const updatedValues = checked\n        ? [...currentValues, option]\n        : currentValues.filter(\n            (inputValue) => inputValue.value !== option.value,\n          );\n\n      const normalizedUpdatedValues =\n        updatedValues.length > 0 ? updatedValues : undefined;\n\n      setInputValues({\n        ...inputValues,\n        [filterId]: normalizedUpdatedValues,\n      });\n\n      const updatedFilters = filters.map((filter) => ({\n        ...filter,\n        value:\n          filter.id === filterId\n            ? normalizedUpdatedValues\n            : inputValues[filter.id],\n      }));\n\n      setFilters(updatedFilters);\n    },\n    [filters, inputValues],\n  );\n\n  const handleAutocompleteFilterChange = useCallback<\n    (filterId: string, option: Option[]) => void\n  >(\n    (filterId, option) => {\n      setInputValues({ ...inputValues, [filterId]: option });\n    },\n    [inputValues],\n  );\n\n  const clearAllFilters = useCallback(() => {\n    const updatedInputValues = filtersProp.reduce(\n      (accumulator, filter) => {\n        accumulator[filter.id] = undefined;\n        return accumulator;\n      },\n      {} as Record<string, DataFilterValue>,\n    );\n\n    setInputValues(updatedInputValues);\n\n    const updatedFilters = filtersProp.map((filter) => ({\n      ...filter,\n      value: undefined,\n    }));\n\n    setFilters(updatedFilters);\n  }, [filtersProp]);\n\n  const handleFilterSubmit = useCallback(() => {\n    const updatedFilters = filtersProp.map((filter) => ({\n      ...filter,\n      value: inputValues[filter.id],\n    }));\n\n    setFilters(updatedFilters);\n  }, [inputValues, filtersProp]);\n\n  const filterMenu = useMemo(\n    () => (\n      <>\n        <Box>\n          <Button\n            ariaControls={isFiltersMenuOpen ? \"filters-menu\" : undefined}\n            ariaExpanded={isFiltersMenuOpen ? \"true\" : undefined}\n            ariaHasPopup=\"true\"\n            ariaLabel={t(\"filters.filters.arialabel\")}\n            isDisabled={isDisabled}\n            endIcon={<FilterIcon />}\n            onClick={(event) => {\n              setFiltersMenuAnchorElement(event.currentTarget);\n              setIsFiltersMenuOpen(true);\n            }}\n            variant=\"secondary\"\n          />\n        </Box>\n\n        <MuiMenu\n          anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n          transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n          id=\"filters-menu\"\n          anchorEl={filtersMenuAnchorElement}\n          onClose={() => setIsFiltersMenuOpen(false)}\n          open={isFiltersMenuOpen}\n          PaperProps={{\n            ref: menuRef as MutableRefObject<HTMLDivElement>,\n          }}\n        >\n          {filtersProp.map((filter) => {\n            // Unintuitively, we can't just use filter.value to grab the filter value.\n            // `filter` is the initial set of filters provided to the comoponent, so its\n            // value prop may not reflect the current value of the filter.\n            const latestFilterValue = filters.find(\n              (f) => f.id === filter.id,\n            )?.value;\n\n            return (\n              <MuiMenuItem\n                key={filter.id}\n                aria-controls={isFilterPopoverOpen ? \"filter-form\" : undefined}\n                onClick={(event) => {\n                  setIsFilterPopoverOpen(true);\n                  setFilterPopoverAnchorElement(event.currentTarget);\n                  setFilterPopoverCurrentFilter(filter);\n                }}\n                selected={\n                  filterPopoverCurrentFilter === filter &&\n                  isFilterPopoverOpen === true\n                }\n                className={\n                  filterPopoverCurrentFilter === filter &&\n                  isFilterPopoverOpen === true\n                    ? \"isVisiblySelected\"\n                    : undefined\n                }\n              >\n                <Box\n                  sx={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    width: \"100%\",\n                    minWidth: 180,\n                    paddingBlock: 1,\n                    paddingInlineStart: 2,\n                  }}\n                >\n                  <Box sx={{ marginRight: 2 }}>\n                    <MuiTypography fontWeight=\"500\" sx={{ marginBlockEnd: 2 }}>\n                      {filter.label}\n                    </MuiTypography>\n                    <Subordinate component=\"div\">\n                      {!latestFilterValue ||\n                      (Array.isArray(latestFilterValue) &&\n                        latestFilterValue.length === 0) ? (\n                        <Trans\n                          i18nKey=\"filters.menuitem.any\"\n                          values={{\n                            label: filter.label.toLowerCase(),\n                          }}\n                        />\n                      ) : Array.isArray(latestFilterValue) ? (\n                        <Trans\n                          count={latestFilterValue.length}\n                          i18nKey=\"filters.menuitem.selected\"\n                          values={{\n                            selected: latestFilterValue.length,\n                          }}\n                        />\n                      ) : (\n                        latestFilterValue\n                      )}\n                    </Subordinate>\n                  </Box>\n                  <ChevronRightIcon />\n                </Box>\n              </MuiMenuItem>\n            );\n          })}\n        </MuiMenu>\n      </>\n    ),\n    [\n      isFiltersMenuOpen,\n      isDisabled,\n      filterPopoverCurrentFilter,\n      isFilterPopoverOpen,\n      filtersMenuAnchorElement,\n      filtersProp,\n      filters,\n      t,\n    ],\n  );\n\n  const autoCompleteValue = useMemo(\n    () =>\n      filterPopoverCurrentFilter?.id\n        ? (inputValues[filterPopoverCurrentFilter.id] as Option[])\n        : undefined,\n    [filterPopoverCurrentFilter, inputValues],\n  );\n\n  return (\n    <Box>\n      {/* Upper section */}\n      <Box sx={{ display: \"flex\", justifyContent: \"space-between\" }}>\n        {/* Upper section left (filters and search) */}\n        <Box sx={{ display: \"flex\", gap: 2, width: \"50%\", maxWidth: 480 }}>\n          {/* Filter menu */}\n          {filters.length > 0 && (\n            <>\n              {filterMenu}\n              {/* Filter popover */}\n              <MuiPopover\n                id=\"filter-form\"\n                anchorEl={filterPopoverAnchorElement}\n                // Positions the popover flush with the edge of the parent menu\n                // and at the right shadow elevation. These magic values are simply\n                // to match the default popover offset.\n                elevation={2}\n                sx={{ marginLeft: 2, marginTop: -1 }}\n                open={isFilterPopoverOpen}\n                anchorOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n                onClose={(ev: MouseEvent) => {\n                  if (menuRef.current) {\n                    const menuRect = menuRef.current.getBoundingClientRect();\n                    const clickInsideMenu =\n                      ev.clientX >= menuRect.left &&\n                      ev.clientX <= menuRect.right &&\n                      ev.clientY >= menuRect.top &&\n                      ev.clientY <= menuRect.bottom;\n\n                    if (!clickInsideMenu) {\n                      setIsFiltersMenuOpen(false);\n                    }\n                  }\n                  handleFilterSubmit();\n                  setIsFilterPopoverOpen(false);\n                }}\n              >\n                <Box sx={{ padding: 4, minWidth: 320 }}>\n                  <form\n                    onSubmit={(ev) => {\n                      ev.preventDefault();\n                      handleFilterSubmit();\n                      setIsFilterPopoverOpen(false);\n                      setIsFiltersMenuOpen(false);\n                    }}\n                    noValidate\n                  >\n                    {filterPopoverCurrentFilter?.render ? (\n                      filterPopoverCurrentFilter.render(updateFilters)\n                    ) : (\n                      <>\n                        {/* Autocomplete */}\n                        {filterPopoverCurrentFilter?.variant ===\n                          \"autocomplete\" &&\n                          filterPopoverCurrentFilter?.options && (\n                            <AutocompleteOuterContainer\n                              odysseyDesignTokens={odysseyDesignTokens}\n                            >\n                              <AutocompleteInnerContainer>\n                                <Autocomplete\n                                  hasMultipleChoices\n                                  isCustomValueAllowed={\n                                    filterPopoverCurrentFilter?.isCustomValueAllowed\n                                  }\n                                  label={filterPopoverCurrentFilter.label}\n                                  value={autoCompleteValue}\n                                  onChange={(_, value) => {\n                                    handleAutocompleteFilterChange(\n                                      filterPopoverCurrentFilter.id,\n                                      value as Option[],\n                                    );\n                                  }}\n                                  options={autocompleteOptions}\n                                />\n                              </AutocompleteInnerContainer>\n                              <Button\n                                variant=\"primary\"\n                                endIcon={<CheckIcon />}\n                                type=\"submit\"\n                                ariaLabel={t(\"filters.submit.label\")}\n                              />\n                            </AutocompleteOuterContainer>\n                          )}\n                        {/* Text, Number, or undefined */}\n                        {(filterPopoverCurrentFilter?.variant === \"text\" ||\n                          filterPopoverCurrentFilter?.variant === \"range\" ||\n                          (filterPopoverCurrentFilter &&\n                            filterPopoverCurrentFilter?.variant ==\n                              undefined)) && (\n                          <Box\n                            sx={{\n                              display: \"flex\",\n                              gap: 2,\n                              alignItems: \"flex-end\",\n                            }}\n                          >\n                            <Box sx={{ width: \"100%\" }}>\n                              <TextField\n                                hasInitialFocus\n                                label={filterPopoverCurrentFilter.label}\n                                type={\n                                  filterPopoverCurrentFilter.variant === \"range\"\n                                    ? \"number\"\n                                    : \"text\"\n                                }\n                                value={\n                                  (inputValues[\n                                    filterPopoverCurrentFilter.id\n                                  ] as string) ?? \"\"\n                                }\n                                onChange={(ev) =>\n                                  updateInputValue({\n                                    filterId: filterPopoverCurrentFilter.id,\n                                    value: ev.currentTarget.value,\n                                  })\n                                }\n                                endAdornment={\n                                  inputValues[\n                                    filterPopoverCurrentFilter.id\n                                  ] && (\n                                    <MuiIconButton\n                                      size=\"small\"\n                                      aria-label={t(\"filters.filter.clear\")}\n                                      onClick={() => {\n                                        updateInputValue({\n                                          filterId:\n                                            filterPopoverCurrentFilter.id,\n                                          value: undefined,\n                                        });\n\n                                        updateFilters({\n                                          filterId:\n                                            filterPopoverCurrentFilter.id,\n                                          value: undefined,\n                                        });\n                                      }}\n                                    >\n                                      <CloseCircleFilledIcon />\n                                    </MuiIconButton>\n                                  )\n                                }\n                              />\n                            </Box>\n                            <Button\n                              variant=\"primary\"\n                              endIcon={<CheckIcon />}\n                              type=\"submit\"\n                              ariaLabel={t(\"filters.submit.label\")}\n                            />\n                          </Box>\n                        )}\n\n                        {/* Checkbox */}\n                        {filterPopoverCurrentFilter?.variant ===\n                          \"multi-select\" &&\n                          filterPopoverCurrentFilter?.options && (\n                            <CheckboxGroup\n                              label={filterPopoverCurrentFilter.label}\n                              isRequired\n                            >\n                              {filterPopoverCurrentFilter.options.map(\n                                (option: { label: string; value: string }) => {\n                                  const checkFilterInputValuesAsArray =\n                                    (inputValues[\n                                      filterPopoverCurrentFilter.id\n                                    ] as Option[]) || [];\n                                  const isOptionValueInInputValues =\n                                    checkFilterInputValuesAsArray.some(\n                                      (inputValue) =>\n                                        inputValue.value === option.value,\n                                    );\n                                  return (\n                                    <Checkbox\n                                      key={option.value}\n                                      label={option.label}\n                                      value={option.value}\n                                      isChecked={isOptionValueInInputValues}\n                                      onChange={(_, checked) => {\n                                        handleCheckboxFilterAndInputValueChange(\n                                          filterPopoverCurrentFilter.id,\n                                          option,\n                                          checked,\n                                        );\n                                      }}\n                                    />\n                                  );\n                                },\n                              )}\n                            </CheckboxGroup>\n                          )}\n\n                        {/* Radio */}\n                        {filterPopoverCurrentFilter?.variant === \"select\" &&\n                          filterPopoverCurrentFilter?.options && (\n                            <RadioGroup\n                              label={filterPopoverCurrentFilter.label}\n                              onChange={(_, value) => {\n                                updateFilterAndInputValues({\n                                  filterId: filterPopoverCurrentFilter.id,\n                                  value,\n                                });\n                              }}\n                            >\n                              <Radio\n                                label={t(\"filters.filter.any\")}\n                                value={\"\"}\n                                isChecked={\n                                  !inputValues[filterPopoverCurrentFilter.id]\n                                }\n                              />\n                              <>\n                                {filterPopoverCurrentFilter.options.map(\n                                  (option: {\n                                    label: string;\n                                    value: string;\n                                  }) => (\n                                    <Radio\n                                      key={option.value}\n                                      label={option.label}\n                                      value={option.value}\n                                      isChecked={\n                                        inputValues[\n                                          filterPopoverCurrentFilter.id\n                                        ] === option.value\n                                      }\n                                    />\n                                  ),\n                                )}\n                              </>\n                            </RadioGroup>\n                          )}\n                      </>\n                    )}\n                  </form>\n                </Box>\n              </MuiPopover>\n            </>\n          )}\n\n          {/* Search */}\n          {onChangeSearch && (\n            <form\n              style={{ width: \"100%\" }}\n              onSubmit={(event) => {\n                event.preventDefault();\n                if (hasSearchSubmitButton) {\n                  onChangeSearch(searchValue);\n                }\n              }}\n            >\n              <Box sx={{ display: \"flex\", gap: 2, width: \"100%\" }}>\n                <SearchField\n                  value={searchValue}\n                  label={t(\"filters.search.label\")}\n                  placeholder={t(\"filters.search.label\")}\n                  isDisabled={isDisabled}\n                  onClear={() => {\n                    setSearchValue(\"\");\n                    onChangeSearch(\"\");\n                  }}\n                  onChange={(ev) => setSearchValue(ev.target.value)}\n                />\n                {hasSearchSubmitButton && (\n                  <Box>\n                    <Button\n                      variant=\"primary\"\n                      label={t(\"filters.search.label\")}\n                      onClick={() => onChangeSearch(searchValue)}\n                    />\n                  </Box>\n                )}\n              </Box>\n            </form>\n          )}\n        </Box>\n\n        {/* Upper section right (clear filters & additional actions) */}\n        <Box sx={{ display: \"flex\", gap: 2 }}>\n          {activeFilters.length > 0 && (\n            <Box>\n              <Button\n                variant=\"secondary\"\n                label={t(\"filters.clear.label\")}\n                onClick={clearAllFilters}\n              />\n            </Box>\n          )}\n          {additionalActions}\n        </Box>\n      </Box>\n\n      {/* Lower section */}\n      {activeFilters.length > 0 && (\n        <Box\n          sx={{\n            borderTopWidth: 1,\n            borderTopColor: \"#eeeeee\",\n            borderTopStyle: \"solid\",\n            paddingTop: 4,\n            marginTop: 4,\n          }}\n        >\n          <MemoizedFilterTags\n            activeFilters={activeFilters}\n            updateFilterAndInputValues={updateFilterAndInputValues}\n          />\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataFilters = memo(DataFilters);\nMemoizedDataFilters.displayName = \"DataFilters\";\n\nexport { MemoizedDataFilters as DataFilters };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/DataTable.js

@@ -0,0 +1,478 @@
+import _Checkbox from "@mui/material/Checkbox";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMaterialReactTable, MRT_TableContainer } from "material-react-table";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ArrowBottomIcon, ArrowDownIcon, ArrowTopIcon, ArrowUnsortedIcon, ArrowUpIcon, DragIndicatorIcon, ListIcon, MoreIcon, ShowIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { DataTablePagination } from "./DataTablePagination.js";
+import { DataFilters } from "./DataFilters.js";
+import { Box } from "../Box.js";
+import { MenuButton, MenuItem } from "../index.js";
+import { useTranslation } from "react-i18next";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const densityValues = ["comfortable", "spacious", "compact"];
+const reorderDataRowsLocally = ({
+  currentData,
+  rowId,
+  newIndex
+}) => {
+  const updatedData = [...currentData];
+  const rowIndex = updatedData.findIndex(row => row.id === rowId);
+  if (rowIndex !== -1) {
+    const [removedRow] = updatedData.splice(rowIndex, 1);
+    updatedData.splice(newIndex, 0, removedRow);
+  }
+  return updatedData;
+};
+const DataTable = ({
+  columns,
+  data: dataProp,
+  getRowId,
+  page: pageProp = 1,
+  initialDensity = densityValues[0],
+  resultsPerPage: resultsPerPageProp = 20,
+  fetchDataFn,
+  reorderDataFn,
+  totalRows,
+  hasSearchSubmitButton,
+  searchDelayTime,
+  paginationType = "paged",
+  onRowSelectionChange,
+  rowActionButtons,
+  rowActionMenuItems,
+  hasChangeableDensity,
+  hasColumnResizing,
+  hasColumnVisibility,
+  hasFilters,
+  hasPagination,
+  hasRowReordering,
+  hasRowSelection,
+  hasSearch,
+  hasSorting
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [draggingRow, setDraggingRow] = useState();
+  const [showSkeletons, setShowSkeletons] = useState(true);
+  const [data, setData] = useState(dataProp);
+  const [page, setPage] = useState(pageProp);
+  const [resultsPerPage, setResultsPerPage] = useState(resultsPerPageProp);
+  const [rowSelection, setRowSelection] = useState({});
+  const [sorting, setSorting] = useState([]);
+  const [density, setDensity] = useState(initialDensity);
+  const initialColumnVisibility = useMemo(() => {
+    return columns.reduce((acc, column) => {
+      acc[column.accessorKey] = true;
+      return acc;
+    }, {});
+  }, [columns]);
+  const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [filters, setFilters] = useState();
+  useEffect(() => {
+    setShowSkeletons(false);
+  }, [data]);
+  useEffect(() => {
+    onRowSelectionChange?.(rowSelection);
+  }, [rowSelection, onRowSelectionChange]);
+  const refreshData = useCallback(async () => {
+    setShowSkeletons(true);
+    try {
+      const newData = fetchDataFn({
+        page: page,
+        resultsPerPage: resultsPerPage,
+        sort: sorting,
+        search: globalFilter,
+        filters: filters
+      });
+      setData(newData instanceof Promise ? await newData : newData);
+      setShowSkeletons(false);
+    } catch (error) {
+      console.error(error);
+      setShowSkeletons(false);
+    }
+  }, [page, resultsPerPage, sorting, globalFilter, filters, fetchDataFn]);
+  useEffect(() => {
+    refreshData();
+  }, [refreshData, page, resultsPerPage, sorting, globalFilter, filters]);
+  const handleSortingChange = useCallback(updater => {
+    setSorting(prevSorting => updater instanceof Function ? updater(prevSorting) : sorting);
+  }, [sorting]);
+  const handleColumnVisibility = useCallback(columnId => {
+    setColumnVisibility(prevVisibility => ({
+      ...prevVisibility,
+      [columnId]: !columnVisibility[columnId]
+    }));
+  }, [columnVisibility]);
+  const handleSearch = useCallback(value => {
+    setGlobalFilter(value);
+  }, []);
+  const handleFilters = useCallback(updatedFilters => {
+    setFilters(updatedFilters);
+  }, []);
+  const handleRowSelectionChange = useCallback(updater => {
+    setRowSelection(prevRowSelection => updater instanceof Function ? updater(prevRowSelection) : rowSelection);
+  }, [rowSelection]);
+  const updateRowOrder = useCallback(({
+    rowId,
+    newIndex
+  }) => {
+    if (newIndex < 0) {
+      return;
+    }
+    if (totalRows && newIndex > totalRows) {
+      return;
+    }
+    const newData = reorderDataRowsLocally({
+      currentData: data,
+      rowId,
+      newIndex
+    });
+    setData(newData);
+    reorderDataFn?.({
+      rowId,
+      newIndex
+    });
+    refreshData();
+  }, [data, totalRows, reorderDataFn, refreshData]);
+  const rowVirtualizerInstanceRef = useRef(null);
+  const setHoveredRow = useCallback((table, id) => {
+    if (id) {
+      const nextRow = table.getRow(id);
+      if (nextRow) {
+        table.setHoveredRow(nextRow);
+      }
+    }
+  }, []);
+  const resetDraggingAndHoveredRow = useCallback(table => {
+    setDraggingRow(null);
+    table.setHoveredRow(null);
+  }, [setDraggingRow]);
+  const handleDragHandleKeyDown = useCallback(({
+    table,
+    row,
+    event
+  }) => {
+    const {
+      hoveredRow
+    } = table.getState();
+    const {
+      key
+    } = event;
+    const isSpaceKey = key === " ";
+    const isEnterKey = key === "Enter";
+    const isEscapeKey = key === "Escape";
+    const isArrowDown = key === "ArrowDown";
+    const isArrowUp = key === "ArrowUp";
+    const isSpaceOrEnter = isSpaceKey || isEnterKey;
+    const zeroIndexedPageNumber = page - 1;
+    const currentIndex = row.index + zeroIndexedPageNumber * resultsPerPage;
+    if (isEscapeKey) {
+      resetDraggingAndHoveredRow(table);
+      return;
+    }
+    if (isSpaceOrEnter) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (draggingRow) {
+      if (typeof hoveredRow?.index === "number") {
+        const {
+          index
+        } = hoveredRow;
+        if (isSpaceOrEnter) {
+          const pageRelativeIndex = index + zeroIndexedPageNumber * resultsPerPage;
+          if (pageRelativeIndex !== currentIndex) {
+            updateRowOrder({
+              rowId: row.id,
+              newIndex: pageRelativeIndex
+            });
+            setTimeout(() => {
+              resetDraggingAndHoveredRow(table);
+            }, odysseyDesignTokens.TransitionDurationMainAsNumber);
+            return;
+          }
+        }
+        if (isArrowDown || isArrowUp) {
+          const nextIndex = isArrowDown ? index + 1 : index - 1;
+          setHoveredRow(table, data[nextIndex]?.id);
+        }
+      } else {
+        if (isArrowDown || isArrowUp) {
+          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
+          setHoveredRow(table, data[nextIndex]?.id);
+        }
+      }
+    } else {
+      if (isSpaceOrEnter) {
+        setDraggingRow(row);
+      }
+    }
+  }, [data, draggingRow, odysseyDesignTokens.TransitionDurationMainAsNumber, page, resetDraggingAndHoveredRow, resultsPerPage, setHoveredRow, updateRowOrder]);
+  const handleDragHandleOnDragEnd = useCallback(table => {
+    const cols = table.getAllColumns();
+    cols[0].toggleVisibility();
+    const {
+      draggingRow,
+      hoveredRow
+    } = table.getState();
+    if (draggingRow) {
+      updateRowOrder({
+        newIndex: hoveredRow.index,
+        rowId: draggingRow.id
+      });
+    }
+    setDraggingRow(null);
+  }, [updateRowOrder]);
+  const handleDragHandleOnDragCapture = useCallback(table => {
+    if (!draggingRow && table.getState().draggingRow?.id) {
+      setDraggingRow(table.getState().draggingRow);
+    }
+  }, [draggingRow]);
+  const tableState = useMemo(() => ({
+    density,
+    sorting,
+    globalFilter,
+    columnVisibility,
+    rowSelection,
+    showSkeletons
+  }), [density, sorting, globalFilter, columnVisibility, rowSelection, showSkeletons]);
+  const table = useMaterialReactTable({
+    columns: columns,
+    data: data,
+    state: tableState,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    rowVirtualizerOptions: {
+      overscan: 4
+    },
+    enableRowVirtualization: paginationType === "loadMore" || resultsPerPage > 50,
+    enableColumnResizing: hasColumnResizing,
+    enableDensityToggle: false,
+    enableFullScreenToggle: false,
+    enablePagination: false,
+    enableRowSelection: hasRowSelection,
+    enableFilters: false,
+    enableHiding: false,
+    enableRowOrdering: hasRowReordering,
+    enableRowDragging: hasRowReordering,
+    enableSorting: hasSorting,
+    selectAllMode: "all",
+    enableColumnActions: false,
+    layoutMode: "grid-no-grow",
+    displayColumnDefOptions: {
+      "mrt-row-actions": {
+        muiTableBodyCellProps: {
+          align: "right",
+          sx: {
+            overflow: "visible",
+            width: "unset"
+          }
+        },
+        muiTableHeadCellProps: {
+          align: "right",
+          sx: {
+            width: "unset"
+          }
+        }
+      },
+      "mrt-row-drag": {
+        header: "",
+        muiTableBodyCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto"
+          }
+        },
+        muiTableHeadCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto"
+          }
+        }
+      }
+    },
+    enableGlobalFilter: false,
+    manualFiltering: true,
+    manualSorting: true,
+    getRowId: getRowId,
+    icons: {
+      ArrowDownwardIcon: ArrowDownIcon,
+      DragHandleIcon: DragIndicatorIcon,
+      SyncAltIcon: ArrowUnsortedIcon
+    },
+    onSortingChange: handleSortingChange,
+    onRowSelectionChange: handleRowSelectionChange,
+    enableRowActions: hasRowReordering === true || rowActionButtons || rowActionMenuItems ? true : false,
+    positionActionsColumn: "last",
+    muiTableHeadCellProps: ({
+      column
+    }) => ({
+      className: sorting.find(item => item.id === column.id) ? "isSorted" : "isUnsorted"
+    }),
+    muiTableBodyRowProps: ({
+      table,
+      row
+    }) => ({
+      className: draggingRow?.id === row.id && table.getState().hoveredRow?.id !== row.id ? "isDragging" : table.getState().hoveredRow?.id === row.id && draggingRow?.id !== row.id ? "isDragTarget" : draggingRow?.id === row.id && table.getState().hoveredRow?.id === row.id ? "isDragging isDragTarget" : undefined
+    }),
+    muiRowDragHandleProps: ({
+      table,
+      row
+    }) => ({
+      title: t("table.draghandle.tooltip"),
+      "aria-label": t("table.draghandle.arialabel"),
+      onKeyDown: event => handleDragHandleKeyDown({
+        table,
+        row,
+        event
+      }),
+      onBlur: () => {
+        resetDraggingAndHoveredRow(table);
+      },
+      onDragEnd: () => handleDragHandleOnDragEnd(table),
+      onDragCapture: () => handleDragHandleOnDragCapture(table),
+      sx: {
+        padding: odysseyDesignTokens.Spacing1,
+        borderRadius: odysseyDesignTokens.BorderRadiusMain,
+        "&:focus-visible": {
+          boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,
+          outline: "2px solid transparent",
+          outlineOffset: "1px"
+        }
+      }
+    }),
+    renderRowActions: ({
+      row
+    }) => {
+      const currentIndex = row.index + (page - 1) * resultsPerPage;
+      return _jsxs(Box, {
+        sx: {
+          display: "flex"
+        },
+        children: [rowActionButtons?.(row.original), (rowActionMenuItems || hasRowReordering) && _jsxs(MenuButton, {
+          endIcon: _jsx(MoreIcon, {}),
+          size: "small",
+          buttonVariant: "floating",
+          ariaLabel: t("table.moreactions.arialabel"),
+          menuAlignment: "right",
+          children: [rowActionMenuItems && _jsxs(_Fragment, {
+            children: [rowActionMenuItems(row.original), _jsx("hr", {})]
+          }), _jsxs(MenuItem, {
+            isDisabled: currentIndex <= 0,
+            onClick: () => updateRowOrder({
+              rowId: row.id,
+              newIndex: 0
+            }),
+            children: [_jsx(ArrowTopIcon, {}), " Bring to front"]
+          }), _jsxs(MenuItem, {
+            isDisabled: currentIndex <= 0,
+            onClick: () => updateRowOrder({
+              rowId: row.id,
+              newIndex: currentIndex <= 0 ? 0 : currentIndex - 1
+            }),
+            children: [_jsx(ArrowUpIcon, {}), " Bring forward"]
+          }), _jsxs(MenuItem, {
+            isDisabled: totalRows ? currentIndex >= totalRows - 1 : false,
+            onClick: () => updateRowOrder({
+              rowId: row.id,
+              newIndex: currentIndex + 1
+            }),
+            children: [_jsx(ArrowDownIcon, {}), " Send backward"]
+          }), _jsx(_Fragment, {
+            children: totalRows && _jsxs(MenuItem, {
+              isDisabled: currentIndex >= totalRows - 1,
+              onClick: () => updateRowOrder({
+                rowId: row.id,
+                newIndex: totalRows
+              }),
+              children: [_jsx(ArrowBottomIcon, {}), " Send to back"]
+            })
+          })]
+        })]
+      });
+    }
+  });
+  const tableSettings = useMemo(() => _jsxs(_Fragment, {
+    children: [hasChangeableDensity && _jsx(MenuButton, {
+      endIcon: _jsx(ListIcon, {}),
+      ariaLabel: "Table density",
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: densityValues.map(value => _jsx(MenuItem, {
+          isSelected: density === value,
+          onClick: () => setDensity(value),
+          children: `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+        }, value))
+      })
+    }), hasColumnVisibility && _jsx(MenuButton, {
+      endIcon: _jsx(ShowIcon, {}),
+      ariaLabel: "Show/hide columns",
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: columns.filter(column => column.enableHiding !== false).map(column => _jsxs(MenuItem, {
+          onClick: () => handleColumnVisibility(column.accessorKey),
+          children: [_jsx(_Checkbox, {
+            checked: columnVisibility[column.accessorKey] !== false
+          }), column.header]
+        }, column.accessorKey))
+      })
+    })]
+  }), [columnVisibility, columns, density, hasChangeableDensity, handleColumnVisibility, hasColumnVisibility]);
+  return _jsxs(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4
+    },
+    children: [_jsx(DataFilters, {
+      onChangeSearch: hasSearch ? handleSearch : undefined,
+      onChangeFilters: handleFilters,
+      hasSearchSubmitButton: hasSearchSubmitButton,
+      searchDelayTime: searchDelayTime,
+      additionalActions: tableSettings,
+      filters: hasFilters ? columns.filter(column => column.enableColumnFilter !== false).map(column => {
+        return {
+          id: column.accessorKey,
+          label: column.header,
+          variant: column.filterVariant ?? "text",
+          options: column.filterSelectOptions
+        };
+      }) : undefined
+    }), _jsx(MRT_TableContainer, {
+      table: table
+    }), hasPagination && _jsx(DataTablePagination, {
+      paginationType: paginationType,
+      currentNumberOfResults: data.length,
+      currentPage: page,
+      isPreviousButtonDisabled: page <= 1,
+      isNextButtonDisabled: false,
+      onClickPrevious: () => setPage(page - 1),
+      onClickNext: () => {
+        if (paginationType === "loadMore") {
+          setResultsPerPage(resultsPerPage + resultsPerPageProp);
+        } else {
+          setPage(page + 1);
+        }
+      }
+    })]
+  });
+};
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+export { MemoizedDataTable as DataTable };
+//# sourceMappingURL=DataTable.js.map