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

@okta/odyssey-react-mui 1.43.0 → 1.45.0

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

Files changed (1901) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerWithOptionAdornment.cjs","names":["_react","require","_styled","_interopRequireDefault","_Box","_ComposablePicker","_OdysseyDesignTokensContext","_Picker","_Typography","_Tag","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","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","jsx","children","src","alt","role","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","jsxs","Option","hasAdornment","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionWithLabelDescriptionMetadata","metaData","OptionMetadataComponent","TagAdornment","useOdysseyDesignTokens","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","useCallback","values","getTagProps","map","index","key","onDelete","Box","sx","margin","Spacing1","Tag","icon","onRemove","customOptionRender","hasMetadata","Fragment","ComposablePicker","renderOption","renderTags","MemoizedPickerWithOptionAdornment","exports","memo","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":[]}
1	+ {"version":3,"file":"PickerWithOptionAdornment.cjs","names":["_styled","_interopRequireDefault","require","_react","_Box","_OdysseyDesignTokensContext","_Tag","_Typography","_ComposablePicker","_Picker","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","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","jsx","children","alt","role","src","OptionWithLabelDescriptionOnly","muiProps","option","description","label","value","jsxs","Option","hasAdornment","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionWithLabelDescriptionMetadata","metaData","OptionMetadataComponent","TagAdornment","useOdysseyDesignTokens","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","useCallback","values","getTagProps","map","index","key","onDelete","Box","sx","margin","Spacing1","Tag","icon","onRemove","customOptionRender","hasMetadata","Fragment","ComposablePicker","renderOption","renderTags","MemoizedPickerWithOptionAdornment","exports","memo","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 styled from \"@emotion/styled\";\nimport { AutocompleteProps as MuiAutocompleteProps } from \"@mui/material\";\nimport { Fragment, memo, ReactNode, useCallback } from \"react\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tag } from \"../../Tag.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport {\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n ComposablePicker,\n ComposablePickerProps,\n} from \"./ComposablePicker.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\";\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 alt=\"\" role=\"presentation\" src={adornment} />\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 alt=\"\" role=\"presentation\" src={adornment} />\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 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 renderTags={customTagRender}\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 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/cjs/labs/OdysseyPickers/SearchDropdown.cjs CHANGED Viewed

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchDropdown = void 0;
-var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _ComposablePicker = require("./ComposablePicker.cjs");
+var _react = require("react");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
-var _Picker = require("./Picker.cjs");
 var _Typography = require("../../Typography.cjs");
+var _ComposablePicker = require("./ComposablePicker.cjs");
+var _Picker = require("./Picker.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -97,9 +97,9 @@ const OptionAdornment = ({
       adornmentSize: adornmentSize,
       odysseyDesignTokens: odysseyDesignTokens,
       children: (0, _jsxRuntime.jsx)("img", {
-        src: adornment,
         alt: "",
-        role: "presentation"
+        role: "presentation",
+        src: adornment
       })
     });
   } else {
@@ -186,9 +186,9 @@ const CustomOption = ({
         })]
       }), extra && (0, _jsxRuntime.jsx)(Extra, {
         content: extra.content,
-        size: extra.size || adornmentSize,
+        odysseyDesignTokens: odysseyDesignTokens,
         onClick: extra.onClick,
-        odysseyDesignTokens: odysseyDesignTokens
+        size: extra.size || adornmentSize
       })]
     })
   });
