@hitachivantara/uikit-react-core 5.29.0 → 5.30.1
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/BaseDropdown/BaseDropdown.cjs +35 -42
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/components/Calendar/Calendar.styles.cjs +1 -1
- package/dist/cjs/components/Calendar/Calendar.styles.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.cjs +2 -3
- package/dist/cjs/components/DatePicker/DatePicker.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Actions/Actions.cjs +4 -1
- package/dist/cjs/components/Dialog/Actions/Actions.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +12 -20
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Title/Title.cjs +5 -8
- package/dist/cjs/components/Dialog/Title/Title.cjs.map +1 -1
- package/dist/cjs/components/Dialog/context.cjs +10 -0
- package/dist/cjs/components/Dialog/context.cjs.map +1 -0
- package/dist/cjs/components/EmptyState/EmptyState.cjs +1 -1
- package/dist/cjs/components/EmptyState/EmptyState.cjs.map +1 -1
- package/dist/cjs/utils/useSavedState.cjs.map +1 -1
- package/dist/esm/components/BaseDropdown/BaseDropdown.js +35 -42
- package/dist/esm/components/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.styles.js +1 -1
- package/dist/esm/components/Calendar/Calendar.styles.js.map +1 -1
- package/dist/esm/components/DatePicker/DatePicker.js +2 -3
- package/dist/esm/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/Dialog/Actions/Actions.js +4 -1
- package/dist/esm/components/Dialog/Actions/Actions.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +14 -20
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/Title/Title.js +5 -8
- package/dist/esm/components/Dialog/Title/Title.js.map +1 -1
- package/dist/esm/components/Dialog/context.js +10 -0
- package/dist/esm/components/Dialog/context.js.map +1 -0
- package/dist/esm/components/EmptyState/EmptyState.js +1 -1
- package/dist/esm/components/EmptyState/EmptyState.js.map +1 -1
- package/dist/esm/utils/useSavedState.js.map +1 -1
- package/dist/types/index.d.ts +9 -9
- package/package.json +2 -2
|
@@ -5,6 +5,7 @@ const MuiDialogTitle = require("@mui/material/DialogTitle");
|
|
|
5
5
|
const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
|
|
6
6
|
const iconVariant = require("../../../utils/iconVariant.cjs");
|
|
7
7
|
const Title_styles = require("./Title.styles.cjs");
|
|
8
|
+
const context = require("../context.cjs");
|
|
8
9
|
const Typography = require("../../Typography/Typography.cjs");
|
|
9
10
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
10
11
|
const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
|
|
@@ -23,11 +24,10 @@ const HvDialogTitle = (props) => {
|
|
|
23
24
|
css,
|
|
24
25
|
cx
|
|
25
26
|
} = Title_styles.useClasses(classesProp);
|
|
26
|
-
const isString = typeof children === "string";
|
|
27
27
|
const {
|
|
28
28
|
fullscreen
|
|
29
|
-
} =
|
|
30
|
-
|
|
29
|
+
} = context.useDialogContext();
|
|
30
|
+
const isString = typeof children === "string";
|
|
31
31
|
const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
|
|
32
32
|
return /* @__PURE__ */ jsxRuntime.jsx(MuiDialogTitle__default.default, { className: cx(!fullscreen && css({
|
|
33
33
|
flex: 1
|
|
@@ -35,12 +35,9 @@ const HvDialogTitle = (props) => {
|
|
|
35
35
|
[classes.fullscreen]: fullscreen
|
|
36
36
|
}, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
|
|
37
37
|
icon,
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({
|
|
39
39
|
[classes.textWithIcon]: !!icon
|
|
40
|
-
}), children:
|
|
41
|
-
!isString && children,
|
|
42
|
-
isString && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children })
|
|
43
|
-
] })
|
|
40
|
+
}), children: !isString ? children : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children }) })
|
|
44
41
|
] }) });
|
|
45
42
|
};
|
|
46
43
|
exports.dialogTitleClasses = Title_styles.staticClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport {
|
|
1
|
+
{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"default\";\n\nexport interface HvDialogTitleProps\n extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n /** Variant of the dialog title. */\n variant?: HvDialogTitleVariant;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n const {\n classes: classesProp,\n className,\n children,\n variant = \"default\",\n showIcon = true,\n customIcon = null,\n ...others\n } = useDefaultProps(\"HvDialogTitle\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { fullscreen } = useDialogContext();\n\n const isString = typeof children === \"string\";\n\n const icon = customIcon || (showIcon && iconVariant(variant));\n\n return (\n <MuiDialogTitle\n className={cx(\n !fullscreen && css({ flex: 1 }),\n classes.root,\n {\n [classes.fullscreen]: fullscreen,\n },\n className\n )}\n {...others}\n >\n <div className={classes.messageContainer}>\n {icon}\n <div className={cx({ [classes.textWithIcon]: !!icon })}>\n {!isString ? (\n children\n ) : (\n <HvTypography variant=\"title4\" className={classes.titleText}>\n {children}\n </HvTypography>\n )}\n </div>\n </div>\n </MuiDialogTitle>\n );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","fullscreen","useDialogContext","isString","icon","iconVariant","MuiDialogTitle","flex","root","jsxs","messageContainer","jsx","textWithIcon","HvTypography","titleText"],"mappings":";;;;;;;;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,MAAeC,QAAiB,iBAAA;AAElCC,QAAAA,WAAW,OAAOX,aAAa;AAErC,QAAMY,OAAOT,cAAeD,YAAYW,YAAAA,YAAYZ,OAAO;AAE3D,wCACGa,wBAAAA,SACC,EAAA,WAAWP,GACT,CAACE,cAAcH,IAAI;AAAA,IAAES,MAAM;AAAA,EAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQY,UAAU,GAAGA;AAAAA,EACxB,GACAV,SACF,GACA,GAAIK,QAEJ,UAACa,2BAAAA,KAAA,OAAA,EAAI,WAAWpB,QAAQqB,kBACrBN,UAAAA;AAAAA,IAAAA;AAAAA,IACDO,2BAAAA,IAAC,OAAI,EAAA,WAAWZ,GAAG;AAAA,MAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACR;AAAAA,IAAAA,CAAM,GAClD,UAACD,CAAAA,WACAX,WAEAmB,2BAAAA,IAACE,WAAAA,cAAa,EAAA,SAAQ,UAAS,WAAWxB,QAAQyB,WAC/CtB,UACH,EAEJ,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const DialogContext = React.createContext({
|
|
5
|
+
fullscreen: false
|
|
6
|
+
});
|
|
7
|
+
const useDialogContext = () => React.useContext(DialogContext);
|
|
8
|
+
exports.DialogContext = DialogContext;
|
|
9
|
+
exports.useDialogContext = useDialogContext;
|
|
10
|
+
//# sourceMappingURL=context.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.cjs","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["DialogContext","createContext","fullscreen","useDialogContext","useContext"],"mappings":";;;AAEO,MAAMA,gBAAgBC,MAAAA,cAAc;AAAA,EAAEC,YAAY;AAAM,CAAC;AAEnDC,MAAAA,mBAAmBA,MAAMC,MAAAA,WAAWJ,aAAa;;;"}
|
|
@@ -28,7 +28,7 @@ const HvEmptyState = (props) => {
|
|
|
28
28
|
const onlyXs = useMediaQuery__default.default(muiTheme.breakpoints.only("xs"));
|
|
29
29
|
const upSm = useMediaQuery__default.default(muiTheme.breakpoints.up("sm"));
|
|
30
30
|
const messageOnly = !!(message && !(title || action));
|
|
31
|
-
const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant, className: style, children: node });
|
|
31
|
+
const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant, className: style, children: node });
|
|
32
32
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.container, onlyXs && css({
|
|
33
33
|
flexDirection: "column",
|
|
34
34
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Icon to be presented. */\n icon: React.ReactNode;\n /** The title to be shown. */\n title?:
|
|
1
|
+
{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n extends HvBaseProps<HTMLDivElement, \"title\"> {\n /** Icon to be presented. */\n icon: React.ReactNode;\n /** The title to be shown. */\n title?: React.ReactNode;\n /** The message to be shown. */\n message?: React.ReactNode;\n /** The action message to be shown. */\n action?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state component. */\n classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n const {\n action,\n icon,\n title,\n message,\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvEmptyState\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n const messageOnly = !!(message && !(title || action));\n\n const renderNode = (\n variant?: HvTypographyProps[\"variant\"],\n node?: React.ReactNode,\n style?: string\n ) =>\n node && (\n <HvTypography component=\"div\" variant={variant} className={style}>\n {node}\n </HvTypography>\n );\n\n return (\n <div className={cx(classes.root, className)} {...others}>\n <div\n className={cx(\n classes.container,\n onlyXs &&\n css({\n flexDirection: \"column\",\n alignItems: \"center\",\n textAlign: \"center\",\n }),\n {\n [classes.containerMessageOnly]: messageOnly,\n },\n onlyXs && messageOnly && css({ flexDirection: \"row\" })\n )}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div\n className={cx(\n classes.textContainer,\n upSm && css({ marginLeft: theme.space.xs })\n )}\n >\n {renderNode(\"title4\", title, classes.titleContainer)}\n {renderNode(\"body\", message, classes.messageContainer)}\n {renderNode(\"body\", action, classes.actionContainer)}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","jsx","HvTypography","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWN,WAAW;AAEnD,QAAMO,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,uBAAAA,QAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,uBAAAA,QAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEjB,WAAW,EAAED,SAASF;AAE7C,QAAMqB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACGE,2BAAAA,IAAAC,WAAA,cAAA,EAAa,WAAU,OAAM,SAAkB,WAAWF,OACxDD,UACH,KAAA,CAAA;AAGJ,wCACG,OAAI,EAAA,WAAWd,GAAGL,QAAQuB,MAAMrB,SAAS,GAAG,GAAIC,QAC/C,0CAAC,OACC,EAAA,WAAWE,GACTL,QAAQwB,WACRd,UACEJ,IAAI;AAAA,IACFmB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAAC3B,QAAQ4B,oBAAoB,GAAGZ;AAAAA,EAAAA,GAElCN,UAAUM,eAAeV,IAAI;AAAA,IAAEmB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAAJ,2BAAA,IAAC,OAAI,EAAA,WAAWrB,QAAQ6B,eAAgBhC,UAAK,MAAA;AAAA,oCAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQ8B,eACRhB,QAAQR,IAAI;AAAA,MAAEyB,YAAYC,YAAAA,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECjB,UAAAA;AAAAA,MAAW,WAAA,UAAUnB,OAAOE,QAAQmC,cAAc;AAAA,MAClDlB,WAAW,QAAQlB,SAASC,QAAQoC,gBAAgB;AAAA,MACpDnB,WAAW,QAAQrB,QAAQI,QAAQqC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSavedState.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(
|
|
1
|
+
{"version":3,"file":"useSavedState.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n const [initialState] = useState<T>(defaultState);\n\n const [state, setState] = useState<T | undefined>(initialState);\n const [submittedState, setSubmittedState] = useState<T | undefined>(\n initialState\n );\n\n const changeState = useCallback((value?: T, save = false) => {\n setState(value);\n if (save) setSubmittedState(value);\n }, []);\n\n const rollback = () => {\n setState(submittedState);\n };\n\n return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";;;AAEO,SAASA,cAAiBC,cAAiB;AAChD,QAAM,CAACC,YAAY,IAAIC,MAAAA,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,eAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,eAC1CD,YACF;AAEA,QAAMM,cAAcC,MAAAA,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;;"}
|
|
@@ -2,7 +2,6 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import React__default, { useState, useCallback, useMemo } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
4
|
import { ClickAwayListener } from "@mui/material";
|
|
5
|
-
import { theme } from "@hitachivantara/uikit-styles";
|
|
6
5
|
import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
|
|
7
6
|
import { usePopper } from "react-popper";
|
|
8
7
|
import { detectOverflow } from "@popperjs/core";
|
|
@@ -83,8 +82,7 @@ const HvBaseDropdown = (props) => {
|
|
|
83
82
|
...otherPopperProps
|
|
84
83
|
} = popperProps;
|
|
85
84
|
const onFirstUpdate = useCallback(() => {
|
|
86
|
-
|
|
87
|
-
onContainerCreation(popperElement);
|
|
85
|
+
onContainerCreation == null ? void 0 : onContainerCreation(popperElement);
|
|
88
86
|
}, [onContainerCreation, popperElement]);
|
|
89
87
|
const widthCalculator = useCallback(({
|
|
90
88
|
state
|
|
@@ -173,53 +171,48 @@ const HvBaseDropdown = (props) => {
|
|
|
173
171
|
if (disabled || notControlKey || ignoredCombinations)
|
|
174
172
|
return;
|
|
175
173
|
const newOpen = !isOpen;
|
|
176
|
-
|
|
174
|
+
setIsOpen(() => {
|
|
177
175
|
if (!newOpen) {
|
|
178
176
|
referenceElement == null ? void 0 : referenceElement.focus({
|
|
179
177
|
preventScroll: true
|
|
180
178
|
});
|
|
181
179
|
}
|
|
182
180
|
return newOpen;
|
|
183
|
-
};
|
|
184
|
-
setIsOpen(focusHeader());
|
|
181
|
+
});
|
|
185
182
|
onToggle == null ? void 0 : onToggle(event, newOpen);
|
|
186
183
|
}, [isOpen, disabled, setIsOpen, onToggle, referenceElement]);
|
|
187
|
-
const
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
184
|
+
const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
|
|
185
|
+
const defaultHeaderElement = /* @__PURE__ */ jsxs(
|
|
186
|
+
"div",
|
|
187
|
+
{
|
|
188
|
+
id: setId(id, "header"),
|
|
189
|
+
className: cx(classes.header, {
|
|
190
|
+
[classes.headerDisabled]: disabled,
|
|
191
|
+
[classes.headerReadOnly]: readOnly,
|
|
192
|
+
[classes.headerOpen]: isOpen,
|
|
193
|
+
[classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
|
|
194
|
+
[classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
|
|
195
|
+
}),
|
|
196
|
+
role: ariaRole === "combobox" ? "textbox" : void 0,
|
|
197
|
+
...headerAriaLabels,
|
|
198
|
+
style: disabled || readOnly ? {
|
|
199
|
+
pointerEvents: "none"
|
|
200
|
+
} : void 0,
|
|
201
|
+
tabIndex: disabled ? -1 : 0,
|
|
202
|
+
ref: handleDropdownHeaderRef,
|
|
203
|
+
...dropdownHeaderProps,
|
|
204
|
+
children: [
|
|
205
|
+
/* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.placeholder, {
|
|
206
|
+
[classes.selectionDisabled]: disabled
|
|
207
|
+
}), variant: "body", children: placeholder }) : placeholder }),
|
|
208
|
+
/* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? "secondary_60" : void 0, className: classes.arrow }) })
|
|
209
|
+
]
|
|
193
210
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
className: cx(classes.header, {
|
|
200
|
-
[classes.headerDisabled]: disabled,
|
|
201
|
-
[classes.headerReadOnly]: readOnly,
|
|
202
|
-
[classes.headerOpen]: isOpen,
|
|
203
|
-
[classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
|
|
204
|
-
[classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
|
|
205
|
-
}),
|
|
206
|
-
role: ariaRole === "combobox" ? "textbox" : void 0,
|
|
207
|
-
...headerAriaLabels,
|
|
208
|
-
style: disabled || readOnly ? {
|
|
209
|
-
pointerEvents: "none"
|
|
210
|
-
} : void 0,
|
|
211
|
-
tabIndex: disabled ? -1 : 0,
|
|
212
|
-
ref: handleDropdownHeaderRef,
|
|
213
|
-
...dropdownHeaderProps,
|
|
214
|
-
children: [
|
|
215
|
-
/* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.placeholder, {
|
|
216
|
-
[classes.selectionDisabled]: disabled
|
|
217
|
-
}), variant: "body", children: placeholder }) : placeholder }),
|
|
218
|
-
/* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? theme.colors.secondary_60 : void 0, className: classes.arrow }) })
|
|
219
|
-
]
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
})();
|
|
211
|
+
);
|
|
212
|
+
const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
|
|
213
|
+
ref: handleDropdownHeaderRef,
|
|
214
|
+
...headerControlArias
|
|
215
|
+
}) : defaultHeaderElement;
|
|
223
216
|
const containerComponent = (() => {
|
|
224
217
|
const handleContainerKeyDown = (event) => {
|
|
225
218
|
var _a2;
|
|
@@ -282,7 +275,7 @@ const HvBaseDropdown = (props) => {
|
|
|
282
275
|
},
|
|
283
276
|
tabIndex: -1,
|
|
284
277
|
...others,
|
|
285
|
-
children:
|
|
278
|
+
children: headerElement
|
|
286
279
|
}
|
|
287
280
|
),
|
|
288
281
|
isOpen && containerComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n AriaAttributes,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /**\n * The role of the element that triggers the popup.\n *\n * Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n */\n role?: string;\n /**\n * Header placeholder.\n */\n placeholder?: string | React.ReactNode;\n /**\n * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n */\n disabled?: boolean;\n /**\n * If `true` the dropdown will be in read only mode, unable to be interacted.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * Replacement for the header component.\n */\n component?: React.ReactNode;\n /**\n * Adornment to replace the default arrows.\n */\n adornment?: React.ReactNode;\n /**\n * When dropdown changes the expanded state.\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * When user click outside the open container.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n */\n onContainerCreation?: (container: HTMLElement | null) => void;\n /**\n * Attributes applied to the dropdown header element.\n */\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /**\n * Pass a ref to the dropdown header element.\n */\n dropdownHeaderRef?: React.Ref<any>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp, \"hvbasedropdown\");\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies AriaAttributes;\n\n const placement: PopperPlacementType = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n if (onContainerCreation) onContainerCreation(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x || 0;\n const y = state.modifiersData.preventOverflow?.y || 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers: PopperProps[\"modifiers\"] = useMemo(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) ||\n (isKey(event, \"ArrowDown\") && isOpen) ||\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled || notControlKey || ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n /* If about to close focus on the header component. */\n const focusHeader = () => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n };\n setIsOpen(focusHeader());\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const headerComponent = (() => {\n if (component) {\n return React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n });\n }\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n return (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment || (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? theme.colors.secondary_60 : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n })();\n\n const containerComponent = (() => {\n /**\n * Handle keyboard inside children container.\n */\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId || \"\") || document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerComponent}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","idProp","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","placementProp","ariaExpandedProp","ariaLabelProp","ariaLabelledByProp","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","useUniqueId","containerId","setId","headerControlArias","headerAriaLabels","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","ExpanderComponent","DropUpXS","DropDownXS","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","selection","selectionDisabled","arrowContainer","theme","colors","secondary_60","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","inputExtensionOpen","inputExtensionLeftPosition","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onKeyDown","onClick"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n AriaAttributes,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /**\n * The role of the element that triggers the popup.\n *\n * Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n */\n role?: string;\n /**\n * Header placeholder.\n */\n placeholder?: React.ReactNode;\n /**\n * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n */\n disabled?: boolean;\n /**\n * If `true` the dropdown will be in read only mode, unable to be interacted.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps>;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * Replacement for the header component.\n */\n component?: React.ReactNode;\n /**\n * Adornment to replace the default arrows.\n */\n adornment?: React.ReactNode;\n /**\n * When dropdown changes the expanded state.\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * When user click outside the open container.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n */\n onContainerCreation?: (container: HTMLElement | null) => void;\n /**\n * Attributes applied to the dropdown header element.\n */\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /**\n * Pass a ref to the dropdown header element.\n */\n dropdownHeaderRef?: React.Ref<any>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp, \"hvbasedropdown\");\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies AriaAttributes;\n\n const placement: PopperPlacementType = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x || 0;\n const y = state.modifiersData.preventOverflow?.y || 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers = useMemo<PopperProps[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) ||\n (isKey(event, \"ArrowDown\") && isOpen) ||\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled || notControlKey || ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n /* If about to close focus on the header component. */\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]: isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment || (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && React.isValidElement(component)\n ? React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n const containerComponent = (() => {\n /**\n * Handle keyboard inside children container.\n */\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId || \"\") || document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerElement}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","idProp","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","placementProp","ariaExpandedProp","ariaLabelProp","ariaLabelledByProp","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","useUniqueId","containerId","setId","headerControlArias","headerAriaLabels","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focus","preventScroll","ExpanderComponent","DropUpXS","DropDownXS","defaultHeaderElement","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","selection","selectionDisabled","arrowContainer","arrow","headerElement","React","isValidElement","cloneElement","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","inputExtensionOpen","inputExtensionLeftPosition","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onKeyDown","onClick"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const {
|
|
|
16
16
|
"& ~ $singleCalendar": {
|
|
17
17
|
// target the next calendar when the former is hovered
|
|
18
18
|
"& > div": {
|
|
19
|
-
"& > div:nth-
|
|
19
|
+
"& > div:nth-of-type(3)": {
|
|
20
20
|
"& > div": {
|
|
21
21
|
"& > div[data-calendar-cell='calendarCell']": {
|
|
22
22
|
backgroundColor: theme.colors.atmo1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.styles.js","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n root: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n rangeCalendarContainer: {\n display: \"flex\",\n },\n singleCalendar: {\n \"&:hover\": {\n \"& ~ $singleCalendar\": {\n // target the next calendar when the former is hovered\n \"& > div\": {\n \"& > div:nth-
|
|
1
|
+
{"version":3,"file":"Calendar.styles.js","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n root: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n rangeCalendarContainer: {\n display: \"flex\",\n },\n singleCalendar: {\n \"&:hover\": {\n \"& ~ $singleCalendar\": {\n // target the next calendar when the former is hovered\n \"& > div\": {\n \"& > div:nth-of-type(3)\": {\n \"& > div\": {\n \"& > div[data-calendar-cell='calendarCell']\": {\n backgroundColor: theme.colors.atmo1,\n },\n },\n },\n },\n },\n },\n },\n focusSelection: {},\n calendarMonthlyCell: {},\n calendarMonthlyCellSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","justifyContent","rangeCalendarContainer","singleCalendar","backgroundColor","theme","colors","atmo1","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,SAAS;AAAA,EACX;AAAA,EACAG,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5CC,iBAAiBC,MAAMC,OAAOC;AAAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,qBAAqB,CAAC;AAAA,EACtBC,6BAA6B,CAAC;AAChC,CAAC;"}
|
|
@@ -2,7 +2,6 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { useRef, useEffect } from "react";
|
|
3
3
|
import { useDefaultProps } from "../../hooks/useDefaultProps.js";
|
|
4
4
|
import { Calendar } from "@hitachivantara/uikit-react-icons";
|
|
5
|
-
import { theme } from "@hitachivantara/uikit-styles";
|
|
6
5
|
import { useControlled } from "../../hooks/useControlled.js";
|
|
7
6
|
import { useUniqueId } from "../../hooks/useUniqueId.js";
|
|
8
7
|
import { useLabels } from "../../hooks/useLabels.js";
|
|
@@ -206,9 +205,9 @@ const HvDatePicker = (props) => {
|
|
|
206
205
|
] })
|
|
207
206
|
] });
|
|
208
207
|
const renderInput = (dateString) => {
|
|
209
|
-
return /* @__PURE__ */ jsx(HvTypography, {
|
|
208
|
+
return /* @__PURE__ */ jsx(HvTypography, { className: cx(classes.inputText, {
|
|
210
209
|
[classes.dateText]: dateString
|
|
211
|
-
}), variant: "label", children:
|
|
210
|
+
}), variant: "label", children: dateString || placeholder || "" });
|
|
212
211
|
};
|
|
213
212
|
const dateValue = rangeMode ? {
|
|
214
213
|
startDate,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n isInvalid,\n HvLabel,\n HvFormStatus,\n HvWarningText,\n HvFormElement,\n HvInfoMessage,\n HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n applyLabel: \"Apply\",\n cancelLabel: \"Cancel\",\n clearLabel: \"Clear\",\n invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n > {\n /**\n * Identifies the element that provides an error message for the date picker.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (date?: Date, endDate?: Date) => void;\n /**\n * The callback fired when user clicks on cancel.\n */\n onCancel?: () => void;\n /**\n * The callback fired when user clicks on clear.\n */\n onClear?: () => void;\n /**\n * An object containing all the labels for the datepicker.\n */\n labels?: {\n /**\n * Apply button label.\n */\n applyLabel?: string;\n /**\n * Cancel button label.\n */\n cancelLabel?: string;\n /**\n * Clear button label.\n */\n clearLabel?: string;\n /**\n * Invalid Date label.\n */\n invalidDateLabel?: string;\n };\n /**\n * The initial value of the input when in single calendar mode.\n */\n value?: Date;\n /**\n * The initial value for the start date when in range mode.\n */\n startValue?: Date;\n /**\n * The initial value for the end date when in range mode.\n */\n endValue?: Date;\n /**\n * Flag informing if the the component should be in range mode or in single mode.\n */\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /**\n * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n */\n horizontalPlacement?: \"left\" | \"right\";\n /**\n * The calendar locale. If undefined, it uses calendar default\n */\n locale?: string;\n /**\n * Controls if actions buttons are visible at the calendar.\n */\n showActions?: boolean;\n /**\n * Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n */\n showClear?: boolean;\n /**\n * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n */\n escapeWithReference?: boolean;\n /**\n * An element placed before the Calendar\n */\n startAdornment?: React.ReactNode;\n /**\n * An object containing props to be passed onto the baseDropdown.\n */\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Additional props passed to the HvCalendar component.\n */\n calendarProps?: Partial<HvCalendarProps>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = (props: HvDatePickerProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale: localeProp,\n showActions = false,\n showClear = false,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps,\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdatepicker\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const locale = localeProp || \"en-US\";\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /**\n * Handles the `Apply` action. Both single and ranged modes are handled here.\n */\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n const shouldSave = !(rangeMode || showActions);\n if (shouldSave) {\n handleApply();\n } else {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n /* \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n */\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate || (startDate && endDate) || newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /**\n * Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const renderInput = (dateString: string) => {\n return (\n <HvTypography\n color={theme.colors.secondary}\n className={cx(classes.inputText, { [classes.dateText]: dateString })}\n variant=\"label\"\n >\n {(dateString || placeholder) === undefined\n ? \"\"\n : dateString || placeholder}\n </HvTypography>\n );\n };\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n adornment={\n <Calendar\n className={classes.icon}\n color={disabled ? \"secondary_80\" : undefined}\n />\n }\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n {...dropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode || showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","actionContainer","leftContainer","setId","action","rightContainer","renderInput","dateString","theme","colors","secondary","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","root","labelContainer","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","icon","modifiers","enabled","join","trim","_event","invalidDateLabel","error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n isInvalid,\n HvLabel,\n HvFormStatus,\n HvWarningText,\n HvFormElement,\n HvInfoMessage,\n HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n applyLabel: \"Apply\",\n cancelLabel: \"Cancel\",\n clearLabel: \"Clear\",\n invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n > {\n /**\n * Identifies the element that provides an error message for the date picker.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (date?: Date, endDate?: Date) => void;\n /**\n * The callback fired when user clicks on cancel.\n */\n onCancel?: () => void;\n /**\n * The callback fired when user clicks on clear.\n */\n onClear?: () => void;\n /**\n * An object containing all the labels for the datepicker.\n */\n labels?: {\n /**\n * Apply button label.\n */\n applyLabel?: string;\n /**\n * Cancel button label.\n */\n cancelLabel?: string;\n /**\n * Clear button label.\n */\n clearLabel?: string;\n /**\n * Invalid Date label.\n */\n invalidDateLabel?: string;\n };\n /**\n * The initial value of the input when in single calendar mode.\n */\n value?: Date;\n /**\n * The initial value for the start date when in range mode.\n */\n startValue?: Date;\n /**\n * The initial value for the end date when in range mode.\n */\n endValue?: Date;\n /**\n * Flag informing if the the component should be in range mode or in single mode.\n */\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /**\n * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n */\n horizontalPlacement?: \"left\" | \"right\";\n /**\n * The calendar locale. If undefined, it uses calendar default\n */\n locale?: string;\n /**\n * Controls if actions buttons are visible at the calendar.\n */\n showActions?: boolean;\n /**\n * Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n */\n showClear?: boolean;\n /**\n * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n */\n escapeWithReference?: boolean;\n /**\n * An element placed before the Calendar\n */\n startAdornment?: React.ReactNode;\n /**\n * An object containing props to be passed onto the baseDropdown.\n */\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Additional props passed to the HvCalendar component.\n */\n calendarProps?: Partial<HvCalendarProps>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = (props: HvDatePickerProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale: localeProp,\n showActions = false,\n showClear = false,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps,\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdatepicker\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const locale = localeProp || \"en-US\";\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /**\n * Handles the `Apply` action. Both single and ranged modes are handled here.\n */\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n const shouldSave = !(rangeMode || showActions);\n if (shouldSave) {\n handleApply();\n } else {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n /* \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n */\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate || (startDate && endDate) || newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /**\n * Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const renderInput = (dateString: string) => {\n return (\n <HvTypography\n className={cx(classes.inputText, { [classes.dateText]: dateString })}\n variant=\"label\"\n >\n {dateString || placeholder || \"\"}\n </HvTypography>\n );\n };\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n adornment={\n <Calendar\n className={classes.icon}\n color={disabled ? \"secondary_80\" : undefined}\n />\n }\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n {...dropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode || showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","actionContainer","leftContainer","setId","action","rightContainer","renderInput","dateString","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","root","labelContainer","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","icon","modifiers","enabled","join","trim","_event","invalidDateLabel","error"],"mappings":"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"}
|
|
@@ -3,14 +3,17 @@ import MuiDialogActions from "@mui/material/DialogActions";
|
|
|
3
3
|
import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
|
|
4
4
|
import { useClasses } from "./Actions.styles.js";
|
|
5
5
|
import { staticClasses } from "./Actions.styles.js";
|
|
6
|
+
import { useDialogContext } from "../context.js";
|
|
6
7
|
const HvDialogActions = (props) => {
|
|
7
8
|
const {
|
|
8
9
|
classes: classesProp,
|
|
9
10
|
className,
|
|
10
11
|
children,
|
|
11
|
-
fullscreen
|
|
12
|
+
fullscreen: fullScreenProp,
|
|
12
13
|
...others
|
|
13
14
|
} = useDefaultProps("HvDialogActions", props);
|
|
15
|
+
const context = useDialogContext();
|
|
16
|
+
const fullscreen = fullScreenProp ?? context.fullscreen;
|
|
14
17
|
const {
|
|
15
18
|
classes,
|
|
16
19
|
cx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\n /** Set the dialog to fullscreen mode. */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n const {\n classes: classesProp,\n className,\n children,\n fullscreen
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n extends Omit<MuiDialogActionsProps, \"classes\">,\n HvBaseProps {\n /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n fullscreen?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n const {\n classes: classesProp,\n className,\n children,\n fullscreen: fullScreenProp,\n ...others\n } = useDefaultProps(\"HvDialogActions\", props);\n const context = useDialogContext();\n const fullscreen = fullScreenProp ?? context.fullscreen;\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiDialogActions\n className={className}\n classes={{\n root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n spacing: classes.spacing,\n }}\n {...others}\n >\n {children}\n </MuiDialogActions>\n );\n};\n"],"names":["HvDialogActions","props","classes","classesProp","className","children","fullscreen","fullScreenProp","others","useDefaultProps","context","useDialogContext","cx","useClasses","root","spacing"],"mappings":";;;;;;AAwBaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAYC;AAAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBR,KAAK;AAC5C,QAAMS,UAAUC;AACVL,QAAAA,aAAaC,kBAAkBG,QAAQJ;AAEvC,QAAA;AAAA,IAAEJ;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAG5C,SAAA,oBAAC,kBACC,EAAA,WACA,SAAS;AAAA,IACPW,MAAMF,GAAGV,QAAQY,MAAM;AAAA,MAAE,CAACZ,QAAQI,UAAU,GAAGA;AAAAA,IAAAA,CAAY;AAAA,IAC3DS,SAASb,QAAQa;AAAAA,EAAAA,GAEfP,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
|