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

@okta/odyssey-react-mui 1.41.1 → 1.43.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 (354) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","names":["Fragment","memo","useCallback","styled","ComposablePicker","useOdysseyDesignTokens","Heading6","Paragraph","jsx","_jsx","jsxs","_jsxs","StyledOption","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","OptionMetadataComponent","metaData","map","meta","index","detailText","icon","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","OptionLabelDescription","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","hasDescription","hasMetadata","isLabelOnly","renderOption","MemoizedPicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Fragment,\n HTMLAttributes,\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} 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: HTMLAttributes<HTMLLIElement>;\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 <StyledOption {...muiProps} hasAdornment={hasAdornment}>\n {children}\n </StyledOption>\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.label}>\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 // getOptionLabel={// getOptionLabel}\n hasMultipleChoices={hasMultipleChoices}\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 hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onInputChange={onInputChangeProp}\n onFocus={onFocus}\n options={options}\n renderOption={customOptionRender}\n value={value}\n testId={testId}\n translate={translate}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,QAAQ,EAERC,IAAI,EAIJC,WAAW,QACN,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AAGpC,SACEC,gBAAgB,QAGX,uBAAuB;AAC9B,SACEC,sBAAsB,QAEjB,qCAAqC;AAC5C,SAASC,QAAQ,EAAEC,SAAS,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1D,OAAO,MAAMC,YAAY,GAAGT,MAAM,CAACU,EAAE,CACnC,CAAC;EAAEC;AAAa,CAAC,MAAM;EACrB,IAAI,CAACA,YAAY,IAAI;IACnBC,OAAO,EAAE;EACX,CAAC;AACH,CAAC,CACH,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAChDc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,OAAO;EAC/CC,CAAC,EAAE;IACDC,MAAM,EAAE;EACV;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAAC,GAAG,EAAE;EAC3Cc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEF,MAAM,EAAE,GAAGE,mBAAmB,CAACC,QAAQ,iBAAiB;EACxDC,KAAK,EAAEF,mBAAmB,CAACG;AAC7B,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,aAAa,GAAGvB,MAAM,CAAC,KAAK,EAAE;EACzCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEP,OAAO,EAAE,MAAM;EACfY,GAAG,EAAEL,mBAAmB,CAACM,QAAQ;EACjCC,gBAAgB,EAAEP,mBAAmB,CAACQ;AACxC,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,YAAY,GAAG5B,MAAM,CAAC,KAAK,EAAE;EACxCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEI;AAAoB,CAAC,MAAM;EACtEP,OAAO,EAAE,MAAM;EACfiB,UAAU,EAAE,QAAQ;EACpBL,GAAG,EAAEL,mBAAmB,CAACC,QAAQ;EAEjCU,GAAG,EAAE;IACHC,KAAK,EAAEZ,mBAAmB,CAACa,QAAQ;IACnCX,KAAK,EAAEF,mBAAmB,CAACc;EAC7B;AACF,CAAC,CAAC,CAAC;AAYH,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACrBC,QAAQ;EACRxB,YAAY,GAAG,KAAK;EACpByB;AACuC,CAAC,KACxC9B,IAAA,CAACG,YAAY;EAAA,GAAK2B,QAAQ;EAAEzB,YAAY,EAAEA,YAAa;EAAAwB,QAAA,EACpDA;AAAQ,CACG,CACf;AAED,OAAO,MAAME,uBAAuB,GAAGA,CAAC;EACtCC,QAAQ;EACRnB;AAIF,CAAC,KAAK;EACJ,OACEb,IAAA,CAACiB,aAAa;IAACJ,mBAAmB,EAAEA,mBAAoB;IAAAgB,QAAA,EACrDG,QAAQ,CAACC,GAAG,CAAC,CAACC,IAAoB,EAAEC,KAAa,KAAK;MACrD,MAAM;QAAEC,UAAU;QAAEC;MAAK,CAAC,GAAGH,IAAI;MACjC,OACEhC,KAAA,CAACoB,YAAY;QAEXT,mBAAmB,EAAEA,mBAAoB;QAAAgB,QAAA,GAExCQ,IAAI,EACJD,UAAU;MAAA,GAJN,GAAGA,UAAU,IAAID,KAAK,EAKf,CAAC;IAEnB,CAAC;EAAC,CACW,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,0BAA0B,GAAGA,CAAC;EACzCC,WAAW;EACX1B;AAIF,CAAC,KAAK;EACJ,OACE0B,WAAW,IACTvC,IAAA,CAACY,iBAAiB;IAACC,mBAAmB,EAAEA,mBAAoB;IAAAgB,QAAA,EACzDU;EAAW,CACK,CACpB;AAEL,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGA,CAAqC;EAC3EV,QAAQ;EACRjB,mBAAmB;EACnB4B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEC;EAAM,CAAC,GAAGD,MAAM;EAExB,OACEzC,IAAA,CAAC4B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,EACzB7B,IAAA,CAACO,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,EAC7D7B,IAAA,CAACF,SAAS;QAAA+B,QAAA,EAAEa;MAAK,CAAY;IAAC,CACV;EAAC,CACjB,CAAC;AAEb,CAAC;AAED,MAAMC,sBAAsB,GAAGA,CAAsC;EACnEb,QAAQ;EACRjB,mBAAmB;EACnB4B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEF,WAAW;IAAEG;EAAM,CAAC,GAAGD,MAAM;EAErC,OACEzC,IAAA,CAAC4B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,EACzB3B,KAAA,CAACK,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,GAC7D7B,IAAA,CAACH,QAAQ;QAAC+C,SAAS,EAAC,GAAG;QAAAf,QAAA,EAAEa;MAAK,CAAW,CAAC,EAC1C1C,IAAA,CAACsC,0BAA0B;QACzBC,WAAW,EAAEA,WAAY;QACzB1B,mBAAmB,EAAEA;MAAoB,CAC1C,CAAC;IAAA,CACkB;EAAC,CACjB,CAAC;AAEb,CAAC;AAED,MAAMgC,8BAA8B,GAAGA,CAErC;EACAf,QAAQ;EACRjB,mBAAmB;EACnB4B;AACyC,CAAC,KAAK;EAC/C,MAAM;IAAEF,WAAW;IAAEG,KAAK;IAAEV;EAAS,CAAC,GAAGS,MAAM;EAE/C,OACEvC,KAAA,CAAC0B,MAAM;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,GACzB3B,KAAA,CAACK,oBAAoB;MAACM,mBAAmB,EAAEA,mBAAoB;MAAAgB,QAAA,GAC7D7B,IAAA,CAACH,QAAQ;QAAC+C,SAAS,EAAC,GAAG;QAAAf,QAAA,EAAEa;MAAK,CAAW,CAAC,EAC1C1C,IAAA,CAACsC,0BAA0B;QACzBC,WAAW,EAAEA,WAAY;QACzB1B,mBAAmB,EAAEA;MAAoB,CAC1C,CAAC;IAAA,CACkB,CAAC,EACvBb,IAAA,CAAC+B,uBAAuB;MACtBC,QAAQ,EAAEA,QAAS;MACnBnB,mBAAmB,EAAEA;IAAoB,CAC1C,CAAC;EAAA,CACI,CAAC;AAEb,CAAC;AA0DD,MAAMiC,MAA2B,GAAGA,CAOlC;EACAC,eAAe;EACfC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,EAAEC,iBAAiB,GAAG,KAAK;EACxCC,IAAI;EACJC,iBAAiB;EACjBxB,KAAK;EACLyB,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ,EAAEC,YAAY;EACtBC,aAAa,EAAEC,iBAAiB;EAChCC,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,MAAM;EACNC;AACiE,CAAC,KAAK;EACvE,MAAMjE,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EAEpD,MAAMmF,kBAAkB,GAAGtF,WAAW,CAUpC,CAACqC,QAAQ,EAAEW,MAAM,KAAK;IACpB,MAAMuC,cAAc,GAAG,aAAa,IAAIvC,MAAM,IAAIA,MAAM,CAACF,WAAW;IACpE,MAAM0C,WAAW,GAAG,UAAU,IAAIxC,MAAM,IAAIA,MAAM,CAACT,QAAQ;IAC3D,MAAMkD,WAAW,GAAG,CAACD,WAAW,IAAI,CAACD,cAAc;IAEnD,OACEhF,IAAA,CAACT,QAAQ;MAAAsC,QAAA,EACNqD,WAAW,GACVlF,IAAA,CAACwC,wBAAwB;QACvBV,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC4B,MAAM,EAAEA;MAAO,CAChB,CAAC,GACAwC,WAAW,GACbjF,IAAA,CAAC6C,8BAA8B;QAC7Bf,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC4B,MAAM,EAAEA;MAAO,CAChB,CAAC,GAEFzC,IAAA,CAAC2C,sBAAsB;QACrBb,QAAQ,EAAEA,QAAS;QACnBjB,mBAAmB,EAAEA,mBAAoB;QACzC4B,MAAM,EAAEA;MAAO,CAChB;IACF,GAnBYA,MAAM,CAACC,KAoBZ,CAAC;EAEf,CAAC,EACD,CAAC7B,mBAAmB,CACtB,CAAC;EAED,OACEb,IAAA,CAACL,gBAAgB;IACfoD,eAAe,EAAEA,eAAgB;IACjCC,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCC,uBAAuB,EAAEA,uBAAwB;IAEjDC,kBAAkB,EAAEA,kBAAmB;IACvCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEC,iBAAkB;IACjCC,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCxB,KAAK,EAAEA,KAAM;IACbyB,IAAI,EAAEC,YAAa;IACnBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEC,YAAa;IACvBC,aAAa,EAAEC,iBAAkB;IACjCC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEJ,kBAAmB;IACjCH,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMM,cAAc,GAAG5F,IAAI,CAACsD,MAAM,CAAmB;AAErDsC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAItC,MAAM","ignoreList":[]}
1	+ {"version":3,"file":"Picker.js","names":["Fragment","memo","useCallback","createElement","_createElement","styled","ComposablePicker","useOdysseyDesignTokens","Heading6","Paragraph","jsxs","_jsxs","jsx","_jsx","StyledOption","li","hasAdornment","display","OptionLabelContainer","shouldForwardProp","prop","p","margin","OptionDescription","odysseyDesignTokens","Spacing1","color","TypographyColorSubordinate","OptionDetails","gap","Spacing3","marginBlockStart","Spacing2","OptionDetail","alignItems","svg","width","Spacing4","HueNeutral400","Option","children","muiProps","key","props","OptionMetadataComponent","metaData","map","meta","index","detailText","icon","OptionDescriptionComponent","description","OptionLabelOnlyComponent","option","label","OptionLabelDescription","component","OptionLabelDescriptionMetadata","Picker","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","hasDescription","hasMetadata","isLabelOnly","renderOption","MemoizedPicker","displayName"],"sources":["../../../../src/labs/OdysseyPickers/Picker.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Fragment,\n memo,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n useCallback,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\n\nimport {\n ComposablePicker,\n type BasePickerProps,\n type BasePickerType,\n type BaseRenderOptionProps,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6, Paragraph } from \"../../Typography.js\";\n\nexport const StyledOption = styled.li<{ hasAdornment?: boolean }>(\n ({ hasAdornment }) => ({\n ...(!hasAdornment && {\n display: \"block !important\",\n }),\n }),\n);\n\nexport const OptionLabelContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n p: {\n margin: 0,\n },\n}));\n\nexport const OptionDescription = styled(\"p\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n margin: `${odysseyDesignTokens.Spacing1} 0 0 !important`,\n color: odysseyDesignTokens.TypographyColorSubordinate,\n}));\n\nexport const OptionDetails = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing3,\n marginBlockStart: odysseyDesignTokens.Spacing2,\n}));\n\nexport const OptionDetail = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n gap: odysseyDesignTokens.Spacing1,\n\n svg: {\n width: odysseyDesignTokens.Spacing4,\n color: odysseyDesignTokens.HueNeutral400,\n },\n}));\n\nexport type BaseOptionProps = {\n muiProps: BaseRenderOptionProps;\n odysseyDesignTokens: DesignTokens;\n};\n\ntype OptionComponentProps = {\n hasAdornment?: boolean;\n muiProps: BaseOptionProps[\"muiProps\"];\n};\n\nexport const Option = ({\n children,\n hasAdornment = false,\n muiProps,\n}: PropsWithChildren<OptionComponentProps>) => {\n const { key, ...props } = muiProps;\n return (\n <StyledOption {...props} key={key} hasAdornment={hasAdornment}>\n {children}\n </StyledOption>\n );\n};\n\nexport const OptionMetadataComponent = ({\n metaData,\n odysseyDesignTokens,\n}: {\n metaData: OptionMetadata[];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n <OptionDetails odysseyDesignTokens={odysseyDesignTokens}>\n {metaData.map((meta: OptionMetadata, index: number) => {\n const { detailText, icon } = meta;\n return (\n <OptionDetail\n key={`${detailText}-${index}`}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {icon}\n {detailText}\n </OptionDetail>\n );\n })}\n </OptionDetails>\n );\n};\n\nexport const OptionDescriptionComponent = ({\n description,\n odysseyDesignTokens,\n}: {\n description?: LabelDescription[\"description\"];\n odysseyDesignTokens: DesignTokens;\n}) => {\n return (\n description && (\n <OptionDescription odysseyDesignTokens={odysseyDesignTokens}>\n {description}\n </OptionDescription>\n )\n );\n};\n\nexport type OptionProps<OptionType> = {\n option: OptionType;\n};\n\nexport const OptionLabelOnlyComponent = <OptionType extends OptionLabelOnly>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Paragraph>{label}</Paragraph>\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescription = <OptionType extends LabelDescription>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n </Option>\n );\n};\n\nconst OptionLabelDescriptionMetadata = <\n OptionType extends LabelDescriptionMetadata,\n>({\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps & OptionProps<OptionType>) => {\n const { description, label, metaData } = option;\n\n return (\n <Option muiProps={muiProps}>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n <OptionMetadataComponent\n metaData={metaData}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </Option>\n );\n};\n\nexport type OptionMetadata = {\n icon: ReactElement;\n detailText: string \| number;\n};\n\nexport type OptionGroupType = { group?: string };\nexport type OptionValueType = { value: string \| number };\nexport type OptionLabelType = { label: string };\nexport type BaseOptionType = OptionValueType &\n OptionGroupType &\n OptionLabelType;\nexport type Metadata = {\n metaData: OptionMetadata[];\n};\n\nexport type OptionLabelOnly = BaseOptionType;\nexport type LabelDescription = BaseOptionType & { description?: string };\nexport type LabelDescriptionMetadata = LabelDescription & Metadata;\n\nexport type PickerProps<\n OptionType extends LabelDescription \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>;\n\nexport type PickerComponentType = {\n <\n OptionType extends OptionLabelOnly,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescription,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n <\n OptionType extends LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,\n ): ReactNode;\n};\n\nconst Picker: PickerComponentType = <\n OptionType extends\n \| OptionLabelOnly\n \| LabelDescription\n \| LabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n ariaDescribedBy,\n defaultValue,\n emptyOptionsText,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\n hasMultipleChoices,\n id: idOverride,\n inputValue,\n isCustomValueAllowed,\n isDisabled,\n isFullWidth = false,\n isLoading,\n isOptional = false,\n isReadOnly,\n isVirtualized: isVirtualizedProp = false,\n hint,\n HintLinkComponent,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n onFocus,\n options,\n value,\n testId,\n translate,\n}: PickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customOptionRender = useCallback<\n NonNullable<\n MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"renderOption\"]\n >\n >(\n (muiProps, option) => {\n const hasDescription = \"description\" in option && option.description;\n const hasMetadata = \"metaData\" in option && option.metaData;\n const isLabelOnly = !hasMetadata && !hasDescription;\n\n return (\n <Fragment key={option.value}>\n {isLabelOnly ? (\n <OptionLabelOnlyComponent\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : hasMetadata ? (\n <OptionLabelDescriptionMetadata\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : (\n <OptionLabelDescription\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n )}\n </Fragment>\n );\n },\n [odysseyDesignTokens],\n );\n\n return (\n <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n ariaDescribedBy={ariaDescribedBy}\n defaultValue={defaultValue}\n emptyOptionsText={emptyOptionsText}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n getIsOptionEqualToValue={getIsOptionEqualToValue}\n hasMultipleChoices={hasMultipleChoices}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n inputValue={inputValue}\n isCustomValueAllowed={isCustomValueAllowed}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n isLoading={isLoading}\n isOptional={isOptional}\n isReadOnly={isReadOnly}\n isVirtualized={isVirtualizedProp}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onFocus={onFocus}\n onInputChange={onInputChangeProp}\n options={options}\n renderOption={customOptionRender}\n testId={testId}\n translate={translate}\n value={value}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPicker = memo(Picker) as BasePickerType;\n\nMemoizedPicker.displayName = \"Picker\";\n\nexport { MemoizedPicker as Picker };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/OdysseyPickers/PickerWithOptionAdornment.js CHANGED Viewed

@@ -33,6 +33,7 @@ const OptionAdornmentContainer = styled("div", {
   height: odysseyDesignTokens.Spacing5,
   overflow: "hidden",
   marginInlineEnd: odysseyDesignTokens.Spacing3,
+  flexShrink: 0,
   svg: {
     width: "100%",
     height: "auto"
@@ -249,7 +250,7 @@ const PickerWithOptionAdornment = ({
         odysseyDesignTokens: odysseyDesignTokens,
         option: option
       })
-    }, option.label);
+    }, option.value);
   }, [adornmentSize, odysseyDesignTokens]);
   return _jsx(ComposablePicker, {
     ariaDescribedBy: ariaDescribedBy,

package/dist/esm/labs/OdysseyPickers/PickerWithOptionAdornment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerWithOptionAdornment.js","names":["Fragment","memo","useCallback","styled","Box","ComposablePicker","useOdysseyDesignTokens","Option","OptionDescriptionComponent","OptionLabelContainer","OptionMetadataComponent","Heading6","Tag","jsx","_jsx","jsxs","_jsxs","OptionAdornmentContainer","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","OptionAdornment","adornment","isImageAdornment","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","hasAdornment","component","OptionWithLabelDescriptionMetadata","metaData","TagAdornment","PickerWithOptionAdornment","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customTagRender","values","getTagProps","map","index","key","onDelete","sx","margin","Spacing1","icon","onRemove","customOptionRender","hasMetadata","renderOption","renderTags","MemoizedPickerWithOptionAdornment","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerWithOptionAdornment.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 { Fragment, memo, ReactNode, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n ComposablePicker,\n ComposablePickerProps,\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n type BaseOptionProps,\n type LabelDescription,\n type Metadata,\n Option,\n OptionDescriptionComponent,\n OptionLabelContainer,\n OptionMetadataComponent,\n OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport { Tag } from \"../../Tag.js\";\n\ntype Adornment = ReactNode \| string;\n\ntype AdornmentLabelDescription = LabelDescription & {\n adornment: Adornment;\n};\n\ntype AdornmentLabelDescriptionMetadata = AdornmentLabelDescription & Metadata;\n\nexport type AdornmentOptionType =\n \| AdornmentLabelDescription\n \| AdornmentLabelDescriptionMetadata;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"adornmentSize\" &&\n prop !== \"isTagContainer\",\n})<{\n adornmentSize?: AdornmentSize;\n isTagContainer?: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(\n ({\n adornmentSize = \"small\",\n isTagContainer = false,\n odysseyDesignTokens,\n }) => ({\n position: \"relative\",\n // push icon up by one px for better visual alignment\n bottom: \"1px\",\n alignSelf: \"flex-start\",\n width: odysseyDesignTokens.Spacing5,\n height: odysseyDesignTokens.Spacing5,\n overflow: \"hidden\",\n marginInlineEnd: odysseyDesignTokens.Spacing3,\n\n svg: {\n width: \"100%\",\n height: \"auto\",\n },\n\n img: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"100%\",\n transform: \"translate(-50%, -50%)\",\n },\n\n ...(adornmentSize === \"large\" &&\n !isTagContainer && {\n bottom: 0,\n width: odysseyDesignTokens.Spacing8,\n height: odysseyDesignTokens.Spacing8,\n }),\n\n ...(isTagContainer && {\n bottom: 0,\n alignSelf: \"center\",\n width: odysseyDesignTokens.Spacing4,\n height: \"auto\",\n maxHeight: odysseyDesignTokens.Spacing4,\n marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n svg: {\n display: \"flex\",\n width: \"100%\",\n height: \"auto\",\n },\n }),\n }),\n);\n\ntype OptionAdornmentProps = {\n adornment: Adornment;\n adornmentSize: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n};\n\nconst OptionAdornment = ({\n adornment,\n adornmentSize,\n odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {/ NOTE: Intentionally leaving alt as an empty string here so screen readers will ignore this image /}\n {/ Image should be sufficiently described by the adjacent title and/or description of the option */}\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n } else {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n }\n};\n\nconst OptionWithLabelDescriptionOnly = <\n OptionType extends AdornmentLabelDescription,\n>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & { adornmentSize: AdornmentSize }) => {\n const { adornment, description, label, value } = option;\n return (\n <Option hasAdornment key={value} muiProps={muiProps}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\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 OptionWithLabelDescriptionMetadata = <\n OptionType extends AdornmentLabelDescriptionMetadata,\n>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & {\n adornmentSize: AdornmentSize;\n }) => {\n const { adornment, description, label, metaData, value } = option;\n\n return (\n <Option hasAdornment key={value} muiProps={muiProps}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n <div>\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 </div>\n </Option>\n );\n};\n\ntype TagAdornmentProps = {\n adornment: Adornment;\n};\n\nconst TagAdornment = ({ adornment }: TagAdornmentProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n isTagContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n }\n\n return (\n <OptionAdornmentContainer\n isTagContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n};\n\nexport type PickerWithOptionAdornmentProps<\n OptionType extends AdornmentOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n <\n OptionType extends AdornmentLabelDescription,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactNode;\n <\n OptionType extends AdornmentLabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactNode;\n};\n\nconst PickerWithOptionAdornment: PickerWithOptionAdornmentComponentType = <\n OptionType extends AdornmentOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n adornmentSize = \"small\",\n ariaDescribedBy,\n defaultValue,\n emptyOptionsText,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\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: 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}: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customTagRender = useCallback<\n NonNullable<\n ComposablePickerProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >[\"renderTags\"]\n >\n >(\n (values, getTagProps) =>\n values.map((value, index) => {\n const { key, onDelete } = getTagProps({ index });\n const { adornment, label } = value;\n\n return (\n <Box\n key={key}\n sx={{\n margin: odysseyDesignTokens.Spacing1,\n marginInlineEnd: 0,\n }}\n >\n <Tag\n icon={<TagAdornment adornment={adornment} />}\n label={label}\n onRemove={onDelete}\n />\n </Box>\n );\n }),\n [odysseyDesignTokens],\n );\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 hasMetadata = \"metaData\" in option && option.metaData;\n\n return (\n <Fragment key={option.label}>\n {hasMetadata ? (\n <OptionWithLabelDescriptionMetadata\n adornmentSize={adornmentSize}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : (\n <OptionWithLabelDescriptionOnly\n adornmentSize={adornmentSize}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n )}\n </Fragment>\n );\n },\n [adornmentSize, 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 groupOptionsBy={groupOptionsBy}\n hasMultipleChoices={hasMultipleChoices}\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 hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onInputChange={onInputChangeProp}\n onFocus={onFocus}\n options={options}\n renderOption={customOptionRender}\n renderTags={customTagRender}\n value={value}\n testId={testId}\n translate={translate}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPickerWithOptionAdornment = memo(\n PickerWithOptionAdornment,\n) as BasePickerType;\n\nMemoizedPickerWithOptionAdornment.displayName = \"PickerWithOptionAdornment\";\n\nexport { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"PickerWithOptionAdornment.js","names":["Fragment","memo","useCallback","styled","Box","ComposablePicker","useOdysseyDesignTokens","Option","OptionDescriptionComponent","OptionLabelContainer","OptionMetadataComponent","Heading6","Tag","jsx","_jsx","jsxs","_jsxs","OptionAdornmentContainer","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","flexShrink","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","OptionAdornment","adornment","isImageAdornment","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","hasAdornment","component","OptionWithLabelDescriptionMetadata","metaData","TagAdornment","PickerWithOptionAdornment","ariaDescribedBy","defaultValue","emptyOptionsText","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customTagRender","values","getTagProps","map","index","key","onDelete","sx","margin","Spacing1","icon","onRemove","customOptionRender","hasMetadata","renderOption","renderTags","MemoizedPickerWithOptionAdornment","displayName"],"sources":["../../../../src/labs/OdysseyPickers/PickerWithOptionAdornment.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 { Fragment, memo, ReactNode, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n ComposablePicker,\n ComposablePickerProps,\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n type BaseOptionProps,\n type LabelDescription,\n type Metadata,\n Option,\n OptionDescriptionComponent,\n OptionLabelContainer,\n OptionMetadataComponent,\n OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport { Tag } from \"../../Tag.js\";\n\ntype Adornment = ReactNode \| string;\n\ntype AdornmentLabelDescription = LabelDescription & {\n adornment: Adornment;\n};\n\ntype AdornmentLabelDescriptionMetadata = AdornmentLabelDescription & Metadata;\n\nexport type AdornmentOptionType =\n \| AdornmentLabelDescription\n \| AdornmentLabelDescriptionMetadata;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"adornmentSize\" &&\n prop !== \"isTagContainer\",\n})<{\n adornmentSize?: AdornmentSize;\n isTagContainer?: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(\n ({\n adornmentSize = \"small\",\n isTagContainer = false,\n odysseyDesignTokens,\n }) => ({\n position: \"relative\",\n // push icon up by one px for better visual alignment\n bottom: \"1px\",\n alignSelf: \"flex-start\",\n width: odysseyDesignTokens.Spacing5,\n height: odysseyDesignTokens.Spacing5,\n overflow: \"hidden\",\n marginInlineEnd: odysseyDesignTokens.Spacing3,\n flexShrink: 0,\n\n svg: {\n width: \"100%\",\n height: \"auto\",\n },\n\n img: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"100%\",\n transform: \"translate(-50%, -50%)\",\n },\n\n ...(adornmentSize === \"large\" &&\n !isTagContainer && {\n bottom: 0,\n width: odysseyDesignTokens.Spacing8,\n height: odysseyDesignTokens.Spacing8,\n }),\n\n ...(isTagContainer && {\n bottom: 0,\n alignSelf: \"center\",\n width: odysseyDesignTokens.Spacing4,\n height: \"auto\",\n maxHeight: odysseyDesignTokens.Spacing4,\n marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n svg: {\n display: \"flex\",\n width: \"100%\",\n height: \"auto\",\n },\n }),\n }),\n);\n\ntype OptionAdornmentProps = {\n adornment: Adornment;\n adornmentSize: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n};\n\nconst OptionAdornment = ({\n adornment,\n adornmentSize,\n odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {/ NOTE: Intentionally leaving alt as an empty string here so screen readers will ignore this image /}\n {/ Image should be sufficiently described by the adjacent title and/or description of the option */}\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n } else {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n }\n};\n\nconst OptionWithLabelDescriptionOnly = <\n OptionType extends AdornmentLabelDescription,\n>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & { adornmentSize: AdornmentSize }) => {\n const { adornment, description, label, value } = option;\n return (\n <Option hasAdornment key={value} muiProps={muiProps}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\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 OptionWithLabelDescriptionMetadata = <\n OptionType extends AdornmentLabelDescriptionMetadata,\n>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & {\n adornmentSize: AdornmentSize;\n }) => {\n const { adornment, description, label, metaData, value } = option;\n\n return (\n <Option hasAdornment key={value} muiProps={muiProps}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n <div>\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 </div>\n </Option>\n );\n};\n\ntype TagAdornmentProps = {\n adornment: Adornment;\n};\n\nconst TagAdornment = ({ adornment }: TagAdornmentProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n isTagContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n }\n\n return (\n <OptionAdornmentContainer\n isTagContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n};\n\nexport type PickerWithOptionAdornmentProps<\n OptionType extends AdornmentOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n <\n OptionType extends AdornmentLabelDescription,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactNode;\n <\n OptionType extends AdornmentLabelDescriptionMetadata,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactNode;\n};\n\nconst PickerWithOptionAdornment: PickerWithOptionAdornmentComponentType = <\n OptionType extends AdornmentOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n adornmentSize = \"small\",\n ariaDescribedBy,\n defaultValue,\n emptyOptionsText,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\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: 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}: PickerWithOptionAdornmentProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customTagRender = useCallback<\n NonNullable<\n ComposablePickerProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >[\"renderTags\"]\n >\n >(\n (values, getTagProps) =>\n values.map((value, index) => {\n const { key, onDelete } = getTagProps({ index });\n const { adornment, label } = value;\n\n return (\n <Box\n key={key}\n sx={{\n margin: odysseyDesignTokens.Spacing1,\n marginInlineEnd: 0,\n }}\n >\n <Tag\n icon={<TagAdornment adornment={adornment} />}\n label={label}\n onRemove={onDelete}\n />\n </Box>\n );\n }),\n [odysseyDesignTokens],\n );\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 hasMetadata = \"metaData\" in option && option.metaData;\n\n return (\n <Fragment key={option.value}>\n {hasMetadata ? (\n <OptionWithLabelDescriptionMetadata\n adornmentSize={adornmentSize}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n ) : (\n <OptionWithLabelDescriptionOnly\n adornmentSize={adornmentSize}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n )}\n </Fragment>\n );\n },\n [adornmentSize, 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 groupOptionsBy={groupOptionsBy}\n hasMultipleChoices={hasMultipleChoices}\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 hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onInputChange={onInputChangeProp}\n onFocus={onFocus}\n options={options}\n renderOption={customOptionRender}\n renderTags={customTagRender}\n value={value}\n testId={testId}\n translate={translate}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedPickerWithOptionAdornment = memo(\n PickerWithOptionAdornment,\n) as BasePickerType;\n\nMemoizedPickerWithOptionAdornment.displayName = \"PickerWithOptionAdornment\";\n\nexport { MemoizedPickerWithOptionAdornment as PickerWithOptionAdornment };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/OdysseyPickers/SearchDropdown.js CHANGED Viewed

@@ -132,7 +132,6 @@ const CustomOption = ({
     label,
     metaData,
     extra,
-    value,
     onClick,
     isInteractive = true
   } = option;
@@ -185,7 +184,7 @@ const CustomOption = ({
         odysseyDesignTokens: odysseyDesignTokens
       })]
     })
-  }, value);
+  });
 };
 const SearchDropdown = ({
   adornmentSize = "small",
@@ -224,7 +223,7 @@ const SearchDropdown = ({
       muiProps: muiProps,
       odysseyDesignTokens: odysseyDesignTokens,
       option: option
-    });
+    }, option.value);
   }, [adornmentSize, odysseyDesignTokens]);
   return _jsx(ComposablePicker, {
     ariaDescribedBy: ariaDescribedBy,

package/dist/esm/labs/OdysseyPickers/SearchDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchDropdown.js","names":["memo","useCallback","useMemo","styled","ComposablePicker","useOdysseyDesignTokens","Option","OptionDescriptionComponent","OptionLabelContainer","OptionMetadataComponent","Heading6","jsx","_jsx","jsxs","_jsxs","OptionAdornmentContainer","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","marginInlineStart","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","CustomOptionContainer","justifyContent","CustomOptionLeftContainer","OptionAdornment","adornment","isImageAdornment","children","src","alt","role","Extra","content","size","onClick","handleClick","event","stopPropagation","CustomOption","muiProps","option","description","label","metaData","extra","value","isInteractive","handleOptionClick","preventDefault","extendedMuiProps","undefined","hasAdornment","component","SearchDropdown","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","testId","translate","customOptionRender","renderOption","MemoizedSearchDropdown","displayName"],"sources":["../../../../src/labs/OdysseyPickers/SearchDropdown.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 HTMLAttributes,\n memo,\n ReactElement,\n ReactNode,\n useCallback,\n useMemo,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n ComposablePicker,\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n type BaseOptionProps,\n type LabelDescription,\n type Metadata,\n Option,\n OptionDescriptionComponent,\n OptionLabelContainer,\n OptionMetadataComponent,\n OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\n\ntype Adornment = ReactNode \| string;\ntype ExtraType = {\n content: ReactNode \| string;\n size?: AdornmentSize;\n onClick: () => void;\n};\n\ntype AdornmentLabelDescription = LabelDescription & {\n adornment: Adornment;\n extra?: ExtraType;\n onClick?: () => void;\n isInteractive?: boolean;\n};\n\nexport type CustomOptionType = AdornmentLabelDescription & Partial<Metadata>;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"adornmentSize\" &&\n prop !== \"isTagContainer\",\n})<{\n adornmentSize?: AdornmentSize;\n isTagContainer?: boolean;\n odysseyDesignTokens: DesignTokens;\n position?: \"left\" \| \"right\";\n}>(\n ({\n adornmentSize = \"small\",\n isTagContainer = false,\n\n odysseyDesignTokens,\n position = \"left\",\n }) => ({\n position: \"relative\",\n // push icon up by one px for better visual alignment\n bottom: \"1px\",\n alignSelf: \"flex-start\",\n width: odysseyDesignTokens.Spacing5,\n height: odysseyDesignTokens.Spacing5,\n overflow: \"hidden\",\n\n ...(position === \"left\" && {\n marginInlineEnd: odysseyDesignTokens.Spacing3,\n }),\n ...(position === \"right\" && {\n marginInlineStart: odysseyDesignTokens.Spacing3,\n }),\n\n svg: {\n width: \"100%\",\n height: \"auto\",\n },\n\n img: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"100%\",\n transform: \"translate(-50%, -50%)\",\n },\n\n ...(adornmentSize === \"large\" &&\n !isTagContainer && {\n bottom: 0,\n width: odysseyDesignTokens.Spacing8,\n height: odysseyDesignTokens.Spacing8,\n }),\n\n ...(isTagContainer && {\n bottom: 0,\n alignSelf: \"center\",\n width: odysseyDesignTokens.Spacing4,\n height: \"auto\",\n maxHeight: odysseyDesignTokens.Spacing4,\n marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n svg: {\n display: \"flex\",\n width: \"100%\",\n height: \"auto\",\n },\n }),\n }),\n);\n\ntype OptionAdornmentProps = {\n adornment: Adornment;\n adornmentSize: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n};\n\ntype ExtraProps = {\n content: Adornment;\n size?: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n onClick: () => void;\n};\n\nconst CustomOptionContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n width: \"100%\",\n}));\n\nconst CustomOptionLeftContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n display: \"flex\",\n}));\n\nconst OptionAdornment = ({\n adornment,\n adornmentSize,\n odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n } else {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n }\n};\n\nconst Extra = ({ content, size, odysseyDesignTokens, onClick }: ExtraProps) => {\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n event.stopPropagation();\n onClick();\n },\n [onClick],\n );\n\n return (\n <OptionAdornmentContainer\n adornmentSize={size}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={handleClick}\n >\n {content}\n </OptionAdornmentContainer>\n );\n};\n\nconst CustomOption = <OptionType extends CustomOptionType>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & {\n adornmentSize: AdornmentSize;\n }) => {\n const {\n adornment,\n description,\n label,\n metaData,\n extra,\n value,\n onClick,\n isInteractive = true,\n } = option;\n\n const handleOptionClick = useCallback(\n (event: React.MouseEvent) => {\n if (!isInteractive) {\n event.preventDefault();\n return;\n }\n event.stopPropagation();\n onClick?.();\n },\n [onClick, isInteractive],\n );\n\n const extendedMuiProps = useMemo(() => {\n return {\n ...muiProps,\n onClick: isInteractive ? handleOptionClick : undefined,\n \"aria-disabled\": !isInteractive ? \"true\" : undefined,\n role: \"option\",\n } as HTMLAttributes<HTMLLIElement>;\n }, [muiProps, isInteractive, handleOptionClick]);\n\n return (\n <Option hasAdornment key={value} muiProps={extendedMuiProps}>\n <CustomOptionContainer odysseyDesignTokens={odysseyDesignTokens}>\n <CustomOptionLeftContainer odysseyDesignTokens={odysseyDesignTokens}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n <div>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n {metaData && (\n <OptionMetadataComponent\n metaData={metaData}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n )}\n </div>\n </CustomOptionLeftContainer>\n {extra && (\n <Extra\n content={extra.content}\n size={extra.size \|\| adornmentSize}\n onClick={extra.onClick}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n )}\n </CustomOptionContainer>\n </Option>\n );\n};\n\nexport type SearchDropdownProps<\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactElement;\n <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactElement;\n};\n\nconst SearchDropdown: PickerWithOptionAdornmentComponentType = <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n adornmentSize = \"small\",\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\n groupOptionsBy,\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}: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customOptionRender = useCallback<\n (props: HTMLAttributes<HTMLLIElement>, option: OptionType) => ReactNode\n >(\n (muiProps, option) => {\n return (\n <CustomOption\n adornmentSize={adornmentSize}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n );\n },\n [adornmentSize, odysseyDesignTokens],\n );\n\n return (\n <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n ariaDescribedBy={ariaDescribedBy}\n defaultValue={defaultValue}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n getIsOptionEqualToValue={getIsOptionEqualToValue}\n groupOptionsBy={groupOptionsBy}\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 hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onInputChange={onInputChangeProp}\n onFocus={onFocus}\n options={options}\n renderOption={customOptionRender}\n value={value}\n testId={testId}\n translate={translate}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedSearchDropdown = memo(SearchDropdown) as BasePickerType;\n\nMemoizedSearchDropdown.displayName = \"MemoizedSearchDropdown\";\n\nexport { MemoizedSearchDropdown as SearchDropdown };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAEEA,IAAI,EAGJC,WAAW,EACXC,OAAO,QACF,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AAEpC,SACEC,gBAAgB,QAIX,uBAAuB;AAC9B,SACEC,sBAAsB,QAEjB,qCAAqC;AAC5C,SAIEC,MAAM,EACNC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAElB,aAAa;AACpB,SAASC,QAAQ,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAkB/C,MAAMC,wBAAwB,GAAGZ,MAAM,CAAC,KAAK,EAAE;EAC7Ca,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,KAAK,eAAe,IACxBA,IAAI,KAAK;AACb,CAAC,CAAC,CAMA,CAAC;EACCC,aAAa,GAAG,OAAO;EACvBC,cAAc,GAAG,KAAK;EAEtBC,mBAAmB;EACnBC,QAAQ,GAAG;AACb,CAAC,MAAM;EACLA,QAAQ,EAAE,UAAU;EAEpBC,MAAM,EAAE,KAAK;EACbC,SAAS,EAAE,YAAY;EACvBC,KAAK,EAAEJ,mBAAmB,CAACK,QAAQ;EACnCC,MAAM,EAAEN,mBAAmB,CAACK,QAAQ;EACpCE,QAAQ,EAAE,QAAQ;EAElB,IAAIN,QAAQ,KAAK,MAAM,IAAI;IACzBO,eAAe,EAAER,mBAAmB,CAACS;EACvC,CAAC,CAAC;EACF,IAAIR,QAAQ,KAAK,OAAO,IAAI;IAC1BS,iBAAiB,EAAEV,mBAAmB,CAACS;EACzC,CAAC,CAAC;EAEFE,GAAG,EAAE;IACHP,KAAK,EAAE,MAAM;IACbE,MAAM,EAAE;EACV,CAAC;EAEDM,GAAG,EAAE;IACHX,QAAQ,EAAE,UAAU;IACpBY,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXV,KAAK,EAAE,MAAM;IACbW,SAAS,EAAE;EACb,CAAC;EAED,IAAIjB,aAAa,KAAK,OAAO,IAC3B,CAACC,cAAc,IAAI;IACjBG,MAAM,EAAE,CAAC;IACTE,KAAK,EAAEJ,mBAAmB,CAACgB,QAAQ;IACnCV,MAAM,EAAEN,mBAAmB,CAACgB;EAC9B,CAAC,CAAC;EAEJ,IAAIjB,cAAc,IAAI;IACpBG,MAAM,EAAE,CAAC;IACTC,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAEJ,mBAAmB,CAACiB,QAAQ;IACnCX,MAAM,EAAE,MAAM;IACdY,SAAS,EAAElB,mBAAmB,CAACiB,QAAQ;IACvCT,eAAe,EAAER,mBAAmB,CAACmB,QAAQ;IAE7CR,GAAG,EAAE;MACHS,OAAO,EAAE,MAAM;MACfhB,KAAK,EAAE,MAAM;MACbE,MAAM,EAAE;IACV;EACF,CAAC;AACH,CAAC,CACH,CAAC;AAeD,MAAMe,qBAAqB,GAAGtC,MAAM,CAAC,KAAK,EAAE;EAC1Ca,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,OAAO;EAC/CuB,OAAO,EAAE,MAAM;EACfE,cAAc,EAAE,eAAe;EAC/BlB,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMmB,yBAAyB,GAAGxC,MAAM,CAAC,KAAK,EAAE;EAC9Ca,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,OAAO;EAC/CuB,OAAO,EAAE;AACX,CAAC,CAAC,CAAC;AAEH,MAAMI,eAAe,GAAGA,CAAC;EACvBC,SAAS;EACT3B,aAAa;EACbE;AACoB,CAAC,KAAK;EAC1B,MAAM0B,gBAAgB,GAAG,OAAOD,SAAS,KAAK,QAAQ;EAEtD,IAAIC,gBAAgB,EAAE;IACpB,OACElC,IAAA,CAACG,wBAAwB;MACvBG,aAAa,EAAEA,aAAc;MAC7BE,mBAAmB,EAAEA,mBAAoB;MAAA2B,QAAA,EAEzCnC,IAAA;QAAKoC,GAAG,EAAEH,SAAU;QAACI,GAAG,EAAC,EAAE;QAACC,IAAI,EAAC;MAAc,CAAE;IAAC,CAC1B,CAAC;EAE/B,CAAC,MAAM;IACL,OACEtC,IAAA,CAACG,wBAAwB;MACvBG,aAAa,EAAEA,aAAc;MAC7BE,mBAAmB,EAAEA,mBAAoB;MAAA2B,QAAA,EAExCF;IAAS,CACc,CAAC;EAE/B;AACF,CAAC;AAED,MAAMM,KAAK,GAAGA,CAAC;EAAEC,OAAO;EAAEC,IAAI;EAAEjC,mBAAmB;EAAEkC;AAAoB,CAAC,KAAK;EAC7E,MAAMC,WAAW,GAAGtD,WAAW,CAC5BuD,KAAuB,IAAK;IAC3BA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBH,OAAO,CAAC,CAAC;EACX,CAAC,EACD,CAACA,OAAO,CACV,CAAC;EAED,OACE1C,IAAA,CAACG,wBAAwB;IACvBG,aAAa,EAAEmC,IAAK;IACpBjC,mBAAmB,EAAEA,mBAAoB;IACzCkC,OAAO,EAAEC,WAAY;IAAAR,QAAA,EAEpBK;EAAO,CACgB,CAAC;AAE/B,CAAC;AAED,MAAMM,YAAY,GAAGA,CAAsC;EACzDxC,aAAa;EACbyC,QAAQ;EACRvC,mBAAmB;EACnBwC;AAIA,CAAC,KAAK;EACN,MAAM;IACJf,SAAS;IACTgB,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACLX,OAAO;IACPY,aAAa,GAAG;EAClB,CAAC,GAAGN,MAAM;EAEV,MAAMO,iBAAiB,GAAGlE,WAAW,CAClCuD,KAAuB,IAAK;IAC3B,IAAI,CAACU,aAAa,EAAE;MAClBV,KAAK,CAACY,cAAc,CAAC,CAAC;MACtB;IACF;IACAZ,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBH,OAAO,GAAG,CAAC;EACb,CAAC,EACD,CAACA,OAAO,EAAEY,aAAa,CACzB,CAAC;EAED,MAAMG,gBAAgB,GAAGnE,OAAO,CAAC,MAAM;IACrC,OAAO;MACL,GAAGyD,QAAQ;MACXL,OAAO,EAAEY,aAAa,GAAGC,iBAAiB,GAAGG,SAAS;MACtD,eAAe,EAAE,CAACJ,aAAa,GAAG,MAAM,GAAGI,SAAS;MACpDpB,IAAI,EAAE;IACR,CAAC;EACH,CAAC,EAAE,CAACS,QAAQ,EAAEO,aAAa,EAAEC,iBAAiB,CAAC,CAAC;EAEhD,OACEvD,IAAA,CAACN,MAAM;IAACiE,YAAY;IAAaZ,QAAQ,EAAEU,gBAAiB;IAAAtB,QAAA,EAC1DjC,KAAA,CAAC2B,qBAAqB;MAACrB,mBAAmB,EAAEA,mBAAoB;MAAA2B,QAAA,GAC9DjC,KAAA,CAAC6B,yBAAyB;QAACvB,mBAAmB,EAAEA,mBAAoB;QAAA2B,QAAA,GAClEnC,IAAA,CAACgC,eAAe;UACdC,SAAS,EAAEA,SAAU;UACrB3B,aAAa,EAAEA,aAAc;UAC7BE,mBAAmB,EAAEA;QAAoB,CAC1C,CAAC,EACFN,KAAA;UAAAiC,QAAA,GACEjC,KAAA,CAACN,oBAAoB;YAACY,mBAAmB,EAAEA,mBAAoB;YAAA2B,QAAA,GAC7DnC,IAAA,CAACF,QAAQ;cAAC8D,SAAS,EAAC,GAAG;cAAAzB,QAAA,EAAEe;YAAK,CAAW,CAAC,EAC1ClD,IAAA,CAACL,0BAA0B;cACzBsD,WAAW,EAAEA,WAAY;cACzBzC,mBAAmB,EAAEA;YAAoB,CAC1C,CAAC;UAAA,CACkB,CAAC,EACtB2C,QAAQ,IACPnD,IAAA,CAACH,uBAAuB;YACtBsD,QAAQ,EAAEA,QAAS;YACnB3C,mBAAmB,EAAEA;UAAoB,CAC1C,CACF;QAAA,CACE,CAAC;MAAA,CACmB,CAAC,EAC3B4C,KAAK,IACJpD,IAAA,CAACuC,KAAK;QACJC,OAAO,EAAEY,KAAK,CAACZ,OAAQ;QACvBC,IAAI,EAAEW,KAAK,CAACX,IAAI,IAAInC,aAAc;QAClCoC,OAAO,EAAEU,KAAK,CAACV,OAAQ;QACvBlC,mBAAmB,EAAEA;MAAoB,CAC1C,CACF;IAAA,CACoB;EAAC,GAhCA6C,KAiClB,CAAC;AAEb,CAAC;AAmCD,MAAMQ,cAAsD,GAAGA,CAI7D;EACAvD,aAAa,GAAG,OAAO;EACvBwD,eAAe;EACfC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,uBAAuB;EACvBC,cAAc;EACdC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,EAAEC,iBAAiB,GAAG,KAAK;EACxCC,IAAI;EACJC,iBAAiB;EACjB9B,KAAK;EACL+B,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ,EAAEC,YAAY;EACtBC,aAAa,EAAEC,iBAAiB;EAChCC,OAAO;EACPC,OAAO;EACPpC,KAAK;EACLqC,MAAM;EACNC;AAKF,CAAC,KAAK;EACJ,MAAMnF,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EAEpD,MAAMmG,kBAAkB,GAAGvG,WAAW,CAGpC,CAAC0D,QAAQ,EAAEC,MAAM,KAAK;IACpB,OACEhD,IAAA,CAAC8C,YAAY;MACXxC,aAAa,EAAEA,aAAc;MAC7ByC,QAAQ,EAAEA,QAAS;MACnBvC,mBAAmB,EAAEA,mBAAoB;MACzCwC,MAAM,EAAEA;IAAO,CAChB,CAAC;EAEN,CAAC,EACD,CAAC1C,aAAa,EAAEE,mBAAmB,CACrC,CAAC;EAED,OACER,IAAA,CAACR,gBAAgB;IACfsE,eAAe,EAAEA,eAAgB;IACjCC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCC,uBAAuB,EAAEA,uBAAwB;IACjDC,cAAc,EAAEA,cAAe;IAC/BC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEC,iBAAkB;IACjCC,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrC9B,KAAK,EAAEA,KAAM;IACb+B,IAAI,EAAEC,YAAa;IACnBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEC,YAAa;IACvBC,aAAa,EAAEC,iBAAkB;IACjCC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBI,YAAY,EAAED,kBAAmB;IACjCvC,KAAK,EAAEA,KAAM;IACbqC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAMG,sBAAsB,GAAG1G,IAAI,CAACyE,cAAc,CAAmB;AAErEiC,sBAAsB,CAACC,WAAW,GAAG,wBAAwB;AAE7D,SAASD,sBAAsB,IAAIjC,cAAc","ignoreList":[]}
1	+ {"version":3,"file":"SearchDropdown.js","names":["memo","useCallback","useMemo","styled","ComposablePicker","useOdysseyDesignTokens","Option","OptionDescriptionComponent","OptionLabelContainer","OptionMetadataComponent","Heading6","jsx","_jsx","jsxs","_jsxs","OptionAdornmentContainer","shouldForwardProp","prop","adornmentSize","isTagContainer","odysseyDesignTokens","position","bottom","alignSelf","width","Spacing5","height","overflow","marginInlineEnd","Spacing3","marginInlineStart","svg","img","top","left","transform","Spacing8","Spacing4","maxHeight","Spacing2","display","CustomOptionContainer","justifyContent","CustomOptionLeftContainer","OptionAdornment","adornment","isImageAdornment","children","src","alt","role","Extra","content","size","onClick","handleClick","event","stopPropagation","CustomOption","muiProps","option","description","label","metaData","extra","isInteractive","handleOptionClick","preventDefault","extendedMuiProps","undefined","hasAdornment","component","SearchDropdown","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","getIsOptionEqualToValue","groupOptionsBy","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","testId","translate","customOptionRender","renderOption","MemoizedSearchDropdown","displayName"],"sources":["../../../../src/labs/OdysseyPickers/SearchDropdown.tsx"],"sourcesContent":["/!\n Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, ReactNode, useCallback, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n ComposablePicker,\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n type BaseRenderOptionProps,\n} from \"./ComposablePicker.js\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n type BaseOptionProps,\n type LabelDescription,\n type Metadata,\n Option,\n OptionDescriptionComponent,\n OptionLabelContainer,\n OptionMetadataComponent,\n OptionProps,\n} from \"./Picker.js\";\nimport { Heading6 } from \"../../Typography.js\";\n\ntype Adornment = ReactNode \| string;\ntype ExtraType = {\n content: ReactNode \| string;\n size?: AdornmentSize;\n onClick: () => void;\n};\n\ntype AdornmentLabelDescription = LabelDescription & {\n adornment: Adornment;\n extra?: ExtraType;\n onClick?: () => void;\n isInteractive?: boolean;\n};\n\nexport type CustomOptionType = AdornmentLabelDescription & Partial<Metadata>;\n\nconst OptionAdornmentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"adornmentSize\" &&\n prop !== \"isTagContainer\",\n})<{\n adornmentSize?: AdornmentSize;\n isTagContainer?: boolean;\n odysseyDesignTokens: DesignTokens;\n position?: \"left\" \| \"right\";\n}>(\n ({\n adornmentSize = \"small\",\n isTagContainer = false,\n\n odysseyDesignTokens,\n position = \"left\",\n }) => ({\n position: \"relative\",\n // push icon up by one px for better visual alignment\n bottom: \"1px\",\n alignSelf: \"flex-start\",\n width: odysseyDesignTokens.Spacing5,\n height: odysseyDesignTokens.Spacing5,\n overflow: \"hidden\",\n\n ...(position === \"left\" && {\n marginInlineEnd: odysseyDesignTokens.Spacing3,\n }),\n ...(position === \"right\" && {\n marginInlineStart: odysseyDesignTokens.Spacing3,\n }),\n\n svg: {\n width: \"100%\",\n height: \"auto\",\n },\n\n img: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"100%\",\n transform: \"translate(-50%, -50%)\",\n },\n\n ...(adornmentSize === \"large\" &&\n !isTagContainer && {\n bottom: 0,\n width: odysseyDesignTokens.Spacing8,\n height: odysseyDesignTokens.Spacing8,\n }),\n\n ...(isTagContainer && {\n bottom: 0,\n alignSelf: \"center\",\n width: odysseyDesignTokens.Spacing4,\n height: \"auto\",\n maxHeight: odysseyDesignTokens.Spacing4,\n marginInlineEnd: odysseyDesignTokens.Spacing2,\n\n svg: {\n display: \"flex\",\n width: \"100%\",\n height: \"auto\",\n },\n }),\n }),\n);\n\ntype OptionAdornmentProps = {\n adornment: Adornment;\n adornmentSize: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n};\n\ntype ExtraProps = {\n content: Adornment;\n size?: AdornmentSize;\n odysseyDesignTokens: DesignTokens;\n onClick: () => void;\n};\n\nconst CustomOptionContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n width: \"100%\",\n}));\n\nconst CustomOptionLeftContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(() => ({\n display: \"flex\",\n}));\n\nconst OptionAdornment = ({\n adornment,\n adornmentSize,\n odysseyDesignTokens,\n}: OptionAdornmentProps) => {\n const isImageAdornment = typeof adornment === \"string\";\n\n if (isImageAdornment) {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <img src={adornment} alt=\"\" role=\"presentation\" />\n </OptionAdornmentContainer>\n );\n } else {\n return (\n <OptionAdornmentContainer\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {adornment}\n </OptionAdornmentContainer>\n );\n }\n};\n\nconst Extra = ({ content, size, odysseyDesignTokens, onClick }: ExtraProps) => {\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n event.stopPropagation();\n onClick();\n },\n [onClick],\n );\n\n return (\n <OptionAdornmentContainer\n adornmentSize={size}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={handleClick}\n >\n {content}\n </OptionAdornmentContainer>\n );\n};\n\nconst CustomOption = <OptionType extends CustomOptionType>({\n adornmentSize,\n muiProps,\n odysseyDesignTokens,\n option,\n}: BaseOptionProps &\n OptionProps<OptionType> & {\n adornmentSize: AdornmentSize;\n }) => {\n const {\n adornment,\n description,\n label,\n metaData,\n extra,\n onClick,\n isInteractive = true,\n } = option;\n\n const handleOptionClick = useCallback(\n (event: React.MouseEvent) => {\n if (!isInteractive) {\n event.preventDefault();\n return;\n }\n event.stopPropagation();\n onClick?.();\n },\n [onClick, isInteractive],\n );\n\n const extendedMuiProps = useMemo(() => {\n return {\n ...muiProps,\n onClick: isInteractive ? handleOptionClick : undefined,\n \"aria-disabled\": !isInteractive ? \"true\" : undefined,\n role: \"option\",\n } satisfies BaseRenderOptionProps;\n }, [muiProps, isInteractive, handleOptionClick]);\n\n return (\n <Option hasAdornment muiProps={extendedMuiProps}>\n <CustomOptionContainer odysseyDesignTokens={odysseyDesignTokens}>\n <CustomOptionLeftContainer odysseyDesignTokens={odysseyDesignTokens}>\n <OptionAdornment\n adornment={adornment}\n adornmentSize={adornmentSize}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n <div>\n <OptionLabelContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Heading6 component=\"p\">{label}</Heading6>\n <OptionDescriptionComponent\n description={description}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </OptionLabelContainer>\n {metaData && (\n <OptionMetadataComponent\n metaData={metaData}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n )}\n </div>\n </CustomOptionLeftContainer>\n {extra && (\n <Extra\n content={extra.content}\n size={extra.size \|\| adornmentSize}\n onClick={extra.onClick}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n )}\n </CustomOptionContainer>\n </Option>\n );\n};\n\nexport type SearchDropdownProps<\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n> = BasePickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed> & {\n adornmentSize?: AdornmentSize;\n};\n\ntype PickerWithOptionAdornmentComponentType = {\n <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactElement;\n <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n >(\n props: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n >,\n ): ReactElement;\n};\n\nconst SearchDropdown: PickerWithOptionAdornmentComponentType = <\n OptionType extends CustomOptionType,\n HasMultipleChoices extends boolean \| undefined,\n IsCustomValueAllowed extends boolean \| undefined,\n>({\n adornmentSize = \"small\",\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n getIsOptionEqualToValue,\n groupOptionsBy,\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}: SearchDropdownProps<\n OptionType,\n HasMultipleChoices,\n IsCustomValueAllowed\n>) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const customOptionRender = useCallback<\n (props: BaseRenderOptionProps, option: OptionType) => ReactNode\n >(\n (muiProps, option) => {\n return (\n <CustomOption\n adornmentSize={adornmentSize}\n key={option.value}\n muiProps={muiProps}\n odysseyDesignTokens={odysseyDesignTokens}\n option={option}\n />\n );\n },\n [adornmentSize, odysseyDesignTokens],\n );\n\n return (\n <ComposablePicker<OptionType, HasMultipleChoices, IsCustomValueAllowed>\n ariaDescribedBy={ariaDescribedBy}\n defaultValue={defaultValue}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n getIsOptionEqualToValue={getIsOptionEqualToValue}\n groupOptionsBy={groupOptionsBy}\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 hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n name={nameOverride}\n onBlur={onBlur}\n onChange={onChangeProp}\n onInputChange={onInputChangeProp}\n onFocus={onFocus}\n options={options}\n renderOption={customOptionRender}\n value={value}\n testId={testId}\n translate={translate}\n />\n );\n};\n\n// Need the `as BasePickerType` because generics don't get passed through\nconst MemoizedSearchDropdown = memo(SearchDropdown) as BasePickerType;\n\nMemoizedSearchDropdown.displayName = \"MemoizedSearchDropdown\";\n\nexport { MemoizedSearchDropdown as SearchDropdown };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/labs/PageTemplate/PageTemplate.js CHANGED Viewed

@@ -11,12 +11,13 @@
  */
 import styled from "@emotion/styled";
-import { memo } from "react";
+import { memo, useCallback, useRef } from "react";
 import { DocumentationIcon } from "../../icons.generated/index.js";
 import { DocumentationLink } from "./DocumentationLink.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Heading4, Paragraph } from "../../Typography.js";
 import { useHasUiShell } from "../../ui-shell/useHasUiShell.js";
+import { useMountLifecycleEffect } from "../../useMountLifecycleEffect.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TemplateContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasUiShell" && prop !== "isFullWidth"
@@ -71,11 +72,12 @@ const TemplateHeaderButtons = styled("div", {
   gap: odysseyDesignTokens.Spacing2
 }));
 const TemplateContent = styled("div", {
-  shouldForwardProp: prop => !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop)
+  shouldForwardProp: prop => !["drawerVariant", "isDrawerOpen", "isFirstRender", "odysseyDesignTokens"].includes(prop)
 })(({
-  odysseyDesignTokens,
+  drawerVariant,
   isDrawerOpen,
-  drawerVariant
+  isFirstRender,
+  odysseyDesignTokens
 }) => ({
   "@keyframes animate-drawer-open": {
     "0%": {
@@ -98,7 +100,7 @@ const TemplateContent = styled("div", {
   gap: drawerVariant === "persistent" && !isDrawerOpen ? 0 : odysseyDesignTokens.Spacing4,
   marginBlock: odysseyDesignTokens.Spacing4,
   gridTemplateColumns: drawerVariant === "persistent" ? isDrawerOpen ? "minmax(0, 1fr) 360px" : "minmax(0, 1fr) 0" : "minmax(0, 1fr)",
-  animation: drawerVariant === "persistent" && isDrawerOpen ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)" : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)"
+  animation: drawerVariant === "persistent" && (!isFirstRender || isDrawerOpen) ? `animate-drawer-${isDrawerOpen ? "open" : "close"} 225ms cubic-bezier(0, 0, 0.2, 1)` : undefined
 }));
 const PageTemplate = ({
   children,
@@ -118,6 +120,14 @@ const PageTemplate = ({
     variant: drawerVariant
   } = drawer?.props ?? {};
   const hasUiShell = useHasUiShell();
+  const firstRenderRef = useRef(true);
+  const isFirstRender = firstRenderRef.current;
+  const onMount = useCallback(() => {
+    firstRenderRef.current = false;
+  }, []);
+  useMountLifecycleEffect({
+    onMount
+  });
   return _jsxs(TemplateContainer, {
     hasUiShell: hasUiShell,
     isFullWidth: isFullWidth,
@@ -147,6 +157,7 @@ const PageTemplate = ({
       odysseyDesignTokens: odysseyDesignTokens,
       isDrawerOpen: isDrawerOpen,
       drawerVariant: drawerVariant,
+      isFirstRender: isFirstRender,
       children: [children, drawer]
     })]
   });

package/dist/esm/labs/PageTemplate/PageTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplate.js","names":["styled","memo","DocumentationIcon","DocumentationLink","useOdysseyDesignTokens","Heading4","Paragraph","useHasUiShell","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","hasUiShell","isFullWidth","odysseyDesignTokens","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","gap","Spacing4","TemplateHeaderPrimaryContent","TypographyLineLengthMax","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","minHeight","Spacing7","whiteSpace","TemplateHeaderButtons","Spacing2","TemplateContent","includes","isDrawerOpen","drawerVariant","gridTemplateColumns","gridGap","marginBlock","animation","PageTemplate","children","description","documentationLink","documentationText","drawer","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","title","isOpen","variant","props","href","icon","target","MemoizedPageTemplate","displayName"],"sources":["../../../../src/labs/PageTemplate/PageTemplate.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 { memo, ReactElement, ReactNode } from \"react\";\n\nimport { DrawerProps } from \"../../Drawer.js\";\nimport { DocumentationIcon } from \"../../icons.generated/index.js\";\nimport { DocumentationLink } from \"./DocumentationLink.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading4, Paragraph } from \"../../Typography.js\";\nimport { useHasUiShell } from \"../../ui-shell/useHasUiShell.js\";\n\nexport type PageTemplateProps = {\n /\n The title of the layout to be situated in the layout header\n /\n title?: string;\n /\n A supplementary description to be situated in the layout header\n /\n description?: string;\n /\n The destination for a documentation `Link` to be situated in the layout header\n /\n documentationLink?: string;\n /\n The text for a documentation `Link` to be situated in the layout header\n /\n documentationText?: string;\n /\n An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n /\n drawer?: ReactElement<DrawerProps>;\n /\n An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n /\n primaryCallToActionComponent?: ReactElement;\n /\n An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n /\n secondaryCallToActionComponent?: ReactElement;\n /\n An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n /\n tertiaryCallToActionComponent?: ReactElement;\n /\n The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n /\n children?: ReactNode;\n /\n When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n */\n isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n odysseyDesignTokens: DesignTokens;\n isDrawerOpen?: boolean;\n drawerVariant?: string;\n};\n\nconst TemplateContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"hasUiShell\" &&\n prop !== \"isFullWidth\",\n})<{\n hasUiShell: boolean;\n isFullWidth: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({\n maxWidth: isFullWidth\n ? \"100%\"\n : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n marginInline:\n isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : \"auto\",\n padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n [\".MuiTypography-root:last-child\"]: {\n marginBlockEnd: \"0\",\n },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n alignItems: \"flex-end\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: odysseyDesignTokens.Spacing4,\n minHeight: odysseyDesignTokens.Spacing7,\n justifyContent: \"center\",\n whiteSpace: \"nowrap\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n ![\"odysseyDesignTokens\", \"isDrawerOpen\", \"drawerVariant\"].includes(prop),\n})<TemplateContentProps>(\n ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({\n \"@keyframes animate-drawer-open\": {\n \"0%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 0\",\n },\n \"100%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n },\n },\n \"@keyframes animate-drawer-close\": {\n \"0%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n },\n \"100%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 0\",\n },\n },\n display: \"grid\",\n gridGap:\n drawerVariant === \"persistent\" && !isDrawerOpen\n ? 0\n : odysseyDesignTokens.Spacing4,\n gap:\n drawerVariant === \"persistent\" && !isDrawerOpen\n ? 0\n : odysseyDesignTokens.Spacing4,\n marginBlock: odysseyDesignTokens.Spacing4,\n gridTemplateColumns:\n drawerVariant === \"persistent\"\n ? isDrawerOpen\n ? \"minmax(0, 1fr) 360px\"\n : \"minmax(0, 1fr) 0\"\n : \"minmax(0, 1fr)\",\n animation:\n drawerVariant === \"persistent\" && isDrawerOpen\n ? \"animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)\"\n : \"animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)\",\n }),\n);\n\nconst PageTemplate = ({\n children,\n description,\n documentationLink,\n documentationText,\n drawer,\n isFullWidth = false,\n primaryCallToActionComponent,\n secondaryCallToActionComponent,\n tertiaryCallToActionComponent,\n title,\n}: PageTemplateProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n const hasUiShell = useHasUiShell();\n\n return (\n <TemplateContainer\n hasUiShell={hasUiShell}\n isFullWidth={isFullWidth}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <TemplateHeader odysseyDesignTokens={odysseyDesignTokens}>\n <TemplateHeaderPrimaryContent odysseyDesignTokens={odysseyDesignTokens}>\n {title && <Heading4>{title}</Heading4>}\n {description && <Paragraph>{description}</Paragraph>}\n </TemplateHeaderPrimaryContent>\n\n <TemplateHeaderSecondaryContent\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {documentationLink && (\n <DocumentationLink\n href={documentationLink}\n icon={<DocumentationIcon />}\n target=\"_blank\"\n >\n {documentationText}\n </DocumentationLink>\n )}\n {(primaryCallToActionComponent \|\|\n secondaryCallToActionComponent \|\|\n tertiaryCallToActionComponent) && (\n <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n {tertiaryCallToActionComponent}\n {secondaryCallToActionComponent}\n {primaryCallToActionComponent}\n </TemplateHeaderButtons>\n )}\n </TemplateHeaderSecondaryContent>\n </TemplateHeader>\n <TemplateContent\n odysseyDesignTokens={odysseyDesignTokens}\n isDrawerOpen={isDrawerOpen}\n drawerVariant={drawerVariant}\n >\n {children}\n {drawer}\n </TemplateContent>\n </TemplateContainer>\n );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"PageTemplate.js","names":["styled","memo","useCallback","useRef","DocumentationIcon","DocumentationLink","useOdysseyDesignTokens","Heading4","Paragraph","useHasUiShell","useMountLifecycleEffect","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","hasUiShell","isFullWidth","odysseyDesignTokens","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","gap","Spacing4","TemplateHeaderPrimaryContent","TypographyLineLengthMax","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","minHeight","Spacing7","whiteSpace","TemplateHeaderButtons","Spacing2","TemplateContent","includes","drawerVariant","isDrawerOpen","isFirstRender","gridTemplateColumns","gridGap","marginBlock","animation","undefined","PageTemplate","children","description","documentationLink","documentationText","drawer","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","title","isOpen","variant","props","firstRenderRef","current","onMount","href","icon","target","MemoizedPageTemplate","displayName"],"sources":["../../../../src/labs/PageTemplate/PageTemplate.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 { memo, ReactElement, ReactNode, useCallback, useRef } from \"react\";\n\nimport { DrawerProps } from \"../../Drawer.js\";\nimport { DocumentationIcon } from \"../../icons.generated/index.js\";\nimport { DocumentationLink } from \"./DocumentationLink.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading4, Paragraph } from \"../../Typography.js\";\nimport { useHasUiShell } from \"../../ui-shell/useHasUiShell.js\";\nimport { useMountLifecycleEffect } from \"../../useMountLifecycleEffect.js\";\n\nexport type PageTemplateProps = {\n /\n The title of the layout to be situated in the layout header\n /\n title?: string;\n /\n A supplementary description to be situated in the layout header\n /\n description?: string;\n /\n The destination for a documentation `Link` to be situated in the layout header\n /\n documentationLink?: string;\n /\n The text for a documentation `Link` to be situated in the layout header\n /\n documentationText?: string;\n /\n An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n /\n drawer?: ReactElement<DrawerProps>;\n /\n An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n /\n primaryCallToActionComponent?: ReactElement;\n /\n An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n /\n secondaryCallToActionComponent?: ReactElement;\n /\n An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n /\n tertiaryCallToActionComponent?: ReactElement;\n /\n The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n /\n children?: ReactNode;\n /\n When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n */\n isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n drawerVariant?: string;\n isDrawerOpen?: boolean;\n isFirstRender: boolean;\n odysseyDesignTokens: DesignTokens;\n};\n\nconst TemplateContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"hasUiShell\" &&\n prop !== \"isFullWidth\",\n})<{\n hasUiShell: boolean;\n isFullWidth: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({\n maxWidth: isFullWidth\n ? \"100%\"\n : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n marginInline:\n isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : \"auto\",\n padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n [\".MuiTypography-root:last-child\"]: {\n marginBlockEnd: \"0\",\n },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n alignItems: \"flex-end\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: odysseyDesignTokens.Spacing4,\n minHeight: odysseyDesignTokens.Spacing7,\n justifyContent: \"center\",\n whiteSpace: \"nowrap\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n ![\n \"drawerVariant\",\n \"isDrawerOpen\",\n \"isFirstRender\",\n \"odysseyDesignTokens\",\n ].includes(prop),\n})<TemplateContentProps>(\n ({ drawerVariant, isDrawerOpen, isFirstRender, odysseyDesignTokens }) => ({\n \"@keyframes animate-drawer-open\": {\n \"0%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 0\",\n },\n \"100%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n },\n },\n \"@keyframes animate-drawer-close\": {\n \"0%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n },\n \"100%\": {\n gridTemplateColumns: \"minmax(0, 1fr) 0\",\n },\n },\n display: \"grid\",\n gridGap:\n drawerVariant === \"persistent\" && !isDrawerOpen\n ? 0\n : odysseyDesignTokens.Spacing4,\n gap:\n drawerVariant === \"persistent\" && !isDrawerOpen\n ? 0\n : odysseyDesignTokens.Spacing4,\n marginBlock: odysseyDesignTokens.Spacing4,\n gridTemplateColumns:\n drawerVariant === \"persistent\"\n ? isDrawerOpen\n ? \"minmax(0, 1fr) 360px\"\n : \"minmax(0, 1fr) 0\"\n : \"minmax(0, 1fr)\",\n animation:\n drawerVariant === \"persistent\" && (!isFirstRender \|\| isDrawerOpen)\n ? `animate-drawer-${isDrawerOpen ? \"open\" : \"close\"} 225ms cubic-bezier(0, 0, 0.2, 1)`\n : undefined,\n }),\n);\n\nconst PageTemplate = ({\n children,\n description,\n documentationLink,\n documentationText,\n drawer,\n isFullWidth = false,\n primaryCallToActionComponent,\n secondaryCallToActionComponent,\n tertiaryCallToActionComponent,\n title,\n}: PageTemplateProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n const hasUiShell = useHasUiShell();\n\n const firstRenderRef = useRef(true);\n\n const isFirstRender = firstRenderRef.current;\n\n const onMount = useCallback(() => {\n firstRenderRef.current = false;\n }, []);\n\n useMountLifecycleEffect({\n onMount,\n });\n\n return (\n <TemplateContainer\n hasUiShell={hasUiShell}\n isFullWidth={isFullWidth}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <TemplateHeader odysseyDesignTokens={odysseyDesignTokens}>\n <TemplateHeaderPrimaryContent odysseyDesignTokens={odysseyDesignTokens}>\n {title && <Heading4>{title}</Heading4>}\n {description && <Paragraph>{description}</Paragraph>}\n </TemplateHeaderPrimaryContent>\n\n <TemplateHeaderSecondaryContent\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {documentationLink && (\n <DocumentationLink\n href={documentationLink}\n icon={<DocumentationIcon />}\n target=\"_blank\"\n >\n {documentationText}\n </DocumentationLink>\n )}\n {(primaryCallToActionComponent \|\|\n secondaryCallToActionComponent \|\|\n tertiaryCallToActionComponent) && (\n <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n {tertiaryCallToActionComponent}\n {secondaryCallToActionComponent}\n {primaryCallToActionComponent}\n </TemplateHeaderButtons>\n )}\n </TemplateHeaderSecondaryContent>\n </TemplateHeader>\n <TemplateContent\n odysseyDesignTokens={odysseyDesignTokens}\n isDrawerOpen={isDrawerOpen}\n drawerVariant={drawerVariant}\n isFirstRender={isFirstRender}\n >\n {children}\n {drawer}\n </TemplateContent>\n </TemplateContainer>\n );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAA2BC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAG1E,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,QAAQ,EAAEC,SAAS,QAAQ,qBAAqB;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,uBAAuB,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoD3E,MAAMC,iBAAiB,GAAGf,MAAM,CAAC,KAAK,EAAE;EACtCgB,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,KAAK,YAAY,IACrBA,IAAI,KAAK;AACb,CAAC,CAAC,CAIC,CAAC;EAAEC,UAAU;EAAEC,WAAW;EAAEC;AAAoB,CAAC,MAAM;EACxDC,QAAQ,EAAEF,WAAW,GACjB,MAAM,GACN,iBAAiBC,mBAAmB,CAACE,QAAQ,MAAMF,mBAAmB,CAACE,QAAQ,GAAG;EACtFC,YAAY,EACVJ,WAAW,IAAI,CAACD,UAAU,GAAGE,mBAAmB,CAACE,QAAQ,GAAG,MAAM;EACpEE,OAAO,EAAEN,UAAU,GAAG,CAAC,GAAGE,mBAAmB,CAACE;AAChD,CAAC,CAAC,CAAC;AAEH,MAAMG,cAAc,GAAGzB,MAAM,CAAC,KAAK,EAAE;EACnCgB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEG;AAAoB,CAAC,MAAM;EAC/BM,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,eAAe;EAC/BC,GAAG,EAAET,mBAAmB,CAACU;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,4BAA4B,GAAG/B,MAAM,CAAC,KAAK,EAAE;EACjDgB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEG;AAAoB,CAAC,MAAM;EAC/BC,QAAQ,EAAED,mBAAmB,CAACY,uBAAuB;EACrD,CAAC,gCAAgC,GAAG;IAClCC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,8BAA8B,GAAGlC,MAAM,CAAC,KAAK,EAAE;EACnDgB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEG;AAAoB,CAAC,MAAM;EAC/BO,UAAU,EAAE,UAAU;EACtBD,OAAO,EAAE,MAAM;EACfS,aAAa,EAAE,QAAQ;EACvBN,GAAG,EAAET,mBAAmB,CAACU,QAAQ;EACjCM,SAAS,EAAEhB,mBAAmB,CAACiB,QAAQ;EACvCT,cAAc,EAAE,QAAQ;EACxBU,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAGvC,MAAM,CAAC,KAAK,EAAE;EAC1CgB,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEG;AAAoB,CAAC,MAAM;EAC/BM,OAAO,EAAE,MAAM;EACfG,GAAG,EAAET,mBAAmB,CAACoB;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGzC,MAAM,CAAC,KAAK,EAAE;EACpCgB,iBAAiB,EAAGC,IAAI,IACtB,CAAC,CACC,eAAe,EACf,cAAc,EACd,eAAe,EACf,qBAAqB,CACtB,CAACyB,QAAQ,CAACzB,IAAI;AACnB,CAAC,CAAC,CACA,CAAC;EAAE0B,aAAa;EAAEC,YAAY;EAAEC,aAAa;EAAEzB;AAAoB,CAAC,MAAM;EACxE,gCAAgC,EAAE;IAChC,IAAI,EAAE;MACJ0B,mBAAmB,EAAE;IACvB,CAAC;IACD,MAAM,EAAE;MACNA,mBAAmB,EAAE;IACvB;EACF,CAAC;EACD,iCAAiC,EAAE;IACjC,IAAI,EAAE;MACJA,mBAAmB,EAAE;IACvB,CAAC;IACD,MAAM,EAAE;MACNA,mBAAmB,EAAE;IACvB;EACF,CAAC;EACDpB,OAAO,EAAE,MAAM;EACfqB,OAAO,EACLJ,aAAa,KAAK,YAAY,IAAI,CAACC,YAAY,GAC3C,CAAC,GACDxB,mBAAmB,CAACU,QAAQ;EAClCD,GAAG,EACDc,aAAa,KAAK,YAAY,IAAI,CAACC,YAAY,GAC3C,CAAC,GACDxB,mBAAmB,CAACU,QAAQ;EAClCkB,WAAW,EAAE5B,mBAAmB,CAACU,QAAQ;EACzCgB,mBAAmB,EACjBH,aAAa,KAAK,YAAY,GAC1BC,YAAY,GACV,sBAAsB,GACtB,kBAAkB,GACpB,gBAAgB;EACtBK,SAAS,EACPN,aAAa,KAAK,YAAY,KAAK,CAACE,aAAa,IAAID,YAAY,CAAC,GAC9D,kBAAkBA,YAAY,GAAG,MAAM,GAAG,OAAO,mCAAmC,GACpFM;AACR,CAAC,CACH,CAAC;AAED,MAAMC,YAAY,GAAGA,CAAC;EACpBC,QAAQ;EACRC,WAAW;EACXC,iBAAiB;EACjBC,iBAAiB;EACjBC,MAAM;EACNrC,WAAW,GAAG,KAAK;EACnBsC,4BAA4B;EAC5BC,8BAA8B;EAC9BC,6BAA6B;EAC7BC;AACiB,CAAC,KAAK;EACvB,MAAMxC,mBAAmB,GAAGd,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEuD,MAAM,EAAEjB,YAAY;IAAEkB,OAAO,EAAEnB;EAAc,CAAC,GAAGa,MAAM,EAAEO,KAAK,IAAI,CAAC,CAAC;EAE5E,MAAM7C,UAAU,GAAGT,aAAa,CAAC,CAAC;EAElC,MAAMuD,cAAc,GAAG7D,MAAM,CAAC,IAAI,CAAC;EAEnC,MAAM0C,aAAa,GAAGmB,cAAc,CAACC,OAAO;EAE5C,MAAMC,OAAO,GAAGhE,WAAW,CAAC,MAAM;IAChC8D,cAAc,CAACC,OAAO,GAAG,KAAK;EAChC,CAAC,EAAE,EAAE,CAAC;EAENvD,uBAAuB,CAAC;IACtBwD;EACF,CAAC,CAAC;EAEF,OACEpD,KAAA,CAACC,iBAAiB;IAChBG,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBC,mBAAmB,EAAEA,mBAAoB;IAAAgC,QAAA,GAEzCtC,KAAA,CAACW,cAAc;MAACL,mBAAmB,EAAEA,mBAAoB;MAAAgC,QAAA,GACvDtC,KAAA,CAACiB,4BAA4B;QAACX,mBAAmB,EAAEA,mBAAoB;QAAAgC,QAAA,GACpEQ,KAAK,IAAIhD,IAAA,CAACL,QAAQ;UAAA6C,QAAA,EAAEQ;QAAK,CAAW,CAAC,EACrCP,WAAW,IAAIzC,IAAA,CAACJ,SAAS;UAAA4C,QAAA,EAAEC;QAAW,CAAY,CAAC;MAAA,CACxB,CAAC,EAE/BvC,KAAA,CAACoB,8BAA8B;QAC7Bd,mBAAmB,EAAEA,mBAAoB;QAAAgC,QAAA,GAExCE,iBAAiB,IAChB1C,IAAA,CAACP,iBAAiB;UAChB8D,IAAI,EAAEb,iBAAkB;UACxBc,IAAI,EAAExD,IAAA,CAACR,iBAAiB,IAAE,CAAE;UAC5BiE,MAAM,EAAC,QAAQ;UAAAjB,QAAA,EAEdG;QAAiB,CACD,CACpB,EACA,CAACE,4BAA4B,IAC5BC,8BAA8B,IAC9BC,6BAA6B,KAC7B7C,KAAA,CAACyB,qBAAqB;UAACnB,mBAAmB,EAAEA,mBAAoB;UAAAgC,QAAA,GAC7DO,6BAA6B,EAC7BD,8BAA8B,EAC9BD,4BAA4B;QAAA,CACR,CACxB;MAAA,CAC6B,CAAC;IAAA,CACnB,CAAC,EACjB3C,KAAA,CAAC2B,eAAe;MACdrB,mBAAmB,EAAEA,mBAAoB;MACzCwB,YAAY,EAAEA,YAAa;MAC3BD,aAAa,EAAEA,aAAc;MAC7BE,aAAa,EAAEA,aAAc;MAAAO,QAAA,GAE5BA,QAAQ,EACRI,MAAM;IAAA,CACQ,CAAC;EAAA,CACD,CAAC;AAExB,CAAC;AAED,MAAMc,oBAAoB,GAAGrE,IAAI,CAACkD,YAAY,CAAC;AAC/CmB,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAInB,YAAY","ignoreList":[]}

package/dist/esm/properties/ts/odyssey-react-mui.js CHANGED Viewed

@@ -79,7 +79,6 @@ export const translation = {
   "fileupload.button.text": "Add files",
   "fileupload.prompt.text": "Drag and drop files here or click to add files",
   "fileupload.removefile.text": "Remove file",
-  "passwordfield.icon.label.hide": "Hide password",
   "passwordfield.icon.label.show": "Show password",
   "severity.error": "error",
   "severity.info": "info",

package/dist/esm/properties/ts/odyssey-react-mui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"odyssey-react-mui.js","names":["translation"],"sources":["../../../../src/properties/ts/odyssey-react-mui.ts"],"sourcesContent":["export const translation = {\"navigation.label\":\"Main navigation\",\"navigation.footer\":\"Navigation secondary links\",\"navigation.drag.handle\":\"Drag handle\",\"sortable.list.drag.start\":\"Picked up draggable item {{activeId}}\",\"sortable.list.drag.moved.over\":\"Draggable item {{activeId}} was moved over droppable area {{overId}}\",\"sortable.list.drag.nolonger.over\":\"Draggable item {{activeId}} is no longer over a droppable area\",\"sortable.list.drag.end.dropped.over\":\"Draggable item {{activeId}} was dropped over droppable area {{overId}}\",\"sortable.list.drag.end.dropped\":\"Draggable item {{activeId}} was dropped\",\"sortable.list.drag.cancel\":\"Dragging was cancelled. Draggable item {{activeId}} was dropped\",\"breadcrumbs.home.text\":\"Home\",\"breadcrumbs.label.text\":\"Breadcrumbs\",\"close.text\":\"Close\",\"clear.text\":\"Clear\",\"open.text\":\"Open\",\"autocomplete.nooptions\":\"No options\",\"picker.calendar.navigation.nextmonth\":\"Next month\",\"picker.calendar.navigation.previousmonth\":\"Previous month\",\"picker.date.toolbar.title\":\"Selected date\",\"picker.daterange.toolbar.title\":\"Select date range\",\"picker.datetime.toolbar.title\":\"Select date & time\",\"picker.error.invalid\":\"Correct the date format or select the date from the calendar.\",\"picker.error.mindate\":\"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.\",\"picker.error.maxdate\":\"Date entered is later than the allowed dates. Select a date from the range available in the calendar.\",\"picker.field.placeholder.day\":\"DD\",\"picker.field.placeholder.hours\":\"hh\",\"picker.field.placeholder.meridiem\":\"aa\",\"picker.field.placeholder.minutes\":\"mm\",\"picker.field.placeholder.month\":\"MM\",\"picker.field.placeholder.seconds\":\"ss\",\"picker.field.placeholder.year\":\"YYYY\",\"picker.labels.action.apply\":\"Apply\",\"picker.labels.action.cancel\":\"Cancel\",\"picker.labels.action.today\":\"Today\",\"picker.labels.clock.empty\":\"No time selected\",\"picker.labels.clock.hours\":\"hours\",\"picker.labels.clock.minutes\":\"minutes\",\"picker.labels.clock.seconds\":\"seconds\",\"picker.labels.clock.selected\":\"Selected time is\",\"picker.labels.date.choose\":\"Choose date\",\"picker.labels.date.selected\":\"Selected date is\",\"picker.labels.empty\":\"Empty\",\"picker.labels.field.clear\":\"Clear value\",\"picker.labels.range.end\":\"End\",\"picker.labels.range.enddate\":\"End date\",\"picker.labels.range.endtime\":\"End time\",\"picker.labels.range.start\":\"Start\",\"picker.labels.range.startdate\":\"Start date\",\"picker.labels.range.starttime\":\"Start time\",\"picker.labels.select\":\"Select\",\"picker.labels.table.date\":\"pick date\",\"picker.labels.table.time\":\"pick time\",\"picker.labels.time.choose\":\"Choose time\",\"picker.labels.time.selected\":\"selected time is\",\"picker.time.toolbar.title\":\"Select time\",\"picker.view.name.day\":\"Day\",\"picker.view.name.hours\":\"Hours\",\"picker.view.name.meridiem\":\"Meridiem\",\"picker.view.name.minutes\":\"Minutes\",\"picker.view.name.month\":\"Month\",\"picker.view.name.seconds\":\"Seconds\",\"picker.view.name.weekday\":\"Week day\",\"picker.view.name.year\":\"Year\",\"picker.view.navigation.open.nextview\":\"Open next view\",\"picker.view.navigation.open.previousview\":\"Open previous view\",\"picker.view.navigation.switch.calendarview\":\"year view is open, switch to calendar view\",\"picker.view.navigation.switch.yearview\":\"calendar view is open, switch to year view\",\"fielderror.screenreader.text\":\"Error\",\"fieldlabel.optional.text\":\"Optional\",\"fieldlabel.required.text\":\"Required\",\"filters.clear.label\":\"Clear filters\",\"filters.submit.label\":\"Submit\",\"filters.filter.any\":\"Any\",\"filters.filter.clear\":\"Clear filter\",\"filters.filters.arialabel\":\"Filters\",\"filters.menuitem.any\":\"Any {{label}}\",\"filters.menuitem.selected\":\"{{selected}} selected\",\"filters.search.label\":\"Search\",\"fileupload.button.text\":\"Add files\",\"fileupload.prompt.text\":\"Drag and drop files here or click to add files\",\"fileupload.removefile.text\":\"Remove file\",\"passwordfield.icon.label.~~hide\":\"Hide password\",\"passwordfield.icon.label.~~show\":\"Show password\",\"severity.error\":\"error\",\"severity.info\":\"info\",\"severity.success\":\"success\",\"severity.warning\":\"warning\",\"sidenav.toggle.expand\":\"Open navigation\",\"sidenav.toggle.collapse\":\"Close navigation\",\"switch.active\":\"Active\",\"switch.inactive\":\"Inactive\",\"table.columnvisibility.arialabel\":\"Show/hide columns\",\"table.density.arialabel\":\"Table density\",\"table.draghandle.arialabel\":\"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.\",\"table.draghandle.tooltip\":\"Drag row or press space/enter key to start and stop reordering\",\"table.actions\":\"Actions\",\"table.error\":\"Error loading data.\",\"table.fetchedrows.text\":\"Fetched {{totalRows}} row\",\"table.fetchedrows.text_plural\":\"Fetched {{totalRows}} total rows\",\"table.moreactions.arialabel\":\"More actions\",\"table.noresults.heading\":\"There are no results.\",\"table.noresults.text\":\"Try a different query.\",\"table.reorder.backward\":\"Send backward\",\"table.reorder.forward\":\"Bring forward\",\"table.reorder.toback\":\"Send to back\",\"table.reorder.tofront\":\"Bring to front\",\"table.rows.text\":\"{{totalRows}} row\",\"table.rows.text_plural\":\"{{totalRows}} rows\",\"pagination.label\":\"Pagination\",\"pagination.loadmore\":\"Show more\",\"pagination.next\":\"Next page\",\"pagination.previous\":\"Previous page\",\"pagination.page\":\"Page\",\"pagination.rowsperpage\":\"Rows per page\",\"pagination.rowswithtotal\":\"{{firstRow}}-{{lastRow}} of {{totalRows}} rows\",\"pagination.rowswithouttotal\":\"{{firstRow}}-{{lastRow}} rows\",\"pagination.totalrows\":\"{{totalRows}} rows\",\"table.actions.selectall\":\"Select all\",\"table.actions.selectnone\":\"Select none\",\"table.actions.selectsome\":\"{{selectedRowCount}} selected\",\"table.rowexpansion.expand\":\"Expand\",\"table.rowexpansion.expandall\":\"Expand all\",\"table.rowexpansion.collapse\":\"Collapse\",\"table.rowexpansion.collapseall\":\"Collapse all\",\"dataview.layout.table\":\"Table\",\"dataview.layout.grid\":\"Grid\",\"dataview.layout.list\":\"List\",\"topnav.helpicon\":\"help page\",\"topnav.settingsicon\":\"settings page\",\"tag.remove\":\"Remove tag\"};"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EAAC,kBAAkB,EAAC,iBAAiB;EAAC,mBAAmB,EAAC,4BAA4B;EAAC,wBAAwB,EAAC,aAAa;EAAC,0BAA0B,EAAC,uCAAuC;EAAC,+BAA+B,EAAC,sEAAsE;EAAC,kCAAkC,EAAC,gEAAgE;EAAC,qCAAqC,EAAC,wEAAwE;EAAC,gCAAgC,EAAC,yCAAyC;EAAC,2BAA2B,EAAC,iEAAiE;EAAC,uBAAuB,EAAC,MAAM;EAAC,wBAAwB,EAAC,aAAa;EAAC,YAAY,EAAC,OAAO;EAAC,YAAY,EAAC,OAAO;EAAC,WAAW,EAAC,MAAM;EAAC,wBAAwB,EAAC,YAAY;EAAC,sCAAsC,EAAC,YAAY;EAAC,0CAA0C,EAAC,gBAAgB;EAAC,2BAA2B,EAAC,eAAe;EAAC,gCAAgC,EAAC,mBAAmB;EAAC,+BAA+B,EAAC,oBAAoB;EAAC,sBAAsB,EAAC,+DAA+D;EAAC,sBAAsB,EAAC,qGAAqG;EAAC,sBAAsB,EAAC,uGAAuG;EAAC,8BAA8B,EAAC,IAAI;EAAC,gCAAgC,EAAC,IAAI;EAAC,mCAAmC,EAAC,IAAI;EAAC,kCAAkC,EAAC,IAAI;EAAC,gCAAgC,EAAC,IAAI;EAAC,kCAAkC,EAAC,IAAI;EAAC,+BAA+B,EAAC,MAAM;EAAC,4BAA4B,EAAC,OAAO;EAAC,6BAA6B,EAAC,QAAQ;EAAC,4BAA4B,EAAC,OAAO;EAAC,2BAA2B,EAAC,kBAAkB;EAAC,2BAA2B,EAAC,OAAO;EAAC,6BAA6B,EAAC,SAAS;EAAC,6BAA6B,EAAC,SAAS;EAAC,8BAA8B,EAAC,kBAAkB;EAAC,2BAA2B,EAAC,aAAa;EAAC,6BAA6B,EAAC,kBAAkB;EAAC,qBAAqB,EAAC,OAAO;EAAC,2BAA2B,EAAC,aAAa;EAAC,yBAAyB,EAAC,KAAK;EAAC,6BAA6B,EAAC,UAAU;EAAC,6BAA6B,EAAC,UAAU;EAAC,2BAA2B,EAAC,OAAO;EAAC,+BAA+B,EAAC,YAAY;EAAC,+BAA+B,EAAC,YAAY;EAAC,sBAAsB,EAAC,QAAQ;EAAC,0BAA0B,EAAC,WAAW;EAAC,0BAA0B,EAAC,WAAW;EAAC,2BAA2B,EAAC,aAAa;EAAC,6BAA6B,EAAC,kBAAkB;EAAC,2BAA2B,EAAC,aAAa;EAAC,sBAAsB,EAAC,KAAK;EAAC,wBAAwB,EAAC,OAAO;EAAC,2BAA2B,EAAC,UAAU;EAAC,0BAA0B,EAAC,SAAS;EAAC,wBAAwB,EAAC,OAAO;EAAC,0BAA0B,EAAC,SAAS;EAAC,0BAA0B,EAAC,UAAU;EAAC,uBAAuB,EAAC,MAAM;EAAC,sCAAsC,EAAC,gBAAgB;EAAC,0CAA0C,EAAC,oBAAoB;EAAC,4CAA4C,EAAC,4CAA4C;EAAC,wCAAwC,EAAC,4CAA4C;EAAC,8BAA8B,EAAC,OAAO;EAAC,0BAA0B,EAAC,UAAU;EAAC,0BAA0B,EAAC,UAAU;EAAC,qBAAqB,EAAC,eAAe;EAAC,sBAAsB,EAAC,QAAQ;EAAC,oBAAoB,EAAC,KAAK;EAAC,sBAAsB,EAAC,cAAc;EAAC,2BAA2B,EAAC,SAAS;EAAC,sBAAsB,EAAC,eAAe;EAAC,2BAA2B,EAAC,uBAAuB;EAAC,sBAAsB,EAAC,QAAQ;EAAC,wBAAwB,EAAC,WAAW;EAAC,wBAAwB,EAAC,gDAAgD;EAAC,4BAA4B,EAAC,aAAa;EAAC,+BAA+B,EAAC,eAAe;EAAC~~,+BAA+B~~,~~EAAC,eAAe;EAAC,~~gBAAgB,EAAC,OAAO;EAAC,eAAe,EAAC,MAAM;EAAC,kBAAkB,EAAC,SAAS;EAAC,kBAAkB,EAAC,SAAS;EAAC,uBAAuB,EAAC,iBAAiB;EAAC,yBAAyB,EAAC,kBAAkB;EAAC,eAAe,EAAC,QAAQ;EAAC,iBAAiB,EAAC,UAAU;EAAC,kCAAkC,EAAC,mBAAmB;EAAC,yBAAyB,EAAC,eAAe;EAAC,4BAA4B,EAAC,+FAA+F;EAAC,0BAA0B,EAAC,gEAAgE;EAAC,eAAe,EAAC,SAAS;EAAC,aAAa,EAAC,qBAAqB;EAAC,wBAAwB,EAAC,2BAA2B;EAAC,+BAA+B,EAAC,kCAAkC;EAAC,6BAA6B,EAAC,cAAc;EAAC,yBAAyB,EAAC,uBAAuB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,wBAAwB,EAAC,eAAe;EAAC,uBAAuB,EAAC,eAAe;EAAC,sBAAsB,EAAC,cAAc;EAAC,uBAAuB,EAAC,gBAAgB;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,wBAAwB,EAAC,oBAAoB;EAAC,kBAAkB,EAAC,YAAY;EAAC,qBAAqB,EAAC,WAAW;EAAC,iBAAiB,EAAC,WAAW;EAAC,qBAAqB,EAAC,eAAe;EAAC,iBAAiB,EAAC,MAAM;EAAC,wBAAwB,EAAC,eAAe;EAAC,0BAA0B,EAAC,gDAAgD;EAAC,6BAA6B,EAAC,+BAA+B;EAAC,sBAAsB,EAAC,oBAAoB;EAAC,yBAAyB,EAAC,YAAY;EAAC,0BAA0B,EAAC,aAAa;EAAC,0BAA0B,EAAC,+BAA+B;EAAC,2BAA2B,EAAC,QAAQ;EAAC,8BAA8B,EAAC,YAAY;EAAC,6BAA6B,EAAC,UAAU;EAAC,gCAAgC,EAAC,cAAc;EAAC,uBAAuB,EAAC,OAAO;EAAC,sBAAsB,EAAC,MAAM;EAAC,sBAAsB,EAAC,MAAM;EAAC,iBAAiB,EAAC,WAAW;EAAC,qBAAqB,EAAC,eAAe;EAAC,YAAY,EAAC;AAAY,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"odyssey-react-mui.js","names":["translation"],"sources":["../../../../src/properties/ts/odyssey-react-mui.ts"],"sourcesContent":["export const translation = {\"navigation.label\":\"Main navigation\",\"navigation.footer\":\"Navigation secondary links\",\"navigation.drag.handle\":\"Drag handle\",\"sortable.list.drag.start\":\"Picked up draggable item {{activeId}}\",\"sortable.list.drag.moved.over\":\"Draggable item {{activeId}} was moved over droppable area {{overId}}\",\"sortable.list.drag.nolonger.over\":\"Draggable item {{activeId}} is no longer over a droppable area\",\"sortable.list.drag.end.dropped.over\":\"Draggable item {{activeId}} was dropped over droppable area {{overId}}\",\"sortable.list.drag.end.dropped\":\"Draggable item {{activeId}} was dropped\",\"sortable.list.drag.cancel\":\"Dragging was cancelled. Draggable item {{activeId}} was dropped\",\"breadcrumbs.home.text\":\"Home\",\"breadcrumbs.label.text\":\"Breadcrumbs\",\"close.text\":\"Close\",\"clear.text\":\"Clear\",\"open.text\":\"Open\",\"autocomplete.nooptions\":\"No options\",\"picker.calendar.navigation.nextmonth\":\"Next month\",\"picker.calendar.navigation.previousmonth\":\"Previous month\",\"picker.date.toolbar.title\":\"Selected date\",\"picker.daterange.toolbar.title\":\"Select date range\",\"picker.datetime.toolbar.title\":\"Select date & time\",\"picker.error.invalid\":\"Correct the date format or select the date from the calendar.\",\"picker.error.mindate\":\"Date entered is earlier than allowed dates. Select a date from the range available in the calendar.\",\"picker.error.maxdate\":\"Date entered is later than the allowed dates. Select a date from the range available in the calendar.\",\"picker.field.placeholder.day\":\"DD\",\"picker.field.placeholder.hours\":\"hh\",\"picker.field.placeholder.meridiem\":\"aa\",\"picker.field.placeholder.minutes\":\"mm\",\"picker.field.placeholder.month\":\"MM\",\"picker.field.placeholder.seconds\":\"ss\",\"picker.field.placeholder.year\":\"YYYY\",\"picker.labels.action.apply\":\"Apply\",\"picker.labels.action.cancel\":\"Cancel\",\"picker.labels.action.today\":\"Today\",\"picker.labels.clock.empty\":\"No time selected\",\"picker.labels.clock.hours\":\"hours\",\"picker.labels.clock.minutes\":\"minutes\",\"picker.labels.clock.seconds\":\"seconds\",\"picker.labels.clock.selected\":\"Selected time is\",\"picker.labels.date.choose\":\"Choose date\",\"picker.labels.date.selected\":\"Selected date is\",\"picker.labels.empty\":\"Empty\",\"picker.labels.field.clear\":\"Clear value\",\"picker.labels.range.end\":\"End\",\"picker.labels.range.enddate\":\"End date\",\"picker.labels.range.endtime\":\"End time\",\"picker.labels.range.start\":\"Start\",\"picker.labels.range.startdate\":\"Start date\",\"picker.labels.range.starttime\":\"Start time\",\"picker.labels.select\":\"Select\",\"picker.labels.table.date\":\"pick date\",\"picker.labels.table.time\":\"pick time\",\"picker.labels.time.choose\":\"Choose time\",\"picker.labels.time.selected\":\"selected time is\",\"picker.time.toolbar.title\":\"Select time\",\"picker.view.name.day\":\"Day\",\"picker.view.name.hours\":\"Hours\",\"picker.view.name.meridiem\":\"Meridiem\",\"picker.view.name.minutes\":\"Minutes\",\"picker.view.name.month\":\"Month\",\"picker.view.name.seconds\":\"Seconds\",\"picker.view.name.weekday\":\"Week day\",\"picker.view.name.year\":\"Year\",\"picker.view.navigation.open.nextview\":\"Open next view\",\"picker.view.navigation.open.previousview\":\"Open previous view\",\"picker.view.navigation.switch.calendarview\":\"year view is open, switch to calendar view\",\"picker.view.navigation.switch.yearview\":\"calendar view is open, switch to year view\",\"fielderror.screenreader.text\":\"Error\",\"fieldlabel.optional.text\":\"Optional\",\"fieldlabel.required.text\":\"Required\",\"filters.clear.label\":\"Clear filters\",\"filters.submit.label\":\"Submit\",\"filters.filter.any\":\"Any\",\"filters.filter.clear\":\"Clear filter\",\"filters.filters.arialabel\":\"Filters\",\"filters.menuitem.any\":\"Any {{label}}\",\"filters.menuitem.selected\":\"{{selected}} selected\",\"filters.search.label\":\"Search\",\"fileupload.button.text\":\"Add files\",\"fileupload.prompt.text\":\"Drag and drop files here or click to add files\",\"fileupload.removefile.text\":\"Remove file\",\"passwordfield.icon.label.show\":\"Show password\",\"severity.error\":\"error\",\"severity.info\":\"info\",\"severity.success\":\"success\",\"severity.warning\":\"warning\",\"sidenav.toggle.expand\":\"Open navigation\",\"sidenav.toggle.collapse\":\"Close navigation\",\"switch.active\":\"Active\",\"switch.inactive\":\"Inactive\",\"table.columnvisibility.arialabel\":\"Show/hide columns\",\"table.density.arialabel\":\"Table density\",\"table.draghandle.arialabel\":\"Drag row to reorder. Or, press space or enter to start and stop reordering and esc to cancel.\",\"table.draghandle.tooltip\":\"Drag row or press space/enter key to start and stop reordering\",\"table.actions\":\"Actions\",\"table.error\":\"Error loading data.\",\"table.fetchedrows.text\":\"Fetched {{totalRows}} row\",\"table.fetchedrows.text_plural\":\"Fetched {{totalRows}} total rows\",\"table.moreactions.arialabel\":\"More actions\",\"table.noresults.heading\":\"There are no results.\",\"table.noresults.text\":\"Try a different query.\",\"table.reorder.backward\":\"Send backward\",\"table.reorder.forward\":\"Bring forward\",\"table.reorder.toback\":\"Send to back\",\"table.reorder.tofront\":\"Bring to front\",\"table.rows.text\":\"{{totalRows}} row\",\"table.rows.text_plural\":\"{{totalRows}} rows\",\"pagination.label\":\"Pagination\",\"pagination.loadmore\":\"Show more\",\"pagination.next\":\"Next page\",\"pagination.previous\":\"Previous page\",\"pagination.page\":\"Page\",\"pagination.rowsperpage\":\"Rows per page\",\"pagination.rowswithtotal\":\"{{firstRow}}-{{lastRow}} of {{totalRows}} rows\",\"pagination.rowswithouttotal\":\"{{firstRow}}-{{lastRow}} rows\",\"pagination.totalrows\":\"{{totalRows}} rows\",\"table.actions.selectall\":\"Select all\",\"table.actions.selectnone\":\"Select none\",\"table.actions.selectsome\":\"{{selectedRowCount}} selected\",\"table.rowexpansion.expand\":\"Expand\",\"table.rowexpansion.expandall\":\"Expand all\",\"table.rowexpansion.collapse\":\"Collapse\",\"table.rowexpansion.collapseall\":\"Collapse all\",\"dataview.layout.table\":\"Table\",\"dataview.layout.grid\":\"Grid\",\"dataview.layout.list\":\"List\",\"topnav.helpicon\":\"help page\",\"topnav.settingsicon\":\"settings page\",\"tag.remove\":\"Remove tag\"};"],"mappings":"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","ignoreList":[]}

package/dist/esm/properties/ts/odyssey-react-mui_cs.js CHANGED Viewed

@@ -79,7 +79,6 @@ export const translation = {
   "fileupload.button.text": "Přidat soubory",
   "fileupload.prompt.text": "Přetáhněte soubory sem nebo klikněte a přidejte je",
   "fileupload.removefile.text": "Odebrat soubor",
-  "passwordfield.icon.label.hide": "Skrýt heslo",
   "passwordfield.icon.label.show": "Zobrazit heslo",
   "severity.error": "chyba",
   "severity.info": "informace",