@@ -239,6 +239,8 @@ const SearchDropdown = ({
     errorMessageList: errorMessageList,
     getIsOptionEqualToValue: getIsOptionEqualToValue,
     groupOptionsBy: groupOptionsBy,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
     id: idOverride,
     inputValue: inputValue,
     isCustomValueAllowed: isCustomValueAllowed,
@@ -248,19 +250,17 @@ const SearchDropdown = ({
     isOptional: isOptional,
     isReadOnly: isReadOnly,
     isVirtualized: isVirtualizedProp,
-    hint: hint,
-    HintLinkComponent: HintLinkComponent,
     label: label,
     name: nameOverride,
     onBlur: onBlur,
     onChange: onChangeProp,
-    onInputChange: onInputChangeProp,
     onFocus: onFocus,
+    onInputChange: onInputChangeProp,
     options: options,
     renderOption: customOptionRender,
-    value: value,
     testId: testId,
-    translate: translate
+    translate: translate,
+    value: value
   });
 };
 const MemoizedSearchDropdown = exports.SearchDropdown = (0, _react.memo)(SearchDropdown);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchDropdown.cjs","names":["_react","require","_styled","_interopRequireDefault","_ComposablePicker","_OdysseyDesignTokensContext","_Picker","_Typography","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","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","jsx","children","src","alt","role","Extra","content","size","onClick","handleClick","useCallback","event","stopPropagation","CustomOption","muiProps","option","description","label","metaData","extra","isInteractive","handleOptionClick","preventDefault","extendedMuiProps","useMemo","undefined","Option","hasAdornment","jsxs","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionMetadataComponent","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","useOdysseyDesignTokens","customOptionRender","ComposablePicker","renderOption","MemoizedSearchDropdown","exports","memo","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":[]}
1	+ {"version":3,"file":"SearchDropdown.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_Typography","_ComposablePicker","_Picker","_jsxRuntime","e","__esModule","default","OptionAdornmentContainer","styled","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","jsx","children","alt","role","src","Extra","content","size","onClick","handleClick","useCallback","event","stopPropagation","CustomOption","muiProps","option","description","label","metaData","extra","isInteractive","handleOptionClick","preventDefault","extendedMuiProps","useMemo","undefined","Option","hasAdornment","jsxs","OptionLabelContainer","Heading6","component","OptionDescriptionComponent","OptionMetadataComponent","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","useOdysseyDesignTokens","customOptionRender","ComposablePicker","renderOption","MemoizedSearchDropdown","exports","memo","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 styled from \"@emotion/styled\";\nimport { memo, ReactElement, ReactNode, useCallback, useMemo } from \"react\";\n\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading6 } from \"../../Typography.js\";\nimport {\n type AdornmentSize,\n type BasePickerProps,\n type BasePickerType,\n type BaseRenderOptionProps,\n ComposablePicker,\n} from \"./ComposablePicker.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\";\n\ntype Adornment = ReactNode \| string;\ntype ExtraType = {\n content: ReactNode \| string;\n onClick: () => void;\n size?: AdornmentSize;\n};\n\ntype AdornmentLabelDescription = LabelDescription & {\n adornment: Adornment;\n extra?: ExtraType;\n isInteractive?: boolean;\n onClick?: () => void;\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 odysseyDesignTokens: DesignTokens;\n onClick: () => void;\n size?: AdornmentSize;\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 alt=\"\" role=\"presentation\" src={adornment} />\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 odysseyDesignTokens={odysseyDesignTokens}\n onClick={extra.onClick}\n size={extra.size \|\| adornmentSize}\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 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 MemoizedSearchDropdown = memo(SearchDropdown) as BasePickerType;\n\nMemoizedSearchDropdown.displayName = \"MemoizedSearchDropdown\";\n\nexport { MemoizedSearchDropdown as SearchDropdown };\n"],"mappings":"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","ignoreList":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["_ComposablePicker","require","_Picker","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_PickerWithOptionAdornment","_SearchDropdown"],"sources":["../../../../src/labs/OdysseyPickers/index.ts"],"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\nexport { adornmentSizeValues } from \"./ComposablePicker.js\";\nexport from \"./Picker.js\";\nexport * from \"./PickerWithOptionAdornment.js\";\nexport { ~~SearchDropdown } from~~ \~~"./SearchDropdown.js\";\nexport~~ type {\n ~~SearchDropdownProps~~,\n ~~CustomOptionType~~,\n} from \"./SearchDropdown.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,0BAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,0BAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,0BAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,0BAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,eAAA,GAAAf,OAAA","ignoreList":[]}
1	+ {"version":3,"file":"index.cjs","names":["_ComposablePicker","require","_Picker","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_PickerWithOptionAdornment","_SearchDropdown"],"sources":["../../../../src/labs/OdysseyPickers/index.ts"],"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\nexport { adornmentSizeValues } from \"./ComposablePicker.js\";\nexport from \"./Picker.js\";\nexport * from \"./PickerWithOptionAdornment.js\";\nexport {\n type CustomOptionType,\n SearchDropdown,\n type SearchDropdownProps,\n} from \"./SearchDropdown.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,0BAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,0BAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,0BAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,0BAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,eAAA,GAAAf,OAAA","ignoreList":[]}

