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

@okta/odyssey-react-mui 1.43.0 → 1.45.0

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

Files changed (1901) hide show

package/dist/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","_datePickerTheme","_index","_addSpecificity","_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 {\n datePickerTheme,\n dateStyles,\n} from \"../../DatePickers/datePickerTheme.js\";\nimport { pxToRem } from \"../../theme/index.js\";\nimport { addSpecificity } from \"../../tools/addSpecificity.js\";\nimport { DateTimePickerSize } from \"./DateTimePicker.js\";\n\nconst DateTimePickerComponentSize = {\n dateCalendarMaxHeight: `${pxToRem(336)}rem`,\n slideTransitionMinHeight: `${pxToRem(240)}rem`,\n};\n\nconst theme: ThemeOptions = {\n components: {\n MuiClock: {\n styleOverrides: {\n clock: ({ theme }) => ({\n width: `calc(${theme.spacing(9)} 4)`,\n height: `calc(${theme.spacing(9)} * 4)`,\n backgroundColor: theme.palette.grey[50],\n }),\n pin: ({ theme }) => ({\n backgroundColor: theme.palette.primary.light,\n }),\n },\n },\n MuiClockPointer: {\n styleOverrides: {\n root: ({ theme }) => ({\n backgroundColor: theme.palette.primary.light,\n }),\n thumb: ({ theme }) => ({\n borderColor: theme.palette.primary.light,\n backgroundColor: theme.palette.primary.main,\n }),\n },\n },\n MuiDateCalendar: {\n styleOverrides: {\n root: {\n display: \"block\",\n width: \"100%\",\n maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n height: DateTimePickerComponentSize.dateCalendarMaxHeight,\n },\n },\n },\n MuiPickersArrowSwitcher: {\n styleOverrides: {\n button: ({ theme }) => ({\n display: \"flex\",\n margin: 0,\n padding: theme.spacing(2),\n color: theme.typography.body1.color,\n\n \"& + &\": {\n marginInlineStart: theme.spacing(2),\n },\n\n svg: {\n display: \"flex\",\n },\n }),\n spacer: ({ theme }) => ({\n width: theme.spacing(1),\n }),\n },\n },\n MuiPickersLayout: {\n styleOverrides: {\n root: () => ({\n display: \"block\",\n width: DateTimePickerSize.maxWidth,\n maxWidth: DateTimePickerSize.maxWidth,\n }),\n contentWrapper: ({ theme }) => ({\n padding: theme.spacing(3),\n gridTemplateColumns: \"1fr 16px auto\",\n }),\n },\n },\n MuiMultiSectionDigitalClock: {\n styleOverrides: {\n root: {\n [`${addSpecificity(2, `.${multiSectionDigitalClockClasses.root}`)},\n ${addSpecificity(2, ` .${multiSectionDigitalClockSectionClasses.root}`)},\n ${addSpecificity(2, `.${digitalClockClasses.root}`)}`]: {\n maxHeight: DateTimePickerComponentSize.dateCalendarMaxHeight,\n },\n },\n },\n },\n MuiMultiSectionDigitalClockSection: {\n styleOverrides: {\n root: {\n width: \"auto\",\n },\n item: ({ theme }) => [\n dateStyles.default({ theme }),\n {\n margin: 0,\n marginInline: theme.spacing(1),\n \"& + &\": {\n marginBlockStart: theme.spacing(1),\n },\n \"&:hover\": dateStyles.hover({ theme }),\n \"&:focus\": dateStyles.focus({ theme }),\n\n \"&.Mui-selected, &.Mui-selected:focus\": dateStyles.selected({\n theme,\n }),\n \"&.Mui-selected:hover\": dateStyles.hoverSelected({ theme }),\n\n \"&.Mui-disabled\": dateStyles.disabled({ theme }),\n },\n ],\n },\n },\n MuiDateTimePickerToolbar: {\n styleOverrides: {\n root: ({ theme }) => ({\n padding: theme.spacing(3),\n }),\n dateContainer: ({ theme }) => ({\n flexDirection: \"row-reverse\",\n\n button: {\n \"+ button\": {\n marginInlineEnd: theme.spacing(2),\n },\n },\n }),\n timeDigitsContainer: {\n alignItems: \"center\",\n },\n ampmSelection: ({ theme }) => ({\n margin: 0,\n marginInlineStart: theme.spacing(3),\n\n button: {\n padding: theme.spacing(2),\n\n \"&:has(.Mui-selected)\": {\n backgroundColor: theme.palette.primary.main,\n\n \".Mui-selected\": {\n color: theme.palette.common.white,\n \"&::after\": {\n display: \"none\",\n },\n },\n },\n },\n }),\n separator: ({ theme }) => ({\n ...theme.typography.h5,\n marginBlock: 0,\n marginInline: theme.spacing(1),\n }),\n },\n },\n MuiPickersToolbarButton: {\n styleOverrides: {\n root: ({ theme }) => ({\n height: \"auto\",\n padding: 0,\n margin: 0,\n border: 0,\n borderRadius: theme.mixins.borderRadius,\n backgroundColor: \"transparent\",\n color: theme.typography.subtitle1.color,\n\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"& + &\": {\n marginInlineStart: 0,\n },\n }),\n },\n },\n MuiPickersToolbarText: {\n styleOverrides: {\n root: ({ theme }) => ({\n ...theme.typography.h5,\n position: \"relative\",\n margin: 0,\n lineHeight: 1,\n color: \"inherit\",\n\n \"&::after\": {\n position: \"absolute\",\n left: 0,\n bottom: 0,\n width: \"100%\",\n height: 2,\n backgroundColor: \"currentColor\",\n opacity: 0,\n content: \"''\",\n transition: \"opacity 100ms, transform 200ms\",\n },\n\n \"&.Mui-selected\": {\n color: theme.typography.body1.color,\n\n \"&::after\": {\n transform: \"translateY(2px)\",\n opacity: 1,\n },\n },\n }),\n },\n },\n MuiDayCalendar: {\n styleOverrides: {\n slideTransition: {\n minHeight: DateTimePickerComponentSize.slideTransitionMinHeight,\n },\n },\n },\n MuiTimeClock: {\n styleOverrides: {\n arrowSwitcher: {\n top: 0,\n right: 0,\n },\n },\n },\n },\n};\nexport const dateTimePickerTheme = deepmerge(datePickerTheme, theme);\n"],"mappings":";;;;;;AAcA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,yBAAA,GAAAF,OAAA;AAKA,IAAAG,gBAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AA3BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAmBA,MAAMO,2BAA2B,GAAG;EAClCC,qBAAqB,EAAE,GAAG,IAAAC,cAAO,EAAC,GAAG,CAAC,KAAK;EAC3CC,wBAAwB,EAAE,GAAG,IAAAD,cAAO,EAAC,GAAG,CAAC;AAC3C,CAAC;AAED,MAAME,KAAmB,GAAG;EAC1BC,UAAU,EAAE;IACVC,QAAQ,EAAE;MACRC,cAAc,EAAE;QACdC,KAAK,EAAEA,CAAC;UAAEJ;QAAM,CAAC,MAAM;UACrBK,KAAK,EAAE,QAAQL,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC,OAAO;UACtCC,MAAM,EAAE,QAAQP,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC,OAAO;UACvCE,eAAe,EAAER,KAAK,CAACS,OAAO,CAACC,IAAI,CAAC,EAAE;QACxC,CAAC,CAAC;QACFC,GAAG,EAAEA,CAAC;UAAEX;QAAM,CAAC,MAAM;UACnBQ,eAAe,EAAER,KAAK,CAACS,OAAO,CAACG,OAAO,CAACC;QACzC,CAAC;MACH;IACF,CAAC;IACDC,eAAe,EAAE;MACfX,cAAc,EAAE;QACdY,IAAI,EAAEA,CAAC;UAAEf;QAAM,CAAC,MAAM;UACpBQ,eAAe,EAAER,KAAK,CAACS,OAAO,CAACG,OAAO,CAACC;QACzC,CAAC,CAAC;QACFG,KAAK,EAAEA,CAAC;UAAEhB;QAAM,CAAC,MAAM;UACrBiB,WAAW,EAAEjB,KAAK,CAACS,OAAO,CAACG,OAAO,CAACC,KAAK;UACxCL,eAAe,EAAER,KAAK,CAACS,OAAO,CAACG,OAAO,CAACM;QACzC,CAAC;MACH;IACF,CAAC;IACDC,eAAe,EAAE;MACfhB,cAAc,EAAE;QACdY,IAAI,EAAE;UACJK,OAAO,EAAE,OAAO;UAChBf,KAAK,EAAE,MAAM;UACbgB,SAAS,EAAEzB,2BAA2B,CAACC,qBAAqB;UAC5DU,MAAM,EAAEX,2BAA2B,CAACC;QACtC;MACF;IACF,CAAC;IACDyB,uBAAuB,EAAE;MACvBnB,cAAc,EAAE;QACdoB,MAAM,EAAEA,CAAC;UAAEvB;QAAM,CAAC,MAAM;UACtBoB,OAAO,EAAE,MAAM;UACfI,MAAM,EAAE,CAAC;UACTC,OAAO,EAAEzB,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC;UACzBoB,KAAK,EAAE1B,KAAK,CAAC2B,UAAU,CAACC,KAAK,CAACF,KAAK;UAEnC,OAAO,EAAE;YACPG,iBAAiB,EAAE7B,KAAK,CAACM,OAAO,CAAC,CAAC;UACpC,CAAC;UAEDwB,GAAG,EAAE;YACHV,OAAO,EAAE;UACX;QACF,CAAC,CAAC;QACFW,MAAM,EAAEA,CAAC;UAAE/B;QAAM,CAAC,MAAM;UACtBK,KAAK,EAAEL,KAAK,CAACM,OAAO,CAAC,CAAC;QACxB,CAAC;MACH;IACF,CAAC;IACD0B,gBAAgB,EAAE;MAChB7B,cAAc,EAAE;QACdY,IAAI,EAAEA,CAAA,MAAO;UACXK,OAAO,EAAE,OAAO;UAChBf,KAAK,EAAE4B,kCAAkB,CAACC,QAAQ;UAClCA,QAAQ,EAAED,kCAAkB,CAACC;QAC/B,CAAC,CAAC;QACFC,cAAc,EAAEA,CAAC;UAAEnC;QAAM,CAAC,MAAM;UAC9ByB,OAAO,EAAEzB,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC;UACzB8B,mBAAmB,EAAE;QACvB,CAAC;MACH;IACF,CAAC;IACDC,2BAA2B,EAAE;MAC3BlC,cAAc,EAAE;QACdY,IAAI,EAAE;UACJ,CAAC,GAAG,IAAAuB,8BAAc,EAAC,CAAC,EAAE,IAAIC,yDAA+B,CAACxB,IAAI,EAAE,CAAC;AAC3E,cAAc,IAAAuB,8BAAc,EAAC,CAAC,EAAE,KAAKE,gEAAsC,CAACzB,IAAI,EAAE,CAAC;AACnF,cAAc,IAAAuB,8BAAc,EAAC,CAAC,EAAE,IAAIG,iCAAmB,CAAC1B,IAAI,EAAE,CAAC,EAAE,GAAG;YACxDM,SAAS,EAAEzB,2BAA2B,CAACC;UACzC;QACF;MACF;IACF,CAAC;IACD6C,kCAAkC,EAAE;MAClCvC,cAAc,EAAE;QACdY,IAAI,EAAE;UACJV,KAAK,EAAE;QACT,CAAC;QACDsC,IAAI,EAAEA,CAAC;UAAE3C;QAAM,CAAC,KAAK,CACnB4C,2BAAU,CAACC,OAAO,CAAC;UAAE7C;QAAM,CAAC,CAAC,EAC7B;UACEwB,MAAM,EAAE,CAAC;UACTsB,YAAY,EAAE9C,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC;UAC9B,OAAO,EAAE;YACPyC,gBAAgB,EAAE/C,KAAK,CAACM,OAAO,CAAC,CAAC;UACnC,CAAC;UACD,SAAS,EAAEsC,2BAAU,CAACI,KAAK,CAAC;YAAEhD;UAAM,CAAC,CAAC;UACtC,SAAS,EAAE4C,2BAAU,CAACK,KAAK,CAAC;YAAEjD;UAAM,CAAC,CAAC;UAEtC,sCAAsC,EAAE4C,2BAAU,CAACM,QAAQ,CAAC;YAC1DlD;UACF,CAAC,CAAC;UACF,sBAAsB,EAAE4C,2BAAU,CAACO,aAAa,CAAC;YAAEnD;UAAM,CAAC,CAAC;UAE3D,gBAAgB,EAAE4C,2BAAU,CAACQ,QAAQ,CAAC;YAAEpD;UAAM,CAAC;QACjD,CAAC;MAEL;IACF,CAAC;IACDqD,wBAAwB,EAAE;MACxBlD,cAAc,EAAE;QACdY,IAAI,EAAEA,CAAC;UAAEf;QAAM,CAAC,MAAM;UACpByB,OAAO,EAAEzB,KAAK,CAACM,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;QACFgD,aAAa,EAAEA,CAAC;UAAEtD;QAAM,CAAC,MAAM;UAC7BuD,aAAa,EAAE,aAAa;UAE5BhC,MAAM,EAAE;YACN,UAAU,EAAE;cACViC,eAAe,EAAExD,KAAK,CAACM,OAAO,CAAC,CAAC;YAClC;UACF;QACF,CAAC,CAAC;QACFmD,mBAAmB,EAAE;UACnBC,UAAU,EAAE;QACd,CAAC;QACDC,aAAa,EAAEA,CAAC;UAAE3D;QAAM,CAAC,MAAM;UAC7BwB,MAAM,EAAE,CAAC;UACTK,iBAAiB,EAAE7B,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC;UAEnCiB,MAAM,EAAE;YACNE,OAAO,EAAEzB,KAAK,CAACM,OAAO,CAAC,CAAC,CAAC;YAEzB,sBAAsB,EAAE;cACtBE,eAAe,EAAER,KAAK,CAACS,OAAO,CAACG,OAAO,CAACM,IAAI;cAE3C,eAAe,EAAE;gBACfQ,KAAK,EAAE1B,KAAK,CAACS,OAAO,CAACmD,MAAM,CAACC,KAAK;gBACjC,UAAU,EAAE;kBACVzC,OAAO,EAAE;gBACX;cACF;YACF;UACF;QACF,CAAC,CAAC;QACF0C,SAAS,EAAEA,CAAC;UAAE9D;QAAM,CAAC,MAAM;UACzB,GAAGA,KAAK,CAAC2B,UAAU,CAACoC,EAAE;UACtBC,WAAW,EAAE,CAAC;UACdlB,YAAY,EAAE9C,KAAK,CAACM,OAAO,CAAC,CAAC;QAC/B,CAAC;MACH;IACF,CAAC;IACD2D,uBAAuB,EAAE;MACvB9D,cAAc,EAAE;QACdY,IAAI,EAAEA,CAAC;UAAEf;QAAM,CAAC,MAAM;UACpBO,MAAM,EAAE,MAAM;UACdkB,OAAO,EAAE,CAAC;UACVD,MAAM,EAAE,CAAC;UACT0C,MAAM,EAAE,CAAC;UACTC,YAAY,EAAEnE,KAAK,CAACoE,MAAM,CAACD,YAAY;UACvC3D,eAAe,EAAE,aAAa;UAC9BkB,KAAK,EAAE1B,KAAK,CAAC2B,UAAU,CAAC0C,SAAS,CAAC3C,KAAK;UAEvC,SAAS,EAAE;YACTlB,eAAe,EAAE;UACnB,CAAC;UAED,OAAO,EAAE;YACPqB,iBAAiB,EAAE;UACrB;QACF,CAAC;MACH;IACF,CAAC;IACDyC,qBAAqB,EAAE;MACrBnE,cAAc,EAAE;QACdY,IAAI,EAAEA,CAAC;UAAEf;QAAM,CAAC,MAAM;UACpB,GAAGA,KAAK,CAAC2B,UAAU,CAACoC,EAAE;UACtBQ,QAAQ,EAAE,UAAU;UACpB/C,MAAM,EAAE,CAAC;UACTgD,UAAU,EAAE,CAAC;UACb9C,KAAK,EAAE,SAAS;UAEhB,UAAU,EAAE;YACV6C,QAAQ,EAAE,UAAU;YACpBE,IAAI,EAAE,CAAC;YACPC,MAAM,EAAE,CAAC;YACTrE,KAAK,EAAE,MAAM;YACbE,MAAM,EAAE,CAAC;YACTC,eAAe,EAAE,cAAc;YAC/BmE,OAAO,EAAE,CAAC;YACVC,OAAO,EAAE,IAAI;YACbC,UAAU,EAAE;UACd,CAAC;UAED,gBAAgB,EAAE;YAChBnD,KAAK,EAAE1B,KAAK,CAAC2B,UAAU,CAACC,KAAK,CAACF,KAAK;YAEnC,UAAU,EAAE;cACVoD,SAAS,EAAE,iBAAiB;cAC5BH,OAAO,EAAE;YACX;UACF;QACF,CAAC;MACH;IACF,CAAC;IACDI,cAAc,EAAE;MACd5E,cAAc,EAAE;QACd6E,eAAe,EAAE;UACfC,SAAS,EAAErF,2BAA2B,CAACG;QACzC;MACF;IACF,CAAC;IACDmF,YAAY,EAAE;MACZ/E,cAAc,EAAE;QACdgF,aAAa,EAAE;UACbC,GAAG,EAAE,CAAC;UACNC,KAAK,EAAE;QACT;MACF;IACF;EACF;AACF,CAAC;AACM,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,gBAAS,EAACC,gCAAe,EAAEzF,KAAK,CAAC","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":";;;;;;;;;AAwBA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,2BAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAA4E,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAD,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAkB,uBAAAnB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAhC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA4CA,MAAMoB,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,qBAAqB,GAAG,EAAE;AAEhC,MAAMC,WAAW,GAAGA,CAIlB;EACAC,kBAAkB;EAClBC,oBAAoB;EACpBC,UAAU;EACVC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,KAAK;EACLC;AACsE,CAAC,KAAK;EAC5E,MAAMC,mBAAmB,GAAG,IAAAC,kDAAsB,EAAC,CAAC;EAEpD,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EACtC,CAACC,WAAuB,EAAEC,WAAuB,KAAK;IACpD,OAAOD,WAAW,CAACE,EAAE,KAAKD,WAAW,CAACC,EAAE;EAC1C,CAAC,EACD,EACF,CAAC;EAED,MAAMC,cAAc,GAAG,IAAAJ,kBAAW,EAE9BK,MAE0D,IACvD;IACH,OAAQA,MAAM,CAAgBC,IAAI;EACpC,CAAC,EACD,EACF,CAAC;EAED,MAAMC,YAAY,GAAG,IAAAP,kBAAW,EAC9B,CAACQ,KAAkC,EAAEH,MAAkB,KAAK;IAC1D,OACE,IAAAnD,MAAA,CAAAuD,aAAA;MAAA,GAAQD,KAAK;MAAEE,GAAG,EAAEL,MAAM,CAACF;IAAG,GAC5B,IAAA3C,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;MACE0C,EAAE,EAAE;QACFC,UAAU,EAAE,KAAK;QACjBC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE;MACjB,CAAE;MAAAC,QAAA,GAEF,IAAAzD,WAAA,CAAA0D,GAAA,EAAAN,KAAA,CAAAzC,OAAA;QAAK0C,EAAE,EAAE;UAAEM,YAAY,EAAEtB,mBAAmB,CAACuB;QAAS,CAAE;QAAAH,QAAA,EACtD,IAAAzD,WAAA,CAAA0D,GAAA,EAAAnE,QAAA,CAAAoB,OAAA;UACEkD,GAAG,EAAEhB,MAAM,CAACC,IAAK;UACjBgB,GAAG,EAAEjB,MAAM,CAACkB,IAAK;UACjBV,EAAE,EAAE;YACF,CAAC,IAAIW,sBAAa,CAACC,QAAQ,EAAE,GAAG;cAC9BC,UAAU,EAAE;YACd,CAAC;YACDC,UAAU,EAAE,aAAa;YACzBC,MAAM,EAAE9C,qBAAqB;YAC7B+C,KAAK,EAAE/C;UACT;QAAE,CACH;MAAC,CACC,CAAC,EACN,IAAAtB,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;QAAA8C,QAAA,GACGZ,MAAM,CAACC,IAAI,EACZ,IAAA9C,WAAA,CAAA0D,GAAA,EAAC9D,WAAA,CAAA0E,WAAW;UAAAb,QAAA,EAAEZ,MAAM,CAAC0B;QAAW,CAAc,CAAC,EAC/C,IAAAvE,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;UACE0C,EAAE,EAAE;YACFE,OAAO,EAAE,MAAM;YACfC,aAAa,EAAE,KAAK;YACpBgB,UAAU,EAAEnC,mBAAmB,CAACoC;UAClC,CAAE;UAAAhB,QAAA,GAED,OAAOZ,MAAM,CAAC6B,UAAU,KAAK,QAAQ,IACpC,IAAA1E,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;YACE0C,EAAE,EAAE;cACFE,OAAO,EAAE,MAAM;cACfC,aAAa,EAAE,KAAK;cACpBG,YAAY,EAAEtB,mBAAmB,CAACsC;YACpC,CAAE;YAAAlB,QAAA,GAEF,IAAAzD,WAAA,CAAA0D,GAAA,EAAC3D,MAAA,CAAA6E,QAAQ,IAAE,CAAC,EACX/B,MAAM,CAAC6B,UAAU;UAAA,CACf,CACN,EACA,OAAO7B,MAAM,CAACgC,SAAS,KAAK,QAAQ,IACnC,IAAA7E,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;YACE0C,EAAE,EAAE;cACFE,OAAO,EAAE,MAAM;cACfC,aAAa,EAAE,KAAK;cACpBG,YAAY,EAAEtB,mBAAmB,CAACsC;YACpC,CAAE;YAAAlB,QAAA,GAEF,IAAAzD,WAAA,CAAA0D,GAAA,EAAC3D,MAAA,CAAA+E,QAAQ,IAAE,CAAC,EACXjC,MAAM,CAACgC,SAAS;UAAA,CACd,CACN,EACA,OAAOhC,MAAM,CAACkC,sBAAsB,KAAK,QAAQ,IAChD,IAAA/E,WAAA,CAAAmD,IAAA,EAAAC,KAAA,CAAAzC,OAAA;YAAK0C,EAAE,EAAE;cAAEE,OAAO,EAAE,MAAM;cAAEC,aAAa,EAAE;YAAM,CAAE;YAAAC,QAAA,GACjD,IAAAzD,WAAA,CAAA0D,GAAA,EAAC3D,MAAA,CAAAiF,SAAS,IAAE,CAAC,EACZnC,MAAM,CAACkC,sBAAsB;UAAA,CAC3B,CACN;QAAA,CACE,CAAC;MAAA,CACH,CAAC;IAAA,CACH,CACH,CAAC;EAET,CAAC,EACD,CAAC1C,mBAAmB,CACtB,CAAC;EAED,MAAM4C,UAAU,GAAG,IAAAzC,kBAAW,EAC5B,CAAC0C,MAAoB,EAAEC,WAAoC,KACzDD,MAAM,CAACE,GAAG,CAAC,CAACvC,MAAM,EAAEwC,KAAK,KAAK;IAC5B,MAAM;MAAEnC,GAAG;MAAEoC;IAAS,CAAC,GAAGH,WAAW,CAAC;MAAEE;IAAM,CAAC,CAAC;IAChD,OACE,IAAArF,WAAA,CAAA0D,GAAA,EAAAN,KAAA,CAAAzC,OAAA;MAEE0C,EAAE,EAAE;QACFkC,MAAM,EAAElD,mBAAmB,CAACoC;MAC9B,CAAE;MAAAhB,QAAA,EAEF,IAAAzD,WAAA,CAAA0D,GAAA,EAAC7D,IAAA,CAAA2F,GAAG;QACFC,IAAI,EACF,IAAAzF,WAAA,CAAA0D,GAAA,EAAAnE,QAAA,CAAAoB,OAAA;UACEkD,GAAG,EAAEhB,MAAM,CAACC,IAAK;UACjBgB,GAAG,EAAEjB,MAAM,CAACkB,IAAK;UACjBV,EAAE,EAAE;YACF,CAAC,IAAIW,sBAAa,CAACC,QAAQ,EAAE,GAAG;cAC9BC,UAAU,EAAE;YACd,CAAC;YACDC,UAAU,EAAE,aAAa;YACzBC,MAAM,EAAE/C,oBAAoB;YAC5BgD,KAAK,EAAEhD;UACT;QAAE,CACH,CACF;QACDU,KAAK,EAAEc,MAAM,CAACC,IAAK;QACnB4C,QAAQ,EAAEJ;MAAS,CACpB;IAAC,GAtBGpC,GAuBF,CAAC;EAEV,CAAC,CAAC,EACJ,CAACb,mBAAmB,CACtB,CAAC;EAED,MAAMsD,WAAW,GAAG,IAAAnD,kBAAW,EAC7B,CAAC;IACCoD,eAAe;IACfC,UAAU;IACV,GAAGC;EAC0B,CAAC,KAC9B,IAAA9F,WAAA,CAAA0D,GAAA,EAAC/D,MAAA,CAAAoG,KAAK;IACJC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IAGftD,EAAE,EAAEiD,eAAe,CAACM,OAAQ;IAC5BpE,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbH,UAAU,EAAEA,UAAW;IACvBuE,oBAAoB,EAAEA,CAAC;MAAEC,eAAe;MAAEzD;IAAG,CAAC,KAC5C,IAAA3C,WAAA,CAAA0D,GAAA,EAAA2C,WAAA,CAAA1F,OAAA;MAAA,GACMmF,MAAM;MAAA,GACND,UAAU;MACd,oBAAkBO,eAAgB;MAClCzD,EAAE,EAAEA,EAAG;MACP2D,QAAQ,EAAE,CAAC1E;IAAW,CACvB;EACD,CACH,CACF,EACD,CAACE,IAAI,EAAEF,UAAU,EAAEG,KAAK,CAC1B,CAAC;EAED,OACE,IAAA/B,WAAA,CAAA0D,GAAA,EAAA6C,cAAA,CAAA5F,OAAA;IAEE,iBAAee,UAAW;IAC1B,WAASU,MAAO;IAChBoE,QAAQ,EAAE9E,UAAW;IACrB+E,qBAAqB,EAAE,IAAK;IAC5BC,QAAQ,EAAEjF,oBAAqB;IAC/BmB,cAAc,EAAEA,cAAe;IAC/BL,oBAAoB,EAAEA,oBAAqB;IAC3CoE,OAAO,EAAEhF,SAAU;IACnBiF,QAAQ,EAAEpF,kBAAmB;IAC7BQ,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjB2E,QAAQ,EAAEhF,UAAW;IACrB8D,WAAW,EAAEA,WAAY;IACzB5C,YAAY,EAAEA,YAAa;IAC3BkC,UAAU,EAAEA,UAAW;IACvB9C,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAM2E,mBAAmB,GAAAC,OAAA,CAAAxF,WAAA,GAAG,IAAAyF,WAAI,EAACzF,WAAW,CAAuB","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":"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","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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.cjs","names":["_react","require","_styled","_interopRequireDefault","_ComposablePicker","_OdysseyDesignTokensContext","_Typography","_jsxRuntime","e","__esModule","default","StyledOption","exports","styled","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","createElement","OptionMetadataComponent","metaData","jsx","map","meta","index","detailText","icon","jsxs","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","Paragraph","OptionLabelDescription","Heading6","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","useOdysseyDesignTokens","customOptionRender","useCallback","hasDescription","hasMetadata","isLabelOnly","Fragment","ComposablePicker","renderOption","MemoizedPicker","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Fragment,\n memo,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\n\nimport {\n ComposablePicker,\n type BasePickerProps,\n type BasePickerType,\n type BaseRenderOptionProps,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n ({ hasAdornment }) => ({\n ...(!hasAdornment && {\n display: \"block !important\",\n }),\n }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n p: {\n margin: 0,\n },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing3,\n marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n gap: odysseyDesignTokens.Spacing1,\n\n svg: {\n width: odysseyDesignTokens.Spacing4,\n color: odysseyDesignTokens.HueNeutral400,\n },\n}));\n\nexport type BaseOptionProps = {\n muiProps: BaseRenderOptionProps;\n odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n hasAdornment?: boolean;\n muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n children,\n hasAdornment = false,\n muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n const { key, ...props } = muiProps;\n return (\n <StyledOption {...props} key={key} hasAdornment={hasAdornment}>\n {children}\n </StyledOption>\n );\n};\n\nexport const OptionMetadataComponent = ({\n metaData,\n odysseyDesignTokens,\n}: {\n metaData: OptionMetadata[];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n {metaData.map((meta: OptionMetadata, index: number) => {\n const { detailText, icon } = meta;\n return (\n <OptionDetail\n key={`${detailText}-${index}`}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {icon}\n {detailText}\n </OptionDetail>\n );\n })}\n </OptionDetails>\n );\n};\n\nexport const OptionDescriptionComponent = ({\n description,\n odysseyDesignTokens,\n}: {\n description?: LabelDescription[\"description\"];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n description && (\n <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n {description}\n </OptionDescription>\n )\n );\n};\n\nexport type OptionProps<OptionType> = {\n option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Paragraph>{label}</Paragraph>\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescriptionMetadata = <\n OptionType extends LabelDescriptionMetadata,\n>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label, metaData } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n <OptionMetadataComponent\n metaData={metaData}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </Option>\n );\n};\n\nexport type OptionMetadata = {\n icon: ReactElement;\n detailText: string \| number;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string \| number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n OptionGroupType &\n OptionLabelType;\nexport type Metadata = {\n metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n OptionType extends LabelDescription \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n <\n OptionType extends OptionLabelOnly,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescription,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n OptionType extends\n \| OptionLabelOnly\n \| LabelDescription\n \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n ariaDescribedBy,\n defaultValue,\n emptyOptionsText,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\n hasMultipleChoices,\n id: idOverride,\n inputValue,\n isCustomValueAllowed,\n isDisabled,\n isFullWidth = false,\n isLoading,\n isOptional = false,\n isReadOnly,\n isVirtualized: isVirtualizedProp = false,\n hint,\n HintLinkComponent,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n onFocus,\n options,\n value,\n testId,\n translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customOptionRender = useCallback<\n NonNullable<\n MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"renderOption\"]\n >\n >(\n (muiProps, option) => {\n const hasDescription = \"description\" in option && option.description;\n const hasMetadata = \"metaData\" in option && option.metaData;\n const isLabelOnly = !hasMetadata && !hasDescription;\n\n return (\n <Fragment key={option.value}>\n {isLabelOnly ? (\n <OptionLabelOnlyComponent\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : hasMetadata ? (\n <OptionLabelDescriptionMetadata\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : (\n <OptionLabelDescription\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n )}\n </Fragment>\n );\n },\n [odysseyDesignTokens],\n );\n\n return (\n <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n ariaDescribedBy={ariaDescribedBy}\n defaultValue={defaultValue}\n emptyOptionsText={emptyOptionsText}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n getIsOptionEqualToValue={getIsOptionEqualToValue}\n hasMultipleChoices={hasMultipleChoices}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n inputValue={inputValue}\n isCustomValueAllowed={isCustomValueAllowed}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n isLoading={isLoading}\n isOptional={isOptional}\n isReadOnly={isReadOnly}\n isVirtualized={isVirtualizedProp}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onFocus={onFocus}\n onInputChange={onInputChangeProp}\n options={options}\n renderOption={customOptionRender}\n testId={testId}\n translate={translate}\n value={value}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Picker.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_Typography","_ComposablePicker","_jsxRuntime","e","__esModule","default","StyledOption","exports","styled","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","createElement","OptionMetadataComponent","metaData","jsx","map","meta","index","detailText","icon","jsxs","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","Paragraph","OptionLabelDescription","Heading6","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","useOdysseyDesignTokens","customOptionRender","useCallback","hasDescription","hasMetadata","isLabelOnly","Fragment","ComposablePicker","renderOption","MemoizedPicker","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\nimport {\n Fragment,\n memo,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n useCallback,\n} from \"react\";\n\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\nimport {\n type BasePickerProps,\n type BasePickerType,\n type BaseRenderOptionProps,\n ComposablePicker,\n} from \"./ComposablePicker.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n ({ hasAdornment }) => ({\n ...(!hasAdornment && {\n display: \"block !important\",\n }),\n }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n p: {\n margin: 0,\n },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing3,\n marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n gap: odysseyDesignTokens.Spacing1,\n\n svg: {\n width: odysseyDesignTokens.Spacing4,\n color: odysseyDesignTokens.HueNeutral400,\n },\n}));\n\nexport type BaseOptionProps = {\n muiProps: BaseRenderOptionProps;\n odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n hasAdornment?: boolean;\n muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n children,\n hasAdornment = false,\n muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n const { key, ...props } = muiProps;\n return (\n <StyledOption {...props} hasAdornment={hasAdornment} key={key}>\n {children}\n </StyledOption>\n );\n};\n\nexport const OptionMetadataComponent = ({\n metaData,\n odysseyDesignTokens,\n}: {\n metaData: OptionMetadata[];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n {metaData.map((meta: OptionMetadata, index: number) => {\n const { detailText, icon } = meta;\n return (\n <OptionDetail\n key={`${detailText}-${index}`}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {icon}\n {detailText}\n </OptionDetail>\n );\n })}\n </OptionDetails>\n );\n};\n\nexport const OptionDescriptionComponent = ({\n description,\n odysseyDesignTokens,\n}: {\n description?: LabelDescription[\"description\"];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n description && (\n <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n {description}\n </OptionDescription>\n )\n );\n};\n\nexport type OptionProps<OptionType> = {\n option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Paragraph>{label}</Paragraph>\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescriptionMetadata = <\n OptionType extends LabelDescriptionMetadata,\n>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label, metaData } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n <OptionMetadataComponent\n metaData={metaData}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </Option>\n );\n};\n\nexport type OptionMetadata = {\n detailText: string \| number;\n icon: ReactElement;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string \| number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n OptionGroupType &\n OptionLabelType;\nexport type Metadata = {\n metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n OptionType extends LabelDescription \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n <\n OptionType extends OptionLabelOnly,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescription,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n OptionType extends\n \| OptionLabelOnly\n \| LabelDescription\n \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n ariaDescribedBy,\n defaultValue,\n emptyOptionsText,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\n hasMultipleChoices,\n id: idOverride,\n inputValue,\n isCustomValueAllowed,\n isDisabled,\n isFullWidth = false,\n isLoading,\n isOptional = false,\n isReadOnly,\n isVirtualized: isVirtualizedProp = false,\n hint,\n HintLinkComponent,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n onFocus,\n options,\n value,\n testId,\n translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customOptionRender = useCallback<\n NonNullable<\n MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"renderOption\"]\n >\n >(\n (muiProps, option) => {\n const hasDescription = \"description\" in option && option.description;\n const hasMetadata = \"metaData\" in option && option.metaData;\n const isLabelOnly = !hasMetadata && !hasDescription;\n\n return (\n <Fragment key={option.value}>\n {isLabelOnly ? (\n <OptionLabelOnlyComponent\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : hasMetadata ? (\n <OptionLabelDescriptionMetadata\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : (\n <OptionLabelDescription\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n )}\n </Fragment>\n );\n },\n [odysseyDesignTokens],\n );\n\n return (\n <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n ariaDescribedBy={ariaDescribedBy}\n defaultValue={defaultValue}\n emptyOptionsText={emptyOptionsText}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n getIsOptionEqualToValue={getIsOptionEqualToValue}\n hasMultipleChoices={hasMultipleChoices}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n inputValue={inputValue}\n isCustomValueAllowed={isCustomValueAllowed}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n isLoading={isLoading}\n isOptional={isOptional}\n isReadOnly={isReadOnly}\n isVirtualized={isVirtualizedProp}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onFocus={onFocus}\n onInputChange={onInputChangeProp}\n options={options}\n renderOption={customOptionRender}\n testId={testId}\n translate={translate}\n value={value}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PickerVirtualizationListBox = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _reactWindow = require("react-window");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -107,15 +107,15 @@ const PickerVirtualizationListBox = (0, _react.forwardRef)((props = {}, ref) =>
     children: (0, _jsxRuntime.jsx)(OuterListboxContext.Provider, {
       value: other,
       children: (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
+        height: listHeight,
         innerElementType: "ul",
-        itemData: itemData,
         itemCount: itemData.length,
+        itemData: itemData,
         itemSize: getItemSize,
-        height: listHeight,
-        width: "100%",
-        ref: gridRef,
         outerElementType: OuterListboxElementType,
         overscanCount: OVERSCAN_ROW_COUNT,
+        ref: gridRef,
+        width: "100%",
         children: ({
           data,
           index,
@@ -123,8 +123,8 @@ const PickerVirtualizationListBox = (0, _react.forwardRef)((props = {}, ref) =>
         }) => (0, _jsxRuntime.jsx)(Row, {
           data: data,
           index: index,
-          style: style,
-          setItemSize: setItemSize
+          setItemSize: setItemSize,
+          style: style
         })
       })
     })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerVirtualizationListBox.cjs","names":["_react","require","_reactWindow","_styled","_interopRequireDefault","_jsxRuntime","e","__esModule","default","ListboxContainer","styled","div","width","height","Row","data","index","setItemSize","style","rowRef","useRef","useEffect","current","firstChild","firstElementChild","clientHeight","baseOption","props","styles","useMemo","jsx","ref","children","OuterListboxContext","createContext","OuterListboxElementType","forwardRef","outerProps","useContext","useResetCache","length","resetCacheRef","resetAfterIndex","PickerVirtualizationListBox","listHeight","setListHeight","useState","other","itemData","Children","toArray","flatMap","child","concat","sizeMapRef","getListBoxHeight","useCallback","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","slice","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","value","VariableSizeList","innerElementType","itemCount","itemSize","outerElementType","overscanCount","MemoizedPickerVirtualizationListBox","exports","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerVirtualizationListBox.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 Children,\n createContext,\n forwardRef,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps } from \"@mui/material\";\n\ntype SetItemSize = (size: number) => void;\n\nconst ListboxContainer = styled.div({\n width: \"100%\",\n height: \"100%\",\n});\n\nconst Row = <Data extends { key: string; props: Record<string, unknown> }[]>({\n data,\n index,\n setItemSize,\n style,\n}: ListChildComponentProps<Data> & { setItemSize: SetItemSize }) => {\n const rowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (rowRef.current) {\n /\n Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n /\n const firstChild = rowRef.current.firstElementChild;\n const height = firstChild\n ? firstChild.clientHeight\n : rowRef.current.clientHeight;\n\n setItemSize(height);\n }\n }, [index, rowRef, setItemSize]);\n\n const baseOption = data[index];\n const { props } = baseOption;\n\n /\n react-window calculates the absolute positions of the list items, via an inline style, so\n * we need to add it to each list item that is being rendered in the viewable list window.\n * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n */\n const styles = useMemo(\n () => ({\n ...style,\n height: \"auto\",\n }),\n [style],\n );\n\n return (\n <div ref={rowRef}>\n <li {...props} style={styles} />\n </div>\n );\n};\n\nconst OuterListboxContext = createContext({});\n\nconst OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n const outerProps = useContext(OuterListboxContext);\n return <div ref={ref} {...props} {...outerProps} />;\n});\n\nconst useResetCache = (length: number) => {\n const resetCacheRef = useRef<VariableSizeList>(null);\n useEffect(() => {\n if (resetCacheRef.current) {\n resetCacheRef.current.resetAfterIndex(0, true);\n }\n }, [length]);\n return resetCacheRef;\n};\n\nconst PickerVirtualizationListBox = forwardRef<\n HTMLDivElement,\n AutocompleteProps<undefined, undefined, undefined, undefined>[\"ListboxProps\"]\n>((props = {}, ref) => {\n const [listHeight, setListHeight] = useState(0);\n\n const { children, ...other } = props;\n\n const itemData = Children.toArray(children).flatMap<typeof children>(\n (child) =>\n typeof child === \"number\" \|\| typeof child === \"string\"\n ? [child]\n : [child].concat(\"children\" in child ? Children.toArray(children) : []),\n );\n\n const sizeMapRef = useRef<number[]>([]);\n\n const getListBoxHeight = useCallback(() => {\n // 8px of padding top/bottom applied by MUI\n const COMBINED_LISTBOX_PADDING = 16;\n\n if (itemData.length > OVERSCAN_ROW_COUNT) {\n // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n return 9999;\n } else {\n const itemsHeightCalculated = sizeMapRef.current\n .slice(0, itemData.length)\n .map((_, index) => sizeMapRef.current[index] \|\| 0)\n .reduce(\n (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n 0,\n );\n return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n }\n }, [itemData, sizeMapRef]);\n\n useEffect(() => {\n if (sizeMapRef.current.length && itemData.length) {\n setListHeight(getListBoxHeight());\n }\n }, [getListBoxHeight, itemData, sizeMapRef]);\n\n // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n const OVERSCAN_ROW_COUNT = 8;\n\n const gridRef = useResetCache(itemData.length);\n\n const setItemSize = useCallback<SetItemSize>(\n (size) => {\n gridRef?.current?.resetAfterIndex(0, true);\n sizeMapRef.current = sizeMapRef.current.concat(size);\n },\n [gridRef, sizeMapRef],\n );\n const getItemSize = useCallback(\n // using 45px as a sane default here to avoid a lot of content shift on repaint\n (index: number) => sizeMapRef.current[index] \|\| 45,\n [sizeMapRef],\n );\n\n return (\n <ListboxContainer ref={ref}>\n <OuterListboxContext.Provider value={other}>\n <VariableSizeList\n innerElementType=\"ul\"\n itemData={itemData}\n itemCount={itemData.length}\n itemSize={getItemSize}\n height={listHeight}\n width=\"100%\"\n ref={gridRef}\n outerElementType={OuterListboxElementType}\n overscanCount={OVERSCAN_ROW_COUNT}\n >\n {({ data, index, style }) => (\n <Row\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n data={data}\n index={index}\n style={style}\n setItemSize={setItemSize}\n />\n )}\n </VariableSizeList>\n </OuterListboxContext.Provider>\n </ListboxContainer>\n );\n});\n\nconst MemoizedPickerVirtualizationListBox = memo(PickerVirtualizationListBox);\n\nMemoizedPickerVirtualizationListBox.displayName = \"PickerVirtualizationListBox\";\n\nexport { MemoizedPickerVirtualizationListBox as PickerVirtualizationListBox };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"PickerVirtualizationListBox.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactWindow","_jsxRuntime","e","__esModule","default","ListboxContainer","styled","div","width","height","Row","data","index","setItemSize","style","rowRef","useRef","useEffect","current","firstChild","firstElementChild","clientHeight","baseOption","props","styles","useMemo","jsx","ref","children","OuterListboxContext","createContext","OuterListboxElementType","forwardRef","outerProps","useContext","useResetCache","length","resetCacheRef","resetAfterIndex","PickerVirtualizationListBox","listHeight","setListHeight","useState","other","itemData","Children","toArray","flatMap","child","concat","sizeMapRef","getListBoxHeight","useCallback","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","slice","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","value","VariableSizeList","innerElementType","itemCount","itemSize","outerElementType","overscanCount","MemoizedPickerVirtualizationListBox","exports","memo","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerVirtualizationListBox.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps } from \"@mui/material\";\nimport {\n Children,\n createContext,\n forwardRef,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { ListChildComponentProps, VariableSizeList } from \"react-window\";\n\ntype SetItemSize = (size: number) => void;\n\nconst ListboxContainer = styled.div({\n width: \"100%\",\n height: \"100%\",\n});\n\nconst Row = <Data extends { key: string; props: Record<string, unknown> }[]>({\n data,\n index,\n setItemSize,\n style,\n}: ListChildComponentProps<Data> & { setItemSize: SetItemSize }) => {\n const rowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (rowRef.current) {\n /\n Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n /\n const firstChild = rowRef.current.firstElementChild;\n const height = firstChild\n ? firstChild.clientHeight\n : rowRef.current.clientHeight;\n\n setItemSize(height);\n }\n }, [index, rowRef, setItemSize]);\n\n const baseOption = data[index];\n const { props } = baseOption;\n\n /\n react-window calculates the absolute positions of the list items, via an inline style, so\n * we need to add it to each list item that is being rendered in the viewable list window.\n * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n */\n const styles = useMemo(\n () => ({\n ...style,\n height: \"auto\",\n }),\n [style],\n );\n\n return (\n <div ref={rowRef}>\n <li {...props} style={styles} />\n </div>\n );\n};\n\nconst OuterListboxContext = createContext({});\n\nconst OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n const outerProps = useContext(OuterListboxContext);\n return <div ref={ref} {...props} {...outerProps} />;\n});\n\nconst useResetCache = (length: number) => {\n const resetCacheRef = useRef<VariableSizeList>(null);\n useEffect(() => {\n if (resetCacheRef.current) {\n resetCacheRef.current.resetAfterIndex(0, true);\n }\n }, [length]);\n return resetCacheRef;\n};\n\nconst PickerVirtualizationListBox = forwardRef<\n HTMLDivElement,\n AutocompleteProps<undefined, undefined, undefined, undefined>[\"ListboxProps\"]\n>((props = {}, ref) => {\n const [listHeight, setListHeight] = useState(0);\n\n const { children, ...other } = props;\n\n const itemData = Children.toArray(children).flatMap<typeof children>(\n (child) =>\n typeof child === \"number\" \|\| typeof child === \"string\"\n ? [child]\n : [child].concat(\"children\" in child ? Children.toArray(children) : []),\n );\n\n const sizeMapRef = useRef<number[]>([]);\n\n const getListBoxHeight = useCallback(() => {\n // 8px of padding top/bottom applied by MUI\n const COMBINED_LISTBOX_PADDING = 16;\n\n if (itemData.length > OVERSCAN_ROW_COUNT) {\n // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n return 9999;\n } else {\n const itemsHeightCalculated = sizeMapRef.current\n .slice(0, itemData.length)\n .map((_, index) => sizeMapRef.current[index] \|\| 0)\n .reduce(\n (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n 0,\n );\n return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n }\n }, [itemData, sizeMapRef]);\n\n useEffect(() => {\n if (sizeMapRef.current.length && itemData.length) {\n setListHeight(getListBoxHeight());\n }\n }, [getListBoxHeight, itemData, sizeMapRef]);\n\n // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n const OVERSCAN_ROW_COUNT = 8;\n\n const gridRef = useResetCache(itemData.length);\n\n const setItemSize = useCallback<SetItemSize>(\n (size) => {\n gridRef?.current?.resetAfterIndex(0, true);\n sizeMapRef.current = sizeMapRef.current.concat(size);\n },\n [gridRef, sizeMapRef],\n );\n const getItemSize = useCallback(\n // using 45px as a sane default here to avoid a lot of content shift on repaint\n (index: number) => sizeMapRef.current[index] \|\| 45,\n [sizeMapRef],\n );\n\n return (\n <ListboxContainer ref={ref}>\n <OuterListboxContext.Provider value={other}>\n <VariableSizeList\n height={listHeight}\n innerElementType=\"ul\"\n itemCount={itemData.length}\n itemData={itemData}\n itemSize={getItemSize}\n outerElementType={OuterListboxElementType}\n overscanCount={OVERSCAN_ROW_COUNT}\n ref={gridRef}\n width=\"100%\"\n >\n {({ data, index, style }) => (\n <Row\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n data={data}\n index={index}\n setItemSize={setItemSize}\n style={style}\n />\n )}\n </VariableSizeList>\n </OuterListboxContext.Provider>\n </ListboxContainer>\n );\n});\n\nconst MemoizedPickerVirtualizationListBox = memo(PickerVirtualizationListBox);\n\nMemoizedPickerVirtualizationListBox.displayName = \"PickerVirtualizationListBox\";\n\nexport { MemoizedPickerVirtualizationListBox as PickerVirtualizationListBox };\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PickerWithOptionAdornment = void 0;
