@okta/odyssey-react-mui 1.43.0 → 1.44.0

package/dist/esm/labs/DatePickers/DateTimePicker.js

@@ -10,21 +10,22 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
+import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers";
-import styled from "@emotion/styled";
 import { Button } from "../../Buttons/index.js";
 import { DateFieldActionBar } from "../../DatePickers/DateFieldActionBar.js";
 import { DateFieldLocalizationProvider } from "../../DatePickers/DateFieldLocalizationProvider.js";
 import { TimeZonePicker } from "../../DatePickers/TimeZonePicker.js";
 import { useOdysseyDateFields } from "../../DatePickers/useOdysseyDateFields.js";
-import { DateTimeField } from "./DateTimeField.js";
-import { dateTimePickerTheme } from "./dateTimePickerTheme.js";
 import { CalendarIcon, ClockIcon } from "../../icons.generated/index.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
 import { pxToRem } from "../../theme/index.js";
+import { useUniqueId } from "../../useUniqueId.js";
+import { DateTimeField } from "./DateTimeField.js";
+import { dateTimePickerTheme } from "./dateTimePickerTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DateTimePickerSize = {
   maxWidth: `${pxToRem(486)}rem`
@@ -52,6 +53,7 @@ const DateTimePicker = ({
   errorMessage,
   hint,
   HintLinkComponent,
+  id: idOverride,
   isDateEnabled = () => true,
   isDisabled,
   isOptional,
@@ -75,6 +77,7 @@ const DateTimePicker = ({
   } = useTranslation();
   const inputRef = useRef(null);
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const dateTimePickerId = useUniqueId(idOverride);
   const {
     closeCalendar,
     commonIcons,
@@ -143,19 +146,20 @@ const DateTimePicker = ({
       errorMessage: errorMessage,
       hint: hint,
       HintLinkComponent: HintLinkComponent,
+      id: dateTimePickerId,
       inputRef: inputRef,
       isDisabled: isDisabled,
       isOptional: isOptional,
       isReadOnly: isReadOnly,
       label: label,
-      onBlur: onBlur,
-      minDate: minDate,
       maxDate: maxDate,
+      minDate: minDate,
+      onBlur: onBlur,
       onChange: onInputChange,
       timezone: internalTimeZone,
       value: value
     });
-  }, [commonIcons, errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
+  }, [commonIcons, dateTimePickerId, errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
   const slots = useMemo(() => ({
     actionBar: DateFieldActionBar,
     field: muiProps => renderDateTimeField(muiProps),
@@ -200,8 +204,8 @@ const DateTimePicker = ({
             fixedWeekNumber: 6,
             inputRef: inputRef,
             label: label,
-            minDate: minDate,
             maxDate: maxDate,
+            minDate: minDate,
             onChange: formatDateTimeToJsDateStringOnCalendarSelection,
             onClose: closeCalendar,
             open: isOpen,
@@ -209,8 +213,8 @@ const DateTimePicker = ({
             shouldDisableDate: shouldDisableDate,
             shouldDisableMonth: shouldDisableMonth,
             shouldDisableYear: shouldDisableYear,
-            slots: slots,
             slotProps: slotProps,
+            slots: slots,
             timezone: internalTimeZone,
             value: inputValues?.value
           }, language)
@@ -218,9 +222,9 @@ const DateTimePicker = ({
       }), timeZoneOptions && timeZonePickerLabel && _jsx(TimeZonePickerContainer, {
         odysseyDesignTokens: odysseyDesignTokens,
         children: _jsx(TimeZonePicker, {
+          isReadOnly: isReadOnly,
           label: timeZonePickerLabel,
           onTimeZoneChange: onTimeZoneChange,
-          isReadOnly: isReadOnly,
           timeZoneOptions: timeZoneOptions,
           value: internalTimeZone
         })

package/dist/esm/labs/DatePickers/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.js","names":["memo","useCallback","useEffect","useMemo","useRef","useTranslation","DateTimePicker","MuiDateTimePicker","styled","Button","DateFieldActionBar","DateFieldLocalizationProvider","TimeZonePicker","useOdysseyDateFields","DateTimeField","dateTimePickerTheme","CalendarIcon","ClockIcon","useOdysseyDesignTokens","OdysseyThemeProvider","pxToRem","jsx","_jsx","jsxs","_jsxs","DateTimePickerSize","maxWidth","DatePickerContainer","div","marginBlockEnd","DatePickerWidthContainer","width","TimeZonePickerContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing3","defaultValue","defaultValueProp","errorMessage","hint","HintLinkComponent","isDateEnabled","isDisabled","isOptional","isReadOnly","isMonthEnabled","isYearEnabled","label","minDate","minDateProp","maxDate","maxDateProp","onBlur","onCalendarDateChange","onInputChange","onInputChangeProp","timeZone","timeZonePickerLabel","timeZoneOptions","value","valueProp","i18n","t","inputRef","closeCalendar","commonIcons","defaultedLanguageCode","formatDateTimeToUtcIsoDateString","formatDayOfWeek","inputValues","internalTimeZone","isOpen","localeText","onTimeZoneChange","popperElement","setPopperElement","shouldDisableDate","shouldDisableMonth","shouldDisableYear","toggleCalendarVisibility","language","containerRef","current","formatDateTimeToJsDateStringOnCalendarSelection","dateStringFromDateTime","renderDateTimeField","endAdornment","ariaLabel","onClick","size","startIcon","variant","onChange","timezone","slots","actionBar","field","muiProps","leftArrowIcon","ArrowLeftIcon","rightArrowIcon","ArrowRightIcon","switchViewIcon","ChevronDownIcon","slotProps","wrapperVariant","onAccept","onCancel","actions","popper","anchorEl","tabs","dateIcon","timeIcon","toolbar","toolbarPlaceholder","themeOverride","children","ref","dayOfWeekFormatter","disabled","fixedWeekNumber","onClose","open","readOnly","MemoizedDateTimePicker","displayName"],"sources":["../../../../src/labs/DatePickers/DateTimePicker.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 { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  type DateTimePickerSlots,\n  DateTimePicker as MuiDateTimePicker,\n  DateTimePickerProps as MuiDateTimePickerProps,\n  DateTimePickerSlotProps,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"../../Buttons/index.js\";\nimport { DateFieldActionBar } from \"../../DatePickers/DateFieldActionBar.js\";\nimport { DateFieldLocalizationProvider } from \"../../DatePickers/DateFieldLocalizationProvider.js\";\nimport { TimeZonePicker } from \"../../DatePickers/TimeZonePicker.js\";\nimport {\n  useOdysseyDateFields,\n  OdysseyDateFieldProps,\n} from \"../../DatePickers/useOdysseyDateFields.js\";\nimport { DateTimeField, DateTimeFieldProps } from \"./DateTimeField.js\";\nimport { dateTimePickerTheme } from \"./dateTimePickerTheme.js\";\nimport { FieldComponentProps } from \"../../FieldComponentProps.js\";\nimport { CalendarIcon, ClockIcon } from \"../../icons.generated/index.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport { pxToRem } from \"../../theme/index.js\";\n\nexport const DateTimePickerSize = {\n  maxWidth: `${pxToRem(486)}rem`,\n};\n\nconst DatePickerContainer = styled.div({\n  \".MuiFormControl-root\": {\n    marginBlockEnd: 0,\n  },\n});\n\nconst DatePickerWidthContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(() => ({\n  \".MuiInput-root\": {\n    width: \"100%\",\n    maxWidth: DateTimePickerSize.maxWidth,\n  },\n}));\n\nconst TimeZonePickerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: odysseyDesignTokens.Spacing3,\n}));\n\ntype RenderDateTimeFieldProps = {\n  defaultValue: DateTimeFieldProps[\"defaultValue\"];\n  value: DateTimeFieldProps[\"value\"];\n} & MuiDateTimePickerProps<DateTime>;\n\nexport type DateTimePickerProps = OdysseyDateFieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"errorMessage\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"isDisabled\"\n    | \"isReadOnly\"\n    | \"isOptional\"\n  >;\n\nconst DateTimePicker = ({\n  defaultValue: defaultValueProp,\n  errorMessage,\n  hint,\n  HintLinkComponent,\n  isDateEnabled = () => true,\n  isDisabled,\n  isOptional,\n  isReadOnly,\n  isMonthEnabled = () => true,\n  isYearEnabled = () => true,\n  label,\n  minDate: minDateProp,\n  maxDate: maxDateProp,\n  onBlur,\n  onCalendarDateChange,\n  onInputChange: onInputChangeProp,\n  timeZone,\n  timeZonePickerLabel,\n  timeZoneOptions,\n  value: valueProp,\n}: DateTimePickerProps) => {\n  const { i18n, t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const {\n    closeCalendar,\n    commonIcons,\n    defaultedLanguageCode,\n    formatDateTimeToUtcIsoDateString,\n    formatDayOfWeek,\n    inputValues,\n    internalTimeZone,\n    isOpen,\n    localeText,\n    minDate,\n    maxDate,\n    onInputChange,\n    onTimeZoneChange,\n    popperElement,\n    setPopperElement,\n    shouldDisableDate,\n    shouldDisableMonth,\n    shouldDisableYear,\n    toggleCalendarVisibility,\n  } = useOdysseyDateFields({\n    defaultValue: defaultValueProp,\n    errorMessage,\n    isDateEnabled,\n    isMonthEnabled,\n    isYearEnabled,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    onInputChange: onInputChangeProp,\n    timeZone,\n    value: valueProp,\n  });\n\n  const { language } = i18n;\n  const containerRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setPopperElement(containerRef.current);\n  }, [setPopperElement]);\n\n  const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<\n    NonNullable<MuiDateTimePickerProps<DateTime>[\"onChange\"]>\n  >(\n    (value) => {\n      if (value) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime) {\n          onCalendarDateChange?.({\n            value: dateStringFromDateTime,\n            timeZone: internalTimeZone,\n          });\n        }\n      }\n    },\n    [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange],\n  );\n\n  const renderDateTimeField = useCallback(\n    ({ defaultValue, inputRef, value }: RenderDateTimeFieldProps) => {\n      return (\n        <DateTimeField\n          defaultValue={defaultValue}\n          endAdornment={\n            <Button\n              ariaLabel={t(\"picker.labels.date.choose\")}\n              label=\"\"\n              onClick={toggleCalendarVisibility}\n              size=\"small\"\n              startIcon={<commonIcons.CalendarIcon />}\n              variant=\"floating\"\n            />\n          }\n          errorMessage={errorMessage}\n          hint={hint}\n          HintLinkComponent={HintLinkComponent}\n          inputRef={inputRef}\n          isDisabled={isDisabled}\n          isOptional={isOptional}\n          isReadOnly={isReadOnly}\n          label={label}\n          onBlur={onBlur}\n          minDate={minDate}\n          maxDate={maxDate}\n          onChange={onInputChange}\n          timezone={internalTimeZone}\n          value={value}\n        />\n      );\n    },\n    [\n      commonIcons,\n      errorMessage,\n      hint,\n      HintLinkComponent,\n      internalTimeZone,\n      isDisabled,\n      isOptional,\n      isReadOnly,\n      label,\n      onBlur,\n      onInputChange,\n      minDate,\n      maxDate,\n      t,\n      toggleCalendarVisibility,\n    ],\n  );\n\n  const slots = useMemo<DateTimePickerSlots<DateTime>>(\n    () => ({\n      actionBar: DateFieldActionBar,\n      field: (muiProps: RenderDateTimeFieldProps) =>\n        renderDateTimeField(muiProps),\n      leftArrowIcon: () => <commonIcons.ArrowLeftIcon />,\n      rightArrowIcon: () => <commonIcons.ArrowRightIcon />,\n      switchViewIcon: () => <commonIcons.ChevronDownIcon />,\n    }),\n    [commonIcons, renderDateTimeField],\n  );\n\n  const slotProps = useMemo<DateTimePickerSlotProps<DateTime, false>>(\n    () => ({\n      actionBar: ({ wrapperVariant, onAccept, onCancel }) => ({\n        actions:\n          // This is the default behavior but felt more clear to pass them in explicitly\n          wrapperVariant === \"desktop\" ? [] : [\"accept\", \"cancel\"],\n        onAccept,\n        onCancel,\n      }),\n      popper: {\n        anchorEl: popperElement,\n      },\n      tabs: {\n        dateIcon: <CalendarIcon />,\n        timeIcon: <ClockIcon />,\n      },\n      toolbar: {\n        toolbarPlaceholder: \"\",\n      },\n    }),\n    [popperElement],\n  );\n\n  return (\n    <OdysseyThemeProvider themeOverride={dateTimePickerTheme}>\n      <DateFieldLocalizationProvider\n        defaultedLanguageCode={defaultedLanguageCode}\n        localeText={localeText}\n      >\n        <DatePickerContainer>\n          <DatePickerWidthContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            ref={containerRef}\n          >\n            <MuiDateTimePicker\n              dayOfWeekFormatter={formatDayOfWeek}\n              defaultValue={inputValues?.defaultValue}\n              disabled={isDisabled}\n              fixedWeekNumber={6}\n              inputRef={inputRef}\n              key={language}\n              label={label}\n              minDate={minDate}\n              maxDate={maxDate}\n              onChange={formatDateTimeToJsDateStringOnCalendarSelection}\n              onClose={closeCalendar}\n              open={isOpen}\n              readOnly={isReadOnly}\n              shouldDisableDate={shouldDisableDate}\n              shouldDisableMonth={shouldDisableMonth}\n              shouldDisableYear={shouldDisableYear}\n              slots={slots}\n              slotProps={slotProps}\n              timezone={internalTimeZone}\n              value={inputValues?.value}\n            />\n          </DatePickerWidthContainer>\n        </DatePickerContainer>\n\n        {timeZoneOptions && timeZonePickerLabel && (\n          <TimeZonePickerContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <TimeZonePicker\n              label={timeZonePickerLabel}\n              onTimeZoneChange={onTimeZoneChange}\n              isReadOnly={isReadOnly}\n              timeZoneOptions={timeZoneOptions}\n              value={internalTimeZone}\n            />\n          </TimeZonePickerContainer>\n        )}\n      </DateFieldLocalizationProvider>\n    </OdysseyThemeProvider>\n  );\n};\n\nconst MemoizedDateTimePicker = memo(DateTimePicker);\nMemoizedDateTimePicker.displayName = \"DateTimePicker\";\n\nexport { MemoizedDateTimePicker as DateTimePicker };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DateTimePicker.js","names":["styled","DateTimePicker","MuiDateTimePicker","memo","useCallback","useEffect","useMemo","useRef","useTranslation","Button","DateFieldActionBar","DateFieldLocalizationProvider","TimeZonePicker","useOdysseyDateFields","CalendarIcon","ClockIcon","useOdysseyDesignTokens","OdysseyThemeProvider","pxToRem","useUniqueId","DateTimeField","dateTimePickerTheme","jsx","_jsx","jsxs","_jsxs","DateTimePickerSize","maxWidth","DatePickerContainer","div","marginBlockEnd","DatePickerWidthContainer","width","TimeZonePickerContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing3","defaultValue","defaultValueProp","errorMessage","hint","HintLinkComponent","id","idOverride","isDateEnabled","isDisabled","isOptional","isReadOnly","isMonthEnabled","isYearEnabled","label","minDate","minDateProp","maxDate","maxDateProp","onBlur","onCalendarDateChange","onInputChange","onInputChangeProp","timeZone","timeZonePickerLabel","timeZoneOptions","value","valueProp","i18n","t","inputRef","dateTimePickerId","closeCalendar","commonIcons","defaultedLanguageCode","formatDateTimeToUtcIsoDateString","formatDayOfWeek","inputValues","internalTimeZone","isOpen","localeText","onTimeZoneChange","popperElement","setPopperElement","shouldDisableDate","shouldDisableMonth","shouldDisableYear","toggleCalendarVisibility","language","containerRef","current","formatDateTimeToJsDateStringOnCalendarSelection","dateStringFromDateTime","renderDateTimeField","endAdornment","ariaLabel","onClick","size","startIcon","variant","onChange","timezone","slots","actionBar","field","muiProps","leftArrowIcon","ArrowLeftIcon","rightArrowIcon","ArrowRightIcon","switchViewIcon","ChevronDownIcon","slotProps","wrapperVariant","onAccept","onCancel","actions","popper","anchorEl","tabs","dateIcon","timeIcon","toolbar","toolbarPlaceholder","themeOverride","children","ref","dayOfWeekFormatter","disabled","fixedWeekNumber","onClose","open","readOnly","MemoizedDateTimePicker","displayName"],"sources":["../../../../src/labs/DatePickers/DateTimePicker.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 styled from \"@emotion/styled\";\nimport {\n  DateTimePickerSlotProps,\n  type DateTimePickerSlots,\n  DateTimePicker as MuiDateTimePicker,\n  DateTimePickerProps as MuiDateTimePickerProps,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"../../Buttons/index.js\";\nimport { DateFieldActionBar } from \"../../DatePickers/DateFieldActionBar.js\";\nimport { DateFieldLocalizationProvider } from \"../../DatePickers/DateFieldLocalizationProvider.js\";\nimport { TimeZonePicker } from \"../../DatePickers/TimeZonePicker.js\";\nimport {\n  OdysseyDateFieldProps,\n  useOdysseyDateFields,\n} from \"../../DatePickers/useOdysseyDateFields.js\";\nimport { FieldComponentProps } from \"../../FieldComponentProps.js\";\nimport { CalendarIcon, ClockIcon } from \"../../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { useUniqueId } from \"../../useUniqueId.js\";\nimport { DateTimeField, DateTimeFieldProps } from \"./DateTimeField.js\";\nimport { dateTimePickerTheme } from \"./dateTimePickerTheme.js\";\n\nexport const DateTimePickerSize = {\n  maxWidth: `${pxToRem(486)}rem`,\n};\n\nconst DatePickerContainer = styled.div({\n  \".MuiFormControl-root\": {\n    marginBlockEnd: 0,\n  },\n});\n\nconst DatePickerWidthContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(() => ({\n  \".MuiInput-root\": {\n    width: \"100%\",\n    maxWidth: DateTimePickerSize.maxWidth,\n  },\n}));\n\nconst TimeZonePickerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: odysseyDesignTokens.Spacing3,\n}));\n\ntype RenderDateTimeFieldProps = {\n  defaultValue: DateTimeFieldProps[\"defaultValue\"];\n  value: DateTimeFieldProps[\"value\"];\n} & MuiDateTimePickerProps<DateTime>;\n\nexport type DateTimePickerProps = OdysseyDateFieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"errorMessage\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isReadOnly\"\n    | \"isOptional\"\n  >;\n\nconst DateTimePicker = ({\n  defaultValue: defaultValueProp,\n  errorMessage,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDateEnabled = () => true,\n  isDisabled,\n  isOptional,\n  isReadOnly,\n  isMonthEnabled = () => true,\n  isYearEnabled = () => true,\n  label,\n  minDate: minDateProp,\n  maxDate: maxDateProp,\n  onBlur,\n  onCalendarDateChange,\n  onInputChange: onInputChangeProp,\n  timeZone,\n  timeZonePickerLabel,\n  timeZoneOptions,\n  value: valueProp,\n}: DateTimePickerProps) => {\n  const { i18n, t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const dateTimePickerId = useUniqueId(idOverride);\n\n  const {\n    closeCalendar,\n    commonIcons,\n    defaultedLanguageCode,\n    formatDateTimeToUtcIsoDateString,\n    formatDayOfWeek,\n    inputValues,\n    internalTimeZone,\n    isOpen,\n    localeText,\n    minDate,\n    maxDate,\n    onInputChange,\n    onTimeZoneChange,\n    popperElement,\n    setPopperElement,\n    shouldDisableDate,\n    shouldDisableMonth,\n    shouldDisableYear,\n    toggleCalendarVisibility,\n  } = useOdysseyDateFields({\n    defaultValue: defaultValueProp,\n    errorMessage,\n    isDateEnabled,\n    isMonthEnabled,\n    isYearEnabled,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    onInputChange: onInputChangeProp,\n    timeZone,\n    value: valueProp,\n  });\n\n  const { language } = i18n;\n  const containerRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setPopperElement(containerRef.current);\n  }, [setPopperElement]);\n\n  const formatDateTimeToJsDateStringOnCalendarSelection = useCallback<\n    NonNullable<MuiDateTimePickerProps<DateTime>[\"onChange\"]>\n  >(\n    (value) => {\n      if (value) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime) {\n          onCalendarDateChange?.({\n            value: dateStringFromDateTime,\n            timeZone: internalTimeZone,\n          });\n        }\n      }\n    },\n    [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange],\n  );\n\n  const renderDateTimeField = useCallback(\n    ({ defaultValue, inputRef, value }: RenderDateTimeFieldProps) => {\n      return (\n        <DateTimeField\n          defaultValue={defaultValue}\n          endAdornment={\n            <Button\n              ariaLabel={t(\"picker.labels.date.choose\")}\n              label=\"\"\n              onClick={toggleCalendarVisibility}\n              size=\"small\"\n              startIcon={<commonIcons.CalendarIcon />}\n              variant=\"floating\"\n            />\n          }\n          errorMessage={errorMessage}\n          hint={hint}\n          HintLinkComponent={HintLinkComponent}\n          id={dateTimePickerId}\n          inputRef={inputRef}\n          isDisabled={isDisabled}\n          isOptional={isOptional}\n          isReadOnly={isReadOnly}\n          label={label}\n          maxDate={maxDate}\n          minDate={minDate}\n          onBlur={onBlur}\n          onChange={onInputChange}\n          timezone={internalTimeZone}\n          value={value}\n        />\n      );\n    },\n    [\n      commonIcons,\n      dateTimePickerId,\n      errorMessage,\n      hint,\n      HintLinkComponent,\n      internalTimeZone,\n      isDisabled,\n      isOptional,\n      isReadOnly,\n      label,\n      onBlur,\n      onInputChange,\n      minDate,\n      maxDate,\n      t,\n      toggleCalendarVisibility,\n    ],\n  );\n\n  const slots = useMemo<DateTimePickerSlots<DateTime>>(\n    () => ({\n      actionBar: DateFieldActionBar,\n      field: (muiProps: RenderDateTimeFieldProps) =>\n        renderDateTimeField(muiProps),\n      leftArrowIcon: () => <commonIcons.ArrowLeftIcon />,\n      rightArrowIcon: () => <commonIcons.ArrowRightIcon />,\n      switchViewIcon: () => <commonIcons.ChevronDownIcon />,\n    }),\n    [commonIcons, renderDateTimeField],\n  );\n\n  const slotProps = useMemo<DateTimePickerSlotProps<DateTime, false>>(\n    () => ({\n      actionBar: ({ wrapperVariant, onAccept, onCancel }) => ({\n        actions:\n          // This is the default behavior but felt more clear to pass them in explicitly\n          wrapperVariant === \"desktop\" ? [] : [\"accept\", \"cancel\"],\n        onAccept,\n        onCancel,\n      }),\n      popper: {\n        anchorEl: popperElement,\n      },\n      tabs: {\n        dateIcon: <CalendarIcon />,\n        timeIcon: <ClockIcon />,\n      },\n      toolbar: {\n        toolbarPlaceholder: \"\",\n      },\n    }),\n    [popperElement],\n  );\n\n  return (\n    <OdysseyThemeProvider themeOverride={dateTimePickerTheme}>\n      <DateFieldLocalizationProvider\n        defaultedLanguageCode={defaultedLanguageCode}\n        localeText={localeText}\n      >\n        <DatePickerContainer>\n          <DatePickerWidthContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            ref={containerRef}\n          >\n            <MuiDateTimePicker\n              dayOfWeekFormatter={formatDayOfWeek}\n              defaultValue={inputValues?.defaultValue}\n              disabled={isDisabled}\n              fixedWeekNumber={6}\n              inputRef={inputRef}\n              key={language}\n              label={label}\n              maxDate={maxDate}\n              minDate={minDate}\n              onChange={formatDateTimeToJsDateStringOnCalendarSelection}\n              onClose={closeCalendar}\n              open={isOpen}\n              readOnly={isReadOnly}\n              shouldDisableDate={shouldDisableDate}\n              shouldDisableMonth={shouldDisableMonth}\n              shouldDisableYear={shouldDisableYear}\n              slotProps={slotProps}\n              slots={slots}\n              timezone={internalTimeZone}\n              value={inputValues?.value}\n            />\n          </DatePickerWidthContainer>\n        </DatePickerContainer>\n\n        {timeZoneOptions && timeZonePickerLabel && (\n          <TimeZonePickerContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <TimeZonePicker\n              isReadOnly={isReadOnly}\n              label={timeZonePickerLabel}\n              onTimeZoneChange={onTimeZoneChange}\n              timeZoneOptions={timeZoneOptions}\n              value={internalTimeZone}\n            />\n          </TimeZonePickerContainer>\n        )}\n      </DateFieldLocalizationProvider>\n    </OdysseyThemeProvider>\n  );\n};\n\nconst MemoizedDateTimePicker = memo(DateTimePicker);\nMemoizedDateTimePicker.displayName = \"DateTimePicker\";\n\nexport { MemoizedDateTimePicker as DateTimePicker };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/DatePickers/dateTimePickerTheme.js

@@ -10,11 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */import { deepmerge } from "@mui/utils";
 import { digitalClockClasses } from "@mui/x-date-pickers/DigitalClock";
-import { multiSectionDigitalClockSectionClasses, multiSectionDigitalClockClasses } from "@mui/x-date-pickers/MultiSectionDigitalClock";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "@mui/x-date-pickers/MultiSectionDigitalClock";
+import { addSpecificity } from "../../addSpecificity.js";
 import { datePickerTheme, dateStyles } from "../../DatePickers/datePickerTheme.js";
-import { DateTimePickerSize } from "./DateTimePicker.js";
 import { pxToRem } from "../../theme/index.js";
-import { addSpecificity } from "../../addSpecificity.js";
+import { DateTimePickerSize } from "./DateTimePicker.js";
 const DateTimePickerComponentSize = {
   dateCalendarMaxHeight: `${pxToRem(336)}rem`,
   slideTransitionMinHeight: `${pxToRem(240)}rem`

package/dist/esm/labs/DatePickers/dateTimePickerTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePickerTheme.js","names":["deepmerge","digitalClockClasses","multiSectionDigitalClockSectionClasses","multiSectionDigitalClockClasses","datePickerTheme","dateStyles","DateTimePickerSize","pxToRem","addSpecificity","DateTimePickerComponentSize","dateCalendarMaxHeight","slideTransitionMinHeight","theme","components","MuiClock","styleOverrides","clock","width","spacing","height","backgroundColor","palette","grey","pin","primary","light","MuiClockPointer","root","thumb","borderColor","main","MuiDateCalendar","display","maxHeight","MuiPickersArrowSwitcher","button","margin","padding","color","typography","body1","marginInlineStart","svg","spacer","MuiPickersLayout","maxWidth","contentWrapper","gridTemplateColumns","MuiMultiSectionDigitalClock","MuiMultiSectionDigitalClockSection","item","default","marginInline","marginBlockStart","hover","focus","selected","hoverSelected","disabled","MuiDateTimePickerToolbar","dateContainer","flexDirection","marginInlineEnd","timeDigitsContainer","alignItems","ampmSelection","common","white","separator","h5","marginBlock","MuiPickersToolbarButton","border","borderRadius","mixins","subtitle1","MuiPickersToolbarText","position","lineHeight","left","bottom","opacity","content","transition","transform","MuiDayCalendar","slideTransition","minHeight","MuiTimeClock","arrowSwitcher","top","right","dateTimePickerTheme"],"sources":["../../../../src/labs/DatePickers/dateTimePickerTheme.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\n// import { CSSInterpolation } from \"@mui/material/styles\";\nimport { deepmerge } from \"@mui/utils\";\nimport { ThemeOptions } from \"@mui/material\";\nimport { digitalClockClasses } from \"@mui/x-date-pickers/DigitalClock\";\nimport {\n  multiSectionDigitalClockSectionClasses,\n  multiSectionDigitalClockClasses,\n} from \"@mui/x-date-pickers/MultiSectionDigitalClock\";\nimport {\n  datePickerTheme,\n  dateStyles,\n} from \"../../DatePickers/datePickerTheme.js\";\nimport { DateTimePickerSize } from \"./DateTimePicker.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { addSpecificity } from \"../../addSpecificity.js\";\n\nconst DateTimePickerComponentSize = {\n  dateCalendarMaxHeight: `${pxToRem(336)}rem`,\n  slideTransitionMinHeight: `${pxToRem(240)}rem`,\n};\n\nconst theme: ThemeOptions = {\n  components: {\n    MuiClock: {\n      styleOverrides: {\n        clock: ({ theme }) => ({\n          width: `calc(${theme.spacing(9)} * 4)`,\n          height: `calc(${theme.spacing(9)} * 4)`,\n          backgroundColor: theme.palette.grey[50],\n        }),\n        pin: ({ theme }) => ({\n          backgroundColor: theme.palette.primary.light,\n        }),\n      },\n    },\n    MuiClockPointer: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          backgroundColor: theme.palette.primary.light,\n        }),\n        thumb: ({ theme }) => ({\n          borderColor: theme.palette.primary.light,\n          backgroundColor: theme.palette.primary.main,\n        }),\n      },\n    },\n    MuiDateCalendar: {\n      styleOverrides: {\n        root: {\n          display: \"block\",\n          width: \"100%\",\n          maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n          height: DateTimePickerComponentSize.dateCalendarMaxHeight,\n        },\n      },\n    },\n    MuiPickersArrowSwitcher: {\n      styleOverrides: {\n        button: ({ theme }) => ({\n          display: \"flex\",\n          margin: 0,\n          padding: theme.spacing(2),\n          color: theme.typography.body1.color,\n\n          \"& + &\": {\n            marginInlineStart: theme.spacing(2),\n          },\n\n          svg: {\n            display: \"flex\",\n          },\n        }),\n        spacer: ({ theme }) => ({\n          width: theme.spacing(1),\n        }),\n      },\n    },\n    MuiPickersLayout: {\n      styleOverrides: {\n        root: () => ({\n          display: \"block\",\n          width: DateTimePickerSize.maxWidth,\n          maxWidth: DateTimePickerSize.maxWidth,\n        }),\n        contentWrapper: ({ theme }) => ({\n          padding: theme.spacing(3),\n          gridTemplateColumns: \"1fr 16px auto\",\n        }),\n      },\n    },\n    MuiMultiSectionDigitalClock: {\n      styleOverrides: {\n        root: {\n          [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)}, \n            ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)}, \n            ${addSpecificity(2, `.${digitalClockClasses.root}`)}`]: {\n            maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n          },\n        },\n      },\n    },\n    MuiMultiSectionDigitalClockSection: {\n      styleOverrides: {\n        root: {\n          width: \"auto\",\n        },\n        item: ({ theme }) => [\n          dateStyles.default({ theme }),\n          {\n            margin: 0,\n            marginInline: theme.spacing(1),\n            \"& + &\": {\n              marginBlockStart: theme.spacing(1),\n            },\n            \"&:hover\": dateStyles.hover({ theme }),\n            \"&:focus\": dateStyles.focus({ theme }),\n\n            \"&.Mui-selected, &.Mui-selected:focus\": dateStyles.selected({\n              theme,\n            }),\n            \"&.Mui-selected:hover\": dateStyles.hoverSelected({ theme }),\n\n            \"&.Mui-disabled\": dateStyles.disabled({ theme }),\n          },\n        ],\n      },\n    },\n    MuiDateTimePickerToolbar: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          padding: theme.spacing(3),\n        }),\n        dateContainer: ({ theme }) => ({\n          flexDirection: \"row-reverse\",\n\n          button: {\n            \"+ button\": {\n              marginInlineEnd: theme.spacing(2),\n            },\n          },\n        }),\n        timeDigitsContainer: {\n          alignItems: \"center\",\n        },\n        ampmSelection: ({ theme }) => ({\n          margin: 0,\n          marginInlineStart: theme.spacing(3),\n\n          button: {\n            padding: theme.spacing(2),\n\n            \"&:has(.Mui-selected)\": {\n              backgroundColor: theme.palette.primary.main,\n\n              \".Mui-selected\": {\n                color: theme.palette.common.white,\n                \"&::after\": {\n                  display: \"none\",\n                },\n              },\n            },\n          },\n        }),\n        separator: ({ theme }) => ({\n          ...theme.typography.h5,\n          marginBlock: 0,\n          marginInline: theme.spacing(1),\n        }),\n      },\n    },\n    MuiPickersToolbarButton: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          height: \"auto\",\n          padding: 0,\n          margin: 0,\n          border: 0,\n          borderRadius: theme.mixins.borderRadius,\n          backgroundColor: \"transparent\",\n          color: theme.typography.subtitle1.color,\n\n          \"&:hover\": {\n            backgroundColor: \"transparent\",\n          },\n\n          \"& + &\": {\n            marginInlineStart: 0,\n          },\n        }),\n      },\n    },\n    MuiPickersToolbarText: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          ...theme.typography.h5,\n          position: \"relative\",\n          margin: 0,\n          lineHeight: 1,\n          color: \"inherit\",\n\n          \"&::after\": {\n            position: \"absolute\",\n            left: 0,\n            bottom: 0,\n            width: \"100%\",\n            height: 2,\n            backgroundColor: \"currentColor\",\n            opacity: 0,\n            content: \"''\",\n            transition: \"opacity 100ms, transform 200ms\",\n          },\n\n          \"&.Mui-selected\": {\n            color: theme.typography.body1.color,\n\n            \"&::after\": {\n              transform: \"translateY(2px)\",\n              opacity: 1,\n            },\n          },\n        }),\n      },\n    },\n    MuiDayCalendar: {\n      styleOverrides: {\n        slideTransition: {\n          minHeight: DateTimePickerComponentSize.slideTransitionMinHeight,\n        },\n      },\n    },\n    MuiTimeClock: {\n      styleOverrides: {\n        arrowSwitcher: {\n          top: 0,\n          right: 0,\n        },\n      },\n    },\n  },\n};\nexport const dateTimePickerTheme = deepmerge(datePickerTheme, theme);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"dateTimePickerTheme.js","names":["deepmerge","digitalClockClasses","multiSectionDigitalClockClasses","multiSectionDigitalClockSectionClasses","addSpecificity","datePickerTheme","dateStyles","pxToRem","DateTimePickerSize","DateTimePickerComponentSize","dateCalendarMaxHeight","slideTransitionMinHeight","theme","components","MuiClock","styleOverrides","clock","width","spacing","height","backgroundColor","palette","grey","pin","primary","light","MuiClockPointer","root","thumb","borderColor","main","MuiDateCalendar","display","maxHeight","MuiPickersArrowSwitcher","button","margin","padding","color","typography","body1","marginInlineStart","svg","spacer","MuiPickersLayout","maxWidth","contentWrapper","gridTemplateColumns","MuiMultiSectionDigitalClock","MuiMultiSectionDigitalClockSection","item","default","marginInline","marginBlockStart","hover","focus","selected","hoverSelected","disabled","MuiDateTimePickerToolbar","dateContainer","flexDirection","marginInlineEnd","timeDigitsContainer","alignItems","ampmSelection","common","white","separator","h5","marginBlock","MuiPickersToolbarButton","border","borderRadius","mixins","subtitle1","MuiPickersToolbarText","position","lineHeight","left","bottom","opacity","content","transition","transform","MuiDayCalendar","slideTransition","minHeight","MuiTimeClock","arrowSwitcher","top","right","dateTimePickerTheme"],"sources":["../../../../src/labs/DatePickers/dateTimePickerTheme.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { ThemeOptions } from \"@mui/material\";\n// import { CSSInterpolation } from \"@mui/material/styles\";\nimport { deepmerge } from \"@mui/utils\";\nimport { digitalClockClasses } from \"@mui/x-date-pickers/DigitalClock\";\nimport {\n  multiSectionDigitalClockClasses,\n  multiSectionDigitalClockSectionClasses,\n} from \"@mui/x-date-pickers/MultiSectionDigitalClock\";\n\nimport { addSpecificity } from \"../../addSpecificity.js\";\nimport {\n  datePickerTheme,\n  dateStyles,\n} from \"../../DatePickers/datePickerTheme.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { DateTimePickerSize } from \"./DateTimePicker.js\";\n\nconst DateTimePickerComponentSize = {\n  dateCalendarMaxHeight: `${pxToRem(336)}rem`,\n  slideTransitionMinHeight: `${pxToRem(240)}rem`,\n};\n\nconst theme: ThemeOptions = {\n  components: {\n    MuiClock: {\n      styleOverrides: {\n        clock: ({ theme }) => ({\n          width: `calc(${theme.spacing(9)} * 4)`,\n          height: `calc(${theme.spacing(9)} * 4)`,\n          backgroundColor: theme.palette.grey[50],\n        }),\n        pin: ({ theme }) => ({\n          backgroundColor: theme.palette.primary.light,\n        }),\n      },\n    },\n    MuiClockPointer: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          backgroundColor: theme.palette.primary.light,\n        }),\n        thumb: ({ theme }) => ({\n          borderColor: theme.palette.primary.light,\n          backgroundColor: theme.palette.primary.main,\n        }),\n      },\n    },\n    MuiDateCalendar: {\n      styleOverrides: {\n        root: {\n          display: \"block\",\n          width: \"100%\",\n          maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n          height: DateTimePickerComponentSize.dateCalendarMaxHeight,\n        },\n      },\n    },\n    MuiPickersArrowSwitcher: {\n      styleOverrides: {\n        button: ({ theme }) => ({\n          display: \"flex\",\n          margin: 0,\n          padding: theme.spacing(2),\n          color: theme.typography.body1.color,\n\n          \"& + &\": {\n            marginInlineStart: theme.spacing(2),\n          },\n\n          svg: {\n            display: \"flex\",\n          },\n        }),\n        spacer: ({ theme }) => ({\n          width: theme.spacing(1),\n        }),\n      },\n    },\n    MuiPickersLayout: {\n      styleOverrides: {\n        root: () => ({\n          display: \"block\",\n          width: DateTimePickerSize.maxWidth,\n          maxWidth: DateTimePickerSize.maxWidth,\n        }),\n        contentWrapper: ({ theme }) => ({\n          padding: theme.spacing(3),\n          gridTemplateColumns: \"1fr 16px auto\",\n        }),\n      },\n    },\n    MuiMultiSectionDigitalClock: {\n      styleOverrides: {\n        root: {\n          [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)}, \n            ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)}, \n            ${addSpecificity(2, `.${digitalClockClasses.root}`)}`]: {\n            maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n          },\n        },\n      },\n    },\n    MuiMultiSectionDigitalClockSection: {\n      styleOverrides: {\n        root: {\n          width: \"auto\",\n        },\n        item: ({ theme }) => [\n          dateStyles.default({ theme }),\n          {\n            margin: 0,\n            marginInline: theme.spacing(1),\n            \"& + &\": {\n              marginBlockStart: theme.spacing(1),\n            },\n            \"&:hover\": dateStyles.hover({ theme }),\n            \"&:focus\": dateStyles.focus({ theme }),\n\n            \"&.Mui-selected, &.Mui-selected:focus\": dateStyles.selected({\n              theme,\n            }),\n            \"&.Mui-selected:hover\": dateStyles.hoverSelected({ theme }),\n\n            \"&.Mui-disabled\": dateStyles.disabled({ theme }),\n          },\n        ],\n      },\n    },\n    MuiDateTimePickerToolbar: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          padding: theme.spacing(3),\n        }),\n        dateContainer: ({ theme }) => ({\n          flexDirection: \"row-reverse\",\n\n          button: {\n            \"+ button\": {\n              marginInlineEnd: theme.spacing(2),\n            },\n          },\n        }),\n        timeDigitsContainer: {\n          alignItems: \"center\",\n        },\n        ampmSelection: ({ theme }) => ({\n          margin: 0,\n          marginInlineStart: theme.spacing(3),\n\n          button: {\n            padding: theme.spacing(2),\n\n            \"&:has(.Mui-selected)\": {\n              backgroundColor: theme.palette.primary.main,\n\n              \".Mui-selected\": {\n                color: theme.palette.common.white,\n                \"&::after\": {\n                  display: \"none\",\n                },\n              },\n            },\n          },\n        }),\n        separator: ({ theme }) => ({\n          ...theme.typography.h5,\n          marginBlock: 0,\n          marginInline: theme.spacing(1),\n        }),\n      },\n    },\n    MuiPickersToolbarButton: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          height: \"auto\",\n          padding: 0,\n          margin: 0,\n          border: 0,\n          borderRadius: theme.mixins.borderRadius,\n          backgroundColor: \"transparent\",\n          color: theme.typography.subtitle1.color,\n\n          \"&:hover\": {\n            backgroundColor: \"transparent\",\n          },\n\n          \"& + &\": {\n            marginInlineStart: 0,\n          },\n        }),\n      },\n    },\n    MuiPickersToolbarText: {\n      styleOverrides: {\n        root: ({ theme }) => ({\n          ...theme.typography.h5,\n          position: \"relative\",\n          margin: 0,\n          lineHeight: 1,\n          color: \"inherit\",\n\n          \"&::after\": {\n            position: \"absolute\",\n            left: 0,\n            bottom: 0,\n            width: \"100%\",\n            height: 2,\n            backgroundColor: \"currentColor\",\n            opacity: 0,\n            content: \"''\",\n            transition: \"opacity 100ms, transform 200ms\",\n          },\n\n          \"&.Mui-selected\": {\n            color: theme.typography.body1.color,\n\n            \"&::after\": {\n              transform: \"translateY(2px)\",\n              opacity: 1,\n            },\n          },\n        }),\n      },\n    },\n    MuiDayCalendar: {\n      styleOverrides: {\n        slideTransition: {\n          minHeight: DateTimePickerComponentSize.slideTransitionMinHeight,\n        },\n      },\n    },\n    MuiTimeClock: {\n      styleOverrides: {\n        arrowSwitcher: {\n          top: 0,\n          right: 0,\n        },\n      },\n    },\n  },\n};\nexport const dateTimePickerTheme = deepmerge(datePickerTheme, theme);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/GroupPicker.js

@@ -16,10 +16,10 @@ import _Avatar from "@mui/material/Avatar";
 import { avatarClasses } from "@mui/material/Avatar";
 import { memo, useCallback, createElement as _createElement } from "react";
 import { Field } from "../Field.js";
-import { Subordinate } from "../Typography.js";
-import { Tag } from "../Tag.js";
+import { GridIcon, GroupIcon, UserIcon } from "../icons.generated/index.js";
 import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { UserIcon, GridIcon, GroupIcon } from "../icons.generated/index.js";
+import { Tag } from "../Tag.js";
+import { Subordinate } from "../Typography.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const avatarImageSizeSmall = 16;
 const avatarImageSizeMedium = 24;
@@ -141,10 +141,10 @@ const GroupPicker = ({
   }) => _jsx(Field, {
     fieldType: "single",
     hasVisibleLabel: true,
-    id: InputLabelProps.htmlFor,
     hint: hint,
-    label: label,
+    id: InputLabelProps.htmlFor,
     isOptional: isOptional,
+    label: label,
     renderFieldComponent: ({
       ariaDescribedBy,
       id

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

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

package/dist/esm/labs/OdysseyPickers/ComposablePicker.js

@@ -10,11 +10,10 @@ import _Autocomplete from "@mui/material/Autocomplete";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
-import { PickerVirtualizationListBox } from "./PickerVirtualizationListBox.js";
 import { useAutocomplete } from "../../useAutocomplete.js";
+import { PickerVirtualizationListBox } from "./PickerVirtualizationListBox.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const adornmentSizeValues = ["small", "large"];
 const ComposablePicker = ({
@@ -87,8 +86,8 @@ const ComposablePicker = ({
     closeText: t("close.text"),
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,
-    freeSolo: isCustomValueAllowed,
     filterSelectedOptions: true,
+    freeSolo: isCustomValueAllowed,
     fullWidth: isFullWidth,
     getOptionLabel: getOptionLabel,
     groupBy: groupOptionsBy,
@@ -99,8 +98,8 @@ const ComposablePicker = ({
     noOptionsText: emptyOptionsText,
     onBlur: onBlur,
     onChange: onChange,
-    onInputChange: onInputChange,
     onFocus: onFocus,
+    onInputChange: onInputChange,
     options: options,
     readOnly: isReadOnly,
     renderInput: renderInput,

package/dist/esm/labs/OdysseyPickers/ComposablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposablePicker.js","names":["memo","useTranslation","PickerVirtualizationListBox","useAutocomplete","jsx","_jsx","adornmentSizeValues","ComposablePicker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","getOptionLabel","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","renderOption","renderTags","value","testId","translate","t","inputValueProp","isVirtualizedRef","renderInput","valueProps","_Autocomplete","current","ListboxComponent","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","groupBy","isOptionEqualToValue","loading","multiple","noOptionsText","readOnly","MemoizedComposablePicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/ComposablePicker.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 { HTMLAttributes, Key, memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n} from \"@mui/material\";\n\nimport { AutocompleteProps } from \"../../Autocomplete.js\";\nimport { PickerVirtualizationListBox } from \"./PickerVirtualizationListBox.js\";\nimport { useAutocomplete } from \"../../useAutocomplete.js\";\n\nexport const adornmentSizeValues = [\"small\", \"large\"] as const;\nexport type AdornmentSize = (typeof adornmentSizeValues)[number];\n\nexport type BaseRenderOptionProps = HTMLAttributes<HTMLLIElement> & {\n  key: Key;\n};\n\nexport type BasePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n  emptyOptionsText?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"noOptionsText\"];\n  groupOptionsBy?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"groupBy\"];\n};\n\nexport type BasePickerType = {\n  displayName: string;\n  <\n    OptionType,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: BasePickerProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactNode;\n};\n\nexport type ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  getOptionLabel?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  renderOption: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderOption\"];\n\n  renderTags?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderTags\"];\n};\n\nconst ComposablePicker = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  getOptionLabel,\n  groupOptionsBy,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  renderOption,\n  renderTags,\n  value,\n  testId,\n  translate,\n}: ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      fullWidth={isFullWidth}\n      getOptionLabel={getOptionLabel}\n      groupBy={groupOptionsBy}\n      id={idOverride}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={emptyOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof ComposablePicker` because generics don't get passed through\nconst MemoizedComposablePicker = memo(\n  ComposablePicker,\n) as typeof ComposablePicker;\n// @ts-expect-error displayName is expected to not be on `typeof ComposablePicker`\nMemoizedComposablePicker.displayName = \"ComposablePicker\";\n\nexport { MemoizedComposablePicker as ComposablePicker };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAA8BA,IAAI,QAAmB,OAAO;AAC5D,SAASC,cAAc,QAAQ,eAAe;AAO9C,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,eAAe,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3D,OAAO,MAAMC,mBAAmB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;AAqE9D,MAAMC,gBAAgB,GAAGA,CAIvB;EACAC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,cAAc;EACdC,cAAc;EACdC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,GAAG,KAAK;EACrBC,IAAI;EACJC,iBAAiB;EACjBC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,OAAO;EACPC,YAAY;EACZC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC;AAKF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC;EAC9B,MAAM;IAAE0C,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjE3C,eAAe,CAAuD;IACpEK,eAAe;IACfC,YAAY;IACZE,YAAY;IACZC,gBAAgB;IAChBI,kBAAkB;IAClBW,IAAI;IACJC,iBAAiB;IACjBT,UAAU;IACVG,WAAW;IACXE,UAAU;IACVE,aAAa;IACbG,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBS,MAAM;IACND;EACF,CAAC,CAAC;EAEJ,OACElC,IAAA,CAAA0C,aAAA;IAAA,GACMD,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACI,OAAO,IAAI;MAC/BC,gBAAgB,EAAE/C;IACpB,CAAC;IAED,iBAAemB,UAAW;IAC1B6B,SAAS,EAAER,CAAC,CAAC,YAAY,CAAE;IAC3BS,SAAS,EAAET,CAAC,CAAC,YAAY,CAAE;IAC3BU,oBAAoB,EAAEpC,kBAAmB;IACzCqC,QAAQ,EAAEhC,UAAW;IACrBiC,QAAQ,EAAElC,oBAAqB;IAC/BmC,qBAAqB,EAAE,IAAK;IAC5BC,SAAS,EAAElC,WAAY;IACvBR,cAAc,EAAEA,cAAe;IAC/B2C,OAAO,EAAE1C,cAAe;IACxBE,EAAE,EAAEC,UAAW;IACfwC,oBAAoB,EAAE7C,uBAAwB;IAC9C8C,OAAO,EAAEpC,SAAU;IACnBqC,QAAQ,EAAE5C,kBAAmB;IAC7B6C,aAAa,EAAEnD,gBAAiB;IAChCsB,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjB0B,QAAQ,EAAErC,UAAW;IACrBoB,WAAW,EAAEA,WAAY;IACzBR,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMsB,wBAAwB,GAAG/D,IAAI,CACnCO,gBACF,CAA4B;AAE5BwD,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIxD,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ComposablePicker.js","names":["memo","useTranslation","useAutocomplete","PickerVirtualizationListBox","jsx","_jsx","adornmentSizeValues","ComposablePicker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","getOptionLabel","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","renderOption","renderTags","value","testId","translate","t","inputValueProp","isVirtualizedRef","renderInput","valueProps","_Autocomplete","current","ListboxComponent","clearText","closeText","disableCloseOnSelect","disabled","filterSelectedOptions","freeSolo","fullWidth","groupBy","isOptionEqualToValue","loading","multiple","noOptionsText","readOnly","MemoizedComposablePicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/ComposablePicker.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  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n} from \"@mui/material\";\nimport { HTMLAttributes, Key, memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { AutocompleteProps } from \"../../Autocomplete.js\";\nimport { useAutocomplete } from \"../../useAutocomplete.js\";\nimport { PickerVirtualizationListBox } from \"./PickerVirtualizationListBox.js\";\n\nexport const adornmentSizeValues = [\"small\", \"large\"] as const;\nexport type AdornmentSize = (typeof adornmentSizeValues)[number];\n\nexport type BaseRenderOptionProps = HTMLAttributes<HTMLLIElement> & {\n  key: Key;\n};\n\nexport type BasePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  adornmentSize?: AdornmentSize;\n  emptyOptionsText?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"noOptionsText\"];\n  groupOptionsBy?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"groupBy\"];\n};\n\nexport type BasePickerType = {\n  displayName: string;\n  <\n    OptionType,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: BasePickerProps<\n      OptionType,\n      HasMultipleChoices,\n      IsCustomValueAllowed\n    >,\n  ): ReactNode;\n};\n\nexport type ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n  getOptionLabel?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  renderOption: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderOption\"];\n\n  renderTags?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"renderTags\"];\n};\n\nconst ComposablePicker = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  getOptionLabel,\n  groupOptionsBy,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  renderOption,\n  renderTags,\n  value,\n  testId,\n  translate,\n}: ComposablePickerProps<\n  OptionType,\n  HasMultipleChoices,\n  IsCustomValueAllowed\n>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      filterSelectedOptions={true}\n      freeSolo={isCustomValueAllowed}\n      fullWidth={isFullWidth}\n      getOptionLabel={getOptionLabel}\n      groupBy={groupOptionsBy}\n      id={idOverride}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={emptyOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onFocus={onFocus}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      renderOption={renderOption}\n      renderTags={renderTags}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof ComposablePicker` because generics don't get passed through\nconst MemoizedComposablePicker = memo(\n  ComposablePicker,\n) as typeof ComposablePicker;\n// @ts-expect-error displayName is expected to not be on `typeof ComposablePicker`\nMemoizedComposablePicker.displayName = \"ComposablePicker\";\n\nexport { MemoizedComposablePicker as ComposablePicker };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAA8BA,IAAI,QAAmB,OAAO;AAC5D,SAASC,cAAc,QAAQ,eAAe;AAG9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,2BAA2B,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/E,OAAO,MAAMC,mBAAmB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;AAqE9D,MAAMC,gBAAgB,GAAGA,CAIvB;EACAC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,cAAc;EACdC,cAAc;EACdC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,GAAG,KAAK;EACrBC,IAAI;EACJC,iBAAiB;EACjBC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,OAAO;EACPC,YAAY;EACZC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC;AAKF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC;EAC9B,MAAM;IAAE0C,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjE5C,eAAe,CAAuD;IACpEM,eAAe;IACfC,YAAY;IACZE,YAAY;IACZC,gBAAgB;IAChBI,kBAAkB;IAClBW,IAAI;IACJC,iBAAiB;IACjBT,UAAU;IACVG,WAAW;IACXE,UAAU;IACVE,aAAa;IACbG,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBS,MAAM;IACND;EACF,CAAC,CAAC;EAEJ,OACElC,IAAA,CAAA0C,aAAA;IAAA,GACMD,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACI,OAAO,IAAI;MAC/BC,gBAAgB,EAAE9C;IACpB,CAAC;IAED,iBAAekB,UAAW;IAC1B6B,SAAS,EAAER,CAAC,CAAC,YAAY,CAAE;IAC3BS,SAAS,EAAET,CAAC,CAAC,YAAY,CAAE;IAC3BU,oBAAoB,EAAEpC,kBAAmB;IACzCqC,QAAQ,EAAEhC,UAAW;IACrBiC,qBAAqB,EAAE,IAAK;IAC5BC,QAAQ,EAAEnC,oBAAqB;IAC/BoC,SAAS,EAAElC,WAAY;IACvBR,cAAc,EAAEA,cAAe;IAC/B2C,OAAO,EAAE1C,cAAe;IACxBE,EAAE,EAAEC,UAAW;IACfwC,oBAAoB,EAAE7C,uBAAwB;IAC9C8C,OAAO,EAAEpC,SAAU;IACnBqC,QAAQ,EAAE5C,kBAAmB;IAC7B6C,aAAa,EAAEnD,gBAAiB;IAChCsB,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBD,aAAa,EAAEA,aAAc;IAC7BE,OAAO,EAAEA,OAAQ;IACjB0B,QAAQ,EAAErC,UAAW;IACrBoB,WAAW,EAAEA,WAAY;IACzBR,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMsB,wBAAwB,GAAG/D,IAAI,CACnCO,gBACF,CAA4B;AAE5BwD,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIxD,gBAAgB","ignoreList":[]}

package/dist/esm/labs/OdysseyPickers/Picker.js

@@ -10,11 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Fragment, memo, useCallback, createElement as _createElement } from "react";
 import styled from "@emotion/styled";
-import { ComposablePicker } from "./ComposablePicker.js";
+import { Fragment, memo, useCallback, createElement as _createElement } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Heading6, Paragraph } from "../../Typography.js";
+import { ComposablePicker } from "./ComposablePicker.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const StyledOption = styled.li(({
   hasAdornment
@@ -71,8 +71,8 @@ export const Option = ({
   } = muiProps;
   return _createElement(StyledOption, {
     ...props,
-    key: key,
-    hasAdornment: hasAdornment
+    hasAdornment: hasAdornment,
+    key: key
   }, children);
 };
 export const OptionMetadataComponent = ({

package/dist/esm/labs/OdysseyPickers/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","names":["Fragment","memo","useCallback","createElement","_createElement","styled","ComposablePicker","useOdysseyDesignTokens","Heading6","Paragraph","jsxs","_jsxs","jsx","_jsx","StyledOption","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","OptionMetadataComponent","metaData","map","meta","index","detailText","icon","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","OptionLabelDescription","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","hasDescription","hasMetadata","isLabelOnly","renderOption","MemoizedPicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.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  Fragment,\n  memo,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\n\nimport {\n  ComposablePicker,\n  type BasePickerProps,\n  type BasePickerType,\n  type BaseRenderOptionProps,\n} from \"./ComposablePicker.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n  ({ hasAdornment }) => ({\n    ...(!hasAdornment && {\n      display: \"block !important\",\n    }),\n  }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n  p: {\n    margin: 0,\n  },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n  color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing1,\n\n  svg: {\n    width: odysseyDesignTokens.Spacing4,\n    color: odysseyDesignTokens.HueNeutral400,\n  },\n}));\n\nexport type BaseOptionProps = {\n  muiProps: BaseRenderOptionProps;\n  odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n  hasAdornment?: boolean;\n  muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n  children,\n  hasAdornment = false,\n  muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n  const { key, ...props } = muiProps;\n  return (\n    <StyledOption {...props} key={key} hasAdornment={hasAdornment}>\n      {children}\n    </StyledOption>\n  );\n};\n\nexport const OptionMetadataComponent = ({\n  metaData,\n  odysseyDesignTokens,\n}: {\n  metaData: OptionMetadata[];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n      {metaData.map((meta: OptionMetadata, index: number) => {\n        const { detailText, icon } = meta;\n        return (\n          <OptionDetail\n            key={`${detailText}-${index}`}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {icon}\n            {detailText}\n          </OptionDetail>\n        );\n      })}\n    </OptionDetails>\n  );\n};\n\nexport const OptionDescriptionComponent = ({\n  description,\n  odysseyDesignTokens,\n}: {\n  description?: LabelDescription[\"description\"];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    description && (\n      <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n        {description}\n      </OptionDescription>\n    )\n  );\n};\n\nexport type OptionProps<OptionType> = {\n  option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Paragraph>{label}</Paragraph>\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescriptionMetadata = <\n  OptionType extends LabelDescriptionMetadata,\n>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label, metaData } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n      <OptionMetadataComponent\n        metaData={metaData}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n    </Option>\n  );\n};\n\nexport type OptionMetadata = {\n  icon: ReactElement;\n  detailText: string | number;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string | number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n  OptionGroupType &\n  OptionLabelType;\nexport type Metadata = {\n  metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n  OptionType extends LabelDescription | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n  <\n    OptionType extends OptionLabelOnly,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n  OptionType extends\n    | OptionLabelOnly\n    | LabelDescription\n    | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  testId,\n  translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customOptionRender = useCallback<\n    NonNullable<\n      MuiAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"renderOption\"]\n    >\n  >(\n    (muiProps, option) => {\n      const hasDescription = \"description\" in option && option.description;\n      const hasMetadata = \"metaData\" in option && option.metaData;\n      const isLabelOnly = !hasMetadata && !hasDescription;\n\n      return (\n        <Fragment key={option.value}>\n          {isLabelOnly ? (\n            <OptionLabelOnlyComponent\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : hasMetadata ? (\n            <OptionLabelDescriptionMetadata\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : (\n            <OptionLabelDescription\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          )}\n        </Fragment>\n      );\n    },\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      emptyOptionsText={emptyOptionsText}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      hasMultipleChoices={hasMultipleChoices}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      inputValue={inputValue}\n      isCustomValueAllowed={isCustomValueAllowed}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isLoading={isLoading}\n      isOptional={isOptional}\n      isReadOnly={isReadOnly}\n      isVirtualized={isVirtualizedProp}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onFocus={onFocus}\n      onInputChange={onInputChangeProp}\n      options={options}\n      renderOption={customOptionRender}\n      testId={testId}\n      translate={translate}\n      value={value}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,QAAQ,EACRC,IAAI,EAIJC,WAAW,EAAAC,aAAA,IAAAC,cAAA,QACN,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AAGpC,SACEC,gBAAgB,QAIX,uBAAuB;AAC9B,SACEC,sBAAsB,QAEjB,qCAAqC;AAC5C,SAASC,QAAQ,EAAEC,SAAS,QAAQ,qBAAqB;AAAC,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAE1D,OAAO,MAAMC,YAAY,GAAGT,MAAM,CAACU,EAAE,CACnC,CAAC;EAAEC;AAAa,CAAC,MAAM;EACrB,IAAI,CAACA,YAAY,IAAI;IACnBC,OAAO,EAAE;EACX,CAAC;AACH,CAAC,CACH,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAChDc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,OAAO;EAC/CC,CAAC,EAAE;IACDC,MAAM,EAAE;EACV;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAAC,GAAG,EAAE;EAC3Cc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEF,MAAM,EAAE,GAAGE,mBAAmB,CAACC,QAAQ,iBAAiB;EACxDC,KAAK,EAAEF,mBAAmB,CAACG;AAC7B,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,aAAa,GAAGvB,MAAM,CAAC,KAAK,EAAE;EACzCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEP,OAAO,EAAE,MAAM;EACfY,GAAG,EAAEL,mBAAmB,CAACM,QAAQ;EACjCC,gBAAgB,EAAEP,mBAAmB,CAACQ;AACxC,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,YAAY,GAAG5B,MAAM,CAAC,KAAK,EAAE;EACxCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEP,OAAO,EAAE,MAAM;EACfiB,UAAU,EAAE,QAAQ;EACpBL,GAAG,EAAEL,mBAAmB,CAACC,QAAQ;EAEjCU,GAAG,EAAE;IACHC,KAAK,EAAEZ,mBAAmB,CAACa,QAAQ;IACnCX,KAAK,EAAEF,mBAAmB,CAACc;EAC7B;AACF,CAAC,CAAC,CAAC;AAYH,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACrBC,QAAQ;EACRxB,YAAY,GAAG,KAAK;EACpByB;AACuC,CAAC,KAAK;EAC7C,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAM,CAAC,GAAGF,QAAQ;EAClC,OACErC,cAAA,CAACU,YAAY;IAAA,GAAK6B,KAAK;IAAED,GAAG,EAAEA,GAAI;IAAC1B,YAAY,EAAEA;EAAa,GAC3DwB,QACW,CAAC;AAEnB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EACtCC,QAAQ;EACRrB;AAIF,CAAC,KAAK;EACJ,OACEX,IAAA,CAACe,aAAa;IAACJ,mBAAmB,EAAEA,mBAAoB;IAAAgB,QAAA,EACrDK,QAAQ,CAACC,GAAG,CAAC,CAACC,IAAoB,EAAEC,KAAa,KAAK;MACrD,MAAM;QAAEC,UAAU;QAAEC;MAAK,CAAC,GAAGH,IAAI;MACjC,OACEpC,KAAA,CAACsB,YAAY;QAEXT,mBAAmB,EAAEA,mBAAoB;QAAAgB,QAAA,GAExCU,IAAI,EACJD,UAAU;MAAA,GAJN,GAAGA,UAAU,IAAID,KAAK,EAKf,CAAC;IAEnB,CAAC;EAAC,CACW,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,0BAA0B,GAAGA,CAAC;EACzCC,WAAW;EACX5B;AAIF,CAAC,KAAK;EACJ,OACE4B,WAAW,IACTvC,IAAA,CAACU,iBAAiB;IAACC,mBAAmB,EAAEA,mBAAoB;IAAAgB,QAAA,EACzDY;EAAW,CACK,CACpB;AAEL,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGA,CAAqC;EAC3EZ,QAAQ;EACRjB,mBAAmB;EACnB8B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEC;EAAM,CAAC,GAAGD,MAAM;EAExB,OACEzC,IAAA,CAAC0B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,EACzB3B,IAAA,CAACK,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,EAC7D3B,IAAA,CAACJ,SAAS;QAAA+B,QAAA,EAAEe;MAAK,CAAY;IAAC,CACV;EAAC,CACjB,CAAC;AAEb,CAAC;AAED,MAAMC,sBAAsB,GAAGA,CAAsC;EACnEf,QAAQ;EACRjB,mBAAmB;EACnB8B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEF,WAAW;IAAEG;EAAM,CAAC,GAAGD,MAAM;EAErC,OACEzC,IAAA,CAAC0B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,EACzB7B,KAAA,CAACO,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,GAC7D3B,IAAA,CAACL,QAAQ;QAACiD,SAAS,EAAC,GAAG;QAAAjB,QAAA,EAAEe;MAAK,CAAW,CAAC,EAC1C1C,IAAA,CAACsC,0BAA0B;QACzBC,WAAW,EAAEA,WAAY;QACzB5B,mBAAmB,EAAEA;MAAoB,CAC1C,CAAC;IAAA,CACkB;EAAC,CACjB,CAAC;AAEb,CAAC;AAED,MAAMkC,8BAA8B,GAAGA,CAErC;EACAjB,QAAQ;EACRjB,mBAAmB;EACnB8B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEF,WAAW;IAAEG,KAAK;IAAEV;EAAS,CAAC,GAAGS,MAAM;EAE/C,OACE3C,KAAA,CAAC4B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,GACzB7B,KAAA,CAACO,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,GAC7D3B,IAAA,CAACL,QAAQ;QAACiD,SAAS,EAAC,GAAG;QAAAjB,QAAA,EAAEe;MAAK,CAAW,CAAC,EAC1C1C,IAAA,CAACsC,0BAA0B;QACzBC,WAAW,EAAEA,WAAY;QACzB5B,mBAAmB,EAAEA;MAAoB,CAC1C,CAAC;IAAA,CACkB,CAAC,EACvBX,IAAA,CAAC+B,uBAAuB;MACtBC,QAAQ,EAAEA,QAAS;MACnBrB,mBAAmB,EAAEA;IAAoB,CAC1C,CAAC;EAAA,CACI,CAAC;AAEb,CAAC;AA0DD,MAAMmC,MAA2B,GAAGA,CAOlC;EACAC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,EAAEC,iBAAiB,GAAG,KAAK;EACxCC,IAAI;EACJC,iBAAiB;EACjBxB,KAAK;EACLyB,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ,EAAEC,YAAY;EACtBC,aAAa,EAAEC,iBAAiB;EAChCC,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,MAAM;EACNC;AACiE,CAAC,KAAK;EACvE,MAAMnE,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EAEpD,MAAMqF,kBAAkB,GAAG1F,WAAW,CAUpC,CAACuC,QAAQ,EAAEa,MAAM,KAAK;IACpB,MAAMuC,cAAc,GAAG,aAAa,IAAIvC,MAAM,IAAIA,MAAM,CAACF,WAAW;IACpE,MAAM0C,WAAW,GAAG,UAAU,IAAIxC,MAAM,IAAIA,MAAM,CAACT,QAAQ;IAC3D,MAAMkD,WAAW,GAAG,CAACD,WAAW,IAAI,CAACD,cAAc;IAEnD,OACEhF,IAAA,CAACb,QAAQ;MAAAwC,QAAA,EACNuD,WAAW,GACVlF,IAAA,CAACwC,wBAAwB;QACvBZ,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC8B,MAAM,EAAEA;MAAO,CAChB,CAAC,GACAwC,WAAW,GACbjF,IAAA,CAAC6C,8BAA8B;QAC7BjB,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC8B,MAAM,EAAEA;MAAO,CAChB,CAAC,GAEFzC,IAAA,CAAC2C,sBAAsB;QACrBf,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC8B,MAAM,EAAEA;MAAO,CAChB;IACF,GAnBYA,MAAM,CAACmC,KAoBZ,CAAC;EAEf,CAAC,EACD,CAACjE,mBAAmB,CACtB,CAAC;EAED,OACEX,IAAA,CAACP,gBAAgB;IACfsD,eAAe,EAAEA,eAAgB;IACjCC,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCC,uBAAuB,EAAEA,uBAAwB;IACjDC,kBAAkB,EAAEA,kBAAmB;IACvCY,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCZ,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEC,iBAAkB;IACjCtB,KAAK,EAAEA,KAAM;IACbyB,IAAI,EAAEC,YAAa;IACnBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEC,YAAa;IACvBG,OAAO,EAAEA,OAAQ;IACjBF,aAAa,EAAEC,iBAAkB;IACjCE,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEJ,kBAAmB;IACjCF,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA,SAAU;IACrBF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAGD,MAAMQ,cAAc,GAAGhG,IAAI,CAAC0D,MAAM,CAAmB;AAErDsC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAItC,MAAM","ignoreList":[]}
+{"version":3,"file":"Picker.js","names":["styled","Fragment","memo","useCallback","createElement","_createElement","useOdysseyDesignTokens","Heading6","Paragraph","ComposablePicker","jsxs","_jsxs","jsx","_jsx","StyledOption","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","OptionMetadataComponent","metaData","map","meta","index","detailText","icon","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","OptionLabelDescription","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","hasDescription","hasMetadata","isLabelOnly","renderOption","MemoizedPicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.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 styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\nimport {\n  Fragment,\n  memo,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\nimport {\n  type BasePickerProps,\n  type BasePickerType,\n  type BaseRenderOptionProps,\n  ComposablePicker,\n} from \"./ComposablePicker.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n  ({ hasAdornment }) => ({\n    ...(!hasAdornment && {\n      display: \"block !important\",\n    }),\n  }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n  p: {\n    margin: 0,\n  },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n  color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing1,\n\n  svg: {\n    width: odysseyDesignTokens.Spacing4,\n    color: odysseyDesignTokens.HueNeutral400,\n  },\n}));\n\nexport type BaseOptionProps = {\n  muiProps: BaseRenderOptionProps;\n  odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n  hasAdornment?: boolean;\n  muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n  children,\n  hasAdornment = false,\n  muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n  const { key, ...props } = muiProps;\n  return (\n    <StyledOption {...props} hasAdornment={hasAdornment} key={key}>\n      {children}\n    </StyledOption>\n  );\n};\n\nexport const OptionMetadataComponent = ({\n  metaData,\n  odysseyDesignTokens,\n}: {\n  metaData: OptionMetadata[];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n      {metaData.map((meta: OptionMetadata, index: number) => {\n        const { detailText, icon } = meta;\n        return (\n          <OptionDetail\n            key={`${detailText}-${index}`}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {icon}\n            {detailText}\n          </OptionDetail>\n        );\n      })}\n    </OptionDetails>\n  );\n};\n\nexport const OptionDescriptionComponent = ({\n  description,\n  odysseyDesignTokens,\n}: {\n  description?: LabelDescription[\"description\"];\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  return (\n    description && (\n      <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n        {description}\n      </OptionDescription>\n    )\n  );\n};\n\nexport type OptionProps<OptionType> = {\n  option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Paragraph>{label}</Paragraph>\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n    </Option>\n  );\n};\n\nconst OptionLabelDescriptionMetadata = <\n  OptionType extends LabelDescriptionMetadata,\n>({\n  muiProps,\n  odysseyDesignTokens,\n  option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n  const { description, label, metaData } = option;\n\n  return (\n    <Option muiProps={muiProps}>\n      <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Heading6 component=\"p\">{label}</Heading6>\n        <OptionDescriptionComponent\n          description={description}\n          odysseyDesignTokens={odysseyDesignTokens}\n        />\n      </OptionLabelContainer>\n      <OptionMetadataComponent\n        metaData={metaData}\n        odysseyDesignTokens={odysseyDesignTokens}\n      />\n    </Option>\n  );\n};\n\nexport type OptionMetadata = {\n  detailText: string | number;\n  icon: ReactElement;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string | number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n  OptionGroupType &\n  OptionLabelType;\nexport type Metadata = {\n  metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n  OptionType extends LabelDescription | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n  <\n    OptionType extends OptionLabelOnly,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescription,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n  <\n    OptionType extends LabelDescriptionMetadata,\n    HasMultipleChoices extends boolean | undefined,\n    IsCustomValueAllowed extends boolean | undefined,\n  >(\n    props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n  ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n  OptionType extends\n    | OptionLabelOnly\n    | LabelDescription\n    | LabelDescriptionMetadata,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  emptyOptionsText,\n  errorMessage,\n  errorMessageList,\n  getIsOptionEqualToValue,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  testId,\n  translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const customOptionRender = useCallback<\n    NonNullable<\n      MuiAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"renderOption\"]\n    >\n  >(\n    (muiProps, option) => {\n      const hasDescription = \"description\" in option && option.description;\n      const hasMetadata = \"metaData\" in option && option.metaData;\n      const isLabelOnly = !hasMetadata && !hasDescription;\n\n      return (\n        <Fragment key={option.value}>\n          {isLabelOnly ? (\n            <OptionLabelOnlyComponent\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : hasMetadata ? (\n            <OptionLabelDescriptionMetadata\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          ) : (\n            <OptionLabelDescription\n              muiProps={muiProps}\n              odysseyDesignTokens={odysseyDesignTokens}\n              option={option}\n            />\n          )}\n        </Fragment>\n      );\n    },\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n      ariaDescribedBy={ariaDescribedBy}\n      defaultValue={defaultValue}\n      emptyOptionsText={emptyOptionsText}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      getIsOptionEqualToValue={getIsOptionEqualToValue}\n      hasMultipleChoices={hasMultipleChoices}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      inputValue={inputValue}\n      isCustomValueAllowed={isCustomValueAllowed}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isLoading={isLoading}\n      isOptional={isOptional}\n      isReadOnly={isReadOnly}\n      isVirtualized={isVirtualizedProp}\n      label={label}\n      name={nameOverride}\n      onBlur={onBlur}\n      onChange={onChangeProp}\n      onFocus={onFocus}\n      onInputChange={onInputChangeProp}\n      options={options}\n      renderOption={customOptionRender}\n      testId={testId}\n      translate={translate}\n      value={value}\n    />\n  );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"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","ignoreList":[]}