@hitachivantara/uikit-react-core 5.70.0 → 5.71.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Forms/Suggestions/Suggestions.cjs +22 -29
- package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs +1 -0
- package/dist/cjs/TimePicker/TimePicker.cjs +2 -6
- package/dist/esm/Forms/Suggestions/Suggestions.js +22 -27
- package/dist/esm/Forms/Suggestions/Suggestions.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js +1 -0
- package/dist/esm/ListContainer/ListItem/ListItem.styles.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.js +2 -6
- package/dist/esm/TimePicker/TimePicker.js.map +1 -1
- package/dist/types/index.d.ts +6 -14
- package/package.json +2 -2
|
@@ -2,22 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
-
const
|
|
5
|
+
const ClickAwayListener = require("@mui/base/ClickAwayListener");
|
|
6
|
+
const Popper = require("@mui/base/Popper");
|
|
6
7
|
const utils = require("@mui/material/utils");
|
|
7
|
-
const useClickOutside = require("../../hooks/useClickOutside.cjs");
|
|
8
8
|
const setId = require("../../utils/setId.cjs");
|
|
9
9
|
const Suggestions_styles = require("./Suggestions.styles.cjs");
|
|
10
10
|
const SelectionList = require("../../SelectionList/SelectionList.cjs");
|
|
11
11
|
const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
|
|
12
12
|
const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
|
|
13
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
14
|
-
const MuiPopper__default = /* @__PURE__ */ _interopDefault(MuiPopper);
|
|
15
13
|
const HvSuggestions = React.forwardRef((props, extRef) => {
|
|
16
14
|
const {
|
|
17
15
|
id,
|
|
18
16
|
className,
|
|
19
17
|
classes: classesProp,
|
|
20
18
|
expanded = false,
|
|
19
|
+
open: openProp,
|
|
21
20
|
anchorEl,
|
|
22
21
|
suggestionValues = [],
|
|
23
22
|
onClose,
|
|
@@ -30,10 +29,6 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
|
|
|
30
29
|
const ref = React.useRef(null);
|
|
31
30
|
const forkedRef = utils.useForkRef(ref, extRef);
|
|
32
31
|
const [isOpen, setIsOpen] = React.useState(expanded);
|
|
33
|
-
useClickOutside.useClickOutside(ref, (event) => {
|
|
34
|
-
setIsOpen(false);
|
|
35
|
-
onClose?.(event);
|
|
36
|
-
});
|
|
37
32
|
React.useEffect(() => {
|
|
38
33
|
setIsOpen(expanded);
|
|
39
34
|
}, [expanded]);
|
|
@@ -45,30 +40,28 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
|
|
|
45
40
|
className: cx(classes.root, className),
|
|
46
41
|
...others,
|
|
47
42
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
48
|
-
|
|
43
|
+
ClickAwayListener.ClickAwayListener,
|
|
49
44
|
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
onClickAway: (event) => {
|
|
46
|
+
setIsOpen(false);
|
|
47
|
+
onClose?.(event);
|
|
48
|
+
},
|
|
54
49
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
-
|
|
50
|
+
Popper.Popper,
|
|
56
51
|
{
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
);
|
|
71
|
-
})
|
|
52
|
+
open: openProp ?? isOpen,
|
|
53
|
+
disablePortal: true,
|
|
54
|
+
anchorEl,
|
|
55
|
+
className: classes.popper,
|
|
56
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
+
SelectionList.HvSelectionList,
|
|
58
|
+
{
|
|
59
|
+
className: classes.list,
|
|
60
|
+
id: setId.setId(localId, "list"),
|
|
61
|
+
onChange: onSuggestionSelected,
|
|
62
|
+
children: suggestionValues?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
|
|
63
|
+
}
|
|
64
|
+
)
|
|
72
65
|
}
|
|
73
66
|
)
|
|
74
67
|
}
|
|
@@ -24,10 +24,6 @@ const toTime = (value) => {
|
|
|
24
24
|
const { hours, minutes, seconds } = value;
|
|
25
25
|
return new date.Time(hours, minutes, seconds);
|
|
26
26
|
};
|
|
27
|
-
const getFormat = (timeFormat) => {
|
|
28
|
-
if (timeFormat == null) return 24;
|
|
29
|
-
return timeFormat === "12" ? 12 : 24;
|
|
30
|
-
};
|
|
31
27
|
const HvTimePicker = React.forwardRef(
|
|
32
28
|
(props, ref) => {
|
|
33
29
|
const {
|
|
@@ -77,8 +73,8 @@ const HvTimePicker = React.forwardRef(
|
|
|
77
73
|
isRequired: required,
|
|
78
74
|
isReadOnly: readOnly,
|
|
79
75
|
isDisabled: disabled,
|
|
80
|
-
granularity: "second",
|
|
81
|
-
hourCycle:
|
|
76
|
+
granularity: showSeconds === false ? "minute" : "second",
|
|
77
|
+
hourCycle: timeFormat === "12" ? 12 : 24,
|
|
82
78
|
onChange: (value) => {
|
|
83
79
|
const { hour: hours, minute: minutes, second: seconds } = value;
|
|
84
80
|
onChange?.({ hours, minutes, seconds });
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext, useRef, useState, useEffect } from "react";
|
|
3
|
-
import
|
|
3
|
+
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
|
|
4
|
+
import { Popper } from "@mui/base/Popper";
|
|
4
5
|
import { useForkRef } from "@mui/material/utils";
|
|
5
|
-
import { useClickOutside } from "../../hooks/useClickOutside.js";
|
|
6
6
|
import { setId } from "../../utils/setId.js";
|
|
7
7
|
import { useClasses } from "./Suggestions.styles.js";
|
|
8
8
|
import { staticClasses } from "./Suggestions.styles.js";
|
|
@@ -15,6 +15,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
|
|
|
15
15
|
className,
|
|
16
16
|
classes: classesProp,
|
|
17
17
|
expanded = false,
|
|
18
|
+
open: openProp,
|
|
18
19
|
anchorEl,
|
|
19
20
|
suggestionValues = [],
|
|
20
21
|
onClose,
|
|
@@ -27,10 +28,6 @@ const HvSuggestions = forwardRef((props, extRef) => {
|
|
|
27
28
|
const ref = useRef(null);
|
|
28
29
|
const forkedRef = useForkRef(ref, extRef);
|
|
29
30
|
const [isOpen, setIsOpen] = useState(expanded);
|
|
30
|
-
useClickOutside(ref, (event) => {
|
|
31
|
-
setIsOpen(false);
|
|
32
|
-
onClose?.(event);
|
|
33
|
-
});
|
|
34
31
|
useEffect(() => {
|
|
35
32
|
setIsOpen(expanded);
|
|
36
33
|
}, [expanded]);
|
|
@@ -42,30 +39,28 @@ const HvSuggestions = forwardRef((props, extRef) => {
|
|
|
42
39
|
className: cx(classes.root, className),
|
|
43
40
|
...others,
|
|
44
41
|
children: /* @__PURE__ */ jsx(
|
|
45
|
-
|
|
42
|
+
ClickAwayListener,
|
|
46
43
|
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
onClickAway: (event) => {
|
|
45
|
+
setIsOpen(false);
|
|
46
|
+
onClose?.(event);
|
|
47
|
+
},
|
|
51
48
|
children: /* @__PURE__ */ jsx(
|
|
52
|
-
|
|
49
|
+
Popper,
|
|
53
50
|
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
);
|
|
68
|
-
})
|
|
51
|
+
open: openProp ?? isOpen,
|
|
52
|
+
disablePortal: true,
|
|
53
|
+
anchorEl,
|
|
54
|
+
className: classes.popper,
|
|
55
|
+
children: /* @__PURE__ */ jsx(
|
|
56
|
+
HvSelectionList,
|
|
57
|
+
{
|
|
58
|
+
className: classes.list,
|
|
59
|
+
id: setId(localId, "list"),
|
|
60
|
+
onChange: onSuggestionSelected,
|
|
61
|
+
children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
|
|
62
|
+
}
|
|
63
|
+
)
|
|
69
64
|
}
|
|
70
65
|
)
|
|
71
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport MuiPopper from \"@mui/
|
|
1
|
+
{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper as MuiPopper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n id?: string;\n label: React.ReactNode;\n value?: string;\n disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n /** Whether suggestions is visible */\n open?: boolean;\n /** Whether suggestions is visible. @deprecated use `open` instead */\n expanded?: boolean;\n /** The HTML element Suggestions attaches to. */\n anchorEl?: HTMLElement | null;\n /** Array of { id, label, ...others } values to display in the suggestion list */\n suggestionValues?: HvSuggestion[] | null;\n /** Function called when a suggestion is selected */\n onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n /** Function called when suggestion list is closed */\n onClose?: ClickAwayListenerProps[\"onClickAway\"];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n const {\n id,\n className,\n classes: classesProp,\n expanded = false,\n open: openProp,\n anchorEl,\n suggestionValues = [],\n onClose,\n onSuggestionSelected,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const localId = id ?? setId(elementId, \"suggestions\");\n\n const ref = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef(ref, extRef);\n\n // TODO: remove controlled+uncontrolled `expanded` prop in v6\n const [isOpen, setIsOpen] = useState(expanded);\n useEffect(() => {\n setIsOpen(expanded);\n }, [expanded]);\n\n return (\n <div\n id={localId}\n ref={forkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <ClickAwayListener\n onClickAway={(event) => {\n setIsOpen(false);\n onClose?.(event);\n }}\n >\n <MuiPopper\n open={openProp ?? isOpen}\n disablePortal\n anchorEl={anchorEl}\n className={classes.popper}\n >\n <HvSelectionList\n className={classes.list}\n id={setId(localId, \"list\")}\n onChange={onSuggestionSelected}\n >\n {suggestionValues?.map((item) => (\n <HvListItem key={item.id} value={item} disabled={item.disabled}>\n {item.label}\n </HvListItem>\n ))}\n </HvSelectionList>\n </MuiPopper>\n </ClickAwayListener>\n </div>\n );\n});\n"],"names":["MuiPopper"],"mappings":";;;;;;;;;;;AA4CO,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAACA;AAAAA,YAAA;AAAA,cACC,MAAM,YAAY;AAAA,cAClB,eAAa;AAAA,cACb;AAAA,cACA,WAAW,QAAQ;AAAA,cAEnB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n root: {\n ...theme.typography.body,\n padding: 0,\n display: \"block\",\n height: \"32px\",\n lineHeight: \"32px\",\n listStyleType: \"none\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n position: \"relative\",\n\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n\n \"&$condensed\": {\n marginBottom: 0,\n },\n\n \"&.HvIsFocused\": {\n ...outlineStyles,\n backgroundColor: theme.colors.atmo3,\n zIndex: 2,\n },\n },\n focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n startAdornment: {},\n endAdornment: {},\n gutters: {\n padding: `0 ${theme.space.xs}`,\n\n \"&$withStartAdornment\": {\n paddingLeft: 0,\n },\n \"&$withEndAdornment\": {\n paddingRight: 0,\n },\n },\n condensed: {},\n interactive: {\n cursor: \"pointer\",\n \"&:not($disabled):not($selected):hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&$disabled\": {\n cursor: \"not-allowed\",\n },\n },\n selected: { backgroundColor: theme.colors.containerBackgroundHover },\n disabled: {\n color: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo3,\n },\n withStartAdornment: {\n \"& > div\": {\n float: \"left\",\n },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg *.color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n withEndAdornment: {\n \"& > div\": { float: \"right\" },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg *.color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n root: {\n ...theme.typography.body,\n padding: 0,\n display: \"block\",\n height: \"32px\",\n lineHeight: \"32px\",\n listStyleType: \"none\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n position: \"relative\",\n alignContent: \"center\",\n\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n\n \"&$condensed\": {\n marginBottom: 0,\n },\n\n \"&.HvIsFocused\": {\n ...outlineStyles,\n backgroundColor: theme.colors.atmo3,\n zIndex: 2,\n },\n },\n focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n startAdornment: {},\n endAdornment: {},\n gutters: {\n padding: `0 ${theme.space.xs}`,\n\n \"&$withStartAdornment\": {\n paddingLeft: 0,\n },\n \"&$withEndAdornment\": {\n paddingRight: 0,\n },\n },\n condensed: {},\n interactive: {\n cursor: \"pointer\",\n \"&:not($disabled):not($selected):hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&$disabled\": {\n cursor: \"not-allowed\",\n },\n },\n selected: { backgroundColor: theme.colors.containerBackgroundHover },\n disabled: {\n color: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo3,\n },\n withStartAdornment: {\n \"& > div\": {\n float: \"left\",\n },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg *.color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n withEndAdornment: {\n \"& > div\": { float: \"right\" },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg *.color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -23,10 +23,6 @@ const toTime = (value) => {
|
|
|
23
23
|
const { hours, minutes, seconds } = value;
|
|
24
24
|
return new Time$1(hours, minutes, seconds);
|
|
25
25
|
};
|
|
26
|
-
const getFormat = (timeFormat) => {
|
|
27
|
-
if (timeFormat == null) return 24;
|
|
28
|
-
return timeFormat === "12" ? 12 : 24;
|
|
29
|
-
};
|
|
30
26
|
const HvTimePicker = forwardRef(
|
|
31
27
|
(props, ref) => {
|
|
32
28
|
const {
|
|
@@ -76,8 +72,8 @@ const HvTimePicker = forwardRef(
|
|
|
76
72
|
isRequired: required,
|
|
77
73
|
isReadOnly: readOnly,
|
|
78
74
|
isDisabled: disabled,
|
|
79
|
-
granularity: "second",
|
|
80
|
-
hourCycle:
|
|
75
|
+
granularity: showSeconds === false ? "minute" : "second",
|
|
76
|
+
hourCycle: timeFormat === "12" ? 12 : 24,
|
|
81
77
|
onChange: (value) => {
|
|
82
78
|
const { hour: hours, minute: minutes, second: seconds } = value;
|
|
83
79
|
onChange?.({ hours, minutes, seconds });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n if (!value) return value;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n if (timeFormat == null) return 24;\n return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n | \"root\"\n | \"input\"\n | \"label\"\n | \"placeholder\"\n | \"timePopperContainer\"\n | \"separator\"\n | \"periodContainer\"\n | \"formElementRoot\"\n | \"dropdownPlaceholder\"\n | \"iconBaseRoot\"\n | \"error\"\n | \"labelContainer\"\n | \"description\"\n | \"dropdownHeaderInvalid\"\n | \"dropdownPlaceholderDisabled\"\n | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n > {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTimePickerClasses;\n /** Current value of the element when _controlled_. Follows the 24-hour format. */\n value?: HvTimePickerValue | null;\n /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n defaultValue?: HvTimePickerValue | null;\n /** The placeholder value when no time is selected. */\n placeholder?: string;\n /** The placeholder of the hours input. */\n hoursPlaceholder?: string;\n /** The placeholder of the minutes input. */\n minutesPlaceholder?: string;\n /** The placeholder of the seconds input. */\n secondsPlaceholder?: string;\n /**\n * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n */\n timeFormat?: TimeFormat;\n /** Whether to show the seconds when using the native time picker */\n showSeconds?: boolean;\n /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n locale?: string;\n /** Whether the dropdown is expandable. */\n disableExpand?: boolean;\n /**\n * Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n */\n onChange?: (value: HvTimePickerValue) => void;\n /** Callback called when dropdown changes the expanded state. */\n onToggle?: (event: Event, isOpen: boolean) => void;\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n escapeWithReference?: boolean;\n /** Extra properties to be passed to the TimePicker's dropdown. */\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n */\n label?: React.ReactNode;\n /**\n * Provide additional descriptive text for the form element.\n */\n description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n ...others\n } = useDefaultProps(\"HvTimePicker\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const timeFieldRef = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: \"second\",\n hourCycle: getFormat(timeFormat),\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps, descriptionProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n timeFieldRef,\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n );\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 = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label || description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n {description && (\n <HvInfoMessage\n className={classes.description}\n {...descriptionProps}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={timeFieldRef}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={fieldProps[\"aria-labelledby\"]}\n aria-describedby={fieldProps[\"aria-describedby\"]}\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...otherDropdownProps}\n >\n <div ref={timeFieldRef} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n useTimeFieldState,\n type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n if (!value) return value;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n | \"root\"\n | \"input\"\n | \"label\"\n | \"placeholder\"\n | \"timePopperContainer\"\n | \"separator\"\n | \"periodContainer\"\n | \"formElementRoot\"\n | \"dropdownPlaceholder\"\n | \"iconBaseRoot\"\n | \"error\"\n | \"labelContainer\"\n | \"description\"\n | \"dropdownHeaderInvalid\"\n | \"dropdownPlaceholderDisabled\"\n | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n > {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTimePickerClasses;\n /** Current value of the element when _controlled_. Follows the 24-hour format. */\n value?: HvTimePickerValue | null;\n /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n defaultValue?: HvTimePickerValue | null;\n /** The placeholder value when no time is selected. */\n placeholder?: string;\n /** The placeholder of the hours input. */\n hoursPlaceholder?: string;\n /** The placeholder of the minutes input. */\n minutesPlaceholder?: string;\n /** The placeholder of the seconds input. */\n secondsPlaceholder?: string;\n /**\n * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n */\n timeFormat?: TimeFormat;\n /** Whether to visually show the seconds control */\n showSeconds?: boolean;\n /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n locale?: string;\n /** Whether the dropdown is expandable. */\n disableExpand?: boolean;\n /**\n * Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n */\n onChange?: (value: HvTimePickerValue) => void;\n /** Callback called when dropdown changes the expanded state. */\n onToggle?: (event: Event, isOpen: boolean) => void;\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n escapeWithReference?: boolean;\n /** Extra properties to be passed to the TimePicker's dropdown. */\n dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n ...others\n } = useDefaultProps(\"HvTimePicker\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const timeFieldRef = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: showSeconds === false ? \"minute\" : \"second\",\n hourCycle: timeFormat === \"12\" ? 12 : 24,\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps, descriptionProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n timeFieldRef,\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n );\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 = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label || description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n {description && (\n <HvInfoMessage\n className={classes.description}\n {...descriptionProps}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={timeFieldRef}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={fieldProps[\"aria-labelledby\"]}\n aria-describedby={fieldProps[\"aria-describedby\"]}\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...otherDropdownProps}\n >\n <div ref={timeFieldRef} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import { CardMediaProps } from '@mui/material/CardMedia';
|
|
|
9
9
|
import { Cell } from 'react-table';
|
|
10
10
|
import { CheckboxProps } from '@mui/material/Checkbox';
|
|
11
11
|
import { ChipProps } from '@mui/material/Chip';
|
|
12
|
+
import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
|
|
12
13
|
import { ColumnInstance } from 'react-table';
|
|
13
14
|
import { ColumnInterface } from 'react-table';
|
|
14
15
|
import { ComponentProps } from 'react';
|
|
@@ -6005,7 +6006,9 @@ export declare const HvSuggestions: ForwardRefExoticComponent<HvSuggestionsProps
|
|
|
6005
6006
|
export declare type HvSuggestionsClasses = ExtractNames<typeof useClasses_16>;
|
|
6006
6007
|
|
|
6007
6008
|
export declare interface HvSuggestionsProps extends HvBaseProps {
|
|
6008
|
-
/** Whether suggestions is visible
|
|
6009
|
+
/** Whether suggestions is visible */
|
|
6010
|
+
open?: boolean;
|
|
6011
|
+
/** Whether suggestions is visible. @deprecated use `open` instead */
|
|
6009
6012
|
expanded?: boolean;
|
|
6010
6013
|
/** The HTML element Suggestions attaches to. */
|
|
6011
6014
|
anchorEl?: HTMLElement | null;
|
|
@@ -6014,7 +6017,7 @@ export declare interface HvSuggestionsProps extends HvBaseProps {
|
|
|
6014
6017
|
/** Function called when a suggestion is selected */
|
|
6015
6018
|
onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;
|
|
6016
6019
|
/** Function called when suggestion list is closed */
|
|
6017
|
-
onClose?:
|
|
6020
|
+
onClose?: ClickAwayListenerProps["onClickAway"];
|
|
6018
6021
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
6019
6022
|
classes?: HvSuggestionsClasses;
|
|
6020
6023
|
}
|
|
@@ -6848,7 +6851,7 @@ export declare interface HvTimePickerProps extends Omit<HvFormElementProps, "cla
|
|
|
6848
6851
|
* If undefined, the component will use a format according to the passed locale.
|
|
6849
6852
|
*/
|
|
6850
6853
|
timeFormat?: TimeFormat;
|
|
6851
|
-
/** Whether to show the seconds
|
|
6854
|
+
/** Whether to visually show the seconds control */
|
|
6852
6855
|
showSeconds?: boolean;
|
|
6853
6856
|
/** Locale that will provide the time format(12 or 24 hour format). It is "overwritten" by `showAmPm` */
|
|
6854
6857
|
locale?: string;
|
|
@@ -6867,17 +6870,6 @@ export declare interface HvTimePickerProps extends Omit<HvFormElementProps, "cla
|
|
|
6867
6870
|
escapeWithReference?: boolean;
|
|
6868
6871
|
/** Extra properties to be passed to the TimePicker's dropdown. */
|
|
6869
6872
|
dropdownProps?: Partial<HvBaseDropdownProps>;
|
|
6870
|
-
/**
|
|
6871
|
-
* The label of the form element.
|
|
6872
|
-
*
|
|
6873
|
-
* The form element must be labeled for accessibility reasons.
|
|
6874
|
-
* If not provided, an aria-label or aria-labelledby must be provided instead.
|
|
6875
|
-
*/
|
|
6876
|
-
label?: React.ReactNode;
|
|
6877
|
-
/**
|
|
6878
|
-
* Provide additional descriptive text for the form element.
|
|
6879
|
-
*/
|
|
6880
|
-
description?: React.ReactNode;
|
|
6881
6873
|
}
|
|
6882
6874
|
|
|
6883
6875
|
export declare type HvTimePickerValue = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.71.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "0d5d16d53355e4d4501d3885b6444d217e9d74c9",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|