@hitachivantara/uikit-react-lab 5.4.7 → 5.4.9
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.
- package/dist/cjs/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.styles.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/StepNavigation.cjs.map +1 -1
- package/dist/cjs/components/Wizard/Wizard.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/loadingContainerClasses.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/esm/components/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/esm/components/Wizard/Wizard.js.map +1 -1
- package/dist/esm/components/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/LoadingContainer.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/loadingContainerClasses.js.map +1 -1
- package/dist/esm/components/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/package.json +7 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultNavigation.cjs","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigationClasses } from \"./defaultNavigationClasses\";\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant?: string; title?: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDefaultNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;;;AAmDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.cjs","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigationClasses } from \"./defaultNavigationClasses\";\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant?: string; title?: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDefaultNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;;;AAmDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,eAAS,SAAA;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,MAAAA,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC,KAAAA;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,2BAAAA,IAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QAAAA,UACAY,MAAAA;AAAAA,QACAC,SAAQ1B,2CAAa2B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVxB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAEH,CAAA,GACAW,MAAM;AAAA,EAAA,CACJ;AAET;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvAvatarSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state, theme);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <StyledRoot\n className={clsx(\n className,\n stepClasses.root,\n classes?.root,\n state !== \"Current\" && clsx(stepClasses.notCurrent, classes?.notCurrent)\n )}\n $notCurrent={state !== \"Current\"}\n >\n <StyledButton\n className={clsx(\n stepClasses.ghost,\n classes?.ghost,\n state === \"Current\" &&\n clsx(stepClasses.ghostDisabled, classes?.ghostDisabled)\n )}\n aria-label={`step-${title}`}\n icon\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <StyledAvatar\n className={clsx(\n stepClasses.avatar,\n classes?.avatar,\n stepClasses[size],\n classes?.[size]\n )}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n $size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </StyledAvatar>\n </StyledButton>\n </StyledRoot>\n );\n};\n"],"names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","StyledRoot","clsx","stepClasses","root","notCurrent","$notCurrent","children","StyledButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","StyledAvatar","avatar","$size","_jsx","width","height"],"mappings":";;;;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACjB,QAAMC,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJP,IAAI;AAEN,QAAMQ,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXf,KAAK;AAEP,QAAMgB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdR,IAAI;AAEAc,QAAAA,kBAAkBC,MAAAA,SAASnB,OAAOoB,YAAK,KAAA;AAEvCC,QAAAA,QAAQrB,UAAU,YAAY,UAAUsB;AAC9C,QAAMC,WAAWvB,UAAU,YAAYwB,MAAAA,YAAYxB,KAAK,IAAIsB;AACtDG,QAAAA,SAASzB,UAAU,YAAY,iBAAiBsB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc,gBAAAA;AAAAA,IACTb,QAAQc,gBAAAA;AAAAA,IACRb,WAAWc,gBAAAA;AAAAA,IACX7B,KAAK;AAEP,wCACG8B,YAAAA,YAAU;AAAA,IACThC,WAAWiC,KAAAA,KACTjC,WACAkC,YAAAA,QAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,KAAKC,KAAAA,YAAAA,QAAYE,YAAYnC,mCAASmC,UAAU,
|
|
1
|
+
{"version":3,"file":"Step.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvAvatarSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state, theme);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <StyledRoot\n className={clsx(\n className,\n stepClasses.root,\n classes?.root,\n state !== \"Current\" && clsx(stepClasses.notCurrent, classes?.notCurrent)\n )}\n $notCurrent={state !== \"Current\"}\n >\n <StyledButton\n className={clsx(\n stepClasses.ghost,\n classes?.ghost,\n state === \"Current\" &&\n clsx(stepClasses.ghostDisabled, classes?.ghostDisabled)\n )}\n aria-label={`step-${title}`}\n icon\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <StyledAvatar\n className={clsx(\n stepClasses.avatar,\n classes?.avatar,\n stepClasses[size],\n classes?.[size]\n )}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n $size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </StyledAvatar>\n </StyledButton>\n </StyledRoot>\n );\n};\n"],"names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","StyledRoot","clsx","stepClasses","root","notCurrent","$notCurrent","children","StyledButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","StyledAvatar","avatar","$size","_jsx","width","height"],"mappings":";;;;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACjB,QAAMC,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJP,IAAI;AAEN,QAAMQ,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXf,KAAK;AAEP,QAAMgB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdR,IAAI;AAEAc,QAAAA,kBAAkBC,MAAAA,SAASnB,OAAOoB,YAAK,KAAA;AAEvCC,QAAAA,QAAQrB,UAAU,YAAY,UAAUsB;AAC9C,QAAMC,WAAWvB,UAAU,YAAYwB,MAAAA,YAAYxB,KAAK,IAAIsB;AACtDG,QAAAA,SAASzB,UAAU,YAAY,iBAAiBsB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc,gBAAAA;AAAAA,IACTb,QAAQc,gBAAAA;AAAAA,IACRb,WAAWc,gBAAAA;AAAAA,IACX7B,KAAK;AAEP,wCACG8B,YAAAA,YAAU;AAAA,IACThC,WAAWiC,KAAAA,KACTjC,WACAkC,YAAAA,QAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,KAAKC,KAAAA,YAAAA,QAAYE,YAAYnC,mCAASmC,UAAU,CACzE;AAAA,IACAC,aAAanC,UAAU;AAAA,IAAUoC,yCAEhCC,0BAAY;AAAA,MACXvC,WAAWiC,KAAAA,KACTC,YAAAA,QAAYM,OACZvC,mCAASuC,OACTtC,UAAU,aACR+B,KAAKC,KAAAA,YAAAA,QAAYO,eAAexC,mCAASwC,aAAa,CAC1D;AAAA,MACA,cAAa,QAAOtC;AAAAA,MACpBuC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,oBAAoB;AAAA,MACpBvC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEwC,SAAS3C,KAAK;AAAA,MAC5DE;AAAAA,MAAiBkC,yCAEhBQ,0BAAY;AAAA,QACX9C,WAAWiC,KACTC,KAAAA,oBAAYa,QACZ9C,mCAAS8C,QACTb,YAAAA,QAAY5B,IAAI,GAChBL,mCAAUK,KACZ;AAAA,QACAc;AAAAA,QACAO;AAAAA,QACArB;AAAAA,QACA0C,OAAO1C;AAAAA,QAAKgC,UAEXV,gBACCqB,2BAAAA,IAACrB,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAyB,OAAOhC;AAAAA,UACPiC,QAAQjC;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDD;AAAAA,MAAAA,CAEU;AAAA,IAAA,CACF;AAAA,EAAA,CACJ;AAEhB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.styles.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledRoot = styled(\"div\")(\n ({ $notCurrent }: { $notCurrent: boolean }) => ({\n ...($notCurrent && {\n margin: \"-8px\",\n }),\n })\n);\n\nexport const StyledButton = styled(HvButton)({\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n});\n\nexport const StyledAvatar = styled(HvAvatar)(\n ({ $size }: { $size: string }) => ({\n ...($size === \"xs\" && {\n fontSize: \"0.625rem\",\n }),\n ...($size === \"sm\" && {\n fontSize: \"1rem\",\n }),\n ...($size === \"md\" && {\n fontSize: \"1.5rem\",\n }),\n ...($size === \"lg\" && {\n fontSize: \"2rem\",\n }),\n ...($size === \"xl\" && {\n fontSize: \"2.5rem\",\n }),\n })\n);\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","$notCurrent","margin","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAvatar","HvAvatar","$size","fontSize"],"mappings":";;;;;;;;;AAGO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAsC,OAAO;AAAA,EAC9C,GAAIA,eAAe;AAAA,IACjBC,QAAQ;AAAA,EACV;AACF,IAAEN,QAAAC,IAAAC,
|
|
1
|
+
{"version":3,"file":"Step.styles.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledRoot = styled(\"div\")(\n ({ $notCurrent }: { $notCurrent: boolean }) => ({\n ...($notCurrent && {\n margin: \"-8px\",\n }),\n })\n);\n\nexport const StyledButton = styled(HvButton)({\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n});\n\nexport const StyledAvatar = styled(HvAvatar)(\n ({ $size }: { $size: string }) => ({\n ...($size === \"xs\" && {\n fontSize: \"0.625rem\",\n }),\n ...($size === \"sm\" && {\n fontSize: \"1rem\",\n }),\n ...($size === \"md\" && {\n fontSize: \"1.5rem\",\n }),\n ...($size === \"lg\" && {\n fontSize: \"2rem\",\n }),\n ...($size === \"xl\" && {\n fontSize: \"2.5rem\",\n }),\n })\n);\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","$notCurrent","margin","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAvatar","HvAvatar","$size","fontSize"],"mappings":";;;;;;;;;AAGO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAsC,OAAO;AAAA,EAC9C,GAAIA,eAAe;AAAA,IACjBC,QAAQ;AAAA,EACV;AACF,IAAEN,QAAAC,IAAAC,k0DACJ;AAEO,MAAMK,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQR,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAO,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAU3C;AAEM,MAAMC,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACzC,CAAC;AAAA,EAAEY;AAAyB,OAAO;AAAA,EACjC,GAAIA,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AACF,IAAEjB,QAAAC,IAAAC,k0DACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StyledButton\n className={cx(\n dotClasses.root,\n state === \"Current\" && dotClasses.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n dotClasses.ghostDisabled,\n css({\n backgroundColor: getColor(state, theme),\n width: dotSize,\n height: dotSize,\n \"&:hover\": {\n backgroundColor: getColor(state, theme),\n },\n }),\n className,\n classes?.root,\n state === \"Current\" && classes?.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n classes?.ghostDisabled\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </StyledButton>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","ClassNames","children","css","cx","StyledButton","dotClasses","root","active","includes","ghostDisabled","backgroundColor","getColor","theme","width","height","icon","overrideIconColors"],"mappings":";;;;;;;;AAkBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AAChB,QAAMC,UAAUC,MAASJ,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,wCACGO,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,WAAAA,cAAY;AAAA,MACXZ,WAAWW,GACTE,mBAAWC,MACXb,UAAU,aAAaY,mBAAWE,SACjCV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,MACjDY,WAAAA,QAAWI,eACbP,IAAI;AAAA,QACFQ,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACtCC,OAAOf;AAAAA,QACPgB,QAAQhB;AAAAA,QACR,WAAW;AAAA,UACTY,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDpB,WACAD,mCAASe,MACTb,UAAU,cAAaF,mCAASgB,UAC/BV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,OACjDF,mCAASkB,
|
|
1
|
+
{"version":3,"file":"Dot.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StyledButton\n className={cx(\n dotClasses.root,\n state === \"Current\" && dotClasses.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n dotClasses.ghostDisabled,\n css({\n backgroundColor: getColor(state, theme),\n width: dotSize,\n height: dotSize,\n \"&:hover\": {\n backgroundColor: getColor(state, theme),\n },\n }),\n className,\n classes?.root,\n state === \"Current\" && classes?.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n classes?.ghostDisabled\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </StyledButton>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","ClassNames","children","css","cx","StyledButton","dotClasses","root","active","includes","ghostDisabled","backgroundColor","getColor","theme","width","height","icon","overrideIconColors"],"mappings":";;;;;;;;AAkBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AAChB,QAAMC,UAAUC,MAASJ,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,wCACGO,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,WAAAA,cAAY;AAAA,MACXZ,WAAWW,GACTE,mBAAWC,MACXb,UAAU,aAAaY,mBAAWE,SACjCV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,MACjDY,WAAAA,QAAWI,eACbP,IAAI;AAAA,QACFQ,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACtCC,OAAOf;AAAAA,QACPgB,QAAQhB;AAAAA,QACR,WAAW;AAAA,UACTY,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDpB,WACAD,mCAASe,MACTb,UAAU,cAAaF,mCAASgB,UAC/BV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,OACjDF,mCAASkB,cACb;AAAA,MACA,cAAa,QAAOf;AAAAA,MACpBqB,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBnB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK;AAAA,MAC5DG;AAAAA,MAAiBK,UAEhB,CAAA;AAAA,IAAA,CACW;AAAA,EAAA,CAEN;AAEhB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.styles.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledButton = styled(HvButton)({\n borderRadius: \"50%\",\n zIndex: 1,\n});\n"],"names":["StyledButton","HvButton","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;;;;;AAGO,MAAMA,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"Dot.styles.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledButton = styled(HvButton)({\n borderRadius: \"50%\",\n zIndex: 1,\n});\n"],"names":["StyledButton","HvButton","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;;;;;AAGO,MAAMA,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG3C;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleNavigation.cjs","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { HvSimpleNavigationClasses } from \"./simpleNavigationClasses\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps\n extends Pick<HvStepNavigationProps, \"stepSize\">,\n Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant: string; title: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvSimpleNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;;;AAmDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,
|
|
1
|
+
{"version":3,"file":"SimpleNavigation.cjs","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { HvSimpleNavigationClasses } from \"./simpleNavigationClasses\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps\n extends Pick<HvStepNavigationProps, \"stepSize\">,\n Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant: string; title: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvSimpleNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;;;AAmDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,eAAS,SAAA;AAG3BC,QAAAA,UAAUC,eAASR,QAAQ;AACjC,QAAMS,gBAAgBC,IAAAA;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,WAAWD;AAAAA,IACrBR;AAAAA,EACA,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,2BAAAA,IAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QAAAA,UACAa,MAAAA;AAAAA,QACAC,SAAQxB,2CAAayB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS1B;AAAAA,QACT2B,SAAS,MAAM3B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,CAEH,CAAC;AAAA,EAAA,CACC;AAET;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.cjs","sources":["../../../../src/components/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n HvBaseProps,\n HvBreakpoints,\n useTheme,\n useWidth,\n HvBox,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigation, HvStepProps } from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { styles } from \"./StepNavigation.styles\";\nimport stepNavigationClasses, {\n HvStepNavigationClasses,\n} from \"./stepNavigationClasses\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n ...others\n}: HvStepNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const StyledLi = styled(\"li\")({\n height: separatorHeight,\n width:\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\"\n )\n ),\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n });\n\n return (\n <ClassNames key={`separator-${title}`}>\n {({ css, cx }) => (\n <StyledLi\n aria-hidden\n className={cx(\n stepNavigationClasses.separator,\n css(styles.separator),\n classes?.separator\n )}\n >\n <div\n aria-label={`separator-${title}`}\n className={separatorClassName}\n />\n </StyledLi>\n )}\n </ClassNames>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <ClassNames key={`step-${title}`}>\n {({ css, cx }) => (\n <StepContainer\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`step-${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={\n <HvTypography>{`${index + 1}. ${title}`}</HvTypography>\n }\n >\n <div aria-label={`step-container-${title}`}>\n <Step\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n <StepComponent\n aria-label={`step-${title}`}\n {...stepProps}\n />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n )}\n </ClassNames>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme\n )\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n },\n []\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <ol\n className={cx(\n stepNavigationClasses.ol,\n css(styles.ol),\n classes?.ol\n )}\n >\n {items}\n </ol>\n )}\n </ClassNames>\n );\n };\n\n const getDynamicValues = (stepsWidth) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(\n maxWidth,\n next ? themeBreakpoints[next] : maxWidth\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const styledTitle = (\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n ) => {\n const StyledTitle = styled(HvTypography)({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n });\n\n return (\n <StyledTitle\n variant={variant}\n className={titleClassName}\n disabled={titleDisabled}\n key={`title-${title}`}\n >\n {title}\n </StyledTitle>\n );\n };\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n stepNavigationClasses.titles,\n css(styles.titles),\n classes?.titles\n )}\n >\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n const Title = styledTitle(\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n );\n return Title;\n })}\n </div>\n )}\n </ClassNames>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StepNavigation\n {...{\n numSteps: steps.length,\n stepSize: stepSizeKey,\n getTitles,\n getDynamicValues,\n className: cx(\n stepNavigationClasses.root,\n css(styles.root),\n className,\n classes?.root\n ),\n ...others,\n }}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <HvBox\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n >\n {drawItems(itemsProps)}\n </HvBox>\n )}\n </StepNavigation>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","StyledLi","Number","stepNavigation","separatorMargin","replace","margin","theme","ClassNames","children","css","cx","stepNavigationClasses","separator","styles","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","_jsx","HvTooltip","placement","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","styledTitle","titleClassName","variant","titleDisabled","StyledTitle","textAlign","marginRight","disabled","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","HvBox","component","style"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StepNavigation.cjs","sources":["../../../../src/components/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n HvBaseProps,\n HvBreakpoints,\n useTheme,\n useWidth,\n HvBox,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigation, HvStepProps } from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { styles } from \"./StepNavigation.styles\";\nimport stepNavigationClasses, {\n HvStepNavigationClasses,\n} from \"./stepNavigationClasses\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n ...others\n}: HvStepNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const StyledLi = styled(\"li\")({\n height: separatorHeight,\n width:\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\"\n )\n ),\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n });\n\n return (\n <ClassNames key={`separator-${title}`}>\n {({ css, cx }) => (\n <StyledLi\n aria-hidden\n className={cx(\n stepNavigationClasses.separator,\n css(styles.separator),\n classes?.separator\n )}\n >\n <div\n aria-label={`separator-${title}`}\n className={separatorClassName}\n />\n </StyledLi>\n )}\n </ClassNames>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <ClassNames key={`step-${title}`}>\n {({ css, cx }) => (\n <StepContainer\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`step-${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={\n <HvTypography>{`${index + 1}. ${title}`}</HvTypography>\n }\n >\n <div aria-label={`step-container-${title}`}>\n <Step\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n <StepComponent\n aria-label={`step-${title}`}\n {...stepProps}\n />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n )}\n </ClassNames>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme\n )\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n },\n []\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <ol\n className={cx(\n stepNavigationClasses.ol,\n css(styles.ol),\n classes?.ol\n )}\n >\n {items}\n </ol>\n )}\n </ClassNames>\n );\n };\n\n const getDynamicValues = (stepsWidth) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(\n maxWidth,\n next ? themeBreakpoints[next] : maxWidth\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const styledTitle = (\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n ) => {\n const StyledTitle = styled(HvTypography)({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n });\n\n return (\n <StyledTitle\n variant={variant}\n className={titleClassName}\n disabled={titleDisabled}\n key={`title-${title}`}\n >\n {title}\n </StyledTitle>\n );\n };\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n stepNavigationClasses.titles,\n css(styles.titles),\n classes?.titles\n )}\n >\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n const Title = styledTitle(\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n );\n return Title;\n })}\n </div>\n )}\n </ClassNames>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StepNavigation\n {...{\n numSteps: steps.length,\n stepSize: stepSizeKey,\n getTitles,\n getDynamicValues,\n className: cx(\n stepNavigationClasses.root,\n css(styles.root),\n className,\n classes?.root\n ),\n ...others,\n }}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <HvBox\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n >\n {drawItems(itemsProps)}\n </HvBox>\n )}\n </StepNavigation>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","StyledLi","Number","stepNavigation","separatorMargin","replace","margin","theme","ClassNames","children","css","cx","stepNavigationClasses","separator","styles","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","_jsx","HvTooltip","placement","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","styledTitle","titleClassName","variant","titleDisabled","StyledTitle","textAlign","marginRight","disabled","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","HvBox","component","style"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.cjs","sources":["../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["import { HvBaseProps, HvDialogProps } from \"@hitachivantara/uikit-react-core\";\nimport { ModalProps } from \"@mui/material\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { HvWizardClasses } from \"./wizardClasses\";\nimport {\n HvWizardContainer,\n HvWizardContent,\n HvWizardContext,\n HvWizardTitle,\n HvWizardTitleProps,\n HvWizardTabs,\n HvWizardActions,\n HvWizardActionsProps,\n} from \".\";\nimport { HvStepNavigationProps } from \"..\";\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: ModalProps[\"onClose\"];\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}: HvWizardProps) => {\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose]\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n touched: false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab]\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={className}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","_jsx","HvWizardContext","Provider","HvWizardContainer","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;;;AA6CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM,CAACC,SAASC,UAAU,IAAIC,MAAAA,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACN,SAASO,UAAU,IAAID,eAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,eAAS,CAAC;AAEhC,QAAMI,cAAcC,MAAAA,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B3B,yCAAU0B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC3B,OAAO,
|
|
1
|
+
{"version":3,"file":"Wizard.cjs","sources":["../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["import { HvBaseProps, HvDialogProps } from \"@hitachivantara/uikit-react-core\";\nimport { ModalProps } from \"@mui/material\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { HvWizardClasses } from \"./wizardClasses\";\nimport {\n HvWizardContainer,\n HvWizardContent,\n HvWizardContext,\n HvWizardTitle,\n HvWizardTitleProps,\n HvWizardTabs,\n HvWizardActions,\n HvWizardActionsProps,\n} from \".\";\nimport { HvStepNavigationProps } from \"..\";\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: ModalProps[\"onClose\"];\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}: HvWizardProps) => {\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose]\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n touched: false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab]\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={className}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","_jsx","HvWizardContext","Provider","HvWizardContainer","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;;;AA6CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM,CAACC,SAASC,UAAU,IAAIC,MAAAA,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACN,SAASO,UAAU,IAAID,eAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,eAAS,CAAC;AAEhC,QAAMI,cAAcC,MAAAA,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B3B,yCAAU0B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC3B,OAAO,CACV;AAGA4B,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAACzB,MAAM;AACG0B,mBAAAA,CAAAA,MACVC,OAAOC,QAAQF,CAAC,EAAEG,OAChB,CAACC,KAAK,CAACC,KAAKC,KAAK,OAAO;AAAA,UACtB,GAAGF;AAAAA,UACH,CAAC,CAACC,GAAG,GAAG;AAAA,YACN,GAAGC;AAAAA,YACHC,SAAS;AAAA,UACX;AAAA,QAAA,IAEF,CACF,CAAA,CACF;AACAb,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAACpB,IAAI,CAAC;AAEHkC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IAAEpB;AAAAA,IAASC;AAAAA,IAAYL;AAAAA,IAASO;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACxD,CAACL,SAASC,YAAYL,SAASO,YAAYC,KAAKC,MAAM,CACxD;AAGEgB,SAAAA,2BAAAA,IAACC,sBAAgBC,UAAQ;AAAA,IAACJ;AAAAA,IAAatC,0CACpC2C,mCAAiB;AAAA,MAChB5C;AAAAA,MACA0B;AAAAA,MACArB;AAAAA,MAAW,GACPc;AAAAA,MAAMlB,UAAA,CAEVwC,2BAAAA,IAACI,2BAAa;AAAA,QACZzC;AAAAA,QACAI;AAAAA,QACAE;AAAAA,QACAQ;AAAAA,MAAAA,CACD,GACDuB,2BAAAA,IAACK,+BAAe;AAAA,QACdvC;AAAAA,QACAU;AAAAA,QACAR;AAAAA,QAA+BR;AAAAA,MAAAA,CAGhB,GACjBwC,2BAAAA,IAACM,+BAAe;AAAA,QACdxC;AAAAA,QACAD;AAAAA,QACAI;AAAAA,QACAgB;AAAAA,QACAvB;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACe;AAAA,EAAA,CACK;AAE9B;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogActions,\n HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./WizardActions.styles\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardActionsClasses,\n HvWizardActionsClasses,\n} from \"..\";\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogActions\n className={cx(\n wizardActionsClasses.actionsContainer,\n css(styles.actionsContainer),\n classes?.actionsContainer\n )}\n >\n <HvGrid>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n </HvGrid>\n <HvGrid\n className={cx(\n wizardActionsClasses.buttonsContainer,\n css(styles.buttonsContainer),\n classes?.buttonsContainer\n )}\n >\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n wizardActionsClasses.buttonSpacing,\n css(styles.buttonWidth),\n css(styles.buttonSpacing),\n classes?.buttonWidth,\n classes?.buttonSpacing\n )}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogActions>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","cx","HvDialogActions","className","wizardActionsClasses","actionsContainer","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":";;;;;;;;;;AA8CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,EACV;AACoB,MAAM;AACpB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AACvE,QAAM,CAACC,OAAOC,QAAQ,IAAIC,eAAS,CAAC;AACpC,QAAM,CAACC,WAAWC,YAAY,IAAIF,eAAS,KAAK;AAEhDG,QAAAA,UAAU,MAAM;AACRC,UAAAA,iBAAiBC,OAAOC,QAAQd,OAAO;AAC7C,QAAIY,eAAeG,QAAQ;AACzBR,eAASK,eAAeG,MAAM;AAE9B,YAAMC,cAAcH,OAAOC,QAAQd,OAAO,EAAEiB,MAC1C,CAAC,GAAGC,KAAK,MAAMA,+BAAOC,
|
|
1
|
+
{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogActions,\n HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./WizardActions.styles\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardActionsClasses,\n HvWizardActionsClasses,\n} from \"..\";\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogActions\n className={cx(\n wizardActionsClasses.actionsContainer,\n css(styles.actionsContainer),\n classes?.actionsContainer\n )}\n >\n <HvGrid>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n </HvGrid>\n <HvGrid\n className={cx(\n wizardActionsClasses.buttonsContainer,\n css(styles.buttonsContainer),\n classes?.buttonsContainer\n )}\n >\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n wizardActionsClasses.buttonSpacing,\n css(styles.buttonWidth),\n css(styles.buttonSpacing),\n classes?.buttonWidth,\n classes?.buttonSpacing\n )}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogActions>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","cx","HvDialogActions","className","wizardActionsClasses","actionsContainer","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport wizardContainerClasses, {\n HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialog\n classes={{\n closeButton: cx(\n wizardContainerClasses.closeButton,\n css(styles.closeButton),\n classes?.closeButton\n ),\n paper: cx(\n wizardContainerClasses.paper,\n css(styles.paper),\n classes?.paper\n ),\n }}\n className={cx(wizardContainerClasses.root, className, classes?.root)}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","cx","HvDialog","closeButton","wizardContainerClasses","styles","paper","root","onClose","maxWidth"],"mappings":";;;;;;;AA0BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,eAAAA,UAAQ;AAAA,MACPT,SAAS;AAAA,QACPU,aAAaF,GACXG,uBAAuBD,QAAAA,aACvBH,IAAIK,uBAAAA,OAAOF,WAAW,GACtBV,mCAASU,
|
|
1
|
+
{"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport wizardContainerClasses, {\n HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialog\n classes={{\n closeButton: cx(\n wizardContainerClasses.closeButton,\n css(styles.closeButton),\n classes?.closeButton\n ),\n paper: cx(\n wizardContainerClasses.paper,\n css(styles.paper),\n classes?.paper\n ),\n }}\n className={cx(wizardContainerClasses.root, className, classes?.root)}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","cx","HvDialog","closeButton","wizardContainerClasses","styles","paper","root","onClose","maxWidth"],"mappings":";;;;;;;AA0BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,eAAAA,UAAQ;AAAA,MACPT,SAAS;AAAA,QACPU,aAAaF,GACXG,uBAAuBD,QAAAA,aACvBH,IAAIK,uBAAAA,OAAOF,WAAW,GACtBV,mCAASU,WACX;AAAA,QACAG,OAAOL,GACLG,uBAAuBE,QAAAA,OACvBN,IAAIK,uBAAAA,OAAOC,KAAK,GAChBb,mCAASa,KACX;AAAA,MACF;AAAA,MACAZ,WAAWO,GAAGG,uBAAAA,QAAuBG,MAAMb,WAAWD,mCAASc,IAAI;AAAA,MACnEV;AAAAA,MACAW,SAASZ;AAAAA,MACTa,UAAS;AAAA,MAAI,GACTX;AAAAA,MAAMH;AAAAA,IAAAA,CAGF;AAAA,EAAA,CAEF;AAEhB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import { HvLoading, HvLoadingProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LoadingContainer.styles\";\nimport wizardLoadingContainerClasses, {\n HvWizardLoadingContainerClasses,\n} from \"./loadingContainerClasses\";\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes,\n ...others\n}: LoadingContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(\n wizardLoadingContainerClasses.overlay,\n !hidden && wizardLoadingContainerClasses.blur,\n css(styles.overlay),\n !hidden && css(styles.blur),\n classes?.overlay,\n !hidden && classes?.blur\n )}\n >\n <HvLoading\n classes={{\n root: cx(\n wizardLoadingContainerClasses.loading,\n css(styles.loading),\n classes?.loading\n ),\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n )}\n </ClassNames>\n );\n};\n"],"names":["LoadingContainer","children","hidden","classes","others","ClassNames","css","cx","_Fragment","_jsx","style","top","left","height","width","className","wizardLoadingContainerClasses","overlay","blur","styles","HvLoading","root","loading","display"],"mappings":";;;;;;;AAWO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACkB,MAAM;AAC3B,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,sCACPC,WAAAA,UAAA;AAAA,MAAAP,WACEQ,2BAAAA,IAAA,OAAA;AAAA,QACEC,OAAO;AAAA,UACLC,KAAK;AAAA,UACLC,MAAM;AAAA,UACNC,QAAQ;AAAA,UACRC,OAAO;AAAA,QACT;AAAA,QACAC,WAAWR,GACTS,wBAA8BC,QAAAA,SAC9B,CAACf,UAAUc,wBAAAA,QAA8BE,MACzCZ,IAAIa,wBAAAA,OAAOF,OAAO,GAClB,CAACf,UAAUI,IAAIa,wBAAAA,OAAOD,IAAI,GAC1Bf,mCAASc,SACT,CAACf,WAAUC,mCAASe,
|
|
1
|
+
{"version":3,"file":"LoadingContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import { HvLoading, HvLoadingProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LoadingContainer.styles\";\nimport wizardLoadingContainerClasses, {\n HvWizardLoadingContainerClasses,\n} from \"./loadingContainerClasses\";\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes,\n ...others\n}: LoadingContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(\n wizardLoadingContainerClasses.overlay,\n !hidden && wizardLoadingContainerClasses.blur,\n css(styles.overlay),\n !hidden && css(styles.blur),\n classes?.overlay,\n !hidden && classes?.blur\n )}\n >\n <HvLoading\n classes={{\n root: cx(\n wizardLoadingContainerClasses.loading,\n css(styles.loading),\n classes?.loading\n ),\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n )}\n </ClassNames>\n );\n};\n"],"names":["LoadingContainer","children","hidden","classes","others","ClassNames","css","cx","_Fragment","_jsx","style","top","left","height","width","className","wizardLoadingContainerClasses","overlay","blur","styles","HvLoading","root","loading","display"],"mappings":";;;;;;;AAWO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACkB,MAAM;AAC3B,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,sCACPC,WAAAA,UAAA;AAAA,MAAAP,WACEQ,2BAAAA,IAAA,OAAA;AAAA,QACEC,OAAO;AAAA,UACLC,KAAK;AAAA,UACLC,MAAM;AAAA,UACNC,QAAQ;AAAA,UACRC,OAAO;AAAA,QACT;AAAA,QACAC,WAAWR,GACTS,wBAA8BC,QAAAA,SAC9B,CAACf,UAAUc,wBAAAA,QAA8BE,MACzCZ,IAAIa,wBAAAA,OAAOF,OAAO,GAClB,CAACf,UAAUI,IAAIa,wBAAAA,OAAOD,IAAI,GAC1Bf,mCAASc,SACT,CAACf,WAAUC,mCAASe,KACtB;AAAA,QAAEjB,yCAEDmB,0BAAS;AAAA,UACRjB,SAAS;AAAA,YACPkB,MAAMd,GACJS,wBAA8BM,QAAAA,SAC9BhB,IAAIa,wBAAAA,OAAOG,OAAO,GAClBnB,mCAASmB,OACX;AAAA,UACF;AAAA,UACApB;AAAAA,UAAe,GACXE;AAAAA,QAAAA,CACL;AAAA,MAAA,CACE,GACLK,2BAAAA,IAAA,OAAA;AAAA,QAAKC,OAAO;AAAA,UAAEa,SAAS;AAAA,QAAY;AAAA,QAAEtB;AAAAA,MAAAA,CAAgB,CAAC;AAAA,IAAA,CACtD;AAAA,EAAA,CAEM;AAEhB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardContentClasses,\n HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n wizardContentClasses.summaryRef,\n css(styles.summaryRef),\n classes?.summaryRef\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={cx(\n wizardContentClasses.summarySticky,\n css(styles.summarySticky),\n classes?.summarySticky\n )}\n >\n <div\n className={cx(\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer),\n classes?.summaryContainer\n )}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(\n wizardContentClasses.contentContainer,\n fixedHeight && wizardContentClasses.fixedHeight,\n css(styles.contentContainer),\n fixedHeight && css(styles.fixedHeight),\n classes?.contentContainer,\n fixedHeight && classes?.fixedHeight\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardContentClasses,\n HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n wizardContentClasses.summaryRef,\n css(styles.summaryRef),\n classes?.summaryRef\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={cx(\n wizardContentClasses.summarySticky,\n css(styles.summarySticky),\n classes?.summarySticky\n )}\n >\n <div\n className={cx(\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer),\n classes?.summaryContainer\n )}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(\n wizardContentClasses.contentContainer,\n fixedHeight && wizardContentClasses.fixedHeight,\n css(styles.contentContainer),\n fixedHeight && css(styles.fixedHeight),\n classes?.contentContainer,\n fixedHeight && classes?.fixedHeight\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loadingContainerClasses.cjs","sources":["../../../../../src/components/Wizard/WizardContent/loadingContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardLoadingContainerClasses = {\n loading?: string;\n overlay?: string;\n blur?: string;\n};\n\nconst classKeys: (keyof HvWizardLoadingContainerClasses)[] = [\n \"blur\",\n \"loading\",\n \"overlay\",\n];\n\nconst wizardLoadingContainerClasses = getClasses(\n classKeys,\n \"HvWizard-LoadingContainer\"\n);\n\nexport default wizardLoadingContainerClasses;\n"],"names":["classKeys","wizardLoadingContainerClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAuD,CAC3D,QACA,WACA,SAAS;AAGX,MAAMC,gCAAgCC,eACpCF,WAAAA,WACA,
|
|
1
|
+
{"version":3,"file":"loadingContainerClasses.cjs","sources":["../../../../../src/components/Wizard/WizardContent/loadingContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardLoadingContainerClasses = {\n loading?: string;\n overlay?: string;\n blur?: string;\n};\n\nconst classKeys: (keyof HvWizardLoadingContainerClasses)[] = [\n \"blur\",\n \"loading\",\n \"overlay\",\n];\n\nconst wizardLoadingContainerClasses = getClasses(\n classKeys,\n \"HvWizard-LoadingContainer\"\n);\n\nexport default wizardLoadingContainerClasses;\n"],"names":["classKeys","wizardLoadingContainerClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAuD,CAC3D,QACA,WACA,SAAS;AAGX,MAAMC,gCAAgCC,eACpCF,WAAAA,WACA,2BACF;AAEA,MAAA,kCAAeC;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, summary, setSummary, tab, setTab } =\n useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []);\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogTitle\n className={cx(\n wizardTitleClasses.headerContainer,\n css(styles.headerContainer),\n classes?.headerContainer\n )}\n classes={{\n messageContainer: cx(\n wizardTitleClasses.messageContainer,\n css(styles.messageContainer),\n classes?.messageContainer\n ),\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={cx(\n wizardTitleClasses.titleContainer,\n css(styles.titleContainer),\n classes?.titleContainer\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={cx(\n wizardTitleClasses.stepContainer,\n css(styles.stepContainer),\n classes?.stepContainer\n )}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={cx(\n wizardTitleClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n classes={{\n root: cx(\n wizardTitleClasses.rootSummaryButton,\n css(styles.rootSummaryButton),\n classes?.rootSummaryButton\n ),\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n )}\n </ClassNames>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":";;;;;;;;;;;AA+BA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC;AAAAA,EACAC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACzCC,MAAAA,WAAWC,cAAAA,OAAe;AAE5B,QAAM,CAACC,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACVT,QAAAA,YAAY,QAAQL,YAAY;AAClCM,iBAAW,KAAK;AAAA,IAClB;AAEA,WAAO,MAAM;AACXA,iBAAW,KAAK;AAAA,IAAA;AAAA,EAEpB,GAAG,CAAE,CAAA;AAELQ,QAAAA,UAAU,MAAM;AACRC,UAAAA,eAAeC,OAAOC,QAAQb,OAAO;AAE3C,QAAIW,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG1B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOsB,yCAAYC,SAAS,GAAE3B,QAAQ;AAAA,UACtCF,OAAOD,eAAe6B,YAAYd,KAAKZ,KAAK;AAAA,UAC5C4B,SAASA,MAAMf,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,
|
|
1
|
+
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, summary, setSummary, tab, setTab } =\n useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []);\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogTitle\n className={cx(\n wizardTitleClasses.headerContainer,\n css(styles.headerContainer),\n classes?.headerContainer\n )}\n classes={{\n messageContainer: cx(\n wizardTitleClasses.messageContainer,\n css(styles.messageContainer),\n classes?.messageContainer\n ),\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={cx(\n wizardTitleClasses.titleContainer,\n css(styles.titleContainer),\n classes?.titleContainer\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={cx(\n wizardTitleClasses.stepContainer,\n css(styles.stepContainer),\n classes?.stepContainer\n )}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={cx(\n wizardTitleClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n classes={{\n root: cx(\n wizardTitleClasses.rootSummaryButton,\n css(styles.rootSummaryButton),\n classes?.rootSummaryButton\n ),\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n )}\n </ClassNames>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigationClasses } from \"./defaultNavigationClasses\";\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant?: string; title?: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDefaultNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAmDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigationClasses } from \"./defaultNavigationClasses\";\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant?: string; title?: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDefaultNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAmDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAEF,8BACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,oBAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,SAAQ1B,2CAAa2B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVxB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAEH,CAAA,GACAW,MAAM;AAAA,EAAA,CACJ;AAET;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvAvatarSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state, theme);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <StyledRoot\n className={clsx(\n className,\n stepClasses.root,\n classes?.root,\n state !== \"Current\" && clsx(stepClasses.notCurrent, classes?.notCurrent)\n )}\n $notCurrent={state !== \"Current\"}\n >\n <StyledButton\n className={clsx(\n stepClasses.ghost,\n classes?.ghost,\n state === \"Current\" &&\n clsx(stepClasses.ghostDisabled, classes?.ghostDisabled)\n )}\n aria-label={`step-${title}`}\n icon\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <StyledAvatar\n className={clsx(\n stepClasses.avatar,\n classes?.avatar,\n stepClasses[size],\n classes?.[size]\n )}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n $size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </StyledAvatar>\n </StyledButton>\n </StyledRoot>\n );\n};\n"],"names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","StyledRoot","clsx","stepClasses","root","notCurrent","$notCurrent","children","StyledButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","StyledAvatar","avatar","$size","_jsx","width","height"],"mappings":";;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACjB,QAAMC,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJP,IAAI;AAEN,QAAMQ,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXf,KAAK;AAEP,QAAMgB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdR,IAAI;AAEAc,QAAAA,kBAAkBC,SAASnB,OAAOoB,KAAK;AAEvCC,QAAAA,QAAQrB,UAAU,YAAY,UAAUsB;AAC9C,QAAMC,WAAWvB,UAAU,YAAYwB,YAAYxB,KAAK,IAAIsB;AACtDG,QAAAA,SAASzB,UAAU,YAAY,iBAAiBsB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,IACX7B,KAAK;AAEP,6BACG8B,YAAU;AAAA,IACThC,WAAWiC,KACTjC,WACAkC,YAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,KAAKC,YAAYE,YAAYnC,mCAASmC,UAAU,
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvAvatarSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state, theme);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <StyledRoot\n className={clsx(\n className,\n stepClasses.root,\n classes?.root,\n state !== \"Current\" && clsx(stepClasses.notCurrent, classes?.notCurrent)\n )}\n $notCurrent={state !== \"Current\"}\n >\n <StyledButton\n className={clsx(\n stepClasses.ghost,\n classes?.ghost,\n state === \"Current\" &&\n clsx(stepClasses.ghostDisabled, classes?.ghostDisabled)\n )}\n aria-label={`step-${title}`}\n icon\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <StyledAvatar\n className={clsx(\n stepClasses.avatar,\n classes?.avatar,\n stepClasses[size],\n classes?.[size]\n )}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n $size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </StyledAvatar>\n </StyledButton>\n </StyledRoot>\n );\n};\n"],"names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","StyledRoot","clsx","stepClasses","root","notCurrent","$notCurrent","children","StyledButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","StyledAvatar","avatar","$size","_jsx","width","height"],"mappings":";;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACjB,QAAMC,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJP,IAAI;AAEN,QAAMQ,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXf,KAAK;AAEP,QAAMgB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdR,IAAI;AAEAc,QAAAA,kBAAkBC,SAASnB,OAAOoB,KAAK;AAEvCC,QAAAA,QAAQrB,UAAU,YAAY,UAAUsB;AAC9C,QAAMC,WAAWvB,UAAU,YAAYwB,YAAYxB,KAAK,IAAIsB;AACtDG,QAAAA,SAASzB,UAAU,YAAY,iBAAiBsB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,IACX7B,KAAK;AAEP,6BACG8B,YAAU;AAAA,IACThC,WAAWiC,KACTjC,WACAkC,YAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,KAAKC,YAAYE,YAAYnC,mCAASmC,UAAU,CACzE;AAAA,IACAC,aAAanC,UAAU;AAAA,IAAUoC,8BAEhCC,cAAY;AAAA,MACXvC,WAAWiC,KACTC,YAAYM,OACZvC,mCAASuC,OACTtC,UAAU,aACR+B,KAAKC,YAAYO,eAAexC,mCAASwC,aAAa,CAC1D;AAAA,MACA,cAAa,QAAOtC;AAAAA,MACpBuC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,oBAAoB;AAAA,MACpBvC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEwC,SAAS3C,KAAK;AAAA,MAC5DE;AAAAA,MAAiBkC,8BAEhBQ,cAAY;AAAA,QACX9C,WAAWiC,KACTC,YAAYa,QACZ9C,mCAAS8C,QACTb,YAAY5B,IAAI,GAChBL,mCAAUK,KACZ;AAAA,QACAc;AAAAA,QACAO;AAAAA,QACArB;AAAAA,QACA0C,OAAO1C;AAAAA,QAAKgC,UAEXV,gBACCqB,oBAACrB,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAyB,OAAOhC;AAAAA,UACPiC,QAAQjC;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDD;AAAAA,MAAAA,CAEU;AAAA,IAAA,CACF;AAAA,EAAA,CACJ;AAEhB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.styles.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledRoot = styled(\"div\")(\n ({ $notCurrent }: { $notCurrent: boolean }) => ({\n ...($notCurrent && {\n margin: \"-8px\",\n }),\n })\n);\n\nexport const StyledButton = styled(HvButton)({\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n});\n\nexport const StyledAvatar = styled(HvAvatar)(\n ({ $size }: { $size: string }) => ({\n ...($size === \"xs\" && {\n fontSize: \"0.625rem\",\n }),\n ...($size === \"sm\" && {\n fontSize: \"1rem\",\n }),\n ...($size === \"md\" && {\n fontSize: \"1.5rem\",\n }),\n ...($size === \"lg\" && {\n fontSize: \"2rem\",\n }),\n ...($size === \"xl\" && {\n fontSize: \"2.5rem\",\n }),\n })\n);\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","$notCurrent","margin","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAvatar","HvAvatar","$size","fontSize"],"mappings":";;;;;AAGO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAsC,OAAO;AAAA,EAC9C,GAAIA,eAAe;AAAA,IACjBC,QAAQ;AAAA,EACV;AACF,IAAEN,QAAAC,IAAAC,
|
|
1
|
+
{"version":3,"file":"Step.styles.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledRoot = styled(\"div\")(\n ({ $notCurrent }: { $notCurrent: boolean }) => ({\n ...($notCurrent && {\n margin: \"-8px\",\n }),\n })\n);\n\nexport const StyledButton = styled(HvButton)({\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n});\n\nexport const StyledAvatar = styled(HvAvatar)(\n ({ $size }: { $size: string }) => ({\n ...($size === \"xs\" && {\n fontSize: \"0.625rem\",\n }),\n ...($size === \"sm\" && {\n fontSize: \"1rem\",\n }),\n ...($size === \"md\" && {\n fontSize: \"1.5rem\",\n }),\n ...($size === \"lg\" && {\n fontSize: \"2rem\",\n }),\n ...($size === \"xl\" && {\n fontSize: \"2.5rem\",\n }),\n })\n);\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","$notCurrent","margin","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAvatar","HvAvatar","$size","fontSize"],"mappings":";;;;;AAGO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAsC,OAAO;AAAA,EAC9C,GAAIA,eAAe;AAAA,IACjBC,QAAQ;AAAA,EACV;AACF,IAAEN,QAAAC,IAAAC,k0DACJ;AAEO,MAAMK,eAAsBC,wBAAAA,UAAQR,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAO,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAU3C;AAEM,MAAMC,eAAsBC,wBAAAA,UAAQf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACzC,CAAC;AAAA,EAAEY;AAAyB,OAAO;AAAA,EACjC,GAAIA,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AACF,IAAEjB,QAAAC,IAAAC,k0DACJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StyledButton\n className={cx(\n dotClasses.root,\n state === \"Current\" && dotClasses.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n dotClasses.ghostDisabled,\n css({\n backgroundColor: getColor(state, theme),\n width: dotSize,\n height: dotSize,\n \"&:hover\": {\n backgroundColor: getColor(state, theme),\n },\n }),\n className,\n classes?.root,\n state === \"Current\" && classes?.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n classes?.ghostDisabled\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </StyledButton>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","ClassNames","children","css","cx","StyledButton","dotClasses","root","active","includes","ghostDisabled","backgroundColor","getColor","theme","width","height","icon","overrideIconColors"],"mappings":";;;;;;AAkBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AAChB,QAAMC,UAAUC,SAASJ,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,6BACGO,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,cAAY;AAAA,MACXZ,WAAWW,GACTE,WAAWC,MACXb,UAAU,aAAaY,WAAWE,SACjCV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,MACjDY,WAAWI,eACbP,IAAI;AAAA,QACFQ,iBAAiBC,SAASlB,OAAOmB,KAAK;AAAA,QACtCC,OAAOf;AAAAA,QACPgB,QAAQhB;AAAAA,QACR,WAAW;AAAA,UACTY,iBAAiBC,SAASlB,OAAOmB,KAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDpB,WACAD,mCAASe,MACTb,UAAU,cAAaF,mCAASgB,UAC/BV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,OACjDF,mCAASkB,
|
|
1
|
+
{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StyledButton\n className={cx(\n dotClasses.root,\n state === \"Current\" && dotClasses.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n dotClasses.ghostDisabled,\n css({\n backgroundColor: getColor(state, theme),\n width: dotSize,\n height: dotSize,\n \"&:hover\": {\n backgroundColor: getColor(state, theme),\n },\n }),\n className,\n classes?.root,\n state === \"Current\" && classes?.active,\n (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n classes?.ghostDisabled\n )}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </StyledButton>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","ClassNames","children","css","cx","StyledButton","dotClasses","root","active","includes","ghostDisabled","backgroundColor","getColor","theme","width","height","icon","overrideIconColors"],"mappings":";;;;;;AAkBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AAChB,QAAMC,UAAUC,SAASJ,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,6BACGO,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,cAAY;AAAA,MACXZ,WAAWW,GACTE,WAAWC,MACXb,UAAU,aAAaY,WAAWE,SACjCV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,MACjDY,WAAWI,eACbP,IAAI;AAAA,QACFQ,iBAAiBC,SAASlB,OAAOmB,KAAK;AAAA,QACtCC,OAAOf;AAAAA,QACPgB,QAAQhB;AAAAA,QACR,WAAW;AAAA,UACTY,iBAAiBC,SAASlB,OAAOmB,KAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDpB,WACAD,mCAASe,MACTb,UAAU,cAAaF,mCAASgB,UAC/BV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,OACjDF,mCAASkB,cACb;AAAA,MACA,cAAa,QAAOf;AAAAA,MACpBqB,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBnB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK;AAAA,MAC5DG;AAAAA,MAAiBK,UAEhB,CAAA;AAAA,IAAA,CACW;AAAA,EAAA,CAEN;AAEhB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledButton = styled(HvButton)({\n borderRadius: \"50%\",\n zIndex: 1,\n});\n"],"names":["StyledButton","HvButton","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;AAGO,MAAMA,eAAsBC,wBAAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledButton = styled(HvButton)({\n borderRadius: \"50%\",\n zIndex: 1,\n});\n"],"names":["StyledButton","HvButton","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;AAGO,MAAMA,eAAsBC,wBAAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG3C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { HvSimpleNavigationClasses } from \"./simpleNavigationClasses\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps\n extends Pick<HvStepNavigationProps, \"stepSize\">,\n Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant: string; title: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvSimpleNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAmDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,
|
|
1
|
+
{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { HvSimpleNavigationClasses } from \"./simpleNavigationClasses\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps\n extends Pick<HvStepNavigationProps, \"stepSize\">,\n Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a JSX.element of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant: string; title: string }\n ) => JSX.Element | null;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvSimpleNavigationClasses;\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAmDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,WAAWD;AAAAA,IACrBR;AAAAA,EACA,EAAA;AAEF,8BACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,oBAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QACAa;AAAAA,QACAC,SAAQxB,2CAAayB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS1B;AAAAA,QACT2B,SAAS,MAAM3B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,CAEH,CAAC;AAAA,EAAA,CACC;AAET;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.js","sources":["../../../../src/components/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n HvBaseProps,\n HvBreakpoints,\n useTheme,\n useWidth,\n HvBox,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigation, HvStepProps } from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { styles } from \"./StepNavigation.styles\";\nimport stepNavigationClasses, {\n HvStepNavigationClasses,\n} from \"./stepNavigationClasses\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n ...others\n}: HvStepNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const StyledLi = styled(\"li\")({\n height: separatorHeight,\n width:\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\"\n )\n ),\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n });\n\n return (\n <ClassNames key={`separator-${title}`}>\n {({ css, cx }) => (\n <StyledLi\n aria-hidden\n className={cx(\n stepNavigationClasses.separator,\n css(styles.separator),\n classes?.separator\n )}\n >\n <div\n aria-label={`separator-${title}`}\n className={separatorClassName}\n />\n </StyledLi>\n )}\n </ClassNames>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <ClassNames key={`step-${title}`}>\n {({ css, cx }) => (\n <StepContainer\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`step-${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={\n <HvTypography>{`${index + 1}. ${title}`}</HvTypography>\n }\n >\n <div aria-label={`step-container-${title}`}>\n <Step\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n <StepComponent\n aria-label={`step-${title}`}\n {...stepProps}\n />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n )}\n </ClassNames>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme\n )\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n },\n []\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <ol\n className={cx(\n stepNavigationClasses.ol,\n css(styles.ol),\n classes?.ol\n )}\n >\n {items}\n </ol>\n )}\n </ClassNames>\n );\n };\n\n const getDynamicValues = (stepsWidth) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(\n maxWidth,\n next ? themeBreakpoints[next] : maxWidth\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const styledTitle = (\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n ) => {\n const StyledTitle = styled(HvTypography)({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n });\n\n return (\n <StyledTitle\n variant={variant}\n className={titleClassName}\n disabled={titleDisabled}\n key={`title-${title}`}\n >\n {title}\n </StyledTitle>\n );\n };\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n stepNavigationClasses.titles,\n css(styles.titles),\n classes?.titles\n )}\n >\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n const Title = styledTitle(\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n );\n return Title;\n })}\n </div>\n )}\n </ClassNames>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StepNavigation\n {...{\n numSteps: steps.length,\n stepSize: stepSizeKey,\n getTitles,\n getDynamicValues,\n className: cx(\n stepNavigationClasses.root,\n css(styles.root),\n className,\n classes?.root\n ),\n ...others,\n }}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <HvBox\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n >\n {drawItems(itemsProps)}\n </HvBox>\n )}\n </StepNavigation>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","StyledLi","Number","stepNavigation","separatorMargin","replace","margin","theme","ClassNames","children","css","cx","stepNavigationClasses","separator","styles","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","_jsx","HvTooltip","placement","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","styledTitle","titleClassName","variant","titleDisabled","StyledTitle","textAlign","marginRight","disabled","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","HvBox","component","style"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StepNavigation.js","sources":["../../../../src/components/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n HvBaseProps,\n HvBreakpoints,\n useTheme,\n useWidth,\n HvBox,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigation, HvStepProps } from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { styles } from \"./StepNavigation.styles\";\nimport stepNavigationClasses, {\n HvStepNavigationClasses,\n} from \"./stepNavigationClasses\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n ...others\n}: HvStepNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const StyledLi = styled(\"li\")({\n height: separatorHeight,\n width:\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\"\n )\n ),\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n });\n\n return (\n <ClassNames key={`separator-${title}`}>\n {({ css, cx }) => (\n <StyledLi\n aria-hidden\n className={cx(\n stepNavigationClasses.separator,\n css(styles.separator),\n classes?.separator\n )}\n >\n <div\n aria-label={`separator-${title}`}\n className={separatorClassName}\n />\n </StyledLi>\n )}\n </ClassNames>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <ClassNames key={`step-${title}`}>\n {({ css, cx }) => (\n <StepContainer\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`step-${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={\n <HvTypography>{`${index + 1}. ${title}`}</HvTypography>\n }\n >\n <div aria-label={`step-container-${title}`}>\n <Step\n className={cx(\n stepNavigationClasses.li,\n css(styles.li),\n classes?.li\n )}\n >\n <StepComponent\n aria-label={`step-${title}`}\n {...stepProps}\n />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n )}\n </ClassNames>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme\n )\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n },\n []\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <ol\n className={cx(\n stepNavigationClasses.ol,\n css(styles.ol),\n classes?.ol\n )}\n >\n {items}\n </ol>\n )}\n </ClassNames>\n );\n };\n\n const getDynamicValues = (stepsWidth) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(\n maxWidth,\n next ? themeBreakpoints[next] : maxWidth\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const styledTitle = (\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n ) => {\n const StyledTitle = styled(HvTypography)({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n });\n\n return (\n <StyledTitle\n variant={variant}\n className={titleClassName}\n disabled={titleDisabled}\n key={`title-${title}`}\n >\n {title}\n </StyledTitle>\n );\n };\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n stepNavigationClasses.titles,\n css(styles.titles),\n classes?.titles\n )}\n >\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n const Title = styledTitle(\n titleClassName,\n variant,\n title,\n titleWidth,\n titleDisabled\n );\n return Title;\n })}\n </div>\n )}\n </ClassNames>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StepNavigation\n {...{\n numSteps: steps.length,\n stepSize: stepSizeKey,\n getTitles,\n getDynamicValues,\n className: cx(\n stepNavigationClasses.root,\n css(styles.root),\n className,\n classes?.root\n ),\n ...others,\n }}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <HvBox\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n >\n {drawItems(itemsProps)}\n </HvBox>\n )}\n </StepNavigation>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","StyledLi","Number","stepNavigation","separatorMargin","replace","margin","theme","ClassNames","children","css","cx","stepNavigationClasses","separator","styles","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","_jsx","HvTooltip","placement","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","styledTitle","titleClassName","variant","titleDisabled","StyledTitle","textAlign","marginRight","disabled","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","HvBox","component","style"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","sources":["../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["import { HvBaseProps, HvDialogProps } from \"@hitachivantara/uikit-react-core\";\nimport { ModalProps } from \"@mui/material\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { HvWizardClasses } from \"./wizardClasses\";\nimport {\n HvWizardContainer,\n HvWizardContent,\n HvWizardContext,\n HvWizardTitle,\n HvWizardTitleProps,\n HvWizardTabs,\n HvWizardActions,\n HvWizardActionsProps,\n} from \".\";\nimport { HvStepNavigationProps } from \"..\";\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: ModalProps[\"onClose\"];\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}: HvWizardProps) => {\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose]\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n touched: false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab]\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={className}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","_jsx","HvWizardContext","Provider","HvWizardContainer","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;AA6CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM,CAACC,SAASC,UAAU,IAAIC,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACN,SAASO,UAAU,IAAID,SAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,SAAS,CAAC;AAEhC,QAAMI,cAAcC,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B3B,yCAAU0B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC3B,OAAO,
|
|
1
|
+
{"version":3,"file":"Wizard.js","sources":["../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["import { HvBaseProps, HvDialogProps } from \"@hitachivantara/uikit-react-core\";\nimport { ModalProps } from \"@mui/material\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { HvWizardClasses } from \"./wizardClasses\";\nimport {\n HvWizardContainer,\n HvWizardContent,\n HvWizardContext,\n HvWizardTitle,\n HvWizardTitleProps,\n HvWizardTabs,\n HvWizardActions,\n HvWizardActionsProps,\n} from \".\";\nimport { HvStepNavigationProps } from \"..\";\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: ModalProps[\"onClose\"];\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n ...others\n}: HvWizardProps) => {\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose]\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n touched: false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab]\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={className}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","_jsx","HvWizardContext","Provider","HvWizardContainer","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;AA6CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM,CAACC,SAASC,UAAU,IAAIC,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACN,SAASO,UAAU,IAAID,SAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,SAAS,CAAC;AAEhC,QAAMI,cAAcC,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B3B,yCAAU0B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC3B,OAAO,CACV;AAGA4B,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAACzB,MAAM;AACG0B,mBAAAA,CAAAA,MACVC,OAAOC,QAAQF,CAAC,EAAEG,OAChB,CAACC,KAAK,CAACC,KAAKC,KAAK,OAAO;AAAA,UACtB,GAAGF;AAAAA,UACH,CAAC,CAACC,GAAG,GAAG;AAAA,YACN,GAAGC;AAAAA,YACHC,SAAS;AAAA,UACX;AAAA,QAAA,IAEF,CACF,CAAA,CACF;AACAb,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAACpB,IAAI,CAAC;AAEHkC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IAAEpB;AAAAA,IAASC;AAAAA,IAAYL;AAAAA,IAASO;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACxD,CAACL,SAASC,YAAYL,SAASO,YAAYC,KAAKC,MAAM,CACxD;AAGEgB,SAAAA,oBAACC,gBAAgBC,UAAQ;AAAA,IAACJ;AAAAA,IAAatC,+BACpC2C,mBAAiB;AAAA,MAChB5C;AAAAA,MACA0B;AAAAA,MACArB;AAAAA,MAAW,GACPc;AAAAA,MAAMlB,UAAA,CAEVwC,oBAACI,eAAa;AAAA,QACZzC;AAAAA,QACAI;AAAAA,QACAE;AAAAA,QACAQ;AAAAA,MAAAA,CACD,GACDuB,oBAACK,iBAAe;AAAA,QACdvC;AAAAA,QACAU;AAAAA,QACAR;AAAAA,QAA+BR;AAAAA,MAAAA,CAGhB,GACjBwC,oBAACM,iBAAe;AAAA,QACdxC;AAAAA,QACAD;AAAAA,QACAI;AAAAA,QACAgB;AAAAA,QACAvB;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACe;AAAA,EAAA,CACK;AAE9B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogActions,\n HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./WizardActions.styles\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardActionsClasses,\n HvWizardActionsClasses,\n} from \"..\";\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogActions\n className={cx(\n wizardActionsClasses.actionsContainer,\n css(styles.actionsContainer),\n classes?.actionsContainer\n )}\n >\n <HvGrid>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n </HvGrid>\n <HvGrid\n className={cx(\n wizardActionsClasses.buttonsContainer,\n css(styles.buttonsContainer),\n classes?.buttonsContainer\n )}\n >\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n wizardActionsClasses.buttonSpacing,\n css(styles.buttonWidth),\n css(styles.buttonSpacing),\n classes?.buttonWidth,\n classes?.buttonSpacing\n )}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogActions>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","cx","HvDialogActions","className","wizardActionsClasses","actionsContainer","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":";;;;;;;;AA8CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,EACV;AACoB,MAAM;AACpB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,WAAWC,eAAe;AACvE,QAAM,CAACC,OAAOC,QAAQ,IAAIC,SAAS,CAAC;AACpC,QAAM,CAACC,WAAWC,YAAY,IAAIF,SAAS,KAAK;AAEhDG,YAAU,MAAM;AACRC,UAAAA,iBAAiBC,OAAOC,QAAQd,OAAO;AAC7C,QAAIY,eAAeG,QAAQ;AACzBR,eAASK,eAAeG,MAAM;AAE9B,YAAMC,cAAcH,OAAOC,QAAQd,OAAO,EAAEiB,MAC1C,CAAC,GAAGC,KAAK,MAAMA,+BAAOC,
|
|
1
|
+
{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogActions,\n HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./WizardActions.styles\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardActionsClasses,\n HvWizardActionsClasses,\n} from \"..\";\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogActions\n className={cx(\n wizardActionsClasses.actionsContainer,\n css(styles.actionsContainer),\n classes?.actionsContainer\n )}\n >\n <HvGrid>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n </HvGrid>\n <HvGrid\n className={cx(\n wizardActionsClasses.buttonsContainer,\n css(styles.buttonsContainer),\n classes?.buttonsContainer\n )}\n >\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(\n wizardActionsClasses.buttonWidth,\n wizardActionsClasses.buttonSpacing,\n css(styles.buttonWidth),\n css(styles.buttonSpacing),\n classes?.buttonWidth,\n classes?.buttonSpacing\n )}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogActions>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","cx","HvDialogActions","className","wizardActionsClasses","actionsContainer","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport wizardContainerClasses, {\n HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialog\n classes={{\n closeButton: cx(\n wizardContainerClasses.closeButton,\n css(styles.closeButton),\n classes?.closeButton\n ),\n paper: cx(\n wizardContainerClasses.paper,\n css(styles.paper),\n classes?.paper\n ),\n }}\n className={cx(wizardContainerClasses.root, className, classes?.root)}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","cx","HvDialog","closeButton","wizardContainerClasses","styles","paper","root","onClose","maxWidth"],"mappings":";;;;;AA0BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,UAAQ;AAAA,MACPT,SAAS;AAAA,QACPU,aAAaF,GACXG,uBAAuBD,aACvBH,IAAIK,OAAOF,WAAW,GACtBV,mCAASU,
|
|
1
|
+
{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport wizardContainerClasses, {\n HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialog\n classes={{\n closeButton: cx(\n wizardContainerClasses.closeButton,\n css(styles.closeButton),\n classes?.closeButton\n ),\n paper: cx(\n wizardContainerClasses.paper,\n css(styles.paper),\n classes?.paper\n ),\n }}\n className={cx(wizardContainerClasses.root, className, classes?.root)}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","cx","HvDialog","closeButton","wizardContainerClasses","styles","paper","root","onClose","maxWidth"],"mappings":";;;;;AA0BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,UAAQ;AAAA,MACPT,SAAS;AAAA,QACPU,aAAaF,GACXG,uBAAuBD,aACvBH,IAAIK,OAAOF,WAAW,GACtBV,mCAASU,WACX;AAAA,QACAG,OAAOL,GACLG,uBAAuBE,OACvBN,IAAIK,OAAOC,KAAK,GAChBb,mCAASa,KACX;AAAA,MACF;AAAA,MACAZ,WAAWO,GAAGG,uBAAuBG,MAAMb,WAAWD,mCAASc,IAAI;AAAA,MACnEV;AAAAA,MACAW,SAASZ;AAAAA,MACTa,UAAS;AAAA,MAAI,GACTX;AAAAA,MAAMH;AAAAA,IAAAA,CAGF;AAAA,EAAA,CAEF;AAEhB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import { HvLoading, HvLoadingProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LoadingContainer.styles\";\nimport wizardLoadingContainerClasses, {\n HvWizardLoadingContainerClasses,\n} from \"./loadingContainerClasses\";\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes,\n ...others\n}: LoadingContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(\n wizardLoadingContainerClasses.overlay,\n !hidden && wizardLoadingContainerClasses.blur,\n css(styles.overlay),\n !hidden && css(styles.blur),\n classes?.overlay,\n !hidden && classes?.blur\n )}\n >\n <HvLoading\n classes={{\n root: cx(\n wizardLoadingContainerClasses.loading,\n css(styles.loading),\n classes?.loading\n ),\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n )}\n </ClassNames>\n );\n};\n"],"names":["LoadingContainer","children","hidden","classes","others","ClassNames","css","cx","_Fragment","_jsx","style","top","left","height","width","className","wizardLoadingContainerClasses","overlay","blur","styles","HvLoading","root","loading","display"],"mappings":";;;;;AAWO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACkB,MAAM;AAC3B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,2BACPC,UAAA;AAAA,MAAAP,WACEQ,oBAAA,OAAA;AAAA,QACEC,OAAO;AAAA,UACLC,KAAK;AAAA,UACLC,MAAM;AAAA,UACNC,QAAQ;AAAA,UACRC,OAAO;AAAA,QACT;AAAA,QACAC,WAAWR,GACTS,8BAA8BC,SAC9B,CAACf,UAAUc,8BAA8BE,MACzCZ,IAAIa,OAAOF,OAAO,GAClB,CAACf,UAAUI,IAAIa,OAAOD,IAAI,GAC1Bf,mCAASc,SACT,CAACf,WAAUC,mCAASe,
|
|
1
|
+
{"version":3,"file":"LoadingContainer.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import { HvLoading, HvLoadingProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LoadingContainer.styles\";\nimport wizardLoadingContainerClasses, {\n HvWizardLoadingContainerClasses,\n} from \"./loadingContainerClasses\";\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes,\n ...others\n}: LoadingContainerProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(\n wizardLoadingContainerClasses.overlay,\n !hidden && wizardLoadingContainerClasses.blur,\n css(styles.overlay),\n !hidden && css(styles.blur),\n classes?.overlay,\n !hidden && classes?.blur\n )}\n >\n <HvLoading\n classes={{\n root: cx(\n wizardLoadingContainerClasses.loading,\n css(styles.loading),\n classes?.loading\n ),\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n )}\n </ClassNames>\n );\n};\n"],"names":["LoadingContainer","children","hidden","classes","others","ClassNames","css","cx","_Fragment","_jsx","style","top","left","height","width","className","wizardLoadingContainerClasses","overlay","blur","styles","HvLoading","root","loading","display"],"mappings":";;;;;AAWO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACkB,MAAM;AAC3B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,2BACPC,UAAA;AAAA,MAAAP,WACEQ,oBAAA,OAAA;AAAA,QACEC,OAAO;AAAA,UACLC,KAAK;AAAA,UACLC,MAAM;AAAA,UACNC,QAAQ;AAAA,UACRC,OAAO;AAAA,QACT;AAAA,QACAC,WAAWR,GACTS,8BAA8BC,SAC9B,CAACf,UAAUc,8BAA8BE,MACzCZ,IAAIa,OAAOF,OAAO,GAClB,CAACf,UAAUI,IAAIa,OAAOD,IAAI,GAC1Bf,mCAASc,SACT,CAACf,WAAUC,mCAASe,KACtB;AAAA,QAAEjB,8BAEDmB,WAAS;AAAA,UACRjB,SAAS;AAAA,YACPkB,MAAMd,GACJS,8BAA8BM,SAC9BhB,IAAIa,OAAOG,OAAO,GAClBnB,mCAASmB,OACX;AAAA,UACF;AAAA,UACApB;AAAAA,UAAe,GACXE;AAAAA,QAAAA,CACL;AAAA,MAAA,CACE,GACLK,oBAAA,OAAA;AAAA,QAAKC,OAAO;AAAA,UAAEa,SAAS;AAAA,QAAY;AAAA,QAAEtB;AAAAA,MAAAA,CAAgB,CAAC;AAAA,IAAA,CACtD;AAAA,EAAA,CAEM;AAEhB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardContentClasses,\n HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n wizardContentClasses.summaryRef,\n css(styles.summaryRef),\n classes?.summaryRef\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={cx(\n wizardContentClasses.summarySticky,\n css(styles.summarySticky),\n classes?.summarySticky\n )}\n >\n <div\n className={cx(\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer),\n classes?.summaryContainer\n )}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(\n wizardContentClasses.contentContainer,\n fixedHeight && wizardContentClasses.fixedHeight,\n css(styles.contentContainer),\n fixedHeight && css(styles.fixedHeight),\n classes?.contentContainer,\n fixedHeight && classes?.fixedHeight\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardContentClasses,\n HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n wizardContentClasses.summaryRef,\n css(styles.summaryRef),\n classes?.summaryRef\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={cx(\n wizardContentClasses.summarySticky,\n css(styles.summarySticky),\n classes?.summarySticky\n )}\n >\n <div\n className={cx(\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer),\n classes?.summaryContainer\n )}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(\n wizardContentClasses.contentContainer,\n fixedHeight && wizardContentClasses.fixedHeight,\n css(styles.contentContainer),\n fixedHeight && css(styles.fixedHeight),\n classes?.contentContainer,\n fixedHeight && classes?.fixedHeight\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loadingContainerClasses.js","sources":["../../../../../src/components/Wizard/WizardContent/loadingContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardLoadingContainerClasses = {\n loading?: string;\n overlay?: string;\n blur?: string;\n};\n\nconst classKeys: (keyof HvWizardLoadingContainerClasses)[] = [\n \"blur\",\n \"loading\",\n \"overlay\",\n];\n\nconst wizardLoadingContainerClasses = getClasses(\n classKeys,\n \"HvWizard-LoadingContainer\"\n);\n\nexport default wizardLoadingContainerClasses;\n"],"names":["classKeys","wizardLoadingContainerClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAuD,CAC3D,QACA,WACA,SAAS;AAGX,MAAMC,gCAAgCC,WACpCF,WACA,
|
|
1
|
+
{"version":3,"file":"loadingContainerClasses.js","sources":["../../../../../src/components/Wizard/WizardContent/loadingContainerClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardLoadingContainerClasses = {\n loading?: string;\n overlay?: string;\n blur?: string;\n};\n\nconst classKeys: (keyof HvWizardLoadingContainerClasses)[] = [\n \"blur\",\n \"loading\",\n \"overlay\",\n];\n\nconst wizardLoadingContainerClasses = getClasses(\n classKeys,\n \"HvWizard-LoadingContainer\"\n);\n\nexport default wizardLoadingContainerClasses;\n"],"names":["classKeys","wizardLoadingContainerClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAuD,CAC3D,QACA,WACA,SAAS;AAGX,MAAMC,gCAAgCC,WACpCF,WACA,2BACF;AAEA,MAAA,kCAAeC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.js","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, summary, setSummary, tab, setTab } =\n useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []);\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogTitle\n className={cx(\n wizardTitleClasses.headerContainer,\n css(styles.headerContainer),\n classes?.headerContainer\n )}\n classes={{\n messageContainer: cx(\n wizardTitleClasses.messageContainer,\n css(styles.messageContainer),\n classes?.messageContainer\n ),\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={cx(\n wizardTitleClasses.titleContainer,\n css(styles.titleContainer),\n classes?.titleContainer\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={cx(\n wizardTitleClasses.stepContainer,\n css(styles.stepContainer),\n classes?.stepContainer\n )}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={cx(\n wizardTitleClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n classes={{\n root: cx(\n wizardTitleClasses.rootSummaryButton,\n css(styles.rootSummaryButton),\n classes?.rootSummaryButton\n ),\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n )}\n </ClassNames>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":";;;;;;;;;AA+BA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC;AAAAA,EACAC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACzCC,WAAWC,eAAe;AAE5B,QAAM,CAACC,OAAOC,QAAQ,IAAIC,SAAwB,CAAE,CAAA;AAEpDC,YAAU,MAAM;AACVT,QAAAA,YAAY,QAAQL,YAAY;AAClCM,iBAAW,KAAK;AAAA,IAClB;AAEA,WAAO,MAAM;AACXA,iBAAW,KAAK;AAAA,IAAA;AAAA,EAEpB,GAAG,CAAE,CAAA;AAELQ,YAAU,MAAM;AACRC,UAAAA,eAAeC,OAAOC,QAAQb,OAAO;AAE3C,QAAIW,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG1B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOsB,yCAAYC,SAAS,GAAE3B,QAAQ;AAAA,UACtCF,OAAOD,eAAe6B,YAAYd,KAAKZ,KAAK;AAAA,UAC5C4B,SAASA,MAAMf,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, summary, setSummary, tab, setTab } =\n useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n if (summary === null && hasSummary) {\n setSummary(false);\n }\n\n return () => {\n setSummary(false);\n };\n }, []);\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n const toggleSummary = () => {\n setSummary((oldSummary) => !oldSummary);\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvDialogTitle\n className={cx(\n wizardTitleClasses.headerContainer,\n css(styles.headerContainer),\n classes?.headerContainer\n )}\n classes={{\n messageContainer: cx(\n wizardTitleClasses.messageContainer,\n css(styles.messageContainer),\n classes?.messageContainer\n ),\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={cx(\n wizardTitleClasses.titleContainer,\n css(styles.titleContainer),\n classes?.titleContainer\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={cx(\n wizardTitleClasses.stepContainer,\n css(styles.stepContainer),\n classes?.stepContainer\n )}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={cx(\n wizardTitleClasses.buttonWidth,\n css(styles.buttonWidth),\n classes?.buttonWidth\n )}\n classes={{\n root: cx(\n wizardTitleClasses.rootSummaryButton,\n css(styles.rootSummaryButton),\n classes?.rootSummaryButton\n ),\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n )}\n </ClassNames>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -29,8 +29,11 @@
|
|
|
29
29
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@emotion/
|
|
33
|
-
"@
|
|
32
|
+
"@emotion/css": "^11.11.0",
|
|
33
|
+
"@emotion/serialize": "^1.1.2",
|
|
34
|
+
"@hitachivantara/uikit-react-core": "^5.16.0",
|
|
35
|
+
"@hitachivantara/uikit-react-icons": "^5.2.1",
|
|
36
|
+
"@hitachivantara/uikit-styles": "^5.8.3",
|
|
34
37
|
"clsx": "^1.2.1",
|
|
35
38
|
"usehooks-ts": "^2.9.1"
|
|
36
39
|
},
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
"access": "public",
|
|
42
45
|
"directory": "package"
|
|
43
46
|
},
|
|
44
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "5f85a968b98dde34c02f092068b09819335551ba",
|
|
45
48
|
"main": "dist/cjs/index.cjs",
|
|
46
49
|
"exports": {
|
|
47
50
|
".": {
|