@hitachivantara/uikit-react-core 5.3.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Dialog/Dialog.cjs +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +3 -3
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
- package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
- package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
- package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
- package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
- package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
- package/dist/cjs/hocs/withTooltip.cjs +4 -4
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/cjs/index.cjs +19 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/theme.cjs +9 -0
- package/dist/cjs/utils/theme.cjs.map +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +2 -2
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +3 -3
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
- package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
- package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
- package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
- package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
- package/dist/esm/components/ScrollTo/utils.js +76 -0
- package/dist/esm/components/ScrollTo/utils.js.map +1 -0
- package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
- package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
- package/dist/esm/hocs/withTooltip.js +4 -4
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/index.js +38 -19
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/wrapperTooltip.js +2 -2
- package/dist/esm/utils/wrapperTooltip.js.map +1 -1
- package/dist/types/index.d.ts +193 -1
- package/package.json +5 -5
|
@@ -94,7 +94,7 @@ const HvDialog = ({
|
|
|
94
94
|
const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
|
|
95
95
|
role: "presentation"
|
|
96
96
|
});
|
|
97
|
-
const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.default(closeButtonDisplay, buttonTitle, "top"
|
|
97
|
+
const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.default(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
98
98
|
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
99
99
|
children: ({
|
|
100
100
|
css
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { activeTheme, selectedMode, rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n };\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n : closeButtonDisplay;\n\n return (\n <ClassNames>\n {({ css }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={clsx(dialogClasses.root, classes?.root, className)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n fullWidth\n maxWidth={false}\n slots={{\n backdrop: (backdropProps) => (\n <StyledBackdrop\n open={open}\n onClick={(event) => wrappedClose(event)}\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4\n }\n {...backdropProps}\n />\n ),\n }}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: clsx(classes?.background, dialogClasses.background),\n },\n }}\n PaperProps={{\n classes: {\n root: clsx(\n css(styles.paper),\n classes?.paper,\n dialogClasses.paper,\n css({ position: \"absolute\" }),\n fullscreen &&\n clsx(\n dialogClasses.fullscreen,\n classes?.fullscreen,\n \"fullscreen\"\n )\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","styles","paper","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n HvBaseProps {\n /** Id to be applied to the root node. */\n id?: string;\n /** Current state of the Dialog. */\n open?: boolean;\n /** Function executed on close. */\n onClose?: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Element id that should be focus when the Dialog opens. */\n firstFocusable?: string;\n /** Title for the button close. */\n buttonTitle?: string;\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** Prevent closing the dialog when clicking on the backdrop. */\n disableBackdropClick?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n classes,\n className,\n id,\n children,\n open = false,\n onClose,\n firstFocusable,\n buttonTitle = \"Close\",\n fullscreen = false,\n disableBackdropClick = false,\n ...others\n}: HvDialogProps) => {\n delete (others as any).fullScreen;\n\n const { activeTheme, selectedMode, rootId } = useTheme();\n\n const focusableQueue = useRef<{\n first?: HTMLElement;\n last?: HTMLElement;\n }>({ first: undefined, last: undefined });\n\n // Because the `disableBackdropClick` property was deprecated in MUI5\n // and we want to maintain that functionality to the user we're wrapping\n // the onClose call here to make that check.\n const wrappedClose = (\n event,\n bypassValidation: boolean = false,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => {\n if (bypassValidation) {\n onClose?.(event, reason);\n } else if (!disableBackdropClick) {\n onClose?.(event, reason);\n }\n };\n\n const measuredRef = useCallback(\n (node) => {\n if (node) {\n const focusableList = getFocusableList(node);\n focusableQueue.current = {\n first: focusableList[1],\n last: focusableList[focusableList.length - 2],\n };\n if (isNil(firstFocusable)) focusableList[1].focus();\n else {\n const element =\n firstFocusable && document.getElementById(firstFocusable);\n if (element) element.focus();\n else {\n console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n focusableList[1].focus();\n }\n }\n }\n },\n [firstFocusable]\n );\n\n const keyDownHandler = (event) => {\n if (\n isKeypress(event, keyboardCodes.Tab) &&\n !isNil(event.target) &&\n !isNil(focusableQueue)\n ) {\n if (event.shiftKey && event.target === focusableQueue.current.first) {\n focusableQueue.current.last?.focus();\n event.preventDefault();\n }\n if (!event.shiftKey && event.target === focusableQueue.current.last) {\n focusableQueue.current.first?.focus();\n event.preventDefault();\n }\n }\n // Needed as this handler overrides the one in the material ui Modal.\n else if (isKeypress(event, keyboardCodes.Esc)) {\n if (\n \"onEscapeKeyDown\" in others &&\n typeof others.onEscapeKeyDown === \"function\"\n ) {\n others.onEscapeKeyDown(event);\n }\n\n if (!others.disableEscapeKeyDown) {\n // Swallow the event, in case someone is listening for the escape key on the body.\n event.stopPropagation();\n\n wrappedClose(event, true, \"escapeKeyDown\");\n }\n }\n };\n\n const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n const CloseButtonTooltipWrapper = buttonTitle\n ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n : closeButtonDisplay;\n\n return (\n <ClassNames>\n {({ css }) => (\n <MuiDialog\n container={document.getElementById(rootId || \"\") || document.body}\n className={clsx(dialogClasses.root, classes?.root, className)}\n id={id}\n ref={measuredRef}\n open={open}\n fullScreen={fullscreen}\n onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n onKeyDown={keyDownHandler}\n fullWidth\n maxWidth={false}\n slots={{\n backdrop: (backdropProps) => (\n <StyledBackdrop\n open={open}\n onClick={(event) => wrappedClose(event)}\n $backColor={\n activeTheme?.colors?.modes[selectedMode].atmo4 ||\n theme.colors.atmo4\n }\n {...backdropProps}\n />\n ),\n }}\n classes={{ container: css({ position: \"relative\" }) }}\n BackdropProps={{\n classes: {\n root: clsx(classes?.background, dialogClasses.background),\n },\n }}\n PaperProps={{\n classes: {\n root: clsx(\n css(styles.paper),\n classes?.paper,\n dialogClasses.paper,\n css({ position: \"absolute\" }),\n fullscreen &&\n clsx(\n dialogClasses.fullscreen,\n classes?.fullscreen,\n \"fullscreen\"\n )\n ),\n },\n }}\n aria-modal\n {...others}\n >\n <StyledClose\n id={setId(id, \"close\")}\n className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n variant=\"secondaryGhost\"\n onClick={(event) => wrappedClose(event, true, undefined)}\n aria-label={buttonTitle}\n >\n <CloseButtonTooltipWrapper />\n </StyledClose>\n {children && typeof children === \"object\"\n ? React.Children.map(\n children,\n (c: React.ReactNode) =>\n c &&\n React.cloneElement(c as React.ReactElement, { fullscreen })\n )\n : children}\n </MuiDialog>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","styles","paper","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
|
|
@@ -38,7 +38,7 @@ const styles = {
|
|
|
38
38
|
boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
|
|
39
39
|
borderRadius: uikitStyles.theme.dialog.borderRadius,
|
|
40
40
|
[`&.${material.paperClasses.root}`]: {
|
|
41
|
-
width: "inherit",
|
|
41
|
+
// width: "inherit",
|
|
42
42
|
minWidth: "33.3333333%",
|
|
43
43
|
maxWidth: "83.3333333%",
|
|
44
44
|
"&.fullscreen": {
|
|
@@ -63,7 +63,7 @@ const StyledBackdrop = /* @__PURE__ */ _styled__default.default(material.Backdro
|
|
|
63
63
|
$backColor
|
|
64
64
|
}) => ({
|
|
65
65
|
background: hexToRgbA.default($backColor, 0.8)
|
|
66
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
66
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
67
67
|
const StyledClose = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
|
|
68
68
|
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
|
|
69
69
|
...props,
|
|
@@ -82,7 +82,7 @@ const StyledClose = /* @__PURE__ */ _styled__default.default(React.forwardRef((p
|
|
|
82
82
|
right: uikitStyles.theme.space.sm,
|
|
83
83
|
width: 32,
|
|
84
84
|
height: 32
|
|
85
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
85
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
86
86
|
exports.StyledBackdrop = StyledBackdrop;
|
|
87
87
|
exports.StyledClose = StyledClose;
|
|
88
88
|
exports.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n paper: {\n [`&.MuiDialog-paper`]: {\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n display: \"flex\",\n flexDirection: \"column\",\n color: theme.colors.secondary,\n flex: \"0 0 83.3333333%\",\n backgroundColor: theme.colors.atmo1,\n padding: \"0px\",\n overflow: \"auto\",\n boxShadow: [\"none\", \"0 2px 12px rgba(65,65,65,0.12)\"],\n borderRadius: theme.dialog.borderRadius,\n [`&.${MuiPaperClasses.root}`]: {\n width: \"inherit\",\n minWidth: \"33.3333333%\",\n maxWidth: \"83.3333333%\",\n \"&.fullscreen\": {\n flex: \"1\",\n borderRadius: \"0\",\n width: \"inherit\",\n minWidth: \"100%\",\n maxWidth: \"100%\",\n minHeight: \"100%\",\n maxHeight: \"100%\",\n },\n },\n },\n },\n};\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","maxHeight","theme","dialog","margin","display","flexDirection","color","colors","secondary","flex","backgroundColor","atmo1","padding","overflow","boxShadow","borderRadius","MuiPaperClasses","root","
|
|
1
|
+
{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n paper: {\n [`&.MuiDialog-paper`]: {\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n display: \"flex\",\n flexDirection: \"column\",\n color: theme.colors.secondary,\n flex: \"0 0 83.3333333%\",\n backgroundColor: theme.colors.atmo1,\n padding: \"0px\",\n overflow: \"auto\",\n boxShadow: [\"none\", \"0 2px 12px rgba(65,65,65,0.12)\"],\n borderRadius: theme.dialog.borderRadius,\n [`&.${MuiPaperClasses.root}`]: {\n // width: \"inherit\",\n minWidth: \"33.3333333%\",\n maxWidth: \"83.3333333%\",\n \"&.fullscreen\": {\n flex: \"1\",\n borderRadius: \"0\",\n width: \"inherit\",\n minWidth: \"100%\",\n maxWidth: \"100%\",\n minHeight: \"100%\",\n maxHeight: \"100%\",\n },\n },\n },\n },\n};\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","maxHeight","theme","dialog","margin","display","flexDirection","color","colors","secondary","flex","backgroundColor","atmo1","padding","overflow","boxShadow","borderRadius","MuiPaperClasses","root","minWidth","maxWidth","width","minHeight","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","background","fade","StyledClose","_styled","forwardRef","props","ref","HvButton","position","top","space","sm","right","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAMA,SAA8C;AAAA,EACzDC,OAAO;AAAA,IACL,CAAE,mBAAkB,GAAG;AAAA,MACrBC,WAAY,oBAAmBC,YAAAA,MAAMC,OAAOC;AAAAA,MAC5CC,SAAS;AAAA,MACTC,eAAe;AAAA,MACfC,OAAOL,YAAAA,MAAMM,OAAOC;AAAAA,MACpBC,MAAM;AAAA,MACNC,iBAAiBT,YAAAA,MAAMM,OAAOI;AAAAA,MAC9BC,SAAS;AAAA,MACTC,UAAU;AAAA,MACVC,WAAW,CAAC,QAAQ,gCAAgC;AAAA,MACpDC,cAAcd,YAAAA,MAAMC,OAAOa;AAAAA,MAC3B,CAAE,KAAIC,sBAAgBC,MAAM,GAAG;AAAA;AAAA,QAE7BC,UAAU;AAAA,QACVC,UAAU;AAAA,QACV,gBAAgB;AAAA,UACdV,MAAM;AAAA,UACNM,cAAc;AAAA,UACdK,OAAO;AAAA,UACPF,UAAU;AAAA,UACVC,UAAU;AAAA,UACVE,WAAW;AAAA,UACXrB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEasB,MAAAA,0DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,UAAAA,QAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;AAEI,MAAMQ,cAAcC,iCAAAA,QACzBC,MAAAA,WAAW,CAACC,OAAsBC,QAAiC;AACjE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAACd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EACF;AAAA,EACAlB,SAAS;AAAA,EACTM,UAAU;AAAA,EACVsB,UAAU;AAAA,EACVC,KAAKxC,YAAAA,MAAMyC,MAAMC;AAAAA,EACjBC,OAAO3C,YAAAA,MAAMyC,MAAMC;AAAAA,EACnBvB,OAAO;AAAA,EACPyB,QAAQ;AACV,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;;;;"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const clsx = require("clsx");
|
|
4
|
+
const react = require("@emotion/react");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const inlineEditorClasses = require("./inlineEditorClasses.cjs");
|
|
7
|
+
const InlineEditor_styles = require("./InlineEditor.styles.cjs");
|
|
8
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
9
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
10
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
11
|
+
const theme = require("../../utils/theme.cjs");
|
|
12
|
+
const useControlled = require("../../hooks/useControlled.cjs");
|
|
13
|
+
const Input = require("../Input/Input.cjs");
|
|
14
|
+
const Button = require("../Button/Button.cjs");
|
|
15
|
+
const Typography = require("../Typography/Typography.cjs");
|
|
16
|
+
const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
|
|
17
|
+
const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
|
|
18
|
+
const getTypographyStyles = (typography) => {
|
|
19
|
+
let typographyStyles = {};
|
|
20
|
+
Object.keys(typography).map((k) => {
|
|
21
|
+
typographyStyles[k] = theme.getVarValue(typography[k]);
|
|
22
|
+
});
|
|
23
|
+
return typographyStyles;
|
|
24
|
+
};
|
|
25
|
+
const HvInlineEditor = ({
|
|
26
|
+
className,
|
|
27
|
+
classes,
|
|
28
|
+
value: valueProp,
|
|
29
|
+
defaultValue,
|
|
30
|
+
showIcon,
|
|
31
|
+
component: InputComponent = Input.HvInput,
|
|
32
|
+
variant = "body",
|
|
33
|
+
placeholder = "Enter text",
|
|
34
|
+
onBlur,
|
|
35
|
+
onChange,
|
|
36
|
+
onKeyDown,
|
|
37
|
+
buttonProps,
|
|
38
|
+
typographyProps,
|
|
39
|
+
...others
|
|
40
|
+
}) => {
|
|
41
|
+
const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
|
|
42
|
+
const [editMode, setEditMode] = React.useState(false);
|
|
43
|
+
const [cachedValue, setCachedValue] = React.useState(value);
|
|
44
|
+
const inputRef = React.useRef();
|
|
45
|
+
const typographyStyles = getTypographyStyles(uikitStyles.theme.typography[variant] || {});
|
|
46
|
+
const {
|
|
47
|
+
lineHeight
|
|
48
|
+
} = typographyStyles;
|
|
49
|
+
React.useLayoutEffect(() => {
|
|
50
|
+
const input = inputRef.current;
|
|
51
|
+
if (editMode && input) {
|
|
52
|
+
input.focus();
|
|
53
|
+
input.select();
|
|
54
|
+
}
|
|
55
|
+
}, [editMode]);
|
|
56
|
+
const handleClick = () => {
|
|
57
|
+
setEditMode(true);
|
|
58
|
+
setCachedValue(value);
|
|
59
|
+
};
|
|
60
|
+
const handleBlur = (event) => {
|
|
61
|
+
setEditMode(false);
|
|
62
|
+
const newValue = value || cachedValue;
|
|
63
|
+
setValue(newValue);
|
|
64
|
+
onBlur == null ? void 0 : onBlur(event, newValue);
|
|
65
|
+
};
|
|
66
|
+
const handleKeyDown = (event) => {
|
|
67
|
+
if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
|
|
68
|
+
setEditMode(false);
|
|
69
|
+
setValue(cachedValue);
|
|
70
|
+
}
|
|
71
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
72
|
+
};
|
|
73
|
+
const handleChange = (event, val) => {
|
|
74
|
+
setValue(val);
|
|
75
|
+
onChange == null ? void 0 : onChange(event, val);
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
78
|
+
children: ({
|
|
79
|
+
css
|
|
80
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
81
|
+
className: clsx.clsx(className, inlineEditorClasses.default.root, classes == null ? void 0 : classes.root, css(InlineEditor_styles.styles.root)),
|
|
82
|
+
children: editMode ? /* @__PURE__ */ jsxRuntime.jsx(InputComponent, {
|
|
83
|
+
inputRef,
|
|
84
|
+
classes: {
|
|
85
|
+
root: clsx.clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.default.inputRoot),
|
|
86
|
+
input: clsx.clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.default.input, css(InlineEditor_styles.styles.input)),
|
|
87
|
+
inputBorderContainer: clsx.clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.default.inputBorderContainer, css(InlineEditor_styles.styles.inputBorderContainer))
|
|
88
|
+
},
|
|
89
|
+
inputProps: {
|
|
90
|
+
style: {
|
|
91
|
+
...typographyStyles,
|
|
92
|
+
height: InputComponent === Input.HvInput ? lineHeight : void 0
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
value,
|
|
96
|
+
onBlur: handleBlur,
|
|
97
|
+
onChange: handleChange,
|
|
98
|
+
onKeyDown: handleKeyDown,
|
|
99
|
+
...others
|
|
100
|
+
}) : /* @__PURE__ */ jsxRuntime.jsxs(Button.HvButton, {
|
|
101
|
+
variant: "secondaryGhost",
|
|
102
|
+
overrideIconColors: false,
|
|
103
|
+
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))),
|
|
104
|
+
onClick: handleClick,
|
|
105
|
+
...buttonProps,
|
|
106
|
+
children: [/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
|
|
107
|
+
variant,
|
|
108
|
+
noWrap: true,
|
|
109
|
+
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))),
|
|
110
|
+
...typographyProps,
|
|
111
|
+
children: value || placeholder
|
|
112
|
+
}), /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, {
|
|
113
|
+
color: "secondary_60",
|
|
114
|
+
role: "presentation",
|
|
115
|
+
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)))
|
|
116
|
+
})]
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
exports.HvInlineEditor = HvInlineEditor;
|
|
122
|
+
//# sourceMappingURL=InlineEditor.cjs.map
|
|
@@ -0,0 +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 Omit<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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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const inlineEditorClasses = require("./inlineEditorClasses.cjs");
|
|
5
|
+
const baseInputClasses = require("../BaseInput/baseInputClasses.cjs");
|
|
6
|
+
const inputClasses = require("../Input/inputClasses.cjs");
|
|
7
|
+
const styles = {
|
|
8
|
+
root: {
|
|
9
|
+
[`& .${baseInputClasses.default.inputRoot}.${inputClasses.default.inputRoot}`]: {
|
|
10
|
+
height: "100%"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
inputBorderContainer: {
|
|
14
|
+
top: "unset",
|
|
15
|
+
bottom: 0
|
|
16
|
+
},
|
|
17
|
+
input: {
|
|
18
|
+
padding: uikitStyles.theme.spacing([0, "8px"])
|
|
19
|
+
},
|
|
20
|
+
text: {
|
|
21
|
+
overflow: "hidden",
|
|
22
|
+
textOverflow: "ellipsis",
|
|
23
|
+
whiteSpace: "nowrap",
|
|
24
|
+
alignSelf: "center"
|
|
25
|
+
},
|
|
26
|
+
textEmpty: {
|
|
27
|
+
color: uikitStyles.theme.typography.placeholderText.color
|
|
28
|
+
},
|
|
29
|
+
button: {
|
|
30
|
+
padding: uikitStyles.theme.spacing([0, "8px"]),
|
|
31
|
+
boxSizing: "border-box",
|
|
32
|
+
cursor: "text",
|
|
33
|
+
height: "100%",
|
|
34
|
+
width: "100%",
|
|
35
|
+
maxWidth: "100%",
|
|
36
|
+
justifyContent: "flex-start",
|
|
37
|
+
backgroundColor: "transparent",
|
|
38
|
+
"&:hover, &:focus": {
|
|
39
|
+
outline: `1px solid ${uikitStyles.theme.inlineEditor.hoverBorderColor}`,
|
|
40
|
+
backgroundColor: "transparent",
|
|
41
|
+
[`& .${inlineEditorClasses.default.icon}`]: {
|
|
42
|
+
visibility: "visible"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"&:active": {
|
|
46
|
+
outline: `1px solid ${uikitStyles.theme.inlineEditor.activeBorderColor}`,
|
|
47
|
+
backgroundColor: "transparent",
|
|
48
|
+
[`& .${inlineEditorClasses.default.icon}`]: {
|
|
49
|
+
visibility: "visible"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"& > div": {
|
|
53
|
+
width: "100%"
|
|
54
|
+
},
|
|
55
|
+
"& > div > span": {
|
|
56
|
+
width: "100%",
|
|
57
|
+
overflow: "hidden"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
icon: {
|
|
61
|
+
cursor: "pointer",
|
|
62
|
+
visibility: "hidden",
|
|
63
|
+
minWidth: 32,
|
|
64
|
+
alignSelf: "center"
|
|
65
|
+
},
|
|
66
|
+
iconVisible: {
|
|
67
|
+
visibility: "visible"
|
|
68
|
+
},
|
|
69
|
+
largeText: {
|
|
70
|
+
margin: uikitStyles.theme.spacing([0, "8px"])
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
exports.styles = styles;
|
|
74
|
+
//# sourceMappingURL=InlineEditor.styles.cjs.map
|
|
@@ -0,0 +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 \"../index\";\nimport inlineEditorClasses from \"./inlineEditorClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n inputBorderContainer: CSSInterpolation;\n input: CSSInterpolation;\n text: CSSInterpolation;\n textEmpty: CSSInterpolation;\n button: CSSInterpolation;\n icon: CSSInterpolation;\n iconVisible: CSSInterpolation;\n largeText: 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":";;;;;;AAKO,MAAMA,SAUT;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;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const classes = require("../../utils/classes.cjs");
|
|
4
|
+
const classKeys = ["root", "button", "largeText", "text", "textEmpty", "icon", "iconVisible", "inputRoot", "input", "inputBorderContainer"];
|
|
5
|
+
const inlineEditorClasses = classes.getClasses(classKeys, "HvInlineEditor");
|
|
6
|
+
const inlineEditorClasses$1 = inlineEditorClasses;
|
|
7
|
+
exports.default = inlineEditorClasses$1;
|
|
8
|
+
//# sourceMappingURL=inlineEditorClasses.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inlineEditorClasses.cjs","sources":["../../../../src/components/InlineEditor/inlineEditorClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvInlineEditorClasses {\n root?: string;\n button?: string;\n largeText?: string;\n text?: string;\n textEmpty?: string;\n icon?: string;\n iconVisible?: string;\n inputRoot?: string;\n input?: string;\n inputBorderContainer?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"button\",\n \"largeText\",\n \"text\",\n \"textEmpty\",\n \"icon\",\n \"iconVisible\",\n \"inputRoot\",\n \"input\",\n \"inputBorderContainer\",\n];\n\nconst inlineEditorClasses = getClasses<HvInlineEditorClasses>(\n classKeys,\n \"HvInlineEditor\"\n);\n\nexport default inlineEditorClasses;\n"],"names":["classKeys","inlineEditorClasses","getClasses"],"mappings":";;;AAeA,MAAMA,YAAsB,CAC1B,QACA,UACA,aACA,QACA,aACA,QACA,eACA,aACA,SACA,sBAAsB;AAGxB,MAAMC,sBAAsBC,QAC1BF,WAAAA,WACA,gBAAgB;AAGlB,MAAA,wBAAeC;;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const horizontalScrollListItemClasses = require("./horizontalScrollListItemClasses.cjs");
|
|
4
|
+
const react = require("@emotion/react");
|
|
5
|
+
const clsx = require("clsx");
|
|
6
|
+
const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
|
|
7
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
|
+
const setId = require("../../../../utils/setId.cjs");
|
|
9
|
+
const HvHorizontalScrollListItem = ({
|
|
10
|
+
id,
|
|
11
|
+
className,
|
|
12
|
+
classes,
|
|
13
|
+
selected,
|
|
14
|
+
children,
|
|
15
|
+
onClick,
|
|
16
|
+
onKeyDown,
|
|
17
|
+
tooltipWrapper,
|
|
18
|
+
...others
|
|
19
|
+
}) => {
|
|
20
|
+
const variant = selected ? "label" : "body";
|
|
21
|
+
const labelId = setId.setId(id, "label");
|
|
22
|
+
const buttonId = setId.setId(id, "button");
|
|
23
|
+
const Tooltip = tooltipWrapper;
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
|
|
25
|
+
children: ({
|
|
26
|
+
css
|
|
27
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
28
|
+
id,
|
|
29
|
+
className: clsx.clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.default.root, css(HorizontalScrollListItem_styles.styles.root)),
|
|
30
|
+
"aria-current": selected,
|
|
31
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
32
|
+
id: buttonId,
|
|
33
|
+
role: "button",
|
|
34
|
+
tabIndex: 0,
|
|
35
|
+
onClick,
|
|
36
|
+
onKeyDown,
|
|
37
|
+
className: clsx.clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.default.button, css(HorizontalScrollListItem_styles.styles.button)),
|
|
38
|
+
"aria-labelledby": labelId,
|
|
39
|
+
...others,
|
|
40
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
|
|
41
|
+
id: labelId,
|
|
42
|
+
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))),
|
|
43
|
+
variant,
|
|
44
|
+
children
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
exports.HvHorizontalScrollListItem = HvHorizontalScrollListItem;
|
|
51
|
+
//# sourceMappingURL=HorizontalScrollListItem.cjs.map
|
|
@@ -0,0 +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;;"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
|
+
const scrollToHorizontalClasses = require("../scrollToHorizontalClasses.cjs");
|
|
5
|
+
const focusUtils = require("../../../../utils/focusUtils.cjs");
|
|
6
|
+
const styles = {
|
|
7
|
+
root: {
|
|
8
|
+
padding: "10px 0"
|
|
9
|
+
},
|
|
10
|
+
button: {
|
|
11
|
+
display: "flex",
|
|
12
|
+
justifyContent: "center",
|
|
13
|
+
alignItems: "center",
|
|
14
|
+
height: uikitStyles.theme.scrollTo.horizontal.buttonHeight,
|
|
15
|
+
cursor: "pointer",
|
|
16
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.buttonBottomBorder,
|
|
17
|
+
"&:hover": {
|
|
18
|
+
backgroundColor: uikitStyles.theme.scrollTo.horizontal.buttonHoverBackgroundColor,
|
|
19
|
+
[`& .${scrollToHorizontalClasses.default.notSelected}`]: {
|
|
20
|
+
height: uikitStyles.theme.scrollTo.dotHoverSize,
|
|
21
|
+
width: uikitStyles.theme.scrollTo.dotHoverSize,
|
|
22
|
+
backgroundColor: uikitStyles.theme.scrollTo.dotHoverColor
|
|
23
|
+
},
|
|
24
|
+
[`& .${scrollToHorizontalClasses.default.notSelectedRoot}`]: {
|
|
25
|
+
backgroundColor: uikitStyles.theme.scrollTo.dotHoverBackgroundColor
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"&:focus": {
|
|
29
|
+
outline: "none"
|
|
30
|
+
},
|
|
31
|
+
"&:focus-visible": {
|
|
32
|
+
...focusUtils.outlineStyles
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
text: {
|
|
36
|
+
display: "flex",
|
|
37
|
+
flexDirection: "column",
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
height: uikitStyles.theme.scrollTo.horizontal.buttonHeight,
|
|
41
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.buttonBottomBorder,
|
|
42
|
+
"& p": {
|
|
43
|
+
padding: uikitStyles.theme.scrollTo.horizontal.textPadding,
|
|
44
|
+
maxWidth: uikitStyles.theme.scrollTo.horizontal.textMaxWidth,
|
|
45
|
+
textOverflow: "ellipsis",
|
|
46
|
+
overflow: "hidden"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
selected: {
|
|
50
|
+
borderBottom: uikitStyles.theme.scrollTo.horizontal.selectedButtonBottomBorder
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
exports.styles = styles;
|
|
54
|
+
//# sourceMappingURL=HorizontalScrollListItem.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HorizontalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport scrollToHorizontalClasses from \"../scrollToHorizontalClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n button: CSSInterpolation;\n text: CSSInterpolation;\n selected: CSSInterpolation;\n} = {\n root: {\n padding: \"10px 0\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.horizontal.buttonHeight,\n cursor: \"pointer\",\n borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n \"&:hover\": {\n backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n [`& .${scrollToHorizontalClasses.notSelected}`]: {\n height: theme.scrollTo.dotHoverSize,\n width: theme.scrollTo.dotHoverSize,\n backgroundColor: theme.scrollTo.dotHoverColor,\n },\n\n [`& .${scrollToHorizontalClasses.notSelectedRoot}`]: {\n backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n text: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: theme.scrollTo.horizontal.buttonHeight,\n borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n \"& p\": {\n padding: theme.scrollTo.horizontal.textPadding,\n maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n },\n },\n selected: {\n borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n },\n};\n"],"names":["styles","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","scrollToHorizontalClasses","notSelected","dotHoverSize","width","dotHoverColor","notSelectedRoot","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,YAAMC,MAAAA,SAASC,WAAWM;AAAAA,MAE3C,CAAE,MAAKC,kCAA0BC,aAAa,GAAG;AAAA,QAC/CX,QAAQC,YAAAA,MAAMC,SAASU;AAAAA,QACvBC,OAAOZ,YAAAA,MAAMC,SAASU;AAAAA,QACtBJ,iBAAiBP,YAAAA,MAAMC,SAASY;AAAAA,MAClC;AAAA,MAEA,CAAE,MAAKJ,kCAA0BK,iBAAiB,GAAG;AAAA,QACnDP,iBAAiBP,YAAAA,MAAMC,SAASc;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJtB,SAAS;AAAA,IACTuB,eAAe;AAAA,IACfrB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,YAAMC,MAAAA,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,YAAMC,MAAAA,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,YAAMC,MAAAA,SAASC,WAAWkB;AAAAA,MACnCC,UAAUrB,YAAMC,MAAAA,SAASC,WAAWoB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRpB,cAAcL,YAAMC,MAAAA,SAASC,WAAWwB;AAAAA,EAC1C;AACF;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const classes = require("../../../../utils/classes.cjs");
|
|
4
|
+
const classKeys = ["root", "selected", "button", "text"];
|
|
5
|
+
const horizontalScrollListItemClasses = classes.getClasses(classKeys, "HvHorizontalScrollListItem");
|
|
6
|
+
const horizontalScrollListItemClasses$1 = horizontalScrollListItemClasses;
|
|
7
|
+
exports.default = horizontalScrollListItemClasses$1;
|
|
8
|
+
//# sourceMappingURL=horizontalScrollListItemClasses.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"horizontalScrollListItemClasses.cjs","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvHorizontalScrollListItemClasses {\n root?: string;\n selected?: string;\n button?: string;\n text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"selected\", \"button\", \"text\"];\n\nconst horizontalScrollListItemClasses =\n getClasses<HvHorizontalScrollListItemClasses>(\n classKeys,\n \"HvHorizontalScrollListItem\"\n );\n\nexport default horizontalScrollListItemClasses;\n"],"names":["classKeys","horizontalScrollListItemClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAsB,CAAC,QAAQ,YAAY,UAAU,MAAM;AAEjE,MAAMC,kCACJC,QACEF,WAAAA,WACA,4BAA4B;AAGhC,MAAA,oCAAeC;;"}
|