@hitachivantara/uikit-react-core 5.3.0 → 5.5.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/Forms/Suggestions/Suggestions.styles.cjs +4 -4
- package/dist/cjs/components/Forms/Suggestions/Suggestions.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/components/TimeAgo/TimeAgo.cjs +39 -0
- package/dist/cjs/components/TimeAgo/TimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs +134 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs +8 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs +29 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeout.cjs +17 -0
- package/dist/cjs/components/TimeAgo/useTimeout.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 +23 -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/Forms/Suggestions/Suggestions.styles.js +5 -5
- package/dist/esm/components/Forms/Suggestions/Suggestions.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/components/TimeAgo/TimeAgo.js +37 -0
- package/dist/esm/components/TimeAgo/TimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/formatUtils.js +126 -0
- package/dist/esm/components/TimeAgo/formatUtils.js.map +1 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js +8 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js +29 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeout.js +17 -0
- package/dist/esm/components/TimeAgo/useTimeout.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 +42 -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 +244 -1
- package/package.json +6 -6
package/dist/cjs/utils/theme.cjs
CHANGED
|
@@ -91,7 +91,16 @@ const processThemes = (themesList) => {
|
|
|
91
91
|
return [uikitStyles.themes.ds5];
|
|
92
92
|
}
|
|
93
93
|
};
|
|
94
|
+
const getVarValue = (cssVar) => {
|
|
95
|
+
const tempEl = document.createElement("div");
|
|
96
|
+
tempEl.style.setProperty("--temp", cssVar);
|
|
97
|
+
document.body.appendChild(tempEl);
|
|
98
|
+
const computedValue = getComputedStyle(tempEl).getPropertyValue("--temp").trim();
|
|
99
|
+
document.body.removeChild(tempEl);
|
|
100
|
+
return computedValue;
|
|
101
|
+
};
|
|
94
102
|
exports.createTheme = createTheme;
|
|
103
|
+
exports.getVarValue = getVarValue;
|
|
95
104
|
exports.processThemes = processThemes;
|
|
96
105
|
exports.setElementAttrs = setElementAttrs;
|
|
97
106
|
//# sourceMappingURL=theme.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n themes,\n HvThemeColorModeStructure,\n HvThemeStructure,\n theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n for (const property in style) {\n element.style[property] = style[property];\n }\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string\n) => {\n const element = themeRootId\n ? document.getElementById(themeRootId)\n : document.body;\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // Set default properties for all components to inherit\n setElementStyle(element, {\n colorScheme: colorScheme,\n backgroundColor: theme.colors.backgroundColor,\n accentColor: theme.colors.secondary,\n color: theme.colors.secondary,\n fontSize: theme.typography.body.fontSize,\n fontWeight: theme.typography.body.fontWeight,\n lineHeight: theme.typography.body.lineHeight,\n letterSpacing: theme.typography.body.letterSpacing,\n fontFamily: theme.fontFamily.body,\n });\n }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key]\n );\n } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme | HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme | HvThemeStructure)[] = [];\n\n themesList.map((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim()\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n } else {\n // DS5\n return [themes.ds5];\n }\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport { CSSProperties } from \"react\";\nimport {\n themes,\n HvThemeColorModeStructure,\n HvThemeStructure,\n theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n for (const property in style) {\n element.style[property] = style[property];\n }\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string\n) => {\n const element = themeRootId\n ? document.getElementById(themeRootId)\n : document.body;\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // Set default properties for all components to inherit\n setElementStyle(element, {\n colorScheme: colorScheme,\n backgroundColor: theme.colors.backgroundColor,\n accentColor: theme.colors.secondary,\n color: theme.colors.secondary,\n fontSize: theme.typography.body.fontSize,\n fontWeight: theme.typography.body.fontWeight,\n lineHeight: theme.typography.body.lineHeight,\n letterSpacing: theme.typography.body.letterSpacing,\n fontFamily: theme.fontFamily.body,\n });\n }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key]\n );\n } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme | HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme | HvThemeStructure)[] = [];\n\n themesList.map((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim()\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n } else {\n // DS5\n return [themes.ds5];\n }\n};\n\n/**\n * Returns the computed value of a theme CSS var\n */\nexport const getVarValue = (cssVar: string): string => {\n const tempEl = document.createElement(\"div\");\n tempEl.style.setProperty(\"--temp\", cssVar);\n document.body.appendChild(tempEl);\n const computedValue = getComputedStyle(tempEl)\n .getPropertyValue(\"--temp\")\n .trim();\n document.body.removeChild(tempEl);\n return computedValue;\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","tempEl","createElement","setProperty","appendChild","computedValue","getComputedStyle","getPropertyValue","removeChild"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ const hideTooltip = (evt) => {
|
|
|
7
7
|
};
|
|
8
8
|
const wrapperTooltip = (hasTooltips, Component, label) => {
|
|
9
9
|
const ComponentFunction = () => Component;
|
|
10
|
-
return hasTooltips ? withTooltip.default(ComponentFunction, label, "top", hideTooltip
|
|
10
|
+
return hasTooltips ? withTooltip.default(ComponentFunction, label, "top", hideTooltip) : ComponentFunction;
|
|
11
11
|
};
|
|
12
12
|
exports.wrapperTooltip = wrapperTooltip;
|
|
13
13
|
//# sourceMappingURL=wrapperTooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wrapperTooltip.cjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip
|
|
1
|
+
{"version":3,"file":"wrapperTooltip.cjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";;;AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AAChC,SAAOD,cACHI,YAAAA,QAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;;"}
|
|
@@ -9,7 +9,7 @@ import dialogClasses from "./dialogClasses.js";
|
|
|
9
9
|
import { ClassNames } from "@emotion/react";
|
|
10
10
|
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
11
11
|
import { getFocusableList } from "../../utils/focusableElementFinder.js";
|
|
12
|
-
import
|
|
12
|
+
import withTooltipUtil from "../../hocs/withTooltip.js";
|
|
13
13
|
import { useTheme } from "../../hooks/useTheme.js";
|
|
14
14
|
import { setId } from "../../utils/setId.js";
|
|
15
15
|
import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
|
|
@@ -88,7 +88,7 @@ const HvDialog = ({
|
|
|
88
88
|
const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
|
|
89
89
|
role: "presentation"
|
|
90
90
|
});
|
|
91
|
-
const CloseButtonTooltipWrapper = buttonTitle ?
|
|
91
|
+
const CloseButtonTooltipWrapper = buttonTitle ? withTooltipUtil(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
|
|
92
92
|
return /* @__PURE__ */ jsx(ClassNames, {
|
|
93
93
|
children: ({
|
|
94
94
|
css
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","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":";;;;;;;;;;;;;;;;AA2CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,uBAAuB;AAAA,EACvB,GAAGC;AACU,MAAM;AACnB,SAAQA,OAAeC;AAEjB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAWC,SAAU;AAExD,QAAMC,iBAAiBC,OAGpB;AAAA,IAAEC,OAAOC;AAAAA,IAAWC,MAAMD;AAAAA,EAAAA,CAAW;AAKxC,QAAME,eAAeA,CACnBC,OACAC,mBAA4B,OAC5BC,WACG;AACH,QAAID,kBAAkB;AACpBlB,yCAAUiB,OAAOE;AAAAA,IAAM,WACd,CAACf,sBAAsB;AAChCJ,yCAAUiB,OAAOE;AAAAA,IACnB;AAAA,EAAA;AAGIC,QAAAA,cAAcC,YACjBC,CAAS,SAAA;AACR,QAAIA,MAAM;AACFC,YAAAA,gBAAgBC,iBAAiBF,IAAI;AAC3CX,qBAAec,UAAU;AAAA,QACvBZ,OAAOU,cAAc,CAAC;AAAA,QACtBR,MAAMQ,cAAcA,cAAcG,SAAS,CAAC;AAAA,MAAA;AAE9C,UAAIC,MAAM1B,cAAc;AAAiB,sBAAA,CAAC,EAAE2B;WACvC;AACH,cAAMC,UACJ5B,kBAAkB6B,SAASC,eAAe9B,cAAc;AACtD4B,YAAAA;AAASA,kBAAQD,MAAK;AAAA,aACrB;AACKI,kBAAAA,KAAM,0BAAyB/B,2BAA2B;AAEpD,wBAAA,CAAC,EAAE2B;QACnB;AAAA,MACF;AAAA,IACF;AAAA,EAAA,GAEF,CAAC3B,cAAc,CAAC;AAGlB,QAAMgC,iBAAkBhB,CAAU,UAAA;;AAChC,QACEiB,WAAWjB,OAAOkB,cAAcC,GAAG,KACnC,CAACT,MAAMV,MAAMoB,MAAM,KACnB,CAACV,MAAMhB,cAAc,GACrB;AACA,UAAIM,MAAMqB,YAAYrB,MAAMoB,WAAW1B,eAAec,QAAQZ,OAAO;AACpDY,6BAAAA,QAAQV,SAARU,mBAAcG;AAC7BX,cAAMsB,eAAgB;AAAA,MACxB;AACA,UAAI,CAACtB,MAAMqB,YAAYrB,MAAMoB,WAAW1B,eAAec,QAAQV,MAAM;AACpDU,6BAAAA,QAAQZ,UAARY,mBAAeG;AAC9BX,cAAMsB,eAAgB;AAAA,MACxB;AAAA,IAGOL,WAAAA,WAAWjB,OAAOkB,cAAcK,GAAG,GAAG;AAC7C,UACE,qBAAqBnC,UACrB,OAAOA,OAAOoC,oBAAoB,YAClC;AACApC,eAAOoC,gBAAgBxB,KAAK;AAAA,MAC9B;AAEI,UAAA,CAACZ,OAAOqC,sBAAsB;AAEhCzB,cAAM0B,gBAAiB;AAEV1B,qBAAAA,OAAO,MAAM,eAAe;AAAA,MAC3C;AAAA,IACF;AAAA,EAAA;AAGI2B,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAiB;AAExDC,QAAAA,4BAA4B9C,cAC9B+C,YAAYL,oBAAoB1C,aAAa,OAAO,MAAM,MAAM,IAAI,IACpE0C;AAEJ,6BACGM,YAAU;AAAA,IAAApD,UACRA,CAAC;AAAA,MAAEqD;AAAAA,IAAAA,2BACDC,WAAS;AAAA,MACRC,WAAWvB,SAASC,eAAetB,UAAU,EAAE,KAAKqB,SAASwB;AAAAA,MAC7D1D,WAAW2D,KAAKC,cAAcC,MAAM9D,mCAAS8D,MAAM7D,SAAS;AAAA,MAC5DC;AAAAA,MACA6D,KAAKtC;AAAAA,MACLrB;AAAAA,MACAO,YAAYH;AAAAA,MACZH,SAASA,CAACiB,OAAOE,WAAWH,aAAaC,OAAOH,QAAWK,MAAM;AAAA,MACjEwC,WAAW1B;AAAAA,MACX2B,WAAS;AAAA,MACTC,UAAU;AAAA,MACVC,OAAO;AAAA,QACLC,UAAWC,CACTnB;;AAAAA,qCAACoB,gBAAc;AAAA,YACblE;AAAAA,YACAmE,SAAUjD,CAAUD,UAAAA,aAAaC,KAAK;AAAA,YACtCkD,cACE5D,gDAAa6D,WAAb7D,mBAAqB8D,MAAM7D,cAAc8D,UACzCC,MAAMH,OAAOE;AAAAA,YACd,GACGN;AAAAA,UAAAA,CAAa;AAAA;AAAA,MAGvB;AAAA,MACArE,SAAS;AAAA,QAAE0D,WAAWF,IAAI;AAAA,UAAEqB,UAAU;AAAA,QAAA,CAAY;AAAA,MAAE;AAAA,MACpDC,eAAe;AAAA,QACb9E,SAAS;AAAA,UACP8D,MAAMF,KAAK5D,mCAAS+E,YAAYlB,cAAckB,UAAU;AAAA,QAC1D;AAAA,MACF;AAAA,MACAC,YAAY;AAAA,QACVhF,SAAS;AAAA,UACP8D,MAAMF,KACJJ,IAAIyB,OAAOC,KAAK,GAChBlF,mCAASkF,OACTrB,cAAcqB,OACd1B,IAAI;AAAA,YAAEqB,UAAU;AAAA,UAAA,CAAY,GAC5BrE,cACEoD,KACEC,cAAcrD,YACdR,mCAASQ,YACT,YAAY,CACb;AAAA,QAEP;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MAAA,GACNE;AAAAA,MAAMP,UAAA,CAEV+C,oBAACiC,aAAW;AAAA,QACVjF,IAAIkF,MAAMlF,IAAI,OAAO;AAAA,QACrBD,WAAW2D,KAAKC,cAAcwB,aAAarF,mCAASqF,WAAW;AAAA,QAC/DC,SAAQ;AAAA,QACRf,SAAUjD,CAAAA,UAAUD,aAAaC,OAAO,MAAMH,MAAS;AAAA,QACvD,cAAYZ;AAAAA,QAAYJ,UAExB+C,oBAACG,2BAAyB,EAAA;AAAA,MAAG,CAAA,GAE9BlD,YAAY,OAAOA,aAAa,WAC7BoF,eAAMC,SAASC,IACbtF,UACA,CAACuF,MACCA,KACAH,eAAMI,aAAaD,GAAyB;AAAA,QAAElF;AAAAA,MAAAA,CAAY,CAAC,IAE/DL,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGL;AAEjB;"}
|
|
1
|
+
{"version":3,"file":"Dialog.js","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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"}
|
|
@@ -34,7 +34,7 @@ const styles = {
|
|
|
34
34
|
boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
|
|
35
35
|
borderRadius: theme.dialog.borderRadius,
|
|
36
36
|
[`&.${paperClasses.root}`]: {
|
|
37
|
-
width: "inherit",
|
|
37
|
+
// width: "inherit",
|
|
38
38
|
minWidth: "33.3333333%",
|
|
39
39
|
maxWidth: "83.3333333%",
|
|
40
40
|
"&.fullscreen": {
|
|
@@ -59,7 +59,7 @@ const StyledBackdrop = /* @__PURE__ */ _styled(Backdrop, process.env.NODE_ENV ==
|
|
|
59
59
|
$backColor
|
|
60
60
|
}) => ({
|
|
61
61
|
background: fade($backColor, 0.8)
|
|
62
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
62
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
63
63
|
const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
64
64
|
return /* @__PURE__ */ jsx(HvButton, {
|
|
65
65
|
...props,
|
|
@@ -78,7 +78,7 @@ const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
|
78
78
|
right: theme.space.sm,
|
|
79
79
|
width: 32,
|
|
80
80
|
height: 32
|
|
81
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
81
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IHsgW2tleTogc3RyaW5nXTogQ1NTSW50ZXJwb2xhdGlvbiB9ID0ge1xuICBwYXBlcjoge1xuICAgIFtgJi5NdWlEaWFsb2ctcGFwZXJgXToge1xuICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICBmbGV4OiBcIjAgMCA4My4zMzMzMzMzJVwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgICAgYm94U2hhZG93OiBbXCJub25lXCIsIFwiMCAycHggMTJweCByZ2JhKDY1LDY1LDY1LDAuMTIpXCJdLFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgW2AmLiR7TXVpUGFwZXJDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgLy8gd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICBtYXhXaWR0aDogXCI4My4zMzMzMzMzJVwiLFxuICAgICAgICBcIiYuZnVsbHNjcmVlblwiOiB7XG4gICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjBcIixcbiAgICAgICAgICB3aWR0aDogXCJpbmhlcml0XCIsXG4gICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICBtaW5IZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSlcbikoe1xuICBwYWRkaW5nOiAwLFxuICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRvcDogdGhlbWUuc3BhY2Uuc20sXG4gIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG4iXX0= */");
|
|
82
82
|
export {
|
|
83
83
|
StyledBackdrop,
|
|
84
84
|
StyledClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","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.js","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,MAAMC,OAAOC;AAAAA,MAC5CC,SAAS;AAAA,MACTC,eAAe;AAAA,MACfC,OAAOL,MAAMM,OAAOC;AAAAA,MACpBC,MAAM;AAAA,MACNC,iBAAiBT,MAAMM,OAAOI;AAAAA,MAC9BC,SAAS;AAAA,MACTC,UAAU;AAAA,MACVC,WAAW,CAAC,QAAQ,gCAAgC;AAAA,MACpDC,cAAcd,MAAMC,OAAOa;AAAAA,MAC3B,CAAE,KAAIC,aAAgBC,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,yCACXC,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,KAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;AAEI,MAAMQ,cAAcC,wBACzBC,WAAW,CAACC,OAAsBC,QAAiC;AACjE,6BAAQC,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,MAAMyC,MAAMC;AAAAA,EACjBC,OAAO3C,MAAMyC,MAAMC;AAAAA,EACnBvB,OAAO;AAAA,EACPyB,QAAQ;AACV,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q7FAAA;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
|
-
import {
|
|
2
|
+
import { Popper } from "@mui/base";
|
|
3
3
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
4
4
|
import { HvSelectionList } from "../../SelectionList/SelectionList.js";
|
|
5
5
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() {
|
|
@@ -16,7 +16,7 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
|
|
|
16
16
|
} : {
|
|
17
17
|
name: "bjn8wh",
|
|
18
18
|
styles: "position:relative",
|
|
19
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
19
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */",
|
|
20
20
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
21
21
|
});
|
|
22
22
|
const StyledSelectionList = /* @__PURE__ */ _styled(HvSelectionList, process.env.NODE_ENV === "production" ? {
|
|
@@ -29,8 +29,8 @@ const StyledSelectionList = /* @__PURE__ */ _styled(HvSelectionList, process.env
|
|
|
29
29
|
boxShadow: theme.colors.shadow,
|
|
30
30
|
padding: theme.space.xs,
|
|
31
31
|
width: "100%"
|
|
32
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
-
const StyledPopper = /* @__PURE__ */ _styled(
|
|
32
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */");
|
|
33
|
+
const StyledPopper = /* @__PURE__ */ _styled(Popper, process.env.NODE_ENV === "production" ? {
|
|
34
34
|
target: "eqrftyh0"
|
|
35
35
|
} : {
|
|
36
36
|
target: "eqrftyh0",
|
|
@@ -40,7 +40,7 @@ const StyledPopper = /* @__PURE__ */ _styled(PopperUnstyled, process.env.NODE_EN
|
|
|
40
40
|
position: "absolute",
|
|
41
41
|
transform: "translate3d(0, -1px, 0) !important",
|
|
42
42
|
zIndex: theme.zIndices.tooltip
|
|
43
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
43
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgUG9wcGVyIH0gZnJvbSBcIkBtdWkvYmFzZVwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZTZWxlY3Rpb25MaXN0IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3Rpb25MaXN0ID0gc3R5bGVkKEh2U2VsZWN0aW9uTGlzdCkoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICBwYWRkaW5nOiB0aGVtZS5zcGFjZS54cyxcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQb3BwZXIgPSBzdHlsZWQoUG9wcGVyKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZTNkKDAsIC0xcHgsIDApICFpbXBvcnRhbnRcIixcbiAgekluZGV4OiB0aGVtZS56SW5kaWNlcy50b29sdGlwLFxufSk7XG4iXX0= */");
|
|
44
44
|
export {
|
|
45
45
|
StyledPopper,
|
|
46
46
|
StyledRoot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {
|
|
1
|
+
{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Popper } from \"@mui/base\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvSelectionList } from \"@core/components\";\n\nexport const StyledRoot = styled(\"div\")({\n position: \"relative\",\n});\n\nexport const StyledSelectionList = styled(HvSelectionList)({\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n padding: theme.space.xs,\n width: \"100%\",\n});\n\nexport const StyledPopper = styled(Popper)({\n width: \"100%\",\n position: \"absolute\",\n transform: \"translate3d(0, -1px, 0) !important\",\n zIndex: theme.zIndices.tooltip,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSelectionList","HvSelectionList","backgroundColor","theme","colors","atmo1","boxShadow","shadow","padding","space","xs","width","StyledPopper","Popper","position","transform","zIndex","zIndices","tooltip"],"mappings":";;;;;;;AAKO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAErC;AAEK,MAAMC,sBAA6BC,wBAAAA,iBAAeX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzDQ,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,WAAWH,MAAMC,OAAOG;AAAAA,EACxBC,SAASL,MAAMM,MAAMC;AAAAA,EACrBC,OAAO;AACT,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;AAEK,MAAMoB,eAAsBC,wBAAAA,QAAMvB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,OAAO;AAAA,EACPG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,QAAQb,MAAMc,SAASC;AACzB,GAAC5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import { ClassNames } from "@emotion/react";
|
|
3
|
+
import { useState, useRef, useLayoutEffect } from "react";
|
|
4
|
+
import inlineEditorClasses from "./inlineEditorClasses.js";
|
|
5
|
+
import { styles } from "./InlineEditor.styles.js";
|
|
6
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
7
|
+
import { Edit } from "@hitachivantara/uikit-react-icons";
|
|
8
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
9
|
+
import { getVarValue } from "../../utils/theme.js";
|
|
10
|
+
import { useControlled } from "../../hooks/useControlled.js";
|
|
11
|
+
import { HvInput } from "../Input/Input.js";
|
|
12
|
+
import { HvButton } from "../Button/Button.js";
|
|
13
|
+
import { HvTypography } from "../Typography/Typography.js";
|
|
14
|
+
import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
|
|
15
|
+
import { keyboardCodes } from "../../utils/keyboardUtils/keyboardCodes.js";
|
|
16
|
+
const getTypographyStyles = (typography) => {
|
|
17
|
+
let typographyStyles = {};
|
|
18
|
+
Object.keys(typography).map((k) => {
|
|
19
|
+
typographyStyles[k] = getVarValue(typography[k]);
|
|
20
|
+
});
|
|
21
|
+
return typographyStyles;
|
|
22
|
+
};
|
|
23
|
+
const HvInlineEditor = ({
|
|
24
|
+
className,
|
|
25
|
+
classes,
|
|
26
|
+
value: valueProp,
|
|
27
|
+
defaultValue,
|
|
28
|
+
showIcon,
|
|
29
|
+
component: InputComponent = HvInput,
|
|
30
|
+
variant = "body",
|
|
31
|
+
placeholder = "Enter text",
|
|
32
|
+
onBlur,
|
|
33
|
+
onChange,
|
|
34
|
+
onKeyDown,
|
|
35
|
+
buttonProps,
|
|
36
|
+
typographyProps,
|
|
37
|
+
...others
|
|
38
|
+
}) => {
|
|
39
|
+
const [value, setValue] = useControlled(valueProp, defaultValue);
|
|
40
|
+
const [editMode, setEditMode] = useState(false);
|
|
41
|
+
const [cachedValue, setCachedValue] = useState(value);
|
|
42
|
+
const inputRef = useRef();
|
|
43
|
+
const typographyStyles = getTypographyStyles(theme.typography[variant] || {});
|
|
44
|
+
const {
|
|
45
|
+
lineHeight
|
|
46
|
+
} = typographyStyles;
|
|
47
|
+
useLayoutEffect(() => {
|
|
48
|
+
const input = inputRef.current;
|
|
49
|
+
if (editMode && input) {
|
|
50
|
+
input.focus();
|
|
51
|
+
input.select();
|
|
52
|
+
}
|
|
53
|
+
}, [editMode]);
|
|
54
|
+
const handleClick = () => {
|
|
55
|
+
setEditMode(true);
|
|
56
|
+
setCachedValue(value);
|
|
57
|
+
};
|
|
58
|
+
const handleBlur = (event) => {
|
|
59
|
+
setEditMode(false);
|
|
60
|
+
const newValue = value || cachedValue;
|
|
61
|
+
setValue(newValue);
|
|
62
|
+
onBlur == null ? void 0 : onBlur(event, newValue);
|
|
63
|
+
};
|
|
64
|
+
const handleKeyDown = (event) => {
|
|
65
|
+
if (isKeypress(event, keyboardCodes.Esc)) {
|
|
66
|
+
setEditMode(false);
|
|
67
|
+
setValue(cachedValue);
|
|
68
|
+
}
|
|
69
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
70
|
+
};
|
|
71
|
+
const handleChange = (event, val) => {
|
|
72
|
+
setValue(val);
|
|
73
|
+
onChange == null ? void 0 : onChange(event, val);
|
|
74
|
+
};
|
|
75
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
76
|
+
children: ({
|
|
77
|
+
css
|
|
78
|
+
}) => /* @__PURE__ */ jsx("div", {
|
|
79
|
+
className: clsx(className, inlineEditorClasses.root, classes == null ? void 0 : classes.root, css(styles.root)),
|
|
80
|
+
children: editMode ? /* @__PURE__ */ jsx(InputComponent, {
|
|
81
|
+
inputRef,
|
|
82
|
+
classes: {
|
|
83
|
+
root: clsx(classes == null ? void 0 : classes.inputRoot, inlineEditorClasses.inputRoot),
|
|
84
|
+
input: clsx(classes == null ? void 0 : classes.input, inlineEditorClasses.input, css(styles.input)),
|
|
85
|
+
inputBorderContainer: clsx(classes == null ? void 0 : classes.inputBorderContainer, inlineEditorClasses.inputBorderContainer, css(styles.inputBorderContainer))
|
|
86
|
+
},
|
|
87
|
+
inputProps: {
|
|
88
|
+
style: {
|
|
89
|
+
...typographyStyles,
|
|
90
|
+
height: InputComponent === HvInput ? lineHeight : void 0
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
value,
|
|
94
|
+
onBlur: handleBlur,
|
|
95
|
+
onChange: handleChange,
|
|
96
|
+
onKeyDown: handleKeyDown,
|
|
97
|
+
...others
|
|
98
|
+
}) : /* @__PURE__ */ jsxs(HvButton, {
|
|
99
|
+
variant: "secondaryGhost",
|
|
100
|
+
overrideIconColors: false,
|
|
101
|
+
className: clsx(classes == null ? void 0 : classes.button, inlineEditorClasses.button, css(styles.button), parseInt(lineHeight, 10) >= 28 && clsx(classes == null ? void 0 : classes.largeText, inlineEditorClasses.largeText, css(styles.largeText))),
|
|
102
|
+
onClick: handleClick,
|
|
103
|
+
...buttonProps,
|
|
104
|
+
children: [/* @__PURE__ */ jsx(HvTypography, {
|
|
105
|
+
variant,
|
|
106
|
+
noWrap: true,
|
|
107
|
+
className: clsx(classes == null ? void 0 : classes.text, inlineEditorClasses.text, css(styles.text), !value && clsx(classes == null ? void 0 : classes.textEmpty, inlineEditorClasses.textEmpty, css(styles.textEmpty))),
|
|
108
|
+
...typographyProps,
|
|
109
|
+
children: value || placeholder
|
|
110
|
+
}), /* @__PURE__ */ jsx(Edit, {
|
|
111
|
+
color: "secondary_60",
|
|
112
|
+
role: "presentation",
|
|
113
|
+
className: clsx(classes == null ? void 0 : classes.icon, inlineEditorClasses.icon, css(styles.icon), showIcon && clsx(classes == null ? void 0 : classes.iconVisible, inlineEditorClasses.iconVisible, css(styles.iconVisible)))
|
|
114
|
+
})]
|
|
115
|
+
})
|
|
116
|
+
})
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
export {
|
|
120
|
+
HvInlineEditor
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=InlineEditor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditor.js","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
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
import inlineEditorClasses from "./inlineEditorClasses.js";
|
|
3
|
+
import baseInputClasses from "../BaseInput/baseInputClasses.js";
|
|
4
|
+
import inputClasses from "../Input/inputClasses.js";
|
|
5
|
+
const styles = {
|
|
6
|
+
root: {
|
|
7
|
+
[`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {
|
|
8
|
+
height: "100%"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
inputBorderContainer: {
|
|
12
|
+
top: "unset",
|
|
13
|
+
bottom: 0
|
|
14
|
+
},
|
|
15
|
+
input: {
|
|
16
|
+
padding: theme.spacing([0, "8px"])
|
|
17
|
+
},
|
|
18
|
+
text: {
|
|
19
|
+
overflow: "hidden",
|
|
20
|
+
textOverflow: "ellipsis",
|
|
21
|
+
whiteSpace: "nowrap",
|
|
22
|
+
alignSelf: "center"
|
|
23
|
+
},
|
|
24
|
+
textEmpty: {
|
|
25
|
+
color: theme.typography.placeholderText.color
|
|
26
|
+
},
|
|
27
|
+
button: {
|
|
28
|
+
padding: theme.spacing([0, "8px"]),
|
|
29
|
+
boxSizing: "border-box",
|
|
30
|
+
cursor: "text",
|
|
31
|
+
height: "100%",
|
|
32
|
+
width: "100%",
|
|
33
|
+
maxWidth: "100%",
|
|
34
|
+
justifyContent: "flex-start",
|
|
35
|
+
backgroundColor: "transparent",
|
|
36
|
+
"&:hover, &:focus": {
|
|
37
|
+
outline: `1px solid ${theme.inlineEditor.hoverBorderColor}`,
|
|
38
|
+
backgroundColor: "transparent",
|
|
39
|
+
[`& .${inlineEditorClasses.icon}`]: {
|
|
40
|
+
visibility: "visible"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"&:active": {
|
|
44
|
+
outline: `1px solid ${theme.inlineEditor.activeBorderColor}`,
|
|
45
|
+
backgroundColor: "transparent",
|
|
46
|
+
[`& .${inlineEditorClasses.icon}`]: {
|
|
47
|
+
visibility: "visible"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"& > div": {
|
|
51
|
+
width: "100%"
|
|
52
|
+
},
|
|
53
|
+
"& > div > span": {
|
|
54
|
+
width: "100%",
|
|
55
|
+
overflow: "hidden"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
icon: {
|
|
59
|
+
cursor: "pointer",
|
|
60
|
+
visibility: "hidden",
|
|
61
|
+
minWidth: 32,
|
|
62
|
+
alignSelf: "center"
|
|
63
|
+
},
|
|
64
|
+
iconVisible: {
|
|
65
|
+
visibility: "visible"
|
|
66
|
+
},
|
|
67
|
+
largeText: {
|
|
68
|
+
margin: theme.spacing([0, "8px"])
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
export {
|
|
72
|
+
styles
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=InlineEditor.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditor.styles.js","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,iBAAiBC,aAAaC,aAAaD,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,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,MAAMS,WAAWC,gBAAgBF;AAAAA,EAC1C;AAAA,EACAG,QAAQ;AAAA,IACNZ,SAASC,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,MAAMmB,aAAaC;AAAAA,MACzCH,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACVL,SAAU,aAAYlB,MAAMmB,aAAaK;AAAAA,MACzCP,iBAAiB;AAAA,MACjB,CAAE,MAAKI,oBAAoBC,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,MAAMC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,EAClC;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root", "button", "largeText", "text", "textEmpty", "icon", "iconVisible", "inputRoot", "input", "inputBorderContainer"];
|
|
3
|
+
const inlineEditorClasses = getClasses(classKeys, "HvInlineEditor");
|
|
4
|
+
const inlineEditorClasses$1 = inlineEditorClasses;
|
|
5
|
+
export {
|
|
6
|
+
inlineEditorClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=inlineEditorClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inlineEditorClasses.js","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,WAC1BF,WACA,gBAAgB;AAGlB,MAAA,wBAAeC;"}
|
package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import horizontalScrollListItemClasses from "./horizontalScrollListItemClasses.js";
|
|
2
|
+
import { ClassNames } from "@emotion/react";
|
|
3
|
+
import { clsx } from "clsx";
|
|
4
|
+
import { styles } from "./HorizontalScrollListItem.styles.js";
|
|
5
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
6
|
+
import { setId } from "../../../../utils/setId.js";
|
|
7
|
+
const HvHorizontalScrollListItem = ({
|
|
8
|
+
id,
|
|
9
|
+
className,
|
|
10
|
+
classes,
|
|
11
|
+
selected,
|
|
12
|
+
children,
|
|
13
|
+
onClick,
|
|
14
|
+
onKeyDown,
|
|
15
|
+
tooltipWrapper,
|
|
16
|
+
...others
|
|
17
|
+
}) => {
|
|
18
|
+
const variant = selected ? "label" : "body";
|
|
19
|
+
const labelId = setId(id, "label");
|
|
20
|
+
const buttonId = setId(id, "button");
|
|
21
|
+
const Tooltip = tooltipWrapper;
|
|
22
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
23
|
+
children: ({
|
|
24
|
+
css
|
|
25
|
+
}) => /* @__PURE__ */ jsx("li", {
|
|
26
|
+
id,
|
|
27
|
+
className: clsx(className, classes == null ? void 0 : classes.root, horizontalScrollListItemClasses.root, css(styles.root)),
|
|
28
|
+
"aria-current": selected,
|
|
29
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
30
|
+
id: buttonId,
|
|
31
|
+
role: "button",
|
|
32
|
+
tabIndex: 0,
|
|
33
|
+
onClick,
|
|
34
|
+
onKeyDown,
|
|
35
|
+
className: clsx(classes == null ? void 0 : classes.button, horizontalScrollListItemClasses.button, css(styles.button)),
|
|
36
|
+
"aria-labelledby": labelId,
|
|
37
|
+
...others,
|
|
38
|
+
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
39
|
+
id: labelId,
|
|
40
|
+
className: clsx(classes == null ? void 0 : classes.text, horizontalScrollListItemClasses.text, css(styles.text), selected && clsx(classes == null ? void 0 : classes.selected, horizontalScrollListItemClasses.selected, css(styles.selected))),
|
|
41
|
+
variant,
|
|
42
|
+
children
|
|
43
|
+
})
|
|
44
|
+
})
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
export {
|
|
49
|
+
HvHorizontalScrollListItem
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=HorizontalScrollListItem.js.map
|