npm - @hitachivantara/uikit-react-core - Versions diffs - 5.7.0 → 5.7.2 - Mend

@hitachivantara/uikit-react-core 5.7.0 → 5.7.2

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

Files changed (89) hide show

package/dist/cjs/components/InlineEditor/InlineEditor.cjs CHANGED Viewed

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const react = require("@emotion/react");
 const React = require("react");
 const inlineEditorClasses = require("./inlineEditorClasses.cjs");
@@ -76,15 +75,16 @@ const HvInlineEditor = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: clsx.clsx(className, inlineEditorClasses.default.root, classes == null ? void 0 : classes.root, css(InlineEditor_styles.styles.root)),
+      className: cx(inlineEditorClasses.default.root, css(InlineEditor_styles.styles.root), className, classes == null ? void 0 : classes.root),
       children: editMode ? /* @__PURE__ */ jsxRuntime.jsx(InputComponent, {
         inputRef,
         classes: {
-          root: clsx.clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.default.inputRoot),
-          input: clsx.clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.default.input, css(InlineEditor_styles.styles.input)),
-          inputBorderContainer: clsx.clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.default.inputBorderContainer, css(InlineEditor_styles.styles.inputBorderContainer))
+          root: cx(inlineEditorClasses.default.inputRoot, classes == null ? void 0 : classes.inputRoot),
+          input: cx(inlineEditorClasses.default.input, css(InlineEditor_styles.styles.input), classes == null ? void 0 : classes.input),
+          inputBorderContainer: cx(inlineEditorClasses.default.inputBorderContainer, css(InlineEditor_styles.styles.inputBorderContainer), classes == null ? void 0 : classes.inputBorderContainer)
         },
         inputProps: {
           style: {
@@ -100,19 +100,19 @@ const HvInlineEditor = ({
       }) : /* @__PURE__ */ jsxRuntime.jsxs(Button.HvButton, {
         variant: "secondaryGhost",
         overrideIconColors: false,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, inlineEditorClasses.default.button, css(InlineEditor_styles.styles.button), parseInt(lineHeight, 10) >= 28 && clsx.clsx(classes == null ? void 0 : classes.largeText, inlineEditorClasses.default.largeText, css(InlineEditor_styles.styles.largeText))),
+        className: cx(inlineEditorClasses.default.button, parseInt(lineHeight, 10) >= 28 && inlineEditorClasses.default.largeText, css(InlineEditor_styles.styles.button), parseInt(lineHeight, 10) >= 28 && css(InlineEditor_styles.styles.largeText), classes == null ? void 0 : classes.button, parseInt(lineHeight, 10) >= 28 && (classes == null ? void 0 : classes.largeText)),
         onClick: handleClick,
         ...buttonProps,
         children: [/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
           variant,
           noWrap: true,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, inlineEditorClasses.default.text, css(InlineEditor_styles.styles.text), !value && clsx.clsx(classes == null ? void 0 : classes.textEmpty, inlineEditorClasses.default.textEmpty, css(InlineEditor_styles.styles.textEmpty))),
+          className: cx(inlineEditorClasses.default.text, !value && inlineEditorClasses.default.textEmpty, css(InlineEditor_styles.styles.text), !value && css(InlineEditor_styles.styles.textEmpty), classes == null ? void 0 : classes.text, !value && (classes == null ? void 0 : classes.textEmpty)),
           ...typographyProps,
           children: value || placeholder
         }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, {
           color: "secondary_60",
           role: "presentation",
-          className: clsx.clsx(classes == null ? void 0 : classes.icon, inlineEditorClasses.default.icon, css(InlineEditor_styles.styles.icon), showIcon && clsx.clsx(classes == null ? void 0 : classes.iconVisible, inlineEditorClasses.default.iconVisible, css(InlineEditor_styles.styles.iconVisible)))
+          className: cx(inlineEditorClasses.default.icon, showIcon && inlineEditorClasses.default.iconVisible, css(InlineEditor_styles.styles.icon), showIcon && css(InlineEditor_styles.styles.iconVisible), classes == null ? void 0 : classes.icon, showIcon && (classes == null ? void 0 : classes.iconVisible))
         })]
       })
     })

