@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/GroupPicker.tsx

@@ -1,261 +0,0 @@
-/*!
- * 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 type {
-  AutocompleteFreeSoloValueMapping,
-  AutocompleteGetTagProps,
-} from "@mui/material/useAutocomplete";
-
-import {
-  Autocomplete as MuiAutocomplete,
-  Avatar as MuiAvatar,
-  Box,
-  InputBase,
-  AutocompleteRenderInputParams,
-} from "@mui/material";
-import { avatarClasses } from "@mui/material/Avatar";
-import { HTMLAttributes, memo, useCallback } from "react";
-
-import { AutocompleteProps } from "../Autocomplete.js";
-import { Field } from "../Field.js";
-import { Subordinate } from "../Typography.js";
-import { Tag } from "../Tag.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { UserIcon, GridIcon, GroupIcon } from "../icons.generated/index.js";
-
-export type GroupPickerOptionType = {
-  appsCount?: number;
-  description: string;
-  groupPushMappingsCount?: number;
-  id: string;
-  logo?: string;
-  name: string;
-  usersCount?: number;
-};
-
-export type GroupPickerProps<
-  GroupPickerOptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = AutocompleteProps<
-  GroupPickerOptionType,
-  HasMultipleChoices,
-  IsCustomValueAllowed
->;
-
-const avatarImageSizeSmall = 16;
-const avatarImageSizeMedium = 24;
-
-const GroupPicker = <
-  OptionType extends GroupPickerOptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
->({
-  hasMultipleChoices,
-  isCustomValueAllowed,
-  isDisabled,
-  isLoading,
-  isOptional = false,
-  isReadOnly,
-  hint,
-  label,
-  onChange,
-  onInputChange,
-  options,
-  value,
-  testId,
-}: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const isOptionEqualToValue = useCallback(
-    (sourceValue: OptionType, targetValue: OptionType) => {
-      return sourceValue.id === targetValue.id;
-    },
-    [],
-  );
-
-  const getOptionLabel = useCallback(
-    (
-      option:
-        | OptionType
-        | AutocompleteFreeSoloValueMapping<IsCustomValueAllowed>,
-    ) => {
-      return (option as OptionType).name;
-    },
-    [],
-  );
-
-  const renderOption = useCallback(
-    (props: HTMLAttributes<HTMLElement>, option: OptionType) => {
-      return (
-        <li {...props} key={option.id}>
-          <Box
-            sx={{
-              alignItems: "top",
-              display: "flex",
-              flexDirection: "row",
-            }}
-          >
-            <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>
-              <MuiAvatar
-                alt={option.name}
-                src={option.logo}
-                sx={{
-                  [`.${avatarClasses.fallback}`]: {
-                    visibility: "hidden",
-                  },
-                  background: "transparent",
-                  height: avatarImageSizeMedium,
-                  width: avatarImageSizeMedium,
-                }}
-              />
-            </Box>
-            <Box>
-              {option.name}
-              <Subordinate>{option.description}</Subordinate>
-              <Box
-                sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                  paddingTop: odysseyDesignTokens.Spacing1,
-                }}
-              >
-                {typeof option.usersCount === "number" && (
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "row",
-                      paddingRight: odysseyDesignTokens.Spacing4,
-                    }}
-                  >
-                    <UserIcon />
-                    {option.usersCount}
-                  </Box>
-                )}
-                {typeof option.appsCount === "number" && (
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "row",
-                      paddingRight: odysseyDesignTokens.Spacing4,
-                    }}
-                  >
-                    <GridIcon />
-                    {option.appsCount}
-                  </Box>
-                )}
-                {typeof option.groupPushMappingsCount === "number" && (
-                  <Box sx={{ display: "flex", flexDirection: "row" }}>
-                    <GroupIcon />
-                    {option.groupPushMappingsCount}
-                  </Box>
-                )}
-              </Box>
-            </Box>
-          </Box>
-        </li>
-      );
-    },
-    [odysseyDesignTokens],
-  );
-
-  const renderTags = useCallback(
-    (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>
-      values.map((option, index) => {
-        const { key, onDelete } = getTagProps({ index });
-        return (
-          <Box
-            key={key}
-            sx={{
-              margin: odysseyDesignTokens.Spacing1,
-            }}
-          >
-            <Tag
-              icon={
-                <MuiAvatar
-                  alt={option.name}
-                  src={option.logo}
-                  sx={{
-                    [`.${avatarClasses.fallback}`]: {
-                      visibility: "hidden",
-                    },
-                    background: "transparent",
-                    height: avatarImageSizeSmall,
-                    width: avatarImageSizeSmall,
-                  }}
-                />
-              }
-              label={option.name}
-              onRemove={onDelete}
-            />
-          </Box>
-        );
-      }),
-    [odysseyDesignTokens],
-  );
-
-  const renderInput = useCallback(
-    ({
-      InputLabelProps,
-      InputProps,
-      ...params
-    }: AutocompleteRenderInputParams) => (
-      <Field
-        fieldType="single"
-        hasVisibleLabel
-        // @ts-expect-error The `htmlFor` prop doesn't exist `HTMLAttributes` for a `<label>` element even though it exists in JavaScript.
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        id={InputLabelProps.htmlFor}
-        hint={hint}
-        label={label}
-        isOptional={isOptional}
-        renderFieldComponent={({ ariaDescribedBy, id }) => (
-          <InputBase
-            {...params}
-            {...InputProps}
-            aria-describedby={ariaDescribedBy}
-            id={id}
-            required={!isOptional}
-          />
-        )}
-      />
-    ),
-    [hint, isOptional, label],
-  );
-
-  return (
-    <MuiAutocomplete
-      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
-      aria-disabled={isDisabled}
-      data-se={testId}
-      disabled={isDisabled}
-      filterSelectedOptions={true}
-      freeSolo={isCustomValueAllowed}
-      getOptionLabel={getOptionLabel}
-      isOptionEqualToValue={isOptionEqualToValue}
-      loading={isLoading}
-      multiple={hasMultipleChoices}
-      onChange={onChange}
-      onInputChange={onInputChange}
-      options={options}
-      readOnly={isReadOnly}
-      renderInput={renderInput}
-      renderOption={renderOption}
-      renderTags={renderTags}
-      value={value}
-    />
-  );
-};
-
-const MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;
-
-export { MemoizedGroupPicker as GroupPicker };

package/src/labs/OdysseyPickers/ComposablePicker.test.tsx

@@ -1,32 +0,0 @@
-/*!
- * Copyright (c) 2024-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 { render, screen } from "@testing-library/react";
-import { ComposablePicker } from "./ComposablePicker.js";
-import { OdysseyProvider } from "../../OdysseyProvider.js";
-
-describe("ComposablePicker", () => {
-  it("displays the ComposablePicker", () => {
-    render(
-      <OdysseyProvider>
-        <ComposablePicker
-          label="picker label"
-          options={[]}
-          renderOption={() => <></>}
-        />
-      </OdysseyProvider>,
-    );
-
-    const input = screen.getByLabelText("picker label");
-    expect(input).toBeVisible();
-  });
-});

package/src/labs/OdysseyPickers/ComposablePicker.tsx

@@ -1,188 +0,0 @@
-/*!
- * 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 { memo, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Autocomplete as MuiAutocomplete,
-  AutocompleteProps as MuiAutocompleteProps,
-} from "@mui/material";
-
-import { AutocompleteProps } from "../../Autocomplete.js";
-import { PickerVirtualizationListBox } from "./PickerVirtualizationListBox.js";
-import { useAutocomplete } from "../../useAutocomplete.js";
-
-export const adornmentSizeValues = ["small", "large"] as const;
-export type AdornmentSize = (typeof adornmentSizeValues)[number];
-
-export type BasePickerProps<
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {
-  adornmentSize?: AdornmentSize;
-  groupOptionsBy?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["groupBy"];
-};
-
-export type BasePickerType = {
-  displayName: string;
-  <
-    OptionType,
-    HasMultipleChoices extends boolean | undefined,
-    IsCustomValueAllowed extends boolean | undefined,
-  >(
-    props: BasePickerProps<
-      OptionType,
-      HasMultipleChoices,
-      IsCustomValueAllowed
-    >,
-  ): ReactNode;
-};
-
-export type ComposablePickerProps<
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {
-  getOptionLabel?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["getOptionLabel"];
-
-  renderOption: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["renderOption"];
-
-  renderTags?: MuiAutocompleteProps<
-    OptionType,
-    HasMultipleChoices,
-    undefined,
-    IsCustomValueAllowed
-  >["renderTags"];
-};
-
-const ComposablePicker = <
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
->({
-  ariaDescribedBy,
-  defaultValue,
-  errorMessage,
-  errorMessageList,
-  getIsOptionEqualToValue,
-  getOptionLabel,
-  groupOptionsBy,
-  hasMultipleChoices,
-  id: idOverride,
-  inputValue,
-  isCustomValueAllowed,
-  isDisabled,
-  isFullWidth = false,
-  isLoading,
-  isOptional = false,
-  isReadOnly,
-  isVirtualized = false,
-  hint,
-  HintLinkComponent,
-  label,
-  name: nameOverride,
-  onBlur,
-  onChange,
-  onInputChange,
-  onFocus,
-  options,
-  renderOption,
-  renderTags,
-  value,
-  testId,
-  translate,
-}: ComposablePickerProps<
-  OptionType,
-  HasMultipleChoices,
-  IsCustomValueAllowed
->) => {
-  const { t } = useTranslation();
-  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =
-    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({
-      ariaDescribedBy,
-      defaultValue,
-      errorMessage,
-      errorMessageList,
-      hasMultipleChoices,
-      hint,
-      HintLinkComponent,
-      inputValue,
-      isFullWidth,
-      isOptional,
-      isVirtualized,
-      label,
-      name: nameOverride,
-      testId,
-      value,
-    });
-
-  return (
-    <MuiAutocomplete
-      {...valueProps}
-      {...inputValueProp}
-      // conditionally provide the ListboxComponent if this needs to be virtualized
-      {...(isVirtualizedRef.current && {
-        ListboxComponent: PickerVirtualizationListBox,
-      })}
-      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
-      aria-disabled={isDisabled}
-      clearText={t("clear.text")}
-      closeText={t("close.text")}
-      disableCloseOnSelect={hasMultipleChoices}
-      disabled={isDisabled}
-      freeSolo={isCustomValueAllowed}
-      filterSelectedOptions={true}
-      fullWidth={isFullWidth}
-      getOptionLabel={getOptionLabel}
-      groupBy={groupOptionsBy}
-      id={idOverride}
-      isOptionEqualToValue={getIsOptionEqualToValue}
-      loading={isLoading}
-      multiple={hasMultipleChoices}
-      onBlur={onBlur}
-      onChange={onChange}
-      onInputChange={onInputChange}
-      onFocus={onFocus}
-      options={options}
-      readOnly={isReadOnly}
-      renderInput={renderInput}
-      renderOption={renderOption}
-      renderTags={renderTags}
-      translate={translate}
-    />
-  );
-};
-
-// Need the `typeof ComposablePicker` because generics don't get passed through
-const MemoizedComposablePicker = memo(
-  ComposablePicker,
-) as typeof ComposablePicker;
-// @ts-expect-error displayName is expected to not be on `typeof ComposablePicker`
-MemoizedComposablePicker.displayName = "ComposablePicker";
-
-export { MemoizedComposablePicker as ComposablePicker };