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

@okta/odyssey-react-mui 1.43.0 → 1.44.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 (1311) hide show

package/dist/cjs/labs/DatePickers/DateTimeField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimeField.cjs","names":["_react","require","_xDatePickers","_reactI18next","_Field","_jsxRuntime","_interopRequireDefault","e","__esModule","default","useOdysseyDateError","t","useTranslation","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","DateTimeField","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","useState","internalValidationError","useRef","localInputRef","useImperativeHandle","focus","current","checkMinMaxValidity","useCallback","hasMinError","hasMaxError","get","useEffect","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","jsx","autoFocus","disabled","inputProps","InputProps","error","Boolean","Fragment","children","_InputAdornment2","position","name","readOnly","variant","Field","fieldType","hasVisibleLabel","MemoizedDateTimeField","exports","memo","displayName"],"sources":["../../../../src/labs/DatePickers/DateTimeField.tsx"],"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 {\n FocusEventHandler,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { InputAdornment } from \"@mui/material\";\nimport {\n DateTimeField as MuiDateTimeField,\n DateTimeFieldProps as MuiDateTimeFieldProps,\n DateTimeValidationError,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../../Field.js\";\nimport { TextFieldProps } from \"../../TextField.js\";\n\nexport type DateTimeFieldProps = {\n onChange?: (value: string) => void;\n} & Pick<\n MuiDateTimeFieldProps<DateTime>,\n \"defaultValue\" \| \"inputRef\" \| \"minDate\" \| \"maxDate\" \| \"timezone\" \| \"value\"\n> &\n Pick<\n TextFieldProps,\n \| \"endAdornment\"\n \| \"errorMessage\"\n \| \"hasInitialFocus\"\n \| \"hint\"\n \| \"HintLinkComponent\"\n \| \"id\"\n \| \"isDisabled\"\n \| \"isOptional\"\n \| \"isReadOnly\"\n \| \"label\"\n \| \"onBlur\"\n \| \"onFocus\"\n >;\n\nconst useOdysseyDateError = () => {\n const { t } = useTranslation();\n\n return new Map<DateTimeValidationError, string>([\n [\"invalidDate\", t(\"picker.error.invalid\")],\n [\"maxDate\", t(\"picker.error.maxdate\")],\n [\"minDate\", t(\"picker.error.mindate\")],\n ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n value.toUTC().toISO();\n\nconst DateTimeField = ({\n defaultValue,\n endAdornment,\n errorMessage,\n hasInitialFocus,\n hint,\n HintLinkComponent,\n id: idOverride,\n inputRef,\n isDisabled = false,\n isOptional = false,\n isReadOnly,\n label,\n minDate,\n maxDate,\n onBlur,\n onChange,\n onFocus,\n timezone,\n value,\n}: DateTimeFieldProps) => {\n const errorMap = useOdysseyDateError();\n const [displayedErrorMessage, setDisplayedErrorMessage] =\n useState(errorMessage);\n\n const internalValidationError = useRef<string \| undefined>();\n const localInputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(inputRef, () => {\n return {\n focus: () => {\n localInputRef.current?.focus();\n },\n };\n }, []);\n\n const checkMinMaxValidity = useCallback(\n (value: DateTime) => {\n const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n if (hasMinError \|\| hasMaxError) {\n if (hasMinError) {\n setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n }\n\n if (hasMaxError) {\n setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n }\n\n return false;\n }\n\n return true;\n },\n [errorMap, minDate, maxDate],\n );\n\n useEffect(() => {\n if (value) {\n checkMinMaxValidity(value);\n }\n\n if (defaultValue) {\n checkMinMaxValidity(defaultValue);\n }\n }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n const clearErrorMessages = useCallback(() => {\n setDisplayedErrorMessage(undefined);\n internalValidationError.current = undefined;\n }, [internalValidationError, setDisplayedErrorMessage]);\n\n const validateAndCallOnChange = useCallback<\n NonNullable<MuiDateTimeFieldProps<DateTime>[\"onChange\"]>\n >(\n (value, validationContext) => {\n clearErrorMessages();\n const { validationError } = validationContext;\n const hasEnteredFullYear = value?.year.toString().length === 4;\n\n if (validationError) {\n const odysseyValidationError = errorMap.get(validationError);\n\n if (odysseyValidationError) {\n internalValidationError.current = odysseyValidationError;\n\n if (value?.isValid && hasEnteredFullYear) {\n setDisplayedErrorMessage(odysseyValidationError);\n }\n }\n }\n\n if (value?.isValid && !validationError) {\n const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n onChange?.(dateStringFromDateTime);\n }\n }\n },\n [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n );\n\n const checkFieldValidityAndSetError = useCallback<\n FocusEventHandler<HTMLInputElement>\n >(\n (event) => {\n if (internalValidationError?.current && !displayedErrorMessage) {\n setDisplayedErrorMessage(internalValidationError.current);\n }\n onBlur?.(event);\n },\n [displayedErrorMessage, internalValidationError, onBlur],\n );\n\n const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n const renderFieldComponent = useCallback(\n ({\n ariaDescribedBy,\n errorMessageElementId,\n id,\n labelElementId,\n }: RenderFieldComponentProps) => (\n <MuiDateTimeField\n / eslint-disable-next-line jsx-a11y/no-autofocus */\n autoFocus={hasInitialFocus}\n defaultValue={defaultValue}\n disabled={isDisabled}\n id={id}\n inputProps={{\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": errorMessageElementId,\n \"aria-labelledby\": labelElementId,\n }}\n InputProps={{\n error: Boolean(displayedErrorMessage \|\| errorMessage),\n endAdornment: (\n <>\n {hasVisibleAdornment && (\n <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n )}\n </>\n ),\n }}\n inputRef={localInputRef}\n minDate={minDate}\n maxDate={maxDate}\n name={id}\n onBlur={checkFieldValidityAndSetError}\n onChange={validateAndCallOnChange}\n onFocus={onFocus}\n readOnly={isReadOnly}\n timezone={timezone}\n value={value}\n variant=\"standard\"\n />\n ),\n [\n checkFieldValidityAndSetError,\n defaultValue,\n displayedErrorMessage,\n endAdornment,\n errorMessage,\n hasInitialFocus,\n hasVisibleAdornment,\n isDisabled,\n localInputRef,\n minDate,\n maxDate,\n onFocus,\n isReadOnly,\n timezone,\n validateAndCallOnChange,\n value,\n ],\n );\n\n return (\n <Field\n errorMessage={displayedErrorMessage \|\| errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedDateTimeField = memo(DateTimeField);\nMemoizedDateTimeField.displayName = \"DateTimeField\";\n\nexport { MemoizedDateTimeField as DateTimeField };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"DateTimeField.cjs","names":["_xDatePickers","require","_react","_reactI18next","_Field","_jsxRuntime","_interopRequireDefault","e","__esModule","default","useOdysseyDateError","t","useTranslation","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","DateTimeField","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","useState","internalValidationError","useRef","localInputRef","useImperativeHandle","focus","current","checkMinMaxValidity","useCallback","hasMinError","hasMaxError","get","useEffect","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","jsx","autoFocus","disabled","inputProps","InputProps","error","Boolean","Fragment","children","_InputAdornment2","position","name","readOnly","variant","Field","fieldType","hasVisibleLabel","MemoizedDateTimeField","exports","memo","displayName"],"sources":["../../../../src/labs/DatePickers/DateTimeField.tsx"],"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 { InputAdornment } from \"@mui/material\";\nimport {\n DateTimeValidationError,\n DateTimeField as MuiDateTimeField,\n DateTimeFieldProps as MuiDateTimeFieldProps,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport {\n FocusEventHandler,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../../Field.js\";\nimport { TextFieldProps } from \"../../TextField.js\";\n\nexport type DateTimeFieldProps = {\n onChange?: (value: string) => void;\n} & Pick<\n MuiDateTimeFieldProps<DateTime>,\n \"defaultValue\" \| \"inputRef\" \| \"minDate\" \| \"maxDate\" \| \"timezone\" \| \"value\"\n> &\n Pick<\n TextFieldProps,\n \| \"endAdornment\"\n \| \"errorMessage\"\n \| \"hasInitialFocus\"\n \| \"hint\"\n \| \"HintLinkComponent\"\n \| \"id\"\n \| \"isDisabled\"\n \| \"isOptional\"\n \| \"isReadOnly\"\n \| \"label\"\n \| \"onBlur\"\n \| \"onFocus\"\n >;\n\nconst useOdysseyDateError = () => {\n const { t } = useTranslation();\n\n return new Map<DateTimeValidationError, string>([\n [\"invalidDate\", t(\"picker.error.invalid\")],\n [\"maxDate\", t(\"picker.error.maxdate\")],\n [\"minDate\", t(\"picker.error.mindate\")],\n ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n value.toUTC().toISO();\n\nconst DateTimeField = ({\n defaultValue,\n endAdornment,\n errorMessage,\n hasInitialFocus,\n hint,\n HintLinkComponent,\n id: idOverride,\n inputRef,\n isDisabled = false,\n isOptional = false,\n isReadOnly,\n label,\n minDate,\n maxDate,\n onBlur,\n onChange,\n onFocus,\n timezone,\n value,\n}: DateTimeFieldProps) => {\n const errorMap = useOdysseyDateError();\n const [displayedErrorMessage, setDisplayedErrorMessage] =\n useState(errorMessage);\n\n const internalValidationError = useRef<string \| undefined>();\n const localInputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(inputRef, () => {\n return {\n focus: () => {\n localInputRef.current?.focus();\n },\n };\n }, []);\n\n const checkMinMaxValidity = useCallback(\n (value: DateTime) => {\n const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n if (hasMinError \|\| hasMaxError) {\n if (hasMinError) {\n setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n }\n\n if (hasMaxError) {\n setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n }\n\n return false;\n }\n\n return true;\n },\n [errorMap, minDate, maxDate],\n );\n\n useEffect(() => {\n if (value) {\n checkMinMaxValidity(value);\n }\n\n if (defaultValue) {\n checkMinMaxValidity(defaultValue);\n }\n }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n const clearErrorMessages = useCallback(() => {\n setDisplayedErrorMessage(undefined);\n internalValidationError.current = undefined;\n }, [internalValidationError, setDisplayedErrorMessage]);\n\n const validateAndCallOnChange = useCallback<\n NonNullable<MuiDateTimeFieldProps<DateTime>[\"onChange\"]>\n >(\n (value, validationContext) => {\n clearErrorMessages();\n const { validationError } = validationContext;\n const hasEnteredFullYear = value?.year.toString().length === 4;\n\n if (validationError) {\n const odysseyValidationError = errorMap.get(validationError);\n\n if (odysseyValidationError) {\n internalValidationError.current = odysseyValidationError;\n\n if (value?.isValid && hasEnteredFullYear) {\n setDisplayedErrorMessage(odysseyValidationError);\n }\n }\n }\n\n if (value?.isValid && !validationError) {\n const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n onChange?.(dateStringFromDateTime);\n }\n }\n },\n [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n );\n\n const checkFieldValidityAndSetError = useCallback<\n FocusEventHandler<HTMLInputElement>\n >(\n (event) => {\n if (internalValidationError?.current && !displayedErrorMessage) {\n setDisplayedErrorMessage(internalValidationError.current);\n }\n onBlur?.(event);\n },\n [displayedErrorMessage, internalValidationError, onBlur],\n );\n\n const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n const renderFieldComponent = useCallback(\n ({\n ariaDescribedBy,\n errorMessageElementId,\n id,\n labelElementId,\n }: RenderFieldComponentProps) => (\n <MuiDateTimeField\n / eslint-disable-next-line jsx-a11y/no-autofocus */\n autoFocus={hasInitialFocus}\n defaultValue={defaultValue}\n disabled={isDisabled}\n id={id}\n inputProps={{\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": errorMessageElementId,\n \"aria-labelledby\": labelElementId,\n }}\n InputProps={{\n error: Boolean(displayedErrorMessage \|\| errorMessage),\n endAdornment: (\n <>\n {hasVisibleAdornment && (\n <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n )}\n </>\n ),\n }}\n inputRef={localInputRef}\n maxDate={maxDate}\n minDate={minDate}\n name={id}\n onBlur={checkFieldValidityAndSetError}\n onChange={validateAndCallOnChange}\n onFocus={onFocus}\n readOnly={isReadOnly}\n timezone={timezone}\n value={value}\n variant=\"standard\"\n />\n ),\n [\n checkFieldValidityAndSetError,\n defaultValue,\n displayedErrorMessage,\n endAdornment,\n errorMessage,\n hasInitialFocus,\n hasVisibleAdornment,\n isDisabled,\n localInputRef,\n minDate,\n maxDate,\n onFocus,\n isReadOnly,\n timezone,\n validateAndCallOnChange,\n value,\n ],\n );\n\n return (\n <Field\n errorMessage={displayedErrorMessage \|\| errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedDateTimeField = memo(DateTimeField);\nMemoizedDateTimeField.displayName = \"DateTimeField\";\n\nexport { MemoizedDateTimeField as DateTimeField };\n"],"mappings":";;;;;;;AAaA,IAAAA,aAAA,GAAAC,OAAA;AAMA,IAAAC,MAAA,GAAAD,OAAA;AASA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAAkE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA9BlE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA6CA,MAAMG,mBAAmB,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAE9B,OAAO,IAAIC,GAAG,CAAkC,CAC9C,CAAC,aAAa,EAAEF,CAAC,CAAC,sBAAsB,CAAC,CAAC,EAC1C,CAAC,SAAS,EAAEA,CAAC,CAAC,sBAAsB,CAAC,CAAC,EACtC,CAAC,SAAS,EAAEA,CAAC,CAAC,sBAAsB,CAAC,CAAC,CACvC,CAAC;AACJ,CAAC;AAED,MAAMG,gCAAgC,GAAIC,KAAe,IACvDA,KAAK,CAACC,KAAK,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;AAEvB,MAAMC,aAAa,GAAGA,CAAC;EACrBC,YAAY;EACZC,YAAY;EACZC,YAAY;EACZC,eAAe;EACfC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,QAAQ;EACRC,UAAU,GAAG,KAAK;EAClBC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRtB;AACkB,CAAC,KAAK;EACxB,MAAMuB,QAAQ,GAAG5B,mBAAmB,CAAC,CAAC;EACtC,MAAM,CAAC6B,qBAAqB,EAAEC,wBAAwB,CAAC,GACrD,IAAAC,eAAQ,EAACpB,YAAY,CAAC;EAExB,MAAMqB,uBAAuB,GAAG,IAAAC,aAAM,EAAqB,CAAC;EAC5D,MAAMC,aAAa,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAEpD,IAAAE,0BAAmB,EAAClB,QAAQ,EAAE,MAAM;IAClC,OAAO;MACLmB,KAAK,EAAEA,CAAA,KAAM;QACXF,aAAa,CAACG,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,mBAAmB,GAAG,IAAAC,kBAAW,EACpClC,KAAe,IAAK;IACnB,MAAMmC,WAAW,GAAGlB,OAAO,IAAIjB,KAAK,CAACC,KAAK,CAAC,CAAC,GAAGgB,OAAO,CAAChB,KAAK,CAAC,CAAC;IAC9D,MAAMmC,WAAW,GAAGlB,OAAO,IAAIlB,KAAK,CAACC,KAAK,CAAC,CAAC,GAAGiB,OAAO,CAACjB,KAAK,CAAC,CAAC;IAE9D,IAAIkC,WAAW,IAAIC,WAAW,EAAE;MAC9B,IAAID,WAAW,EAAE;QACfV,wBAAwB,CAACF,QAAQ,CAACc,GAAG,CAAC,SAAS,CAAC,CAAC;MACnD;MAEA,IAAID,WAAW,EAAE;QACfX,wBAAwB,CAACF,QAAQ,CAACc,GAAG,CAAC,SAAS,CAAC,CAAC;MACnD;MAEA,OAAO,KAAK;IACd;IAEA,OAAO,IAAI;EACb,CAAC,EACD,CAACd,QAAQ,EAAEN,OAAO,EAAEC,OAAO,CAC7B,CAAC;EAED,IAAAoB,gBAAS,EAAC,MAAM;IACd,IAAItC,KAAK,EAAE;MACTiC,mBAAmB,CAACjC,KAAK,CAAC;IAC5B;IAEA,IAAII,YAAY,EAAE;MAChB6B,mBAAmB,CAAC7B,YAAY,CAAC;IACnC;EACF,CAAC,EAAE,CAAC6B,mBAAmB,EAAE7B,YAAY,EAAEa,OAAO,EAAEC,OAAO,EAAElB,KAAK,CAAC,CAAC;EAEhE,MAAMuC,kBAAkB,GAAG,IAAAL,kBAAW,EAAC,MAAM;IAC3CT,wBAAwB,CAACe,SAAS,CAAC;IACnCb,uBAAuB,CAACK,OAAO,GAAGQ,SAAS;EAC7C,CAAC,EAAE,CAACb,uBAAuB,EAAEF,wBAAwB,CAAC,CAAC;EAEvD,MAAMgB,uBAAuB,GAAG,IAAAP,kBAAW,EAGzC,CAAClC,KAAK,EAAE0C,iBAAiB,KAAK;IAC5BH,kBAAkB,CAAC,CAAC;IACpB,MAAM;MAAEI;IAAgB,CAAC,GAAGD,iBAAiB;IAC7C,MAAME,kBAAkB,GAAG5C,KAAK,EAAE6C,IAAI,CAACC,QAAQ,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;IAE9D,IAAIJ,eAAe,EAAE;MACnB,MAAMK,sBAAsB,GAAGzB,QAAQ,CAACc,GAAG,CAACM,eAAe,CAAC;MAE5D,IAAIK,sBAAsB,EAAE;QAC1BrB,uBAAuB,CAACK,OAAO,GAAGgB,sBAAsB;QAExD,IAAIhD,KAAK,EAAEiD,OAAO,IAAIL,kBAAkB,EAAE;UACxCnB,wBAAwB,CAACuB,sBAAsB,CAAC;QAClD;MACF;IACF;IAEA,IAAIhD,KAAK,EAAEiD,OAAO,IAAI,CAACN,eAAe,EAAE;MACtC,MAAMO,sBAAsB,GAAGnD,gCAAgC,CAACC,KAAK,CAAC;MAEtE,IAAIkD,sBAAsB,IAAIjB,mBAAmB,CAACjC,KAAK,CAAC,EAAE;QACxDoB,QAAQ,GAAG8B,sBAAsB,CAAC;MACpC;IACF;EACF,CAAC,EACD,CAACjB,mBAAmB,EAAEM,kBAAkB,EAAEhB,QAAQ,EAAEH,QAAQ,CAC9D,CAAC;EAED,MAAM+B,6BAA6B,GAAG,IAAAjB,kBAAW,EAG9CkB,KAAK,IAAK;IACT,IAAIzB,uBAAuB,EAAEK,OAAO,IAAI,CAACR,qBAAqB,EAAE;MAC9DC,wBAAwB,CAACE,uBAAuB,CAACK,OAAO,CAAC;IAC3D;IACAb,MAAM,GAAGiC,KAAK,CAAC;EACjB,CAAC,EACD,CAAC5B,qBAAqB,EAAEG,uBAAuB,EAAER,MAAM,CACzD,CAAC;EAED,MAAMkC,mBAAmB,GAAG,CAACtC,UAAU,IAAI,CAACF,UAAU;EAEtD,MAAMyC,oBAAoB,GAAG,IAAApB,kBAAW,EACtC,CAAC;IACCqB,eAAe;IACfC,qBAAqB;IACrB9C,EAAE;IACF+C;EACyB,CAAC,KAC1B,IAAAnE,WAAA,CAAAoE,GAAA,EAACzE,aAAA,CAAAkB,aAAgB;IAEfwD,SAAS,EAAEpD,eAAgB;IAC3BH,YAAY,EAAEA,YAAa;IAC3BwD,QAAQ,EAAE/C,UAAW;IACrBH,EAAE,EAAEA,EAAG;IACPmD,UAAU,EAAE;MACV,kBAAkB,EAAEN,eAAe;MACnC,mBAAmB,EAAEC,qBAAqB;MAC1C,iBAAiB,EAAEC;IACrB,CAAE;IACFK,UAAU,EAAE;MACVC,KAAK,EAAEC,OAAO,CAACxC,qBAAqB,IAAIlB,YAAY,CAAC;MACrDD,YAAY,EACV,IAAAf,WAAA,CAAAoE,GAAA,EAAApE,WAAA,CAAA2E,QAAA;QAAAC,QAAA,EACGb,mBAAmB,IAClB,IAAA/D,WAAA,CAAAoE,GAAA,EAAAS,gBAAA,CAAAzE,OAAA;UAAgB0E,QAAQ,EAAC,KAAK;UAAAF,QAAA,EAAE7D;QAAY,CAAiB;MAC9D,CACD;IAEN,CAAE;IACFO,QAAQ,EAAEiB,aAAc;IACxBX,OAAO,EAAEA,OAAQ;IACjBD,OAAO,EAAEA,OAAQ;IACjBoD,IAAI,EAAE3D,EAAG;IACTS,MAAM,EAAEgC,6BAA8B;IACtC/B,QAAQ,EAAEqB,uBAAwB;IAClCpB,OAAO,EAAEA,OAAQ;IACjBiD,QAAQ,EAAEvD,UAAW;IACrBO,QAAQ,EAAEA,QAAS;IACnBtB,KAAK,EAAEA,KAAM;IACbuE,OAAO,EAAC;EAAU,CACnB,CACF,EACD,CACEpB,6BAA6B,EAC7B/C,YAAY,EACZoB,qBAAqB,EACrBnB,YAAY,EACZC,YAAY,EACZC,eAAe,EACf8C,mBAAmB,EACnBxC,UAAU,EACVgB,aAAa,EACbZ,OAAO,EACPC,OAAO,EACPG,OAAO,EACPN,UAAU,EACVO,QAAQ,EACRmB,uBAAuB,EACvBzC,KAAK,CAET,CAAC;EAED,OACE,IAAAV,WAAA,CAAAoE,GAAA,EAACrE,MAAA,CAAAmF,KAAK;IACJlE,YAAY,EAAEkB,qBAAqB,IAAIlB,YAAa;IACpDmE,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACflE,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfE,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbsC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMqB,qBAAqB,GAAAC,OAAA,CAAAzE,aAAA,GAAG,IAAA0E,WAAI,EAAC1E,aAAa,CAAC;AACjDwE,qBAAqB,CAACG,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/cjs/labs/DatePickers/DateTimePicker.cjs CHANGED Viewed