package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n HvButtonProps,\n HvTypographyVariants,\n HvTypographyProps,\n HvInput,\n HvButton,\n HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n extends HvBaseProps<HTMLDivElement, \"onBlur\" \| \"onChange\"> {\n /** The value of the form element. /\n value?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) /\n component?: React.ElementType;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n let typographyStyles = {};\n Object.keys(typography).map((k) => {\n typographyStyles[k] = getVarValue(typography[k]);\n });\n return typographyStyles;\n};\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n className,\n classes,\n value: valueProp,\n defaultValue,\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n ...others\n}: HvInlineEditorProps) => {\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n\n const typographyStyles = getTypographyStyles(theme.typography[variant] \|\| {});\n const { lineHeight } = typographyStyles;\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Esc)) {\n setEditMode(false);\n setValue(cachedValue);\n }\n onKeyDown?.(event);\n };\n\n const handleChange = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n className,\n inlineEditorClasses.root,\n classes?.root,\n css(styles.root)\n )}\n >\n {editMode ? (\n <InputComponent\n inputRef={inputRef}\n classes={{\n root: clsx(classes?.inputRoot, inlineEditorClasses.inputRoot),\n input: clsx(\n classes?.input,\n inlineEditorClasses.input,\n css(styles.input)\n ),\n inputBorderContainer: clsx(\n classes?.inputBorderContainer,\n inlineEditorClasses.inputBorderContainer,\n css(styles.inputBorderContainer)\n ),\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n className={clsx(\n classes?.button,\n inlineEditorClasses.button,\n css(styles.button),\n parseInt(lineHeight as string, 10) >= 28 &&\n clsx(\n classes?.largeText,\n inlineEditorClasses.largeText,\n css(styles.largeText)\n )\n )}\n onClick={handleClick}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={clsx(\n classes?.text,\n inlineEditorClasses.text,\n css(styles.text),\n !value &&\n clsx(\n classes?.textEmpty,\n inlineEditorClasses.textEmpty,\n css(styles.textEmpty)\n )\n )}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n <Edit\n color=\"secondary_60\"\n role=\"presentation\"\n className={clsx(\n classes?.icon,\n inlineEditorClasses.icon,\n css(styles.icon),\n showIcon &&\n clsx(\n classes?.iconVisible,\n inlineEditorClasses.iconVisible,\n css(styles.iconVisible)\n )\n )}\n />\n </HvButton>\n )}\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","clsx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":"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"}
1	+ {"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useControlled } from \"@core/hooks\";\nimport { getVarValue, isKeypress, keyboardCodes } from \"@core/utils\";\nimport {\n HvButtonProps,\n HvTypographyVariants,\n HvTypographyProps,\n HvInput,\n HvButton,\n HvTypography,\n} from \"@core/components\";\nimport inlineEditorClasses, {\n HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\nimport { styles } from \"./InlineEditor.styles\";\nimport { HvThemeTypographyProps, theme } from \"@hitachivantara/uikit-styles\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nexport interface HvInlineEditorProps\n extends HvBaseProps<HTMLDivElement, \"onBlur\" \| \"onChange\"> {\n /** The value of the form element. /\n value?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) /\n component?: React.ElementType;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n}\n\nconst getTypographyStyles = (typography): HvThemeTypographyProps => {\n let typographyStyles = {};\n Object.keys(typography).map((k) => {\n typographyStyles[k] = getVarValue(typography[k]);\n });\n return typographyStyles;\n};\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = ({\n className,\n classes,\n value: valueProp,\n defaultValue,\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n ...others\n}: HvInlineEditorProps) => {\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n\n const typographyStyles = getTypographyStyles(theme.typography[variant] \|\| {});\n const { lineHeight } = typographyStyles;\n\n useLayoutEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Esc)) {\n setEditMode(false);\n setValue(cachedValue);\n }\n onKeyDown?.(event);\n };\n\n const handleChange = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n inlineEditorClasses.root,\n css(styles.root),\n className,\n classes?.root\n )}\n >\n {editMode ? (\n <InputComponent\n inputRef={inputRef}\n classes={{\n root: cx(inlineEditorClasses.inputRoot, classes?.inputRoot),\n input: cx(\n inlineEditorClasses.input,\n css(styles.input),\n classes?.input\n ),\n inputBorderContainer: cx(\n inlineEditorClasses.inputBorderContainer,\n css(styles.inputBorderContainer),\n classes?.inputBorderContainer\n ),\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n className={cx(\n inlineEditorClasses.button,\n parseInt(lineHeight as string, 10) >= 28 &&\n inlineEditorClasses.largeText,\n css(styles.button),\n parseInt(lineHeight as string, 10) >= 28 &&\n css(styles.largeText),\n classes?.button,\n parseInt(lineHeight as string, 10) >= 28 && classes?.largeText\n )}\n onClick={handleClick}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={cx(\n inlineEditorClasses.text,\n !value && inlineEditorClasses.textEmpty,\n css(styles.text),\n !value && css(styles.textEmpty),\n classes?.text,\n !value && classes?.textEmpty\n )}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n <Edit\n color=\"secondary_60\"\n role=\"presentation\"\n className={cx(\n inlineEditorClasses.icon,\n showIcon && inlineEditorClasses.iconVisible,\n css(styles.icon),\n showIcon && css(styles.iconVisible),\n classes?.icon,\n showIcon && classes?.iconVisible\n )}\n />\n </HvButton>\n )}\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["getTypographyStyles","typography","typographyStyles","Object","keys","map","k","getVarValue","HvInlineEditor","className","classes","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","others","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","theme","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKeypress","keyboardCodes","Esc","handleChange","val","ClassNames","children","css","cx","inlineEditorClasses","root","styles","_jsx","inputRoot","inputBorderContainer","inputProps","style","height","undefined","_jsxs","HvButton","overrideIconColors","button","parseInt","largeText","onClick","HvTypography","noWrap","text","textEmpty","Edit","color","role","icon","iconVisible"],"mappings":";;;;;;;;;;;;;;;;AA6CA,MAAMA,sBAAsBA,CAACC,eAAuC;AAClE,MAAIC,mBAAmB,CAAA;AACvBC,SAAOC,KAAKH,UAAU,EAAEI,IAAKC,CAAM,MAAA;AACjCJ,qBAAiBI,CAAC,IAAIC,MAAAA,YAAYN,WAAWK,CAAC,CAAC;AAAA,EAAA,CAChD;AACMJ,SAAAA;AACT;AAMO,MAAMM,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,WAAWC,iBAAiBC,MAAAA;AAAAA,EAC5BC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACzB,QAAM,CAACd,OAAOe,QAAQ,IAAIC,cAAAA,cAAcf,WAAWC,YAAY;AAC/D,QAAM,CAACe,UAAUC,WAAW,IAAIC,eAAS,KAAK;AAC9C,QAAM,CAACC,aAAaC,cAAc,IAAIF,eAASnB,KAAK;AACpD,QAAMsB,WAAWC,MAAAA;AAEjB,QAAMhC,mBAAmBF,oBAAoBmC,YAAAA,MAAMlC,WAAWiB,OAAO,KAAK,CAAA,CAAE;AACtE,QAAA;AAAA,IAAEkB;AAAAA,EAAelC,IAAAA;AAEvBmC,QAAAA,gBAAgB,MAAM;AACpB,UAAMC,QAAQL,SAASM;AACvB,QAAIX,YAAYU,OAAO;AACrBA,YAAME,MAAO;AACbF,YAAMG,OAAQ;AAAA,IAChB;AAAA,EAAA,GACC,CAACb,QAAQ,CAAC;AAEb,QAAMc,cAAcA,MAAM;AACxBb,gBAAY,IAAI;AAChBG,mBAAerB,KAAK;AAAA,EAAA;AAGtB,QAAMgC,aAAcC,CAAU,UAAA;AAC5Bf,gBAAY,KAAK;AAEjB,UAAMgB,WAAWlC,SAASoB;AAC1BL,aAASmB,QAAQ;AACjBzB,qCAASwB,OAAOC;AAAAA,EAAQ;AAG1B,QAAMC,gBAAiBF,CAAU,UAAA;AAC/B,QAAIG,oBAAWH,OAAOI,cAAcC,cAAAA,GAAG,GAAG;AACxCpB,kBAAY,KAAK;AACjBH,eAASK,WAAW;AAAA,IACtB;AACAT,2CAAYsB;AAAAA,EAAK;AAGbM,QAAAA,eAAeA,CAACN,OAAOO,QAAQ;AACnCzB,aAASyB,GAAG;AACZ9B,yCAAWuB,OAAOO;AAAAA,EAAG;AAGvB,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACE9C,WAAW8C,GACTC,4BAAoBC,MACpBH,IAAII,2BAAOD,IAAI,GACfhD,WACAC,mCAAS+C,IAAI;AAAA,MACbJ,UAEDzB,WACC+B,2BAAAA,IAAC3C,gBAAc;AAAA,QACbiB;AAAAA,QACAvB,SAAS;AAAA,UACP+C,MAAMF,GAAGC,oBAAAA,QAAoBI,WAAWlD,mCAASkD,SAAS;AAAA,UAC1DtB,OAAOiB,GACLC,oBAAoBlB,QAAAA,OACpBgB,IAAII,oBAAAA,OAAOpB,KAAK,GAChB5B,mCAAS4B,KAAK;AAAA,UAEhBuB,sBAAsBN,GACpBC,oBAAoBK,QAAAA,sBACpBP,IAAII,oBAAAA,OAAOG,oBAAoB,GAC/BnD,mCAASmD,oBAAoB;AAAA,QAEjC;AAAA,QACAC,YAAY;AAAA,UACVC,OAAO;AAAA,YACL,GAAG7D;AAAAA,YACH8D,QAAQhD,mBAAmBC,gBAAUmB,aAAa6B;AAAAA,UACpD;AAAA,QACF;AAAA,QACAtD;AAAAA,QACAS,QAAQuB;AAAAA,QACRtB,UAAU6B;AAAAA,QACV5B,WAAWwB;AAAAA,QAAc,GACrBrB;AAAAA,MAAAA,CACJ,IAEFyC,2BAAAA,KAACC,iBAAQ;AAAA,QACPjD,SAAQ;AAAA,QACRkD,oBAAoB;AAAA,QACpB3D,WAAW8C,GACTC,oBAAoBa,QAAAA,QACpBC,SAASlC,YAAsB,EAAE,KAAK,MACpCoB,oBAAAA,QAAoBe,WACtBjB,IAAII,oBAAAA,OAAOW,MAAM,GACjBC,SAASlC,YAAsB,EAAE,KAAK,MACpCkB,IAAII,oBAAAA,OAAOa,SAAS,GACtB7D,mCAAS2D,QACTC,SAASlC,YAAsB,EAAE,KAAK,OAAM1B,mCAAS6D,UAAS;AAAA,QAEhEC,SAAS9B;AAAAA,QAAY,GACjBnB;AAAAA,QAAW8B,UAAA,CAEfM,2BAAAA,IAACc,yBAAY;AAAA,UACXvD;AAAAA,UACAwD,QAAM;AAAA,UACNjE,WAAW8C,GACTC,oBAAoBmB,QAAAA,MACpB,CAAChE,SAAS6C,oBAAAA,QAAoBoB,WAC9BtB,IAAII,oBAAAA,OAAOiB,IAAI,GACf,CAAChE,SAAS2C,IAAII,oBAAAA,OAAOkB,SAAS,GAC9BlE,mCAASiE,MACT,CAAChE,UAASD,mCAASkE,UAAS;AAAA,UAC5B,GACEpD;AAAAA,UAAe6B,UAElB1C,SAASQ;AAAAA,QAAAA,CACG,GACfwC,2BAAAA,IAACkB,sBAAI;AAAA,UACHC,OAAM;AAAA,UACNC,MAAK;AAAA,UACLtE,WAAW8C,GACTC,oBAAAA,QAAoBwB,MACpBlE,YAAY0C,4BAAoByB,aAChC3B,IAAII,2BAAOsB,IAAI,GACflE,YAAYwC,IAAII,2BAAOuB,WAAW,GAClCvE,mCAASsE,MACTlE,aAAYJ,mCAASuE,YAAW;AAAA,QAAA,CAElC,CAAA;AAAA,MAAA,CAAA;AAAA,IAAA,CAEL;AAAA,EAAA,CAGM;AAEjB;;"}

package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs CHANGED Viewed

@@ -7,16 +7,14 @@ const inputClasses = require("../Input/inputClasses.cjs");
 const styles = {
   root: {
     [`& .${baseInputClasses.default.inputRoot}.${inputClasses.default.inputRoot}`]: {
-      height: "100%"
+      height: "100%",
+      minHeight: "32px"
     }
   },
   inputBorderContainer: {
     top: "unset",
     bottom: 0
   },
-  input: {
-    padding: uikitStyles.theme.spacing([0, "8px"])
-  },
   text: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -27,23 +25,26 @@ const styles = {
     color: uikitStyles.theme.typography.placeholderText.color
   },
   button: {
-    padding: uikitStyles.theme.spacing([0, "8px"]),
+    padding: uikitStyles.theme.spacing(["6px", "8px", "5px", "8px"]),
+    minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",
     height: "100%",
     width: "100%",
     maxWidth: "100%",
     justifyContent: "flex-start",
+    alignItems: "center",
     backgroundColor: "transparent",
+    border: `${uikitStyles.theme.inlineEditor.borderWidth} solid transparent`,
     "&:hover, &:focus": {
-      outline: `1px solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
+      border: `${uikitStyles.theme.inlineEditor.borderWidth} solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.default.icon}`]: {
         visibility: "visible"
       }
     },
     "&:active": {
-      outline: `1px solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
+      border: `${uikitStyles.theme.inlineEditor.borderWidth} solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
       backgroundColor: "transparent",
       [`& .${inlineEditorClasses.default.icon}`]: {
         visibility: "visible"
@@ -53,21 +54,22 @@ const styles = {
       width: "100%"
     },
     "& > div > span": {
-      width: "100%",
-      overflow: "hidden"
+      width: "100%"
     }
   },
   icon: {
     cursor: "pointer",
     visibility: "hidden",
-    minWidth: 32,
-    alignSelf: "center"
+    alignSelf: "center",
+    height: "16px",
+    width: "32px",
+    minWidth: "32px",
+    "& svg": {
+      margin: uikitStyles.theme.spacing([0, "8px"])
+    }
   },
   iconVisible: {
     visibility: "visible"
-  },
-  largeText: {
-    margin: uikitStyles.theme.spacing([0, "8px"])
   }
 };
 exports.styles = styles;

package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\nimport inlineEditorClasses, {\n HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\n\nexport const styles: Partial<\n Record<keyof HvInlineEditorClasses, CSSInterpolation>\n> = {\n root: {\n [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n height: \"100%\",\n },\n },\n inputBorderContainer: {\n top: \"unset\",\n bottom: 0,\n },\n ~~input: {\n padding: theme.spacing([0, \"8px\"]),\n },\n~~ text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n alignSelf: \"center\",\n },\n textEmpty: {\n color: theme.typography.placeholderText.color,\n },\n button: {\n padding: theme.spacing([0, \"8px\"]),\n boxSizing: \"border-box\",\n cursor: \"text\",\n height: \"100%\",\n width: \"100%\",\n maxWidth: \"100%\",\n justifyContent: \"flex-start\",\n\n backgroundColor: \"transparent\",\n \"&:hover, &:focus\": {\n ~~outline~~: ~~`1px~~ solid ${theme.inlineEditor.hoverBorderColor}`,\n backgroundColor: \"transparent\",\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n \"&:active\": {\n ~~outline~~: ~~`1px~~ solid ${theme.inlineEditor.activeBorderColor}`,\n backgroundColor: \"transparent\",\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n \"& > div\": {\n width: \"100%\",\n },\n \"& > div > span\": {\n width: \"100%\",\n ~~overflow: \"hidden\",\n~~ },\n },\n icon: {\n cursor: \"pointer\",\n visibility: \"hidden\",\n ~~minWidth~~: 32,\n ~~alignSelf~~: \"~~center~~\",\n ~~},\n iconVisible~~: {\n ~~visibility~~: \"~~visible~~\",\n ~~},\~~n ~~largeText~~: {\n margin: theme.spacing([0, \"8px\"]),\n },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","inputBorderContainer","top","bottom","~~input","padding","theme","spacing","~~text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","typography","placeholderText","button","boxSizing","cursor","width","maxWidth","justifyContent","backgroundColor","~~outline~~","inlineEditor","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","~~iconVisible~~","~~largeText~~"~~,"margin"~~],"mappings":";;;;;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,yBAAiBC,aAAaC,aAAAA,QAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,~~IACV~~;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,~~OAAO;AAAA,IACLC,SAASC,YAAAA,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EACnC;AAAA,EACAC,~~MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,~~OAAOR~~,~~YAAMS~~,MAAAA,WAAWC,~~gBAAgBF~~;AAAAA,EAC1C;AAAA,~~EACAG~~,QAAQ;AAAA,~~IACNZ~~,~~SAASC~~,~~YAAAA~~,~~MAAMC,~~QAAQ,CAAC,~~GAAG~~,KAAK,CAAC;AAAA,~~IACjCW~~,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,~~IAEhBC~~,iBAAiB;AAAA,~~IACjB~~,oBAAoB;AAAA,~~MAClBC~~,~~SAAU~~,~~aAAYlB~~,YAAAA,~~MAAMmB~~,aAAaC;AAAAA,~~MACzCH~~,iBAAiB;AAAA,~~MACjB~~,CAAE,~~MAAKI~~,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,~~IACA~~,YAAY;AAAA,~~MACVL~~,~~SAAU~~,~~aAAYlB~~,YAAAA,~~MAAMmB~~,~~aAAaK~~;AAAAA,~~MACzCP~~,iBAAiB;AAAA,~~MACjB~~,CAAE,~~MAAKI~~,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,~~IACA~~,WAAW;AAAA,~~MACTT~~,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,~~MACPX,UAAU~~;AAAA,~~IACZ;AAAA,~~EACF;AAAA,~~EACAmB~~,MAAM;AAAA,~~IACJT~~,QAAQ;AAAA,~~IACRU~~,YAAY;AAAA,~~IACZE~~,~~UAAU~~;AAAA,~~IACVnB~~,~~WAAW~~;AAAA,~~EACb;AAAA~~,~~EACAoB,aAAa~~;AAAA,~~IACXH~~,~~YAAY~~;AAAA,~~EACd;AAAA~~,~~EACAI,WAAW~~;AAAA,~~IACTC~~,~~QAAQ5B~~,YAAAA,~~MAAMC~~,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,~~EAClC~~;AACF;;"}
1	+ {"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\nimport inlineEditorClasses, {\n HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\n\nexport const styles: Partial<\n Record<keyof HvInlineEditorClasses, CSSInterpolation>\n> = {\n root: {\n [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n height: \"100%\",\n minHeight: \"32px\",\n },\n },\n inputBorderContainer: {\n top: \"unset\",\n bottom: 0,\n },\n text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n alignSelf: \"center\",\n },\n textEmpty: {\n color: theme.typography.placeholderText.color,\n },\n button: {\n padding: theme.spacing([\"6px\", \"8px\", \"5px\", \"8px\"]),\n minHeight: \"32px\",\n\n boxSizing: \"border-box\",\n cursor: \"text\",\n height: \"100%\",\n width: \"100%\",\n maxWidth: \"100%\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n backgroundColor: \"transparent\",\n border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n \"&:hover, &:focus\": {\n border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n backgroundColor: \"transparent\",\n\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n\n \"&:active\": {\n border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n backgroundColor: \"transparent\",\n\n [`& .${inlineEditorClasses.icon}`]: {\n visibility: \"visible\",\n },\n },\n\n \"& > div\": {\n width: \"100%\",\n },\n \"& > div > span\": {\n width: \"100%\",\n },\n },\n icon: {\n cursor: \"pointer\",\n visibility: \"hidden\",\n alignSelf: \"center\",\n height: \"16px\",\n width: \"32px\",\n minWidth: \"32px\",\n\n \"& svg\": {\n margin: theme.spacing([0, \"8px\"]),\n },\n },\n iconVisible: {\n visibility: \"visible\",\n },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","theme","typography","placeholderText","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","margin","iconVisible"],"mappings":";;;;;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,yBAAiBC,aAAaC,aAAAA,QAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOC,YAAMC,MAAAA,WAAWC,gBAAgBH;AAAAA,EAC1C;AAAA,EACAI,QAAQ;AAAA,IACNC,SAASJ,kBAAMK,QAAQ,CAAC,OAAO,OAAO,OAAO,KAAK,CAAC;AAAA,IACnDhB,WAAW;AAAA,IAEXiB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,YAAAA,MAAMc,aAAaC;AAAAA,IAE9B,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,YAAAA,MAAMc,aAAaC,qBAAqBf,kBAAMc,aAAaE;AAAAA,MACtEJ,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVN,QAAS,GAAEb,YAAAA,MAAMc,aAAaC,qBAAqBf,kBAAMc,aAAaM;AAAAA,MACtER,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,4BAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTX,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAU,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRY,YAAY;AAAA,IACZtB,WAAW;AAAA,IACXT,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPa,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQtB,YAAAA,MAAMK,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IAClC;AAAA,EACF;AAAA,EACAkB,aAAa;AAAA,IACXJ,YAAY;AAAA,EACd;AACF;;"}

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs CHANGED Viewed

@@ -93,13 +93,13 @@ const RuleGroup = ({
     }) => {
       var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(queryBuilderClasses.default.root, css(RuleGroup_styles.styles.root), classes == null ? void 0 : classes.root, level === 0 ? cx(queryBuilderClasses.default.topGroup, css(RuleGroup_styles.styles.topGroup), classes == null ? void 0 : classes.topGroup) : cx(queryBuilderClasses.default.subGroup, css(RuleGroup_styles.styles.subGroup), classes == null ? void 0 : classes.subGroup)),
+        className: cx(queryBuilderClasses.default.root, level === 0 ? queryBuilderClasses.default.topGroup : queryBuilderClasses.default.subGroup, css(RuleGroup_styles.styles.root), level === 0 ? css(RuleGroup_styles.styles.topGroup) : css(RuleGroup_styles.styles.subGroup), classes == null ? void 0 : classes.root, level === 0 ? classes == null ? void 0 : classes.topGroup : classes == null ? void 0 : classes.subGroup),
         children: [/* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, {
           container: true,
           children: [/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, {
-              className: cx(queryBuilderClasses.default.combinator, css(RuleGroup_styles.styles.combinator), classes == null ? void 0 : classes.combinator, queryBuilderClasses.default.topCombinator, css(RuleGroup_styles.styles.topCombinator), classes == null ? void 0 : classes.topCombinator),
+              className: cx(queryBuilderClasses.default.combinator, queryBuilderClasses.default.topCombinator, css(RuleGroup_styles.styles.combinator), css(RuleGroup_styles.styles.topCombinator), classes == null ? void 0 : classes.combinator, classes == null ? void 0 : classes.topCombinator),
               disabled: readOnly,
               children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
                 className: cx(queryBuilderClasses.default.combinatorButton, css(RuleGroup_styles.styles.combinatorButton), classes == null ? void 0 : classes.combinatorButton),
@@ -113,7 +113,7 @@ const RuleGroup = ({
           }), /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
             children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-              className: cx(queryBuilderClasses.default.buttonBackground, css(RuleGroup_styles.styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground, queryBuilderClasses.default.topRemoveButton, css(RuleGroup_styles.styles.topRemoveButton), classes == null ? void 0 : classes.topRemoveButton),
+              className: cx(queryBuilderClasses.default.buttonBackground, queryBuilderClasses.default.topRemoveButton, css(RuleGroup_styles.styles.buttonBackground), css(RuleGroup_styles.styles.topRemoveButton), classes == null ? void 0 : classes.buttonBackground, classes == null ? void 0 : classes.topRemoveButton),
               children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
                 icon: true,
                 className: cx(queryBuilderClasses.default.removeButton, css(RuleGroup_styles.styles.removeButton), classes == null ? void 0 : classes.removeButton),
@@ -135,7 +135,7 @@ const RuleGroup = ({
             })
           })]
         }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: cx(queryBuilderClasses.default.rulesContainer, css(RuleGroup_styles.styles.rulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 ? cx(queryBuilderClasses.default.subRulesContainer, css(RuleGroup_styles.styles.subRulesContainer), classes == null ? void 0 : classes.subRulesContainer) : "", level === 0 ? cx(queryBuilderClasses.default.topRulesContainer, css(RuleGroup_styles.styles.topRulesContainer), classes == null ? void 0 : classes.topRulesContainer) : ""),
+          className: cx(queryBuilderClasses.default.rulesContainer, level > 0 && queryBuilderClasses.default.subRulesContainer, level === 0 && queryBuilderClasses.default.topRulesContainer, css(RuleGroup_styles.styles.rulesContainer), level > 0 && css(RuleGroup_styles.styles.subRulesContainer), level === 0 && css(RuleGroup_styles.styles.topRulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 && (classes == null ? void 0 : classes.subRulesContainer), level === 0 && (classes == null ? void 0 : classes.topRulesContainer)),
           children: rules.map((rule, index) => {
             if ("combinator" in rule) {
               return /* @__PURE__ */ jsxRuntime.jsx(RuleGroup, {
@@ -200,7 +200,7 @@ const RuleGroup = ({
           container: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
             item: true,
-            className: cx(queryBuilderClasses.default.actionButtonContainer, css(RuleGroup_styles.styles.actionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, queryBuilderClasses.default.topActionButtonContainer, css(RuleGroup_styles.styles.topActionButtonContainer), classes == null ? void 0 : classes.topActionButtonContainer),
+            className: cx(queryBuilderClasses.default.actionButtonContainer, queryBuilderClasses.default.topActionButtonContainer, css(RuleGroup_styles.styles.actionButtonContainer), css(RuleGroup_styles.styles.topActionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, classes == null ? void 0 : classes.topActionButtonContainer),
             children: actionButtons
           })
         })]

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvButton,\n HvEmptyState,\n HvGrid,\n HvMultiButton,\n HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n /*\n Override or extend the styles applied to the component.\n * See CSS API tab for more details.\n */\n classes?: HvQueryBuilderClasses;\n id?: number;\n level?: number;\n combinator?: string;\n rules?: any[];\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes,\n}: RuleGroupProps) => {\n const context = useContext(QueryBuilderContext);\n\n const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n context;\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n )}\n </ClassNames>\n );\n\n const DeleteIcon = withTooltip(\n () => (\n <ClassNames>\n {({ css, cx }) => (\n <Delete\n className={\n readOnly\n ? cx(\n queryBuilderClasses.topRemoveButtonDisabled,\n css(styles.topRemoveButtonDisabled),\n classes?.topRemoveButtonDisabled\n )\n : \"\"\n }\n />\n )}\n </ClassNames>\n ),\n level === 0 && labels.query?.delete?.tooltip\n ? labels.query?.delete?.tooltip\n : labels.group.delete.tooltip,\n \"top\"\n );\n\n const onClickCombinator = useCallback(\n (item) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n queryBuilderClasses.root,\n css(styles.root),\n classes?.root,\n level === 0\n ? cx(\n queryBuilderClasses.topGroup,\n css(styles.topGroup),\n classes?.topGroup\n )\n : cx(\n queryBuilderClasses.subGroup,\n css(styles.subGroup),\n classes?.subGroup\n )\n )}\n >\n <HvGrid container>\n <HvGrid item>\n <HvMultiButton\n className={cx(\n queryBuilderClasses.combinator,\n css(styles.combinator),\n classes?.combinator,\n queryBuilderClasses.topCombinator,\n css(styles.topCombinator),\n classes?.topCombinator\n )}\n disabled={readOnly}\n >\n {combinators &&\n combinators.map((item) => (\n <HvButton\n key={item.operand}\n className={cx(\n queryBuilderClasses.combinatorButton,\n css(styles.combinatorButton),\n classes?.combinatorButton\n )}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size={\"xs\"}\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n </HvGrid>\n <HvGrid item>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground,\n queryBuilderClasses.topRemoveButton,\n css(styles.topRemoveButton),\n classes?.topRemoveButton\n )}\n >\n <HvButton\n icon\n className={cx(\n queryBuilderClasses.removeButton,\n css(styles.removeButton),\n classes?.removeButton\n )}\n onClick={() => {\n askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n });\n }}\n aria-label={\n level === 0 && labels.query?.delete?.ariaLabel\n ? labels.query?.delete?.ariaLabel\n : labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n variant=\"secondaryGhost\"\n >\n <DeleteIcon />\n </HvButton>\n </div>\n </HvGrid>\n </HvGrid>\n {rules?.length > 0 && (\n <div\n className={cx(\n queryBuilderClasses.rulesContainer,\n css(styles.rulesContainer),\n classes?.rulesContainer,\n level > 0\n ? cx(\n queryBuilderClasses.subRulesContainer,\n css(styles.subRulesContainer),\n classes?.subRulesContainer\n )\n : \"\",\n level === 0\n ? cx(\n queryBuilderClasses.topRulesContainer,\n css(styles.topRulesContainer),\n classes?.topRulesContainer\n )\n : \"\"\n )}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id ?? index}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id ?? index}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n style={{\n cursor: \"pointer\",\n textDecoration: \"underline\",\n }}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <HvGrid container>\n <HvGrid\n item\n className={cx(\n queryBuilderClasses.actionButtonContainer,\n css(styles.actionButtonContainer),\n classes?.actionButtonContainer,\n queryBuilderClasses.topActionButtonContainer,\n css(styles.topActionButtonContainer),\n classes?.topActionButtonContainer\n )}\n >\n {actionButtons}\n </HvGrid>\n </HvGrid>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
1	+ {"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvButton,\n HvEmptyState,\n HvGrid,\n HvMultiButton,\n HvTypography,\n} from \"@core/components\";\nimport { Rule } from \"../Rule\";\nimport { withTooltip } from \"@core/hocs\";\nimport queryBuilderClasses, {\n HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n /*\n Override or extend the styles applied to the component.\n * See CSS API tab for more details.\n */\n classes?: HvQueryBuilderClasses;\n id?: number;\n level?: number;\n combinator?: string;\n rules?: any[];\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes,\n}: RuleGroupProps) => {\n const context = useContext(QueryBuilderContext);\n\n const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n context;\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n )}\n </ClassNames>\n );\n\n const DeleteIcon = withTooltip(\n () => (\n <ClassNames>\n {({ css, cx }) => (\n <Delete\n className={\n readOnly\n ? cx(\n queryBuilderClasses.topRemoveButtonDisabled,\n css(styles.topRemoveButtonDisabled),\n classes?.topRemoveButtonDisabled\n )\n : \"\"\n }\n />\n )}\n </ClassNames>\n ),\n level === 0 && labels.query?.delete?.tooltip\n ? labels.query?.delete?.tooltip\n : labels.group.delete.tooltip,\n \"top\"\n );\n\n const onClickCombinator = useCallback(\n (item) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n queryBuilderClasses.root,\n level === 0\n ? queryBuilderClasses.topGroup\n : queryBuilderClasses.subGroup,\n css(styles.root),\n level === 0 ? css(styles.topGroup) : css(styles.subGroup),\n classes?.root,\n level === 0 ? classes?.topGroup : classes?.subGroup\n )}\n >\n <HvGrid container>\n <HvGrid item>\n <HvMultiButton\n className={cx(\n queryBuilderClasses.combinator,\n queryBuilderClasses.topCombinator,\n css(styles.combinator),\n css(styles.topCombinator),\n classes?.combinator,\n classes?.topCombinator\n )}\n disabled={readOnly}\n >\n {combinators &&\n combinators.map((item) => (\n <HvButton\n key={item.operand}\n className={cx(\n queryBuilderClasses.combinatorButton,\n css(styles.combinatorButton),\n classes?.combinatorButton\n )}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size={\"xs\"}\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n </HvGrid>\n <HvGrid item>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n queryBuilderClasses.topRemoveButton,\n css(styles.buttonBackground),\n css(styles.topRemoveButton),\n classes?.buttonBackground,\n classes?.topRemoveButton\n )}\n >\n <HvButton\n icon\n className={cx(\n queryBuilderClasses.removeButton,\n css(styles.removeButton),\n classes?.removeButton\n )}\n onClick={() => {\n askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n });\n }}\n aria-label={\n level === 0 && labels.query?.delete?.ariaLabel\n ? labels.query?.delete?.ariaLabel\n : labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n variant=\"secondaryGhost\"\n >\n <DeleteIcon />\n </HvButton>\n </div>\n </HvGrid>\n </HvGrid>\n {rules?.length > 0 && (\n <div\n className={cx(\n queryBuilderClasses.rulesContainer,\n level > 0 && queryBuilderClasses.subRulesContainer,\n level === 0 && queryBuilderClasses.topRulesContainer,\n css(styles.rulesContainer),\n level > 0 && css(styles.subRulesContainer),\n level === 0 && css(styles.topRulesContainer),\n classes?.rulesContainer,\n level > 0 && classes?.subRulesContainer,\n level === 0 && classes?.topRulesContainer\n )}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id ?? index}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id ?? index}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n style={{\n cursor: \"pointer\",\n textDecoration: \"underline\",\n }}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <HvGrid container>\n <HvGrid\n item\n className={cx(\n queryBuilderClasses.actionButtonContainer,\n queryBuilderClasses.topActionButtonContainer,\n css(styles.actionButtonContainer),\n css(styles.topActionButtonContainer),\n classes?.actionButtonContainer,\n classes?.topActionButtonContainer\n )}\n >\n {actionButtons}\n </HvGrid>\n </HvGrid>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const horizontalScrollListItemClasses = require("./horizontalScrollListItemClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const setId = require("../../../../utils/setId.cjs");
@@ -23,10 +22,11 @@ const HvHorizontalScrollListItem = ({
   const Tooltip = tooltipWrapper;
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
       id,
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root)),
+      className: cx(horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         id: buttonId,
@@ -34,12 +34,12 @@ const HvHorizontalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button)),
+        className: cx(horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button), classes == null ? void 0 : classes.button),
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
           id: labelId,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.default.text, css(HorizontalScrollListItem_styles.styles.text), selected && clsx.clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.default.selected, css(HorizontalScrollListItem_styles.styles.selected))),
+          className: cx(horizontalScrollListItemClasses.default.text, selected && horizontalScrollListItemClasses.default.selected, css(HorizontalScrollListItem_styles.styles.text), selected && css(HorizontalScrollListItem_styles.styles.selected), classes == null ? void 0 : classes.text, selected && (classes == null ? void 0 : classes.selected)),
           variant,
           children
         })

package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { ~~clsx } from \"clsx\";\nimport {~~ setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** The text to render. /\n children: React.ReactNode;\n /* A function component that renders a typography wrapped with a tooltip. /\n tooltipWrapper: React.FunctionComponent<{\n id?: string;\n className?: string;\n variant?: HvTypographyProps[\"variant\"];\n children?: React.ReactNode;\n }>;\n /* Whether the element is selected. /\n selected?: boolean;\n /* The function to be executed when the element is clicked. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /* The function to be executed when the element is clicked. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvHorizontalScrollListItemClasses;\n}\n\n/\n HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n id,\n className,\n classes,\n selected,\n children,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n}: HvVerticalScrollListItemProps) => {\n const variant = selected ? \"label\" : \"body\";\n const labelId = setId(id, \"label\");\n const buttonId = setId(id, \"button\");\n const Tooltip = tooltipWrapper;\n\n return (\n <ClassNames>\n {({ css }) => (\n <li\n id={id}\n className={~~clsx~~(\n ~~className,\n classes?.root,\n~~ horizontalScrollListItemClasses.root,\n css(styles.root)\n )}\n aria-current={selected}\n >\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={~~clsx~~(\n ~~classes?.button,\n~~ horizontalScrollListItemClasses.button,\n css(styles.button)\n )}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip\n id={labelId}\n className={~~clsx~~(\n ~~classes?.~~text,\n horizontalScrollListItemClasses.~~text~~,\n css(styles.text),\n selected ~~&&\n clsx~~(\n classes?.~~selected~~,\n ~~horizontalScrollListItemClasses.~~selected~~,\n css(styles.~~selected)\n ~~)\n~~ )}\n variant={variant}\n >\n {children}\n </Tooltip>\n </div>\n </li>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","~~clsx~~","~~root~~","~~horizontalScrollListItemClasses~~","styles","role","tabIndex","button","text"],"mappings":"~~;;;;;;;;AAiCO~~,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAAA,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAAA,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,wCACGO,MAAAA,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,IAAAA,~~qCACF~~,MAAA;AAAA,~~MACEf~~;AAAAA,MACAC,WAAWe,~~KACTf~~,~~KAAAA~~,~~WACAC~~,~~mCAASe~~,~~MACTC~~,~~wCAAgCD~~,~~MAChCF~~,~~IAAII~~,~~uCAAOF~~,IAAI~~,CAAC~~;AAAA,~~MAElB~~,~~gBAAcd~~;AAAAA,MAASC,yCAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,~~KAAAA~~,~~KACTd~~,~~mCAASoB~~,~~QACTJ~~,gCAAAA,~~QAAgCI~~,~~QAChCP~~,~~IAAII~~,~~uCAAOG~~,MAAM~~,CAAC~~;AAAA,~~QAEpB~~,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,yCAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,~~KAAAA~~,~~KACTd~~,~~mCAASqB~~,~~MACTL~~,~~wCAAgCK~~,~~MAChCR~~,IAAII,uCAAOI,IAAI,GACfpB,~~YACEa~~,~~UACEd~~,~~mCAASC~~,~~UACTe~~,~~gCAAgCf~~,~~QAAAA~~,~~UAChCY~~,~~IAAII~~,~~gCAAAA~~,~~OAAOhB,QAAQ,CAAC,CACrB~~;AAAA,~~UAELM~~;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
1	+ {"version":3,"file":"HorizontalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport horizontalScrollListItemClasses, {\n HvHorizontalScrollListItemClasses,\n} from \"./horizontalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { setId } from \"@core/utils\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { styles } from \"./HorizontalScrollListItem.styles\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** The text to render. /\n children: React.ReactNode;\n /* A function component that renders a typography wrapped with a tooltip. /\n tooltipWrapper: React.FunctionComponent<{\n id?: string;\n className?: string;\n variant?: HvTypographyProps[\"variant\"];\n children?: React.ReactNode;\n }>;\n /* Whether the element is selected. /\n selected?: boolean;\n /* The function to be executed when the element is clicked. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /* The function to be executed when the element is clicked. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvHorizontalScrollListItemClasses;\n}\n\n/\n HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n id,\n className,\n classes,\n selected,\n children,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n}: HvVerticalScrollListItemProps) => {\n const variant = selected ? \"label\" : \"body\";\n const labelId = setId(id, \"label\");\n const buttonId = setId(id, \"button\");\n const Tooltip = tooltipWrapper;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <li\n id={id}\n className={cx(\n horizontalScrollListItemClasses.root,\n css(styles.root),\n className,\n classes?.root\n )}\n aria-current={selected}\n >\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={cx(\n horizontalScrollListItemClasses.button,\n css(styles.button),\n classes?.button\n )}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip\n id={labelId}\n className={cx(\n horizontalScrollListItemClasses.text,\n selected && horizontalScrollListItemClasses.selected,\n css(styles.text),\n selected && css(styles.selected),\n classes?.text,\n selected && classes?.selected\n )}\n variant={variant}\n >\n {children}\n </Tooltip>\n </div>\n </li>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","selected","children","onClick","onKeyDown","tooltipWrapper","others","variant","labelId","setId","buttonId","Tooltip","ClassNames","css","cx","horizontalScrollListItemClasses","root","styles","role","tabIndex","button","text"],"mappings":";;;;;;;AAgCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7BC,QAAAA,UAAUN,WAAW,UAAU;AAC/BO,QAAAA,UAAUC,MAAAA,MAAMX,IAAI,OAAO;AAC3BY,QAAAA,WAAWD,MAAAA,MAAMX,IAAI,QAAQ;AACnC,QAAMa,UAAUN;AAEhB,wCACGO,MAAAA,YAAU;AAAA,IAAAV,UACRA,CAAC;AAAA,MAAEW;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACEhB;AAAAA,MACAC,WAAWe,GACTC,wCAAgCC,MAChCH,IAAII,uCAAOD,IAAI,GACfjB,WACAC,mCAASgB,IAAI;AAAA,MAEf,gBAAcf;AAAAA,MAASC,yCAEvB,OAAA;AAAA,QACEJ,IAAIY;AAAAA,QACJQ,MAAK;AAAA,QACLC,UAAU;AAAA,QACVhB;AAAAA,QACAC;AAAAA,QACAL,WAAWe,GACTC,gCAAgCK,QAAAA,QAChCP,IAAII,gCAAAA,OAAOG,MAAM,GACjBpB,mCAASoB,MAAM;AAAA,QAEjB,mBAAiBZ;AAAAA,QAAQ,GACrBF;AAAAA,QAAMJ,yCAETS,SAAO;AAAA,UACNb,IAAIU;AAAAA,UACJT,WAAWe,GACTC,gCAAAA,QAAgCM,MAChCpB,YAAYc,wCAAgCd,UAC5CY,IAAII,uCAAOI,IAAI,GACfpB,YAAYY,IAAII,uCAAOhB,QAAQ,GAC/BD,mCAASqB,MACTpB,aAAYD,mCAASC,SAAQ;AAAA,UAE/BM;AAAAA,UAAiBL;AAAAA,QAAAA,CAER;AAAA,MAAA,CACD;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const scrollToHorizontalClasses = require("./scrollToHorizontalClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
 const React = require("react");
@@ -62,11 +61,12 @@ const HvScrollToHorizontal = ({
   const NotSelected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot)),
+        className: cx(scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot), classes == null ? void 0 : classes.notSelectedRoot),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: clsx.clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected))
+          className: cx(scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected), classes == null ? void 0 : classes.notSelected)
         })
       })
     });
@@ -74,11 +74,12 @@ const HvScrollToHorizontal = ({
   const Selected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
         height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
         width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
-        className: clsx.clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected))
+        className: cx(scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected), classes == null ? void 0 : classes.selected)
       })
     });
   }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
@@ -106,16 +107,17 @@ const HvScrollToHorizontal = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.default.root, css(ScrollToHorizontal_styles.styles.root), css({
+      className: cx(scrollToHorizontalClasses.default.root, position === "sticky" && scrollToHorizontalClasses.default.positionSticky, position === "fixed" && scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.root), css({
         width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
         marginTop: 0,
         marginBottom: 0,
         marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
         marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
         backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "sticky" && clsx.clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.default.positionSticky, css(ScrollToHorizontal_styles.styles.positionSticky)), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.positionFixed))),
+      }), position === "sticky" && css(ScrollToHorizontal_styles.styles.positionSticky), position === "fixed" && css(ScrollToHorizontal_styles.styles.positionFixed), className, classes == null ? void 0 : classes.root, position === "sticky" && (classes == null ? void 0 : classes.positionSticky), position === "fixed" && (classes == null ? void 0 : classes.positionFixed)),
       id: elementId,
       ...others,
       children: tabs

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = ({\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n}: HvScrollToHorizontalProps) => {\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.notSelectedRoot,\n scrollToHorizontalClasses.notSelectedRoot,\n css(styles.notSelectedRoot)\n )}\n >\n <div\n className={clsx(\n classes?.notSelected,\n scrollToHorizontalClasses.notSelected,\n css(styles.notSelected)\n )}\n />\n </div>\n )}\n </ClassNames>\n );\n }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={clsx(\n classes?.selected,\n scrollToHorizontalClasses.selected,\n css(styles.selected)\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKeypress(event, Enter) === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ClassNames>\n {({ css }) => (\n <ol\n className={clsx(\n className,\n classes?.root,\n scrollToHorizontalClasses.root,\n css(styles.root),\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"sticky\" &&\n clsx(\n classes?.positionSticky,\n scrollToHorizontalClasses.positionSticky,\n css(styles.positionSticky)\n ),\n position === \"fixed\" &&\n clsx(\n classes?.positionFixed,\n scrollToHorizontalClasses.positionFixed,\n css(styles.positionFixed)\n )\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACsB,MAAM;AAC/B,QAAMC,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,SAAAA,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,SAAAA,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAElD,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAY1B,IAAI,sBAAsB;AAElD,QAAA,CAAC2B,eAAeC,WAAW,IAAIC,wBACnC5B,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAM0B,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5B/B,2CAAW2B,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7B5B,WAAAA,QAAQ6B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,YAAAA,OAAOE,OAAO,OAAO7B,eAAe;AAAA,IAAA,CACxD;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAEvB8B,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACF,OAAA;AAAA,QACEvC,WAAWwC,KAAAA,KACTvC,mCAASwC,iBACTC,0BAAAA,QAA0BD,iBAC1BF,IAAII,iCAAOF,eAAe,CAAC;AAAA,QAC3BH,yCAEF,OAAA;AAAA,UACEtC,WAAWwC,KAAAA,KACTvC,mCAAS2C,aACTF,0BAAAA,QAA0BE,aAC1BL,IAAII,iCAAOC,WAAW,CAAC;AAAA,QAAA,CACvB;AAAA,MAAA,CACF;AAAA,IAAA,CAGK;AAAA,KAEd,CAAC3C,mCAASwC,iBAAiBxC,mCAAS2C,WAAW,CAAC;AAE7CC,QAAAA,WAAWT,MAAAA,YAAY,MAAM;AACjC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACDO,gBAAAA,aAAW;AAAA,QACVC,QAAQhC,2CAAaiC,SAASC;AAAAA,QAC9BC,OAAOnC,2CAAaiC,SAASC;AAAAA,QAC7BjD,WAAWwC,KAAAA,KACTvC,mCAASkD,UACTT,0BAAAA,QAA0BS,UAC1BZ,IAAII,iCAAOQ,QAAQ,CAAC;AAAA,MAAA,CACpB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAAClD,mCAASkD,UAAUpC,2CAAaiC,SAASC,eAAe,CAAC;AAE7D,QAAMG,OAAOlD,QAAQ6B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMyB,WAAW/B,kBAAkBM;AAC7B2B,UAAAA,iBAAiBxB,gBAAgBH,KAAK;AAE5C,2CACG4B,yBAAAA,4BAA0B;AAAA,MACzB7D,IAAI8D,MAAAA,MAAMrC,WAAY,QAAOQ,OAAO;AAAA,MACpC5B,SAAU0B,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C5B,2CAAU0B,OAAOE;AAAAA,MACnB;AAAA,MACA8B,WAAYhC,CAAU,UAAA;AACpB,YAAIiC,oBAAWjC,OAAOlC,KAAK,MAAM,MAAM;AACrBkC,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C3B,6CAAUyB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACA2B;AAAAA,MACAF;AAAAA,MAAmBb,WAGnBoB,2BAAAA,IAAA,KAAA;AAAA,QAAApB,UAAIN,OAAOE;AAAAA,MAAAA,CAAU,GACpBiB,WAAWO,2BAAAA,IAACb,UAAQ,CAAA,CAAA,IAAOV,2BAAAA,IAAAA,aAAc,CAAA,CAAA,CAAA;AAAA,IAHrCH,GAAAA,OAAO2B,OAAO3B,OAAOE,KAAK;AAAA,EAAA,CAMpC;AAED,wCACGG,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEvC,WAAWwC,KACTxC,KAAAA,WACAC,mCAAS2D,MACTlB,0BAAAA,QAA0BkB,MAC1BrB,IAAII,0BAAAA,OAAOiB,IAAI,GACfrB,IAAI;AAAA,QACFW,OACE9C,aAAa,YAAYS,QAAQJ,UAC5B,iBAAgBoD,YAAAA,MAAMC,QAAQjD,OAAO,IAAI,CAAC,OAC3C;AAAA,QACNkD,WAAW;AAAA,QACXC,cAAc;AAAA,QACdC,aACE7D,aAAa,YAAYS,QAAQJ,UAC7BoD,kBAAMC,QAAQjD,OAAO,IAAI,CAAC,IAC1B;AAAA,QACNqD,YACE9D,aAAa,YAAYS,QAAQJ,UAC7BoD,kBAAMC,QAAQjD,OAAO,IAAI,CAAC,IAC1B;AAAA,QACNsD,iBAAiBC,UACfrD,QAAAA,2CAAasD,OAAOC,MAAMtD,cAAcuD,OACxCxD,2CAAaiC,SAASwB,sBAAsB;AAAA,MAE/C,CAAA,GACDpE,aAAa,YACXoC,KAAAA,KACEvC,mCAASwE,gBACT/B,0BAAAA,QAA0B+B,gBAC1BlC,IAAII,0BAAAA,OAAO8B,cAAc,CAAC,GAE9BrE,aAAa,WACXoC,UACEvC,mCAASyE,eACThC,kCAA0BgC,eAC1BnC,IAAII,iCAAO+B,aAAa,CAAC,CAC1B;AAAA,MAELjF,IAAIyB;AAAAA,MAAU,GACVZ;AAAAA,MAAMgC,UAETc;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}
1	+ {"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" \| \"fixed\" \| \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, \"onChange\" \| \"onClick\"> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied /\n options: HvScrollToHorizontalOption[];\n /* True if the href location link should be applied. It will create an a element around every list item /\n href?: boolean;\n /* Default selected index passed from the parent. /\n defaultSelectedIndex?: number;\n /\n The Id of the scrollable container containing displayed elements.\n \n Defaults to `window` if unspecified.\n /\n scrollElementId?: string;\n /\n Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n \n Each element can also have a specific offset via the options property.\n /\n offset?: number;\n /* Position of the Horizontal scroll to. /\n position?: HvScrollToHorizontalPositions;\n /* Position of tooltip identifying the current item. /\n tooltipPosition?: HvScrollToTooltipPositions;\n /* A function called each time the selected index changes. /\n onChange?: (\n event:\n \| Event\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /* A function called each time an user clicks on a tab element. /\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /* A function called each time an user press enter on a tab element. /\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvScrollToHorizontalClasses;\n}\n\n/\n The horizontal scroll to element can be used to quickly navigate in a page.\n /\nexport const HvScrollToHorizontal = ({\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n}: HvScrollToHorizontalProps) => {\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n \| React.MouseEvent<HTMLDivElement>\n \| React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n scrollToHorizontalClasses.notSelectedRoot,\n css(styles.notSelectedRoot),\n classes?.notSelectedRoot\n )}\n >\n <div\n className={cx(\n scrollToHorizontalClasses.notSelected,\n css(styles.notSelected),\n classes?.notSelected\n )}\n />\n </div>\n )}\n </ClassNames>\n );\n }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <ClassNames>\n {({ css, cx }) => (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={cx(\n scrollToHorizontalClasses.selected,\n css(styles.selected),\n classes?.selected\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKeypress(event, Enter) === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key \|\| option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <ol\n className={cx(\n scrollToHorizontalClasses.root,\n position === \"sticky\" && scrollToHorizontalClasses.positionSticky,\n position === \"fixed\" && scrollToHorizontalClasses.positionFixed,\n css(styles.root),\n css({\n width:\n position === \"fixed\" && (upMd \|\| downSm)\n ? `calc(100% - 2${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd \|\| downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"sticky\" && css(styles.positionSticky),\n position === \"fixed\" && css(styles.positionFixed),\n className,\n classes?.root,\n position === \"sticky\" && classes?.positionSticky,\n position === \"fixed\" && classes?.positionFixed\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","cx","scrollToHorizontalClasses","notSelectedRoot","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","positionSticky","positionFixed","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity"],"mappings":"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"}

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const scrollToVerticalClasses = require("./scrollToVerticalClasses.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
-const clsx = require("clsx");
 const useScrollTo = require("../useScrollTo.cjs");
 const React = require("react");
 const withTooltip = require("../withTooltip.cjs");
@@ -75,11 +74,12 @@ const HvScrollToVertical = ({
   const dynamicClasses = ScrollToVertical_styles.generateDynamicStyles(options.length);
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToVerticalClasses.default.root, css(ScrollToVertical_styles.styles.root), css({
+      className: cx(scrollToVerticalClasses.default.root, position === "fixed" && scrollToVerticalClasses.default.positionFixed, position === "absolute" && scrollToVerticalClasses.default.positionAbsolute, css(ScrollToVertical_styles.styles.root), css({
         backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-      }), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToVerticalClasses.default.positionFixed, css(dynamicClasses.positionFixed)), position === "absolute" && clsx.clsx(classes == null ? void 0 : classes.positionAbsolute, scrollToVerticalClasses.default.positionAbsolute, css(dynamicClasses.positionAbsolute))),
+      }), position === "fixed" && css(dynamicClasses.positionFixed), position === "absolute" && css(dynamicClasses.positionAbsolute), className, classes == null ? void 0 : classes.root, position === "fixed" && (classes == null ? void 0 : classes.positionFixed), position === "absolute" && (classes == null ? void 0 : classes.positionAbsolute)),
       id: elementId,
       ...others,
       children: tabs