npm - @okta/odyssey-react-mui - Versions diffs - 1.43.0 → 1.45.0 - Mend

@okta/odyssey-react-mui 1.43.0 → 1.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1901) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 { datePickerTheme, dateStyles } from "../../DatePickers/datePickerTheme.js";
-import { DateTimePickerSize } from "./DateTimePicker.js";
 import { pxToRem } from "../../theme/index.js";
-import { addSpecificity } from "../../addSpecificity.js";
+import { addSpecificity } from "../../tools/addSpecificity.js";
+import { DateTimePickerSize } from "./DateTimePicker.js";
 const DateTimePickerComponentSize = {
   dateCalendarMaxHeight: `${pxToRem(336)}rem`,
   slideTransitionMinHeight: `${pxToRem(240)}rem`
@@ -103,8 +103,8 @@ const theme = {
     MuiMultiSectionDigitalClock: {
       styleOverrides: {
         root: {
-          [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)},
-            ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)},
+          [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)},
+            ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)},
             ${addSpecificity(2, `.${digitalClockClasses.root}`)}`]: {
             maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight
           }

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

	@@ -1 +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":[]}
1	+ {"version":3,"file":"dateTimePickerTheme.js","names":["deepmerge","digitalClockClasses","multiSectionDigitalClockClasses","multiSectionDigitalClockSectionClasses","datePickerTheme","dateStyles","pxToRem","addSpecificity","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 {\n datePickerTheme,\n dateStyles,\n} from \"../../DatePickers/datePickerTheme.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { addSpecificity } from \"../../tools/addSpecificity.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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"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","ignoreList":[]}
1	+ {"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":[]}