package/dist/cjs/labs/PageTemplate/DocumentationLink.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DocumentationLink.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","linkVariantValues","exports","DocumentationLink","children","href","icon","target","jsxs","_Link2","jsx","className","MemoizedDocumentationLink","memo","displayName"],"sources":["../../../../src/labs/PageTemplate/DocumentationLink.tsx"],"sourcesContent":["/!\n Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport { ~~memo,~~ ~~ReactElement,~~ ~~ReactNode~~ } from \"~~react~~\";\n\nimport { ~~Link~~ as ~~MuiLink~~ } from \"~~@mui/material~~\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type DocumentationLinkProps = {\n /\n The content within the Link\n /\n children: ReactNode;\n /\n The Link destination\n /\n href: string;\n /\n An optional Icon component at the start of the Link\n /\n icon?: ReactElement;\n /\n The HTML `target` attribute for the Link\n */\n target?:\n \| \"_self\"\n \| \"_blank\"\n \| \"_parent\"\n \| \"_top\"\n \| (string & NonNullable<unknown>);\n};\n\nconst DocumentationLink = ({\n children,\n href,\n icon,\n target,\n}: DocumentationLinkProps) => {\n return (\n <MuiLink href={href} target={target}>\n {icon && <span className=\"Link-icon\">{icon}</span>}\n\n {children}\n </MuiLink>\n );\n};\n\nconst MemoizedDocumentationLink = memo(DocumentationLink);\n\nMemoizedDocumentationLink.displayName = \"DocumentationLink\";\n\nexport { MemoizedDocumentationLink as DocumentationLink };\n"],"mappings":";;;;;;;~~AAYA~~,IAAAA,MAAA,GAAAC,OAAA;AAAsD,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;~~AAZtD~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;~~AAMO~~,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA0BnE,MAAME,iBAAiB,GAAGA,CAAC;EACzBC,QAAQ;EACRC,IAAI;EACJC,IAAI;EACJC;AACsB,CAAC,KAAK;EAC5B,OACE,IAAAX,WAAA,CAAAY,IAAA,EAAAC,MAAA,CAAAT,OAAA;IAASK,IAAI,EAAEA,IAAK;IAACE,MAAM,EAAEA,MAAO;IAAAH,QAAA,GACjCE,IAAI,IAAI,IAAAV,WAAA,CAAAc,GAAA;MAAMC,SAAS,EAAC,WAAW;MAAAP,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ;EAAA,CACF,CAAC;AAEd,CAAC;AAED,MAAMQ,yBAAyB,GAAAV,OAAA,CAAAC,iBAAA,GAAG,IAAAU,WAAI,EAACV,iBAAiB,CAAC;AAEzDS,yBAAyB,CAACE,WAAW,GAAG,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"DocumentationLink.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","linkVariantValues","exports","DocumentationLink","children","href","icon","target","jsxs","_Link2","jsx","className","MemoizedDocumentationLink","memo","displayName"],"sources":["../../../../src/labs/PageTemplate/DocumentationLink.tsx"],"sourcesContent":["/!\n Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n /\n\nimport { Link as MuiLink } from \"@mui/material\";\nimport { memo, ReactElement, ReactNode } from \"react\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type DocumentationLinkProps = {\n /\n The content within the Link\n /\n children: ReactNode;\n /\n The Link destination\n /\n href: string;\n /\n An optional Icon component at the start of the Link\n /\n icon?: ReactElement;\n /\n The HTML `target` attribute for the Link\n */\n target?:\n \| \"_self\"\n \| \"_blank\"\n \| \"_parent\"\n \| \"_top\"\n \| (string & NonNullable<unknown>);\n};\n\nconst DocumentationLink = ({\n children,\n href,\n icon,\n target,\n}: DocumentationLinkProps) => {\n return (\n <MuiLink href={href} target={target}>\n {icon && <span className=\"Link-icon\">{icon}</span>}\n\n {children}\n </MuiLink>\n );\n};\n\nconst MemoizedDocumentationLink = memo(DocumentationLink);\n\nMemoizedDocumentationLink.displayName = \"DocumentationLink\";\n\nexport { MemoizedDocumentationLink as DocumentationLink };\n"],"mappings":";;;;;;;AAaA,IAAAA,MAAA,GAAAC,OAAA;AAAsD,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAbtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKO,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA0BnE,MAAME,iBAAiB,GAAGA,CAAC;EACzBC,QAAQ;EACRC,IAAI;EACJC,IAAI;EACJC;AACsB,CAAC,KAAK;EAC5B,OACE,IAAAX,WAAA,CAAAY,IAAA,EAAAC,MAAA,CAAAT,OAAA;IAASK,IAAI,EAAEA,IAAK;IAACE,MAAM,EAAEA,MAAO;IAAAH,QAAA,GACjCE,IAAI,IAAI,IAAAV,WAAA,CAAAc,GAAA;MAAMC,SAAS,EAAC,WAAW;MAAAP,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ;EAAA,CACF,CAAC;AAEd,CAAC;AAED,MAAMQ,yBAAyB,GAAAV,OAAA,CAAAC,iBAAA,GAAG,IAAAU,WAAI,EAACV,iBAAiB,CAAC;AAEzDS,yBAAyB,CAACE,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/dist/cjs/labs/PageTemplate/Layout.cjs CHANGED Viewed

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Layout = void 0;
-var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
 var _Box = require("../../Box.cjs");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
 var _jsxRuntime = require("react/jsx-runtime");

