@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/labs/OdysseyPickers/Picker.tsx

@@ -1,381 +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 {
-  HTMLAttributes,
-  memo,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  useCallback,
-} from "react";
-import styled from "@emotion/styled";
-
-import {
-  ComposablePicker,
-  type BasePickerProps,
-  type BasePickerType,
-} from "./ComposablePicker.js";
-import {
-  useOdysseyDesignTokens,
-  DesignTokens,
-} from "../../OdysseyDesignTokensContext.js";
-import { Heading6, Paragraph } from "../../Typography.js";
-
-export const StyledOption = styled.li<{ hasAdornment?: boolean }>(
-  ({ hasAdornment }) => ({
-    ...(!hasAdornment && {
-      display: "block !important",
-    }),
-  }),
-);
-
-export const OptionLabelContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(() => ({
-  p: {
-    margin: 0,
-  },
-}));
-
-export const OptionDescription = styled("p", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,
-  color: odysseyDesignTokens.TypographyColorSubordinate,
-}));
-
-export const OptionDetails = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  gap: odysseyDesignTokens.Spacing3,
-  marginBlockStart: odysseyDesignTokens.Spacing2,
-}));
-
-export const OptionDetail = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: odysseyDesignTokens.Spacing1,
-
-  svg: {
-    width: odysseyDesignTokens.Spacing4,
-    color: odysseyDesignTokens.HueNeutral400,
-  },
-}));
-
-export type BaseOptionProps = {
-  muiProps: HTMLAttributes<HTMLLIElement>;
-  odysseyDesignTokens: DesignTokens;
-};
-
-type OptionComponentProps = {
-  hasAdornment?: boolean;
-  key: string | number;
-  muiProps: BaseOptionProps["muiProps"];
-};
-
-export const Option = ({
-  children,
-  hasAdornment = false,
-  key,
-  muiProps,
-}: PropsWithChildren<OptionComponentProps>) => (
-  <StyledOption {...muiProps} hasAdornment={hasAdornment} key={key}>
-    {children}
-  </StyledOption>
-);
-
-export const OptionMetadataComponent = ({
-  metaData,
-  odysseyDesignTokens,
-}: {
-  metaData: OptionMetadata[];
-  odysseyDesignTokens: DesignTokens;
-}) => {
-  return (
-    <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>
-      {metaData.map((meta: OptionMetadata, index: number) => {
-        const { detailText, icon } = meta;
-
-        return (
-          <OptionDetail
-            key={`${index}-${detailText}`}
-            odysseyDesignTokens={odysseyDesignTokens}
-          >
-            {icon}
-            {detailText}
-          </OptionDetail>
-        );
-      })}
-    </OptionDetails>
-  );
-};
-
-export const OptionDescriptionComponent = ({
-  description,
-  odysseyDesignTokens,
-}: {
-  description?: LabelDescription["description"];
-  odysseyDesignTokens: DesignTokens;
-}) => {
-  return (
-    description && (
-      <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>
-        {description}
-      </OptionDescription>
-    )
-  );
-};
-
-export type OptionProps<OptionType> = {
-  option: OptionType;
-};
-
-export const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({
-  muiProps,
-  odysseyDesignTokens,
-  option,
-}: BaseOptionProps & OptionProps<OptionType>) => {
-  const { label, value } = option;
-
-  return (
-    <Option muiProps={muiProps} key={value}>
-      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Paragraph>{label}</Paragraph>
-      </OptionLabelContainer>
-    </Option>
-  );
-};
-
-const OptionLabelDescription = <OptionType extends LabelDescription>({
-  muiProps,
-  odysseyDesignTokens,
-  option,
-}: BaseOptionProps & OptionProps<OptionType>) => {
-  const { description, label, value } = option;
-
-  return (
-    <Option muiProps={muiProps} key={value}>
-      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Heading6 component="p">{label}</Heading6>
-        <OptionDescriptionComponent
-          description={description}
-          odysseyDesignTokens={odysseyDesignTokens}
-        />
-      </OptionLabelContainer>
-    </Option>
-  );
-};
-
-const OptionLabelDescriptionMetadata = <
-  OptionType extends LabelDescriptionMetadata,
->({
-  muiProps,
-  odysseyDesignTokens,
-  option,
-}: BaseOptionProps & OptionProps<OptionType>) => {
-  const { description, label, metaData, value } = option;
-
-  return (
-    <Option key={value} muiProps={muiProps}>
-      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Heading6 component="p">{label}</Heading6>
-        <OptionDescriptionComponent
-          description={description}
-          odysseyDesignTokens={odysseyDesignTokens}
-        />
-      </OptionLabelContainer>
-      <OptionMetadataComponent
-        metaData={metaData}
-        odysseyDesignTokens={odysseyDesignTokens}
-      />
-    </Option>
-  );
-};
-
-export type OptionMetadata = {
-  icon: ReactElement;
-  detailText: string | number;
-};
-
-export type OptionGroupType = { group?: string };
-export type OptionValueType = { value: string | number };
-export type OptionLabelType = { label: string };
-export type BaseOptionType = OptionValueType &
-  OptionGroupType &
-  OptionLabelType;
-export type Metadata = {
-  metaData: OptionMetadata[];
-};
-
-export type OptionLabelOnly = BaseOptionType;
-export type LabelDescription = BaseOptionType & { description?: string };
-export type LabelDescriptionMetadata = LabelDescription & Metadata;
-
-export type PickerProps<
-  OptionType extends LabelDescription | LabelDescriptionMetadata,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;
-
-export type PickerComponentType = {
-  <
-    OptionType extends OptionLabelOnly,
-    HasMultipleChoices extends boolean | undefined,
-    IsCustomValueAllowed extends boolean | undefined,
-  >(
-    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,
-  ): ReactElement;
-  <
-    OptionType extends LabelDescriptionMetadata,
-    HasMultipleChoices extends boolean | undefined,
-    IsCustomValueAllowed extends boolean | undefined,
-  >(
-    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,
-  ): ReactElement;
-  <
-    OptionType extends LabelDescription,
-    HasMultipleChoices extends boolean | undefined,
-    IsCustomValueAllowed extends boolean | undefined,
-  >(
-    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,
-  ): ReactElement;
-  <
-    OptionType extends LabelDescriptionMetadata,
-    HasMultipleChoices extends boolean | undefined,
-    IsCustomValueAllowed extends boolean | undefined,
-  >(
-    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,
-  ): ReactElement;
-};
-
-const Picker: PickerComponentType = <
-  OptionType extends
-    | OptionLabelOnly
-    | LabelDescription
-    | LabelDescriptionMetadata,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
->({
-  ariaDescribedBy,
-  defaultValue,
-  errorMessage,
-  errorMessageList,
-  getIsOptionEqualToValue,
-  hasMultipleChoices,
-  id: idOverride,
-  inputValue,
-  isCustomValueAllowed,
-  isDisabled,
-  isFullWidth = false,
-  isLoading,
-  isOptional = false,
-  isReadOnly,
-  isVirtualized: isVirtualizedProp = false,
-  hint,
-  HintLinkComponent,
-  label,
-  name: nameOverride,
-  onBlur,
-  onChange: onChangeProp,
-  onInputChange: onInputChangeProp,
-  onFocus,
-  options,
-  value,
-  testId,
-  translate,
-}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const customOptionRender = useCallback<
-    (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode
-  >(
-    (muiProps, option) => {
-      const hasDescription = "description" in option && option.description;
-      const hasMetadata = "metaData" in option && option.metaData;
-      const isLabelOnly = !hasMetadata && !hasDescription;
-
-      if (isLabelOnly) {
-        return (
-          <OptionLabelOnlyComponent
-            muiProps={muiProps}
-            odysseyDesignTokens={odysseyDesignTokens}
-            option={option}
-          />
-        );
-      }
-
-      if (hasMetadata) {
-        return (
-          <OptionLabelDescriptionMetadata
-            muiProps={muiProps}
-            odysseyDesignTokens={odysseyDesignTokens}
-            option={option}
-          />
-        );
-      }
-
-      return (
-        <OptionLabelDescription
-          muiProps={muiProps}
-          odysseyDesignTokens={odysseyDesignTokens}
-          option={option}
-        />
-      );
-    },
-    [odysseyDesignTokens],
-  );
-
-  return (
-    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>
-      ariaDescribedBy={ariaDescribedBy}
-      defaultValue={defaultValue}
-      errorMessage={errorMessage}
-      errorMessageList={errorMessageList}
-      getIsOptionEqualToValue={getIsOptionEqualToValue}
-      // getOptionLabel={// getOptionLabel}
-      hasMultipleChoices={hasMultipleChoices}
-      id={idOverride}
-      inputValue={inputValue}
-      isCustomValueAllowed={isCustomValueAllowed}
-      isDisabled={isDisabled}
-      isFullWidth={isFullWidth}
-      isLoading={isLoading}
-      isOptional={isOptional}
-      isReadOnly={isReadOnly}
-      isVirtualized={isVirtualizedProp}
-      hint={hint}
-      HintLinkComponent={HintLinkComponent}
-      label={label}
-      name={nameOverride}
-      onBlur={onBlur}
-      onChange={onChangeProp}
-      onInputChange={onInputChangeProp}
-      onFocus={onFocus}
-      options={options}
-      renderOption={customOptionRender}
-      value={value}
-      testId={testId}
-      translate={translate}
-    />
-  );
-};
-
-// Need the `as BasePickerType` because generics don't get passed through
-const MemoizedPicker = memo(Picker) as BasePickerType;
-
-MemoizedPicker.displayName = "Picker";
-
-export { MemoizedPicker as Picker };

package/src/labs/OdysseyPickers/PickerVirtualizationListBox.tsx

@@ -1,192 +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 {
-  Children,
-  createContext,
-  forwardRef,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { VariableSizeList, ListChildComponentProps } from "react-window";
-import styled from "@emotion/styled";
-import { AutocompleteProps } from "@mui/material";
-
-type SetItemSize = (size: number) => void;
-
-const ListboxContainer = styled.div({
-  width: "100%",
-  height: "100%",
-});
-
-const Row = <Data extends { key: string; props: Record<string, unknown> }[]>({
-  data,
-  index,
-  setItemSize,
-  style,
-}: ListChildComponentProps<Data> & { setItemSize: SetItemSize }) => {
-  const rowRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (rowRef.current) {
-      /**
-       * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly
-       * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908
-       */
-      const firstChild = rowRef.current.firstElementChild;
-      const height = firstChild
-        ? firstChild.clientHeight
-        : rowRef.current.clientHeight;
-
-      setItemSize(height);
-    }
-  }, [index, rowRef, setItemSize]);
-
-  const baseOption = data[index];
-  const { props } = baseOption;
-
-  /**
-   * react-window calculates the absolute positions of the list items, via an inline style, so
-   * we need to add it to each list item that is being rendered in the viewable list window.
-   * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll
-   */
-  const styles = useMemo(
-    () => ({
-      ...style,
-      height: "auto",
-    }),
-    [style],
-  );
-
-  return (
-    <div ref={rowRef}>
-      <li {...props} style={styles} />
-    </div>
-  );
-};
-
-const OuterListboxContext = createContext({});
-
-const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {
-  const outerProps = useContext(OuterListboxContext);
-  return <div ref={ref} {...props} {...outerProps} />;
-});
-
-const useResetCache = (length: number) => {
-  const resetCacheRef = useRef<VariableSizeList>(null);
-  useEffect(() => {
-    if (resetCacheRef.current) {
-      resetCacheRef.current.resetAfterIndex(0, true);
-    }
-  }, [length]);
-  return resetCacheRef;
-};
-
-const PickerVirtualizationListBox = forwardRef<
-  HTMLDivElement,
-  AutocompleteProps<undefined, undefined, undefined, undefined>["ListboxProps"]
->((props = {}, ref) => {
-  const [listHeight, setListHeight] = useState(0);
-
-  const { children, ...other } = props;
-
-  const itemData = Children.toArray(children).flatMap<typeof children>(
-    (child) =>
-      typeof child === "number" || typeof child === "string"
-        ? [child]
-        : [child].concat("children" in child ? Children.toArray(children) : []),
-  );
-
-  const sizeMapRef = useRef<number[]>([]);
-
-  const getListBoxHeight = useCallback(() => {
-    // 8px of padding top/bottom applied by MUI
-    const COMBINED_LISTBOX_PADDING = 16;
-
-    if (itemData.length > OVERSCAN_ROW_COUNT) {
-      // has a max-height of 40vh set in CSS. This is only set because height needs to be a number
-      return 9999;
-    } else {
-      const itemsHeightCalculated = sizeMapRef.current
-        .slice(0, itemData.length)
-        .map((_, index) => sizeMapRef.current[index] || 0)
-        .reduce(
-          (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,
-          0,
-        );
-      return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;
-    }
-  }, [itemData, sizeMapRef]);
-
-  useEffect(() => {
-    if (sizeMapRef.current.length && itemData.length) {
-      setListHeight(getListBoxHeight());
-    }
-  }, [getListBoxHeight, itemData, sizeMapRef]);
-
-  // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons
-  const OVERSCAN_ROW_COUNT = 8;
-
-  const gridRef = useResetCache(itemData.length);
-
-  const setItemSize = useCallback<SetItemSize>(
-    (size) => {
-      gridRef?.current?.resetAfterIndex(0, true);
-      sizeMapRef.current = sizeMapRef.current.concat(size);
-    },
-    [gridRef, sizeMapRef],
-  );
-  const getItemSize = useCallback(
-    // using 45px as a sane default here to avoid a lot of content shift on repaint
-    (index: number) => sizeMapRef.current[index] || 45,
-    [sizeMapRef],
-  );
-
-  return (
-    <ListboxContainer ref={ref}>
-      <OuterListboxContext.Provider value={other}>
-        <VariableSizeList
-          innerElementType="ul"
-          itemData={itemData}
-          itemCount={itemData.length}
-          itemSize={getItemSize}
-          height={listHeight}
-          width="100%"
-          ref={gridRef}
-          outerElementType={OuterListboxElementType}
-          overscanCount={OVERSCAN_ROW_COUNT}
-        >
-          {({ data, index, style }) => (
-            <Row
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              data={data}
-              index={index}
-              style={style}
-              setItemSize={setItemSize}
-            />
-          )}
-        </VariableSizeList>
-      </OuterListboxContext.Provider>
-    </ListboxContainer>
-  );
-});
-
-const MemoizedPickerVirtualizationListBox = memo(PickerVirtualizationListBox);
-
-MemoizedPickerVirtualizationListBox.displayName = "PickerVirtualizationListBox";
-
-export { MemoizedPickerVirtualizationListBox as PickerVirtualizationListBox };