@@ -4,21 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimePickerSize = exports.DateTimePicker = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _xDatePickers = require("@mui/x-date-pickers");
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _xDatePickers = require("@mui/x-date-pickers");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _index = require("../../Buttons/index.cjs");
 var _DateFieldActionBar = require("../../DatePickers/DateFieldActionBar.cjs");
 var _DateFieldLocalizationProvider = require("../../DatePickers/DateFieldLocalizationProvider.cjs");
 var _TimeZonePicker = require("../../DatePickers/TimeZonePicker.cjs");
 var _useOdysseyDateFields = require("../../DatePickers/useOdysseyDateFields.cjs");
-var _DateTimeField = require("./DateTimeField.cjs");
-var _dateTimePickerTheme = require("./dateTimePickerTheme.cjs");
 var _index2 = require("../../icons.generated/index.cjs");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
 var _OdysseyThemeProvider = require("../../OdysseyThemeProvider.cjs");
 var _index3 = require("../../theme/index.cjs");
+var _useUniqueId = require("../../useUniqueId.cjs");
+var _DateTimeField = require("./DateTimeField.cjs");
+var _dateTimePickerTheme = require("./dateTimePickerTheme.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -59,6 +60,7 @@ const DateTimePicker = ({
   errorMessage,
   hint,
   HintLinkComponent,
+  id: idOverride,
   isDateEnabled = () => true,
   isDisabled,
   isOptional,
@@ -82,6 +84,7 @@ const DateTimePicker = ({
   } = (0, _reactI18next.useTranslation)();
   const inputRef = (0, _react.useRef)(null);
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const dateTimePickerId = (0, _useUniqueId.useUniqueId)(idOverride);
   const {
     closeCalendar,
     commonIcons,
@@ -150,19 +153,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 = (0, _react.useMemo)(() => ({
     actionBar: _DateFieldActionBar.DateFieldActionBar,
     field: muiProps => renderDateTimeField(muiProps),
@@ -207,8 +211,8 @@ const DateTimePicker = ({
             fixedWeekNumber: 6,
             inputRef: inputRef,
             label: label,
-            minDate: minDate,
             maxDate: maxDate,
+            minDate: minDate,
             onChange: formatDateTimeToJsDateStringOnCalendarSelection,
             onClose: closeCalendar,
             open: isOpen,
@@ -216,8 +220,8 @@ const DateTimePicker = ({
             shouldDisableDate: shouldDisableDate,
             shouldDisableMonth: shouldDisableMonth,
             shouldDisableYear: shouldDisableYear,
-            slots: slots,
             slotProps: slotProps,
+            slots: slots,
             timezone: internalTimeZone,
             value: inputValues?.value
           }, language)
@@ -225,9 +229,9 @@ const DateTimePicker = ({
       }), timeZoneOptions && timeZonePickerLabel && (0, _jsxRuntime.jsx)(TimeZonePickerContainer, {
         odysseyDesignTokens: odysseyDesignTokens,
         children: (0, _jsxRuntime.jsx)(_TimeZonePicker.TimeZonePicker, {
+          isReadOnly: isReadOnly,
           label: timeZonePickerLabel,
           onTimeZoneChange: onTimeZoneChange,
-          isReadOnly: isReadOnly,
           timeZoneOptions: timeZoneOptions,
           value: internalTimeZone
         })

package/dist/cjs/labs/DatePickers/DateTimePicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePicker.cjs","names":["_react","require","_reactI18next","_xDatePickers","_styled","_interopRequireDefault","_index","_DateFieldActionBar","_DateFieldLocalizationProvider","_TimeZonePicker","_useOdysseyDateFields","_DateTimeField","_dateTimePickerTheme","_index2","_OdysseyDesignTokensContext","_OdysseyThemeProvider","_index3","_jsxRuntime","e","__esModule","default","DateTimePickerSize","exports","maxWidth","pxToRem","DatePickerContainer","styled","div","marginBlockEnd","DatePickerWidthContainer","width","TimeZonePickerContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing3","DateTimePicker","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","useTranslation","inputRef","useRef","useOdysseyDesignTokens","closeCalendar","commonIcons","defaultedLanguageCode","formatDateTimeToUtcIsoDateString","formatDayOfWeek","inputValues","internalTimeZone","isOpen","localeText","onTimeZoneChange","popperElement","setPopperElement","shouldDisableDate","shouldDisableMonth","shouldDisableYear","toggleCalendarVisibility","useOdysseyDateFields","language","containerRef","useEffect","current","formatDateTimeToJsDateStringOnCalendarSelection","useCallback","dateStringFromDateTime","renderDateTimeField","jsx","DateTimeField","endAdornment","Button","ariaLabel","onClick","size","startIcon","CalendarIcon","variant","onChange","timezone","slots","useMemo","actionBar","DateFieldActionBar","field","muiProps","leftArrowIcon","ArrowLeftIcon","rightArrowIcon","ArrowRightIcon","switchViewIcon","ChevronDownIcon","slotProps","wrapperVariant","onAccept","onCancel","actions","popper","anchorEl","tabs","dateIcon","timeIcon","ClockIcon","toolbar","toolbarPlaceholder","OdysseyThemeProvider","themeOverride","dateTimePickerTheme","children","jsxs","DateFieldLocalizationProvider","ref","dayOfWeekFormatter","disabled","fixedWeekNumber","onClose","open","readOnly","TimeZonePicker","MemoizedDateTimePicker","memo","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.cjs","names":["_styled","_interopRequireDefault","require","_xDatePickers","_react","_reactI18next","_index","_DateFieldActionBar","_DateFieldLocalizationProvider","_TimeZonePicker","_useOdysseyDateFields","_index2","_OdysseyDesignTokensContext","_OdysseyThemeProvider","_index3","_useUniqueId","_DateTimeField","_dateTimePickerTheme","_jsxRuntime","e","__esModule","default","DateTimePickerSize","exports","maxWidth","pxToRem","DatePickerContainer","styled","div","marginBlockEnd","DatePickerWidthContainer","width","TimeZonePickerContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing3","DateTimePicker","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","useTranslation","inputRef","useRef","useOdysseyDesignTokens","dateTimePickerId","useUniqueId","closeCalendar","commonIcons","defaultedLanguageCode","formatDateTimeToUtcIsoDateString","formatDayOfWeek","inputValues","internalTimeZone","isOpen","localeText","onTimeZoneChange","popperElement","setPopperElement","shouldDisableDate","shouldDisableMonth","shouldDisableYear","toggleCalendarVisibility","useOdysseyDateFields","language","containerRef","useEffect","current","formatDateTimeToJsDateStringOnCalendarSelection","useCallback","dateStringFromDateTime","renderDateTimeField","jsx","DateTimeField","endAdornment","Button","ariaLabel","onClick","size","startIcon","CalendarIcon","variant","onChange","timezone","slots","useMemo","actionBar","DateFieldActionBar","field","muiProps","leftArrowIcon","ArrowLeftIcon","rightArrowIcon","ArrowRightIcon","switchViewIcon","ChevronDownIcon","slotProps","wrapperVariant","onAccept","onCancel","actions","popper","anchorEl","tabs","dateIcon","timeIcon","ClockIcon","toolbar","toolbarPlaceholder","OdysseyThemeProvider","themeOverride","dateTimePickerTheme","children","jsxs","DateFieldLocalizationProvider","ref","dayOfWeekFormatter","disabled","fixedWeekNumber","onClose","open","readOnly","TimeZonePicker","MemoizedDateTimePicker","memo","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/cjs/labs/DatePickers/dateTimePickerTheme.cjs CHANGED Viewed

@@ -7,10 +7,10 @@ exports.dateTimePickerTheme = void 0;
 var _utils = require("@mui/utils");
 var _DigitalClock = require("@mui/x-date-pickers/DigitalClock");
 var _MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
+var _addSpecificity = require("../../addSpecificity.cjs");
 var _datePickerTheme = require("../../DatePickers/datePickerTheme.cjs");
-var _DateTimePicker = require("./DateTimePicker.cjs");
 var _index = require("../../theme/index.cjs");
-var _addSpecificity = require("../../addSpecificity.cjs");
+var _DateTimePicker = require("./DateTimePicker.cjs");
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")

package/dist/cjs/labs/DatePickers/dateTimePickerTheme.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dateTimePickerTheme.cjs","names":["_utils","require","_DigitalClock","_MultiSectionDigitalClock","_datePickerTheme","_DateTimePicker","_index","_addSpecificity","DateTimePickerComponentSize","dateCalendarMaxHeight","pxToRem","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","DateTimePickerSize","maxWidth","contentWrapper","gridTemplateColumns","MuiMultiSectionDigitalClock","addSpecificity","multiSectionDigitalClockClasses","multiSectionDigitalClockSectionClasses","digitalClockClasses","MuiMultiSectionDigitalClockSection","item","dateStyles","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","exports","deepmerge","datePickerTheme"],"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.cjs","names":["_utils","require","_DigitalClock","_MultiSectionDigitalClock","_addSpecificity","_datePickerTheme","_index","_DateTimePicker","DateTimePickerComponentSize","dateCalendarMaxHeight","pxToRem","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","DateTimePickerSize","maxWidth","contentWrapper","gridTemplateColumns","MuiMultiSectionDigitalClock","addSpecificity","multiSectionDigitalClockClasses","multiSectionDigitalClockSectionClasses","digitalClockClasses","MuiMultiSectionDigitalClockSection","item","dateStyles","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","exports","deepmerge","datePickerTheme"],"sources":["../../../../src/labs/DatePickers/dateTimePickerTheme.ts"],"sourcesContent":["/!\n Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport { ThemeOptions } from \"@mui/material\";\n// import { CSSInterpolation } from \"@mui/material/styles\";\nimport { deepmerge } from \"@mui/utils\";\nimport { digitalClockClasses } from \"@mui/x-date-pickers/DigitalClock\";\nimport {\n multiSectionDigitalClockClasses,\n multiSectionDigitalClockSectionClasses,\n} from \"@mui/x-date-pickers/MultiSectionDigitalClock\";\n\nimport { addSpecificity } from \"../../addSpecificity.js\";\nimport {\n datePickerTheme,\n dateStyles,\n} from \"../../DatePickers/datePickerTheme.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { DateTimePickerSize } from \"./DateTimePicker.js\";\n\nconst DateTimePickerComponentSize = {\n dateCalendarMaxHeight: `${pxToRem(336)}rem`,\n slideTransitionMinHeight: `${pxToRem(240)}rem`,\n};\n\nconst theme: ThemeOptions = {\n components: {\n MuiClock: {\n styleOverrides: {\n clock: ({ theme }) => ({\n width: `calc(${theme.spacing(9)} 4)`,\n height: `calc(${theme.spacing(9)} * 4)`,\n backgroundColor: theme.palette.grey[50],\n }),\n pin: ({ theme }) => ({\n backgroundColor: theme.palette.primary.light,\n }),\n },\n },\n MuiClockPointer: {\n styleOverrides: {\n root: ({ theme }) => ({\n backgroundColor: theme.palette.primary.light,\n }),\n thumb: ({ theme }) => ({\n borderColor: theme.palette.primary.light,\n backgroundColor: theme.palette.primary.main,\n }),\n },\n },\n MuiDateCalendar: {\n styleOverrides: {\n root: {\n display: \"block\",\n width: \"100%\",\n maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n height: DateTimePickerComponentSize.dateCalendarMaxHeight,\n },\n },\n },\n MuiPickersArrowSwitcher: {\n styleOverrides: {\n button: ({ theme }) => ({\n display: \"flex\",\n margin: 0,\n padding: theme.spacing(2),\n color: theme.typography.body1.color,\n\n \"& + &\": {\n marginInlineStart: theme.spacing(2),\n },\n\n svg: {\n display: \"flex\",\n },\n }),\n spacer: ({ theme }) => ({\n width: theme.spacing(1),\n }),\n },\n },\n MuiPickersLayout: {\n styleOverrides: {\n root: () => ({\n display: \"block\",\n width: DateTimePickerSize.maxWidth,\n maxWidth: DateTimePickerSize.maxWidth,\n }),\n contentWrapper: ({ theme }) => ({\n padding: theme.spacing(3),\n gridTemplateColumns: \"1fr 16px auto\",\n }),\n },\n },\n MuiMultiSectionDigitalClock: {\n styleOverrides: {\n root: {\n [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)}, \n ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)}, \n ${addSpecificity(2, `.${digitalClockClasses.root}`)}`]: {\n maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n },\n },\n },\n },\n MuiMultiSectionDigitalClockSection: {\n styleOverrides: {\n root: {\n width: \"auto\",\n },\n item: ({ theme }) => [\n dateStyles.default({ theme }),\n {\n margin: 0,\n marginInline: theme.spacing(1),\n \"& + &\": {\n marginBlockStart: theme.spacing(1),\n },\n \"&:hover\": dateStyles.hover({ theme }),\n \"&:focus\": dateStyles.focus({ theme }),\n\n \"&.Mui-selected, &.Mui-selected:focus\": dateStyles.selected({\n theme,\n }),\n \"&.Mui-selected:hover\": dateStyles.hoverSelected({ theme }),\n\n \"&.Mui-disabled\": dateStyles.disabled({ theme }),\n },\n ],\n },\n },\n MuiDateTimePickerToolbar: {\n styleOverrides: {\n root: ({ theme }) => ({\n padding: theme.spacing(3),\n }),\n dateContainer: ({ theme }) => ({\n flexDirection: \"row-reverse\",\n\n button: {\n \"+ button\": {\n marginInlineEnd: theme.spacing(2),\n },\n },\n }),\n timeDigitsContainer: {\n alignItems: \"center\",\n },\n ampmSelection: ({ theme }) => ({\n margin: 0,\n marginInlineStart: theme.spacing(3),\n\n button: {\n padding: theme.spacing(2),\n\n \"&:has(.Mui-selected)\": {\n backgroundColor: theme.palette.primary.main,\n\n \".Mui-selected\": {\n color: theme.palette.common.white,\n \"&::after\": {\n display: \"none\",\n },\n },\n },\n },\n }),\n separator: ({ theme }) => ({\n ...theme.typography.h5,\n marginBlock: 0,\n marginInline: theme.spacing(1),\n }),\n },\n },\n MuiPickersToolbarButton: {\n styleOverrides: {\n root: ({ theme }) => ({\n height: \"auto\",\n padding: 0,\n margin: 0,\n border: 0,\n borderRadius: theme.mixins.borderRadius,\n backgroundColor: \"transparent\",\n color: theme.typography.subtitle1.color,\n\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"& + &\": {\n marginInlineStart: 0,\n },\n }),\n },\n },\n MuiPickersToolbarText: {\n styleOverrides: {\n root: ({ theme }) => ({\n ...theme.typography.h5,\n position: \"relative\",\n margin: 0,\n lineHeight: 1,\n color: \"inherit\",\n\n \"&::after\": {\n position: \"absolute\",\n left: 0,\n bottom: 0,\n width: \"100%\",\n height: 2,\n backgroundColor: \"currentColor\",\n opacity: 0,\n content: \"''\",\n transition: \"opacity 100ms, transform 200ms\",\n },\n\n \"&.Mui-selected\": {\n color: theme.typography.body1.color,\n\n \"&::after\": {\n transform: \"translateY(2px)\",\n opacity: 1,\n },\n },\n }),\n },\n },\n MuiDayCalendar: {\n styleOverrides: {\n slideTransition: {\n minHeight: DateTimePickerComponentSize.slideTransitionMinHeight,\n },\n },\n },\n MuiTimeClock: {\n styleOverrides: {\n arrowSwitcher: {\n top: 0,\n right: 0,\n },\n },\n },\n },\n};\nexport const dateTimePickerTheme = deepmerge(datePickerTheme, theme);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/GroupPicker.cjs CHANGED Viewed

@@ -10,10 +10,10 @@ var _Box2 = _interopRequireDefault(require("@mui/material/Box"));
 var _Avatar2 = _interopRequireWildcard(require("@mui/material/Avatar"));
 var _react = require("react");
 var _Field = require("../Field.cjs");
-var _Typography = require("../Typography.cjs");
-var _Tag = require("../Tag.cjs");
-var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
 var _index = require("../icons.generated/index.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _Tag = require("../Tag.cjs");
+var _Typography = require("../Typography.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -149,10 +149,10 @@ const GroupPicker = ({
   }) => (0, _jsxRuntime.jsx)(_Field.Field, {
     fieldType: "single",
     hasVisibleLabel: true,
-    id: InputLabelProps.htmlFor,
     hint: hint,
-    label: label,
+    id: InputLabelProps.htmlFor,
     isOptional: isOptional,
+    label: label,
     renderFieldComponent: ({
       ariaDescribedBy,
       id

package/dist/cjs/labs/GroupPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupPicker.cjs","names":["_Avatar2","_interopRequireWildcard","require","_react","_Field","_Typography","_Tag","_OdysseyDesignTokensContext","_index","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","useOdysseyDesignTokens","isOptionEqualToValue","useCallback","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","createElement","key","jsxs","_Box2","sx","alignItems","display","flexDirection","children","jsx","paddingRight","Spacing2","alt","src","logo","avatarClasses","fallback","visibility","background","height","width","Subordinate","description","paddingTop","Spacing1","usersCount","Spacing4","UserIcon","appsCount","GridIcon","groupPushMappingsCount","GroupIcon","renderTags","values","getTagProps","map","index","onDelete","margin","Tag","icon","onRemove","renderInput","InputLabelProps","InputProps","params","Field","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase2","required","_Autocomplete2","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker","exports","memo"],"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.cjs","names":["_Avatar2","_interopRequireWildcard","require","_react","_Field","_index","_OdysseyDesignTokensContext","_Tag","_Typography","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","avatarImageSizeSmall","avatarImageSizeMedium","GroupPicker","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","odysseyDesignTokens","useOdysseyDesignTokens","isOptionEqualToValue","useCallback","sourceValue","targetValue","id","getOptionLabel","option","name","renderOption","props","createElement","key","jsxs","_Box2","sx","alignItems","display","flexDirection","children","jsx","paddingRight","Spacing2","alt","src","logo","avatarClasses","fallback","visibility","background","height","width","Subordinate","description","paddingTop","Spacing1","usersCount","Spacing4","UserIcon","appsCount","GridIcon","groupPushMappingsCount","GroupIcon","renderTags","values","getTagProps","map","index","onDelete","margin","Tag","icon","onRemove","renderInput","InputLabelProps","InputProps","params","Field","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","ariaDescribedBy","_InputBase2","required","_Autocomplete2","disabled","filterSelectedOptions","freeSolo","loading","multiple","readOnly","MemoizedGroupPicker","exports","memo"],"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/cjs/labs/OdysseyPickers/ComposablePicker.cjs CHANGED Viewed

@@ -7,8 +7,8 @@ exports.adornmentSizeValues = exports.ComposablePicker = void 0;
 var _Autocomplete2 = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _PickerVirtualizationListBox = require("./PickerVirtualizationListBox.cjs");
 var _useAutocomplete = require("../../useAutocomplete.cjs");
+var _PickerVirtualizationListBox = require("./PickerVirtualizationListBox.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -94,8 +94,8 @@ const ComposablePicker = ({
     closeText: t("close.text"),
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,
-    freeSolo: isCustomValueAllowed,
     filterSelectedOptions: true,
+    freeSolo: isCustomValueAllowed,
     fullWidth: isFullWidth,
     getOptionLabel: getOptionLabel,
     groupBy: groupOptionsBy,
@@ -106,8 +106,8 @@ const ComposablePicker = ({
     noOptionsText: emptyOptionsText,
     onBlur: onBlur,
     onChange: onChange,
-    onInputChange: onInputChange,
     onFocus: onFocus,
+    onInputChange: onInputChange,
     options: options,
     readOnly: isReadOnly,
     renderInput: renderInput,

package/dist/cjs/labs/OdysseyPickers/ComposablePicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComposablePicker.cjs","names":["_react","require","_reactI18next","~~_PickerVirtualizationListBox~~","~~_useAutocomplete~~","_jsxRuntime","_interopRequireDefault","e","__esModule","default","adornmentSizeValues","exports","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","useTranslation","inputValueProp","isVirtualizedRef","renderInput","valueProps","useAutocomplete","jsx","_Autocomplete2","current","ListboxComponent","PickerVirtualizationListBox","clearText","closeText","disableCloseOnSelect","disabled","~~freeSolo~~","~~filterSelectedOptions~~","fullWidth","groupBy","isOptionEqualToValue","loading","multiple","noOptionsText","readOnly","MemoizedComposablePicker","memo","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":";;;;;;;~~AAYA~~,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;~~AAOA~~,IAAAE,~~4BAAA~~,GAAAF,OAAA;AACA,IAAAG,~~gBAAA~~,GAAAH,OAAA;~~AAA2D~~,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;~~AArB3D~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaO,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;AAqE9D,MAAME,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,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAC9B,MAAM;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjE,IAAAC,gCAAe,EAAuD;IACpExC,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,OACE,IAAAvC,WAAA,CAAAiD,GAAA,EAAAC,cAAA,CAAA9C,OAAA;IAAA,GACM2C,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACM,OAAO,IAAI;MAC/BC,gBAAgB,EAAEC;IACpB,CAAC;IAED,iBAAehC,UAAW;IAC1BiC,SAAS,EAAEZ,CAAC,CAAC,YAAY,CAAE;IAC3Ba,SAAS,EAAEb,CAAC,CAAC,YAAY,CAAE;IAC3Bc,oBAAoB,EAAExC,kBAAmB;IACzCyC,QAAQ,EAAEpC,UAAW;IACrBqC,QAAQ,~~EAAEtC~~,oBAAqB;IAC/~~BuC~~,~~qBAAqB,EAAE,IAAK;IAC5BC,~~SAAS,EAAEtC,WAAY;IACvBR,cAAc,EAAEA,cAAe;IAC/B+C,OAAO,EAAE9C,cAAe;IACxBE,EAAE,EAAEC,UAAW;IACf4C,oBAAoB,EAAEjD,uBAAwB;IAC9CkD,OAAO,EAAExC,SAAU;IACnByC,QAAQ,EAAEhD,kBAAmB;IAC7BiD,aAAa,EAAEvD,gBAAiB;IAChCsB,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;~~IACnBC~~,~~aAAa~~,EAAEA,~~aAAc~~;~~IAC7BC~~,~~OAAO~~,EAAEA,~~OAAQ~~;~~IACjBC~~,OAAO,EAAEA,OAAQ;IACjB8B,QAAQ,EAAEzC,UAAW;IACrBqB,WAAW,EAAEA,WAAY;IACzBT,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAM0B,wBAAwB,GAAA7D,OAAA,CAAAC,gBAAA,GAAG,IAAA6D,WAAI,EACnC7D,gBACF,CAA4B;AAE5B4D,wBAAwB,CAACE,WAAW,GAAG,kBAAkB","ignoreList":[]}
1	+ {"version":3,"file":"ComposablePicker.cjs","names":["_react","require","_reactI18next","_useAutocomplete","_PickerVirtualizationListBox","_jsxRuntime","_interopRequireDefault","e","__esModule","default","adornmentSizeValues","exports","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","useTranslation","inputValueProp","isVirtualizedRef","renderInput","valueProps","useAutocomplete","jsx","_Autocomplete2","current","ListboxComponent","PickerVirtualizationListBox","clearText","closeText","disableCloseOnSelect","disabled","filterSelectedOptions","freeSolo","fullWidth","groupBy","isOptionEqualToValue","loading","multiple","noOptionsText","readOnly","MemoizedComposablePicker","memo","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":";;;;;;;AAgBA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAGA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,4BAAA,GAAAH,OAAA;AAA+E,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AArB/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaO,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU;AAqE9D,MAAME,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,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAC9B,MAAM;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GACjE,IAAAC,gCAAe,EAAuD;IACpExC,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,OACE,IAAAvC,WAAA,CAAAiD,GAAA,EAAAC,cAAA,CAAA9C,OAAA;IAAA,GACM2C,UAAU;IAAA,GACVH,cAAc;IAAA,IAEbC,gBAAgB,CAACM,OAAO,IAAI;MAC/BC,gBAAgB,EAAEC;IACpB,CAAC;IAED,iBAAehC,UAAW;IAC1BiC,SAAS,EAAEZ,CAAC,CAAC,YAAY,CAAE;IAC3Ba,SAAS,EAAEb,CAAC,CAAC,YAAY,CAAE;IAC3Bc,oBAAoB,EAAExC,kBAAmB;IACzCyC,QAAQ,EAAEpC,UAAW;IACrBqC,qBAAqB,EAAE,IAAK;IAC5BC,QAAQ,EAAEvC,oBAAqB;IAC/BwC,SAAS,EAAEtC,WAAY;IACvBR,cAAc,EAAEA,cAAe;IAC/B+C,OAAO,EAAE9C,cAAe;IACxBE,EAAE,EAAEC,UAAW;IACf4C,oBAAoB,EAAEjD,uBAAwB;IAC9CkD,OAAO,EAAExC,SAAU;IACnByC,QAAQ,EAAEhD,kBAAmB;IAC7BiD,aAAa,EAAEvD,gBAAiB;IAChCsB,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBD,aAAa,EAAEA,aAAc;IAC7BE,OAAO,EAAEA,OAAQ;IACjB8B,QAAQ,EAAEzC,UAAW;IACrBqB,WAAW,EAAEA,WAAY;IACzBT,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAM0B,wBAAwB,GAAA7D,OAAA,CAAAC,gBAAA,GAAG,IAAA6D,WAAI,EACnC7D,gBACF,CAA4B;AAE5B4D,wBAAwB,CAACE,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/dist/cjs/labs/OdysseyPickers/Picker.cjs CHANGED Viewed

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledOption = exports.Picker = exports.OptionMetadataComponent = exports.OptionLabelOnlyComponent = exports.OptionLabelContainer = exports.OptionDetails = exports.OptionDetail = exports.OptionDescriptionComponent = exports.OptionDescription = exports.Option = void 0;
-var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _ComposablePicker = require("./ComposablePicker.cjs");
+var _react = require("react");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
 var _Typography = require("../../Typography.cjs");
+var _ComposablePicker = require("./ComposablePicker.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -78,8 +78,8 @@ const Option = ({
   } = muiProps;
   return (0, _react.createElement)(StyledOption, {
     ...props,
-    key: key,
-    hasAdornment: hasAdornment
+    hasAdornment: hasAdornment,
+    key: key
   }, children);
 };
 exports.Option = Option;