package/dist/cjs/labs/PageTemplate/Layout.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.cjs","names":["~~_react~~","~~require~~","~~_styled~~","~~_interopRequireDefault~~","_Box","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","LayoutContent","styled","shouldForwardProp","prop","includes","odysseyDesignTokens","regions","display","gridTemplateColumns","gridColumnGap","Spacing4","columnGap","marginBlockStart","Layout","children","useOdysseyDesignTokens","mappedRegions","map","region","join","jsx","Box","Children","toArray","child","MemoizedLayout","exports","memo","displayName"],"sources":["../../../../src/labs/PageTemplate/Layout.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 { Children, ~~ReactNode~~, ~~memo~~ } from \"react\";\~~nimport styled from \"@emotion/styled\";\~~n\nimport { Box } from \"../../Box.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\ntype SupportedRegionRatios =\n \| [1]\n \| [1, 1]\n \| [1, 2]\n \| [2, 1]\n \| [1, 3]\n \| [3, 1]\n \| [1, 1, 1]\n \| [1, 1, 1, 1];\n\nexport type LayoutProps = {\n /\n The supported region ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.\n * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit\n /\n regions: SupportedRegionRatios;\n ~~/\n The content of the Grid. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n */\n children?: ReactNode;\n~~};\n\ninterface LayoutContentProps {\n odysseyDesignTokens: DesignTokens;\n regions: string;\n}\n\nconst LayoutContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n ![\"odysseyDesignTokens\", \"regions\"].includes(prop),\n})<LayoutContentProps>(({ odysseyDesignTokens, regions }) => ({\n display: \"grid\",\n gridTemplateColumns: regions,\n gridColumnGap: odysseyDesignTokens.Spacing4,\n columnGap: odysseyDesignTokens.Spacing4,\n\n \"& + &\": {\n marginBlockStart: odysseyDesignTokens.Spacing4,\n },\n}));\n\nconst Layout = ({ regions, children }: LayoutProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const mappedRegions = regions\n .map((region) => `minmax(0, ${region}fr)`)\n .join(\" \");\n\n return (\n <Box>\n <LayoutContent\n odysseyDesignTokens={odysseyDesignTokens}\n regions={mappedRegions}\n >\n {Children.toArray(children).map((child) => child)}\n </LayoutContent>\n </Box>\n );\n};\n\nconst MemoizedLayout = memo(Layout);\nMemoizedLayout.displayName = \"Layout\";\n\nexport { MemoizedLayout as Layout };\n"],"mappings":";;;;;;AAYA,IAAAA,~~MAAA~~,GAAAC,OAAA;AACA,IAAAC,~~OAAA~~,~~GAAAC~~,~~sBAAA,CAAAF,~~OAAA;AAEA,~~IAAAG~~,IAAA,~~GAAAH~~,OAAA;AACA,~~IAAAI~~,2BAAA,~~GAAAJ~~,OAAA;AAG6C,~~IAAAK~~,WAAA,~~GAAAL~~,OAAA;AAAA,~~SAAAE~~,~~uBAAAI~~,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAnB7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA,MAAMG,aAAa,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EAClCC,iBAAiB,EAAGC,IAAI,IACtB,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAACC,QAAQ,CAACD,IAAI;AACrD,CAAC,CAAC,CAAqB,CAAC;EAAEE,mBAAmB;EAAEC;AAAQ,CAAC,MAAM;EAC5DC,OAAO,EAAE,MAAM;EACfC,mBAAmB,EAAEF,OAAO;EAC5BG,aAAa,EAAEJ,mBAAmB,CAACK,QAAQ;EAC3CC,SAAS,EAAEN,mBAAmB,CAACK,QAAQ;EAEvC,OAAO,EAAE;IACPE,gBAAgB,EAAEP,mBAAmB,CAACK;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMG,MAAM,GAAGA,CAAC;EAAEP,OAAO;EAAEQ;AAAsB,CAAC,KAAK;EACrD,MAAMT,mBAAmB,GAAG,IAAAU,kDAAsB,EAAC,CAAC;EACpD,MAAMC,aAAa,GAAGV,OAAO,CAC1BW,GAAG,CAAEC,MAAM,IAAK,aAAaA,MAAM,KAAK,CAAC,CACzCC,IAAI,CAAC,GAAG,CAAC;EAEZ,OACE,IAAAvB,WAAA,CAAAwB,GAAA,EAAC1B,IAAA,CAAA2B,GAAG;IAAAP,QAAA,EACF,IAAAlB,WAAA,CAAAwB,GAAA,EAACpB,aAAa;MACZK,mBAAmB,EAAEA,mBAAoB;MACzCC,OAAO,EAAEU,aAAc;MAAAF,QAAA,EAEtBQ,eAAQ,CAACC,OAAO,CAACT,QAAQ,CAAC,CAACG,GAAG,CAAEO,KAAK,IAAKA,KAAK;IAAC,CACpC;EAAC,CACb,CAAC;AAEV,CAAC;AAED,MAAMC,cAAc,GAAAC,OAAA,CAAAb,MAAA,GAAG,IAAAc,WAAI,EAACd,MAAM,CAAC;AACnCY,cAAc,CAACG,WAAW,GAAG,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"Layout.cjs","names":["_styled","_interopRequireDefault","require","_react","_Box","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","LayoutContent","styled","shouldForwardProp","prop","includes","odysseyDesignTokens","regions","display","gridTemplateColumns","gridColumnGap","Spacing4","columnGap","marginBlockStart","Layout","children","useOdysseyDesignTokens","mappedRegions","map","region","join","jsx","Box","Children","toArray","child","MemoizedLayout","exports","memo","displayName"],"sources":["../../../../src/labs/PageTemplate/Layout.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 { Children, memo, ReactNode } from \"react\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\ntype SupportedRegionRatios =\n \| [1]\n \| [1, 1]\n \| [1, 2]\n \| [2, 1]\n \| [1, 3]\n \| [3, 1]\n \| [1, 1, 1]\n \| [1, 1, 1, 1];\n\nexport type LayoutProps = {\n /\n The content of the Grid. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n /\n children?: ReactNode;\n /\n The supported region ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.\n * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit\n */\n regions: SupportedRegionRatios;\n};\n\ninterface LayoutContentProps {\n odysseyDesignTokens: DesignTokens;\n regions: string;\n}\n\nconst LayoutContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n ![\"odysseyDesignTokens\", \"regions\"].includes(prop),\n})<LayoutContentProps>(({ odysseyDesignTokens, regions }) => ({\n display: \"grid\",\n gridTemplateColumns: regions,\n gridColumnGap: odysseyDesignTokens.Spacing4,\n columnGap: odysseyDesignTokens.Spacing4,\n\n \"& + &\": {\n marginBlockStart: odysseyDesignTokens.Spacing4,\n },\n}));\n\nconst Layout = ({ regions, children }: LayoutProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const mappedRegions = regions\n .map((region) => `minmax(0, ${region}fr)`)\n .join(\" \");\n\n return (\n <Box>\n <LayoutContent\n odysseyDesignTokens={odysseyDesignTokens}\n regions={mappedRegions}\n >\n {Children.toArray(children).map((child) => child)}\n </LayoutContent>\n </Box>\n );\n};\n\nconst MemoizedLayout = memo(Layout);\nMemoizedLayout.displayName = \"Layout\";\n\nexport { MemoizedLayout as Layout };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,2BAAA,GAAAH,OAAA;AAG6C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAnB7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA,MAAMG,aAAa,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EAClCC,iBAAiB,EAAGC,IAAI,IACtB,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAACC,QAAQ,CAACD,IAAI;AACrD,CAAC,CAAC,CAAqB,CAAC;EAAEE,mBAAmB;EAAEC;AAAQ,CAAC,MAAM;EAC5DC,OAAO,EAAE,MAAM;EACfC,mBAAmB,EAAEF,OAAO;EAC5BG,aAAa,EAAEJ,mBAAmB,CAACK,QAAQ;EAC3CC,SAAS,EAAEN,mBAAmB,CAACK,QAAQ;EAEvC,OAAO,EAAE;IACPE,gBAAgB,EAAEP,mBAAmB,CAACK;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMG,MAAM,GAAGA,CAAC;EAAEP,OAAO;EAAEQ;AAAsB,CAAC,KAAK;EACrD,MAAMT,mBAAmB,GAAG,IAAAU,kDAAsB,EAAC,CAAC;EACpD,MAAMC,aAAa,GAAGV,OAAO,CAC1BW,GAAG,CAAEC,MAAM,IAAK,aAAaA,MAAM,KAAK,CAAC,CACzCC,IAAI,CAAC,GAAG,CAAC;EAEZ,OACE,IAAAvB,WAAA,CAAAwB,GAAA,EAAC1B,IAAA,CAAA2B,GAAG;IAAAP,QAAA,EACF,IAAAlB,WAAA,CAAAwB,GAAA,EAACpB,aAAa;MACZK,mBAAmB,EAAEA,mBAAoB;MACzCC,OAAO,EAAEU,aAAc;MAAAF,QAAA,EAEtBQ,eAAQ,CAACC,OAAO,CAACT,QAAQ,CAAC,CAACG,GAAG,CAAEO,KAAK,IAAKA,KAAK;IAAC,CACpC;EAAC,CACb,CAAC;AAEV,CAAC;AAED,MAAMC,cAAc,GAAAC,OAAA,CAAAb,MAAA,GAAG,IAAAc,WAAI,EAACd,MAAM,CAAC;AACnCY,cAAc,CAACG,WAAW,GAAG,QAAQ","ignoreList":[]}

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