-var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
 var _Box = require("../../Box.cjs");
-var _ComposablePicker = require("./ComposablePicker.cjs");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
-var _Picker = require("./Picker.cjs");
-var _Typography = require("../../Typography.cjs");
 var _Tag = require("../../Tag.cjs");
+var _Typography = require("../../Typography.cjs");
+var _ComposablePicker = require("./ComposablePicker.cjs");
+var _Picker = require("./Picker.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -82,9 +82,9 @@ const OptionAdornment = ({
       adornmentSize: adornmentSize,
       odysseyDesignTokens: odysseyDesignTokens,
       children: (0, _jsxRuntime.jsx)("img", {
-        src: adornment,
         alt: "",
-        role: "presentation"
+        role: "presentation",
+        src: adornment
       })
     });
   } else {
@@ -173,9 +173,9 @@ const TagAdornment = ({
       isTagContainer: true,
       odysseyDesignTokens: odysseyDesignTokens,
       children: (0, _jsxRuntime.jsx)("img", {
-        src: adornment,
         alt: "",
-        role: "presentation"
+        role: "presentation",
+        src: adornment
       })
     });
   }
@@ -268,6 +268,8 @@ const PickerWithOptionAdornment = ({
     getIsOptionEqualToValue: getIsOptionEqualToValue,
     groupOptionsBy: groupOptionsBy,
     hasMultipleChoices: hasMultipleChoices,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
     id: idOverride,
     inputValue: inputValue,
     isCustomValueAllowed: isCustomValueAllowed,
@@ -277,20 +279,18 @@ const PickerWithOptionAdornment = ({
     isOptional: isOptional,
     isReadOnly: isReadOnly,
     isVirtualized: isVirtualizedProp,
-    hint: hint,
-    HintLinkComponent: HintLinkComponent,
     label: label,
     name: nameOverride,
     onBlur: onBlur,
     onChange: onChangeProp,
-    onInputChange: onInputChangeProp,
     onFocus: onFocus,
+    onInputChange: onInputChangeProp,
     options: options,
     renderOption: customOptionRender,
     renderTags: customTagRender,
-    value: value,
     testId: testId,
-    translate: translate
+    translate: translate,
+    value: value
   });
 };
 const MemoizedPickerWithOptionAdornment = exports.PickerWithOptionAdornment = (0, _react.memo)(PickerWithOptionAdornment);