@@ -7,11 +7,11 @@ exports.PageTemplate = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _index = require("../../icons.generated/index.cjs");
-var _DocumentationLink = require("./DocumentationLink.cjs");
 var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
 var _Typography = require("../../Typography.cjs");
 var _useHasUiShell = require("../../ui-shell/useHasUiShell.cjs");
 var _useMountLifecycleEffect = require("../../useMountLifecycleEffect.cjs");
+var _DocumentationLink = require("./DocumentationLink.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -161,10 +161,10 @@ const PageTemplate = ({
         })]
       })]
     }), (0, _jsxRuntime.jsxs)(TemplateContent, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isDrawerOpen: isDrawerOpen,
       drawerVariant: drawerVariant,
+      isDrawerOpen: isDrawerOpen,
       isFirstRender: isFirstRender,
+      odysseyDesignTokens: odysseyDesignTokens,
       children: [children, drawer]
     })]
   });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplate.cjs","names":["_styled","_interopRequireDefault","require","_react","_index","_DocumentationLink","_OdysseyDesignTokensContext","_Typography","_useHasUiShell","_useMountLifecycleEffect","_jsxRuntime","e","__esModule","default","TemplateContainer","styled","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","useOdysseyDesignTokens","isOpen","variant","props","useHasUiShell","firstRenderRef","useRef","current","onMount","useCallback","useMountLifecycleEffect","jsxs","jsx","Heading4","Paragraph","DocumentationLink","href","icon","DocumentationIcon","target","MemoizedPageTemplate","exports","memo","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":"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","ignoreList":[]}
1	+ {"version":3,"file":"PageTemplate.cjs","names":["_styled","_interopRequireDefault","require","_react","_index","_OdysseyDesignTokensContext","_Typography","_useHasUiShell","_useMountLifecycleEffect","_DocumentationLink","_jsxRuntime","e","__esModule","default","TemplateContainer","styled","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","useOdysseyDesignTokens","isOpen","variant","props","useHasUiShell","firstRenderRef","useRef","current","onMount","useCallback","useMountLifecycleEffect","jsxs","jsx","Heading4","Paragraph","DocumentationLink","href","icon","DocumentationIcon","target","MemoizedPageTemplate","exports","memo","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 {\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\";\nimport { DocumentationLink } from \"./DocumentationLink.js\";\n\nexport type PageTemplateProps = {\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 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 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 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 title of the layout to be situated in the layout header\n */\n title?: string;\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 drawerVariant={drawerVariant}\n isDrawerOpen={isDrawerOpen}\n isFirstRender={isFirstRender}\n odysseyDesignTokens={odysseyDesignTokens}\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":[]}

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaginatedTable = void 0;
-var _Typography = require("../Typography.cjs");
 var _materialReactTable = require("material-react-table");
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _Typography = require("../Typography.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginatedTable.cjs","names":["_Typography","require","_materialReactTable","_react","_reactI18next","_jsxRuntime","PaginatedTable","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","useTranslation","rowVirtualizerInstanceRef","useRef","columnFilters","setColumnFilters","useState","globalFilter","setGlobalFilter","useEffect","undefined","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","useCallback","jsx","Typography","children","Trans","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","table","Fragment","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","dataLengthRef","updatePagination","paginationFunction","previousPagination","nextPagination","numberOfPages","Math","floor","modifiedInitialState","useMemo","modifiedState","muiToolbarAlertBannerProps","severity","muiTablePaginationProps","rowsPerPageOptions","showFirstButton","showLastButton","muiCheckboxStyles","theme","components","MuiCheckbox","styleOverrides","root","ownerState","useMaterialReactTable","enableMultiRowSelection","enablePagination","enableRowSelection","enableSorting","muiSelectAllCheckboxProps","sx","muiSelectCheckboxProps","muiPaginationProps","onColumnFiltersChange","rowVirtualizerOptions","overscan","MaterialReactTable","MemoizedPaginatedTable","exports","memo","displayName"],"sources":["../../../src/labs/PaginatedTable.tsx"],"sourcesContent":["/!\n Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertProps, CheckboxProps } from \"@mui/material\";\nimport { Typography } from \"../Typography.js\";\nimport {\n MRT_PaginationState,\n type MRT_ColumnFiltersState,\n type MRT_RowSelectionState,\n type MRT_TableInstance,\n type MRT_Virtualizer,\n useMaterialReactTable,\n MaterialReactTable,\n} from \"material-react-table\";\nimport {\n FunctionComponent,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport type {\n DefaultMaterialReactTableData,\n MaterialReactTableProps,\n} from \"./materialReactTableTypes.js\";\n\nexport type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {\n columns: MaterialReactTableProps<TData>[\"columns\"];\n data: MaterialReactTableProps<TData>[\"data\"];\n fetchMoreData?: () => void;\n getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n hasError?: boolean;\n hasRowSelection?: boolean;\n initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n isFetching?: boolean;\n onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n onPaginationChange?: MaterialReactTableProps<TData>[\"onPaginationChange\"];\n onRowSelectionChange?: MaterialReactTableProps<TData>[\"onRowSelectionChange\"];\n rowsPerPage?: number;\n state?: MaterialReactTableProps<TData>[\"state\"];\n ToolbarButtons?: FunctionComponent<{ table: MRT_TableInstance<TData> }>;\n};\n\nconst PaginatedTable = <TData extends DefaultMaterialReactTableData>({\n columns = [],\n data = [],\n fetchMoreData,\n getRowId,\n hasError,\n hasRowSelection,\n initialState,\n isFetching,\n onGlobalFilterChange,\n onPaginationChange,\n onRowSelectionChange: onRowSelectionChangeProp,\n rowsPerPage = 10,\n state,\n ToolbarButtons,\n}: PaginatedTableProps<TData>) => {\n const { t } = useTranslation();\n\n const rowVirtualizerInstanceRef =\n useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n [],\n );\n\n const [globalFilter, setGlobalFilter] = useState<string>();\n\n useEffect(() => {\n if (globalFilter !== undefined) {\n onGlobalFilterChange?.(globalFilter);\n }\n }, [globalFilter, onGlobalFilterChange]);\n\n useEffect(() => {\n try {\n // Scroll to top of table when sorting or filters change.\n rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n } catch (error) {\n console.error(error);\n }\n }, [columnFilters, globalFilter]);\n\n const totalFetchedRows = data.length ?? 0;\n\n const renderBottomToolbarCustomActions = useCallback(\n () =>\n fetchMoreData ? (\n <Typography>\n <Trans\n count={totalFetchedRows}\n i18nKey=\"table.fetchedrows.text\"\n values={{\n totalRows: totalFetchedRows,\n }}\n />\n </Typography>\n ) : (\n <Typography>\n <Trans\n count={totalFetchedRows}\n i18nKey=\"table.rows.text\"\n values={{\n totalRows: totalFetchedRows,\n }}\n />\n </Typography>\n ),\n [fetchMoreData, totalFetchedRows],\n );\n\n const renderTopToolbarCustomActions = useCallback<\n Exclude<\n MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n undefined\n >\n >(\n ({ table }: { table: MRT_TableInstance<TData> }) => (\n <>{ToolbarButtons && <ToolbarButtons table={table} />}</>\n ),\n [ToolbarButtons],\n );\n\n const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n useEffect(() => {\n onRowSelectionChangeProp?.(rowSelection);\n }, [onRowSelectionChangeProp, rowSelection]);\n\n const [pagination, setPagination] = useState<MRT_PaginationState>(\n initialState?.pagination \|\| {\n pageIndex: 0,\n pageSize: rowsPerPage,\n },\n );\n\n const dataLengthRef = useRef(data.length);\n\n const updatePagination = useCallback<\n Required<MaterialReactTableProps<TData>>[\"onPaginationChange\"]\n >(\n (paginationFunction) => {\n if (data.length === dataLengthRef.current) {\n setPagination((previousPagination) => {\n // @ts-expect-error This broke in the upgrade, but this component is legacy and replaced by `DataView`.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const nextPagination = paginationFunction(previousPagination);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n return nextPagination;\n });\n } else {\n dataLengthRef.current = data.length;\n }\n },\n [data.length],\n );\n\n useEffect(() => {\n const numberOfPages = Math.floor(data.length / pagination.pageSize);\n\n if (!isFetching && pagination.pageIndex > numberOfPages - 1) {\n fetchMoreData?.();\n }\n }, [\n data.length,\n fetchMoreData,\n isFetching,\n pagination.pageIndex,\n pagination.pageSize,\n ]);\n\n useEffect(() => {\n onPaginationChange?.({\n pageIndex: pagination.pageIndex,\n pageSize: pagination.pageSize,\n });\n }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);\n\n const modifiedInitialState = useMemo(\n () => ({\n pagination,\n ...initialState,\n }),\n [initialState, pagination],\n );\n\n const modifiedState = useMemo(\n () => ({\n pagination: {\n pageIndex: pagination.pageIndex,\n pageSize: pagination.pageSize,\n },\n rowSelection,\n globalFilter,\n columnFilters,\n ...state,\n }),\n [\n pagination.pageIndex,\n pagination.pageSize,\n rowSelection,\n globalFilter,\n columnFilters,\n state,\n ],\n );\n\n const muiToolbarAlertBannerProps: AlertProps = useMemo(\n () =>\n hasError\n ? {\n children: t(\"table.error\"),\n severity: \"error\",\n }\n : {},\n [hasError, t],\n );\n\n const muiTablePaginationProps = useMemo(\n () => ({\n rowsPerPageOptions: [],\n showFirstButton: false,\n showLastButton: false,\n }),\n [],\n );\n\n const muiCheckboxStyles = useCallback<\n // @ts-expect-error This breaks after the upgrade, but it doesn't matter as this is a legacy function and internal type.\n NonNullable<Required<CheckboxProps>[\"sx\"]>\n >(\n (theme) =>\n typeof theme.components?.MuiCheckbox?.styleOverrides?.root === \"function\"\n ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({\n ownerState: {},\n theme,\n })\n : \"\",\n [],\n );\n\n const table = useMaterialReactTable({\n columns: columns,\n data: data,\n enableMultiRowSelection: hasRowSelection,\n enablePagination: true,\n enableRowSelection: hasRowSelection,\n enableSorting: false,\n getRowId: getRowId,\n initialState: modifiedInitialState,\n muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },\n muiSelectCheckboxProps: { sx: muiCheckboxStyles },\n muiPaginationProps: muiTablePaginationProps,\n muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n onPaginationChange: updatePagination,\n onRowSelectionChange: setRowSelection,\n renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,\n renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n rowVirtualizerOptions: { overscan: 4 },\n state: modifiedState,\n });\n\n return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;\n\n// @ts-expect-error \| This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.\nMemoizedPaginatedTable.displayName = \"PaginatedTable\";\n\nexport { MemoizedPaginatedTable as PaginatedTable };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"PaginatedTable.cjs","names":["_materialReactTable","require","_react","_reactI18next","_Typography","_jsxRuntime","PaginatedTable","columns","data","fetchMoreData","getRowId","hasError","hasRowSelection","initialState","isFetching","onGlobalFilterChange","onPaginationChange","onRowSelectionChange","onRowSelectionChangeProp","rowsPerPage","state","ToolbarButtons","t","useTranslation","rowVirtualizerInstanceRef","useRef","columnFilters","setColumnFilters","useState","globalFilter","setGlobalFilter","useEffect","undefined","current","scrollToIndex","error","console","totalFetchedRows","length","renderBottomToolbarCustomActions","useCallback","jsx","Typography","children","Trans","count","i18nKey","values","totalRows","renderTopToolbarCustomActions","table","Fragment","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","dataLengthRef","updatePagination","paginationFunction","previousPagination","nextPagination","numberOfPages","Math","floor","modifiedInitialState","useMemo","modifiedState","muiToolbarAlertBannerProps","severity","muiTablePaginationProps","rowsPerPageOptions","showFirstButton","showLastButton","muiCheckboxStyles","theme","components","MuiCheckbox","styleOverrides","root","ownerState","useMaterialReactTable","enableMultiRowSelection","enablePagination","enableRowSelection","enableSorting","muiSelectAllCheckboxProps","sx","muiSelectCheckboxProps","muiPaginationProps","onColumnFiltersChange","rowVirtualizerOptions","overscan","MaterialReactTable","MemoizedPaginatedTable","exports","memo","displayName"],"sources":["../../../src/labs/PaginatedTable.tsx"],"sourcesContent":["/!\n Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n \n You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n \n See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertProps, CheckboxProps } from \"@mui/material\";\nimport {\n MaterialReactTable,\n type MRT_ColumnFiltersState,\n MRT_PaginationState,\n type MRT_RowSelectionState,\n type MRT_TableInstance,\n type MRT_Virtualizer,\n useMaterialReactTable,\n} from \"material-react-table\";\nimport {\n FunctionComponent,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport type {\n DefaultMaterialReactTableData,\n MaterialReactTableProps,\n} from \"./materialReactTableTypes.js\";\n\nimport { Typography } from \"../Typography.js\";\n\nexport type PaginatedTableProps<TData extends DefaultMaterialReactTableData> = {\n columns: MaterialReactTableProps<TData>[\"columns\"];\n data: MaterialReactTableProps<TData>[\"data\"];\n fetchMoreData?: () => void;\n getRowId?: MaterialReactTableProps<TData>[\"getRowId\"];\n hasError?: boolean;\n hasRowSelection?: boolean;\n initialState?: MaterialReactTableProps<TData>[\"initialState\"];\n isFetching?: boolean;\n onGlobalFilterChange?: MaterialReactTableProps<TData>[\"onGlobalFilterChange\"];\n onPaginationChange?: MaterialReactTableProps<TData>[\"onPaginationChange\"];\n onRowSelectionChange?: MaterialReactTableProps<TData>[\"onRowSelectionChange\"];\n rowsPerPage?: number;\n state?: MaterialReactTableProps<TData>[\"state\"];\n ToolbarButtons?: FunctionComponent<{ table: MRT_TableInstance<TData> }>;\n};\n\nconst PaginatedTable = <TData extends DefaultMaterialReactTableData>({\n columns = [],\n data = [],\n fetchMoreData,\n getRowId,\n hasError,\n hasRowSelection,\n initialState,\n isFetching,\n onGlobalFilterChange,\n onPaginationChange,\n onRowSelectionChange: onRowSelectionChangeProp,\n rowsPerPage = 10,\n state,\n ToolbarButtons,\n}: PaginatedTableProps<TData>) => {\n const { t } = useTranslation();\n\n const rowVirtualizerInstanceRef =\n useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);\n\n const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(\n [],\n );\n\n const [globalFilter, setGlobalFilter] = useState<string>();\n\n useEffect(() => {\n if (globalFilter !== undefined) {\n onGlobalFilterChange?.(globalFilter);\n }\n }, [globalFilter, onGlobalFilterChange]);\n\n useEffect(() => {\n try {\n // Scroll to top of table when sorting or filters change.\n rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);\n } catch (error) {\n console.error(error);\n }\n }, [columnFilters, globalFilter]);\n\n const totalFetchedRows = data.length ?? 0;\n\n const renderBottomToolbarCustomActions = useCallback(\n () =>\n fetchMoreData ? (\n <Typography>\n <Trans\n count={totalFetchedRows}\n i18nKey=\"table.fetchedrows.text\"\n values={{\n totalRows: totalFetchedRows,\n }}\n />\n </Typography>\n ) : (\n <Typography>\n <Trans\n count={totalFetchedRows}\n i18nKey=\"table.rows.text\"\n values={{\n totalRows: totalFetchedRows,\n }}\n />\n </Typography>\n ),\n [fetchMoreData, totalFetchedRows],\n );\n\n const renderTopToolbarCustomActions = useCallback<\n Exclude<\n MaterialReactTableProps<TData>[\"renderTopToolbarCustomActions\"],\n undefined\n >\n >(\n ({ table }: { table: MRT_TableInstance<TData> }) => (\n <>{ToolbarButtons && <ToolbarButtons table={table} />}</>\n ),\n [ToolbarButtons],\n );\n\n const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n useEffect(() => {\n onRowSelectionChangeProp?.(rowSelection);\n }, [onRowSelectionChangeProp, rowSelection]);\n\n const [pagination, setPagination] = useState<MRT_PaginationState>(\n initialState?.pagination \|\| {\n pageIndex: 0,\n pageSize: rowsPerPage,\n },\n );\n\n const dataLengthRef = useRef(data.length);\n\n const updatePagination = useCallback<\n Required<MaterialReactTableProps<TData>>[\"onPaginationChange\"]\n >(\n (paginationFunction) => {\n if (data.length === dataLengthRef.current) {\n setPagination((previousPagination) => {\n // @ts-expect-error This broke in the upgrade, but this component is legacy and replaced by `DataView`.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const nextPagination = paginationFunction(previousPagination);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n return nextPagination;\n });\n } else {\n dataLengthRef.current = data.length;\n }\n },\n [data.length],\n );\n\n useEffect(() => {\n const numberOfPages = Math.floor(data.length / pagination.pageSize);\n\n if (!isFetching && pagination.pageIndex > numberOfPages - 1) {\n fetchMoreData?.();\n }\n }, [\n data.length,\n fetchMoreData,\n isFetching,\n pagination.pageIndex,\n pagination.pageSize,\n ]);\n\n useEffect(() => {\n onPaginationChange?.({\n pageIndex: pagination.pageIndex,\n pageSize: pagination.pageSize,\n });\n }, [onPaginationChange, pagination.pageIndex, pagination.pageSize]);\n\n const modifiedInitialState = useMemo(\n () => ({\n pagination,\n ...initialState,\n }),\n [initialState, pagination],\n );\n\n const modifiedState = useMemo(\n () => ({\n pagination: {\n pageIndex: pagination.pageIndex,\n pageSize: pagination.pageSize,\n },\n rowSelection,\n globalFilter,\n columnFilters,\n ...state,\n }),\n [\n pagination.pageIndex,\n pagination.pageSize,\n rowSelection,\n globalFilter,\n columnFilters,\n state,\n ],\n );\n\n const muiToolbarAlertBannerProps: AlertProps = useMemo(\n () =>\n hasError\n ? {\n children: t(\"table.error\"),\n severity: \"error\",\n }\n : {},\n [hasError, t],\n );\n\n const muiTablePaginationProps = useMemo(\n () => ({\n rowsPerPageOptions: [],\n showFirstButton: false,\n showLastButton: false,\n }),\n [],\n );\n\n const muiCheckboxStyles = useCallback<\n // @ts-expect-error This breaks after the upgrade, but it doesn't matter as this is a legacy function and internal type.\n NonNullable<Required<CheckboxProps>[\"sx\"]>\n >(\n (theme) =>\n typeof theme.components?.MuiCheckbox?.styleOverrides?.root === \"function\"\n ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({\n ownerState: {},\n theme,\n })\n : \"\",\n [],\n );\n\n const table = useMaterialReactTable({\n columns: columns,\n data: data,\n enableMultiRowSelection: hasRowSelection,\n enablePagination: true,\n enableRowSelection: hasRowSelection,\n enableSorting: false,\n getRowId: getRowId,\n initialState: modifiedInitialState,\n muiSelectAllCheckboxProps: { sx: muiCheckboxStyles },\n muiSelectCheckboxProps: { sx: muiCheckboxStyles },\n muiPaginationProps: muiTablePaginationProps,\n muiToolbarAlertBannerProps: muiToolbarAlertBannerProps,\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n onPaginationChange: updatePagination,\n onRowSelectionChange: setRowSelection,\n renderBottomToolbarCustomActions: renderBottomToolbarCustomActions,\n renderTopToolbarCustomActions: renderTopToolbarCustomActions,\n rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,\n rowVirtualizerOptions: { overscan: 4 },\n state: modifiedState,\n });\n\n return <MaterialReactTable table={table} />;\n};\n\nconst MemoizedPaginatedTable = memo(PaginatedTable) as typeof PaginatedTable;\n\n// @ts-expect-error \| This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.\nMemoizedPaginatedTable.displayName = \"PaginatedTable\";\n\nexport { MemoizedPaginatedTable as PaginatedTable };\n"],"mappings":"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","ignoreList":[]}