npm - @hitachivantara/uikit-react-core - Versions diffs - 5.17.0 → 5.18.0 - Mend

@hitachivantara/uikit-react-core 5.17.0 → 5.18.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.

Files changed (415) hide show

package/dist/esm/components/TagsInput/TagsInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsInput.styles.js","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n HvTag,\n HvCharCounter,\n HvFormElement,\n HvInfoMessage,\n HvInput,\n HvLabel,\n HvListContainer,\n HvListItem,\n HvSuggestions,\n HvWarningText,\n HvFormElementProps,\n HvLabelProps,\n HvInfoMessageProps,\n HvCharCounterProps,\n HvWarningTextProps,\n HvListItemProps,\n HvTagProps,\n HvInputProps,\n HvSuggestionsProps,\n} from \"@core/components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport tagsInputClasses from \"./tagsInputClasses\";\nimport baseInputClasses from \"../BaseInput/baseInputClasses\";\nimport suggestionsClasses from \"../Forms/Suggestions/suggestionsClasses\";\nimport listItemClasses from \"../ListContainer/ListItem/listItemClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n <HvFormElement {...props} />\n))({\n display: \"inline-block\",\n width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n float: \"left\",\n display: \"flex\",\n alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n <HvLabel {...props} />\n))({\n display: \"block\",\n float: \"left\",\n paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n <HvInfoMessage {...props} />\n))({\n display: \"block\",\n float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n <HvCharCounter {...props} />\n))(() => ({\n display: \"block\",\n float: \"right\",\n textAlign: \"right\",\n marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n HvListContainer,\n transientOptions\n)(\n ({\n $disabled,\n $singleLine,\n $error,\n $resizable,\n $invalid,\n $readOnly,\n }: {\n $disabled: boolean;\n $singleLine: boolean;\n $error: boolean;\n $resizable: boolean;\n $invalid: boolean;\n $readOnly: boolean;\n }) => ({\n display: \"flex\",\n alignContent: \"flex-start\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n maxWidth: \"100%\",\n height: \"32px\",\n padding: 5,\n overflow: \"auto\",\n position: \"relative\",\n\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid ${theme.tagsInput.borderColor}`,\n borderRadius: theme.radii.base,\n\n \"&:hover\": {\n cursor: \"text\",\n border: `1px solid ${theme.tagsInput.hoverColor}`,\n },\n\n [`& .${baseInputClasses.inputRoot}`]: {\n border: \"none\",\n },\n\n \"&:focus, &:focus-within, &:focus-visible\": {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n },\n\n ...($disabled && {\n backgroundColor: theme.tagsInput.disabledBackgroundColor,\n border: `1px solid ${theme.colors.atmo4}`,\n\n \"&:focus-within, &:hover\": {\n border: `1px solid ${theme.colors.atmo4}`,\n },\n }),\n\n ...($readOnly && {\n backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n \"&:hover\": {\n border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n },\n }),\n\n ...($singleLine && {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n height: 32,\n display: \"table-row\",\n paddingTop: 0,\n }),\n\n ...($error && {\n border: `1px solid ${theme.colors.negative}`,\n }),\n\n ...($resizable && {\n width: \"auto\",\n resize: \"both\",\n overflow: \"auto\",\n }),\n\n ...($invalid && {\n border: `1px solid ${theme.colors.negative}!important`,\n }),\n })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n <HvWarningText {...props} />\n))({\n float: \"left\",\n});\n\nexport const StyledListItem = styled(\n (props: HvListItemProps) => <HvListItem {...props} />,\n transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n marginBottom: 2,\n height: 24,\n lineHeight: \"24px\",\n \"&:not(:last-child)\": {\n marginBottom: 2,\n },\n [`&.${listItemClasses.gutters}`]: {\n padding: \"0 5px\",\n },\n ...($singleLine && {\n display: \"table-cell\",\n paddingTop: \"2px!important\",\n }),\n}));\n\nexport const StyledTag = styled(\n (props: HvTagProps) => <HvTag {...props} />,\n transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n [`& .${tagsInputClasses.chipRoot}`]: {\n maxWidth: \"none\",\n },\n ...($selected && {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n }),\n}));\n\nexport const StyledInputListItem = styled(\n (props: HvListItemProps) => <HvListItem {...props} />,\n transientOptions\n)(\n ({\n $singleLine,\n $isTagSelected,\n }: {\n $singleLine: boolean;\n $isTagSelected: boolean;\n }) => ({\n display: \"flex\",\n flexGrow: 1,\n height: 24,\n lineHeight: \"24px\",\n [`&.${listItemClasses.gutters}`]: {\n padding: \"0 5px\",\n },\n ...($singleLine && {\n display: \"table-cell\",\n minWidth: 100,\n width: \"100%\",\n paddingTop: \"3px!important\",\n verticalAlign: \"middle\",\n }),\n ...($isTagSelected && {\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n }),\n })\n);\n\nexport const StyledInput = styled(\n (props: HvInputProps) => <HvInput {...props} />,\n transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n [`& .${baseInputClasses.root}`]: {\n width: \"100%\",\n border: \"none\",\n [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n background: \"none\",\n },\n [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n background: \"none\",\n },\n },\n [`&& .${baseInputClasses.inputRoot}`]: {\n marginLeft: 0,\n marginRight: 0,\n flex: \"1 1 auto\",\n minWidth: 48,\n height: 24,\n lineHeight: \"24px\",\n padding: 0,\n border: \"none\",\n },\n [`& .${baseInputClasses.inputBorderContainer}`]: {\n border: \"none\",\n background: \"none\",\n },\n [`& .${baseInputClasses.inputRootFocused}`]: {\n outline: \"none!important\",\n boxShadow: \"none!important\",\n },\n [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n backgroundColor: \"transparent \",\n border: \"none\",\n \"&:hover\": {\n border: \"none\",\n },\n },\n [`&& .${baseInputClasses.input}`]: {\n marginLeft: 0,\n },\n ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n <HvSuggestions {...props} />\n))({\n width: \"100%\",\n position: \"relative\",\n top: 59,\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}
1	+ {"version":3,"file":"TagsInput.styles.js","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n HvTag,\n HvCharCounter,\n HvFormElement,\n HvInfoMessage,\n HvInput,\n HvLabel,\n HvListContainer,\n HvListItem,\n HvSuggestions,\n HvWarningText,\n HvFormElementProps,\n HvLabelProps,\n HvInfoMessageProps,\n HvCharCounterProps,\n HvWarningTextProps,\n HvListItemProps,\n HvTagProps,\n HvInputProps,\n HvSuggestionsProps,\n baseInputClasses,\n listItemClasses,\n suggestionsClasses,\n} from \"@core/components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport tagsInputClasses from \"./tagsInputClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n <HvFormElement {...props} />\n))({\n display: \"inline-block\",\n width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n float: \"left\",\n display: \"flex\",\n alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n <HvLabel {...props} />\n))({\n display: \"block\",\n float: \"left\",\n paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n <HvInfoMessage {...props} />\n))({\n display: \"block\",\n float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n <HvCharCounter {...props} />\n))(() => ({\n display: \"block\",\n float: \"right\",\n textAlign: \"right\",\n marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n HvListContainer,\n transientOptions\n)(\n ({\n $disabled,\n $singleLine,\n $error,\n $resizable,\n $invalid,\n $readOnly,\n }: {\n $disabled: boolean;\n $singleLine: boolean;\n $error: boolean;\n $resizable: boolean;\n $invalid: boolean;\n $readOnly: boolean;\n }) => ({\n display: \"flex\",\n alignContent: \"flex-start\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n maxWidth: \"100%\",\n height: \"32px\",\n padding: 5,\n overflow: \"auto\",\n position: \"relative\",\n\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid ${theme.tagsInput.borderColor}`,\n borderRadius: theme.radii.base,\n\n \"&:hover\": {\n cursor: \"text\",\n border: `1px solid ${theme.tagsInput.hoverColor}`,\n },\n\n [`& .${baseInputClasses.inputRoot}`]: {\n border: \"none\",\n },\n\n \"&:focus, &:focus-within, &:focus-visible\": {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n },\n\n ...($disabled && {\n backgroundColor: theme.tagsInput.disabledBackgroundColor,\n border: `1px solid ${theme.colors.atmo4}`,\n\n \"&:focus-within, &:hover\": {\n border: `1px solid ${theme.colors.atmo4}`,\n },\n }),\n\n ...($readOnly && {\n backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n \"&:hover\": {\n border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n },\n }),\n\n ...($singleLine && {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n height: 32,\n display: \"table-row\",\n paddingTop: 0,\n }),\n\n ...($error && {\n border: `1px solid ${theme.colors.negative}`,\n }),\n\n ...($resizable && {\n width: \"auto\",\n resize: \"both\",\n overflow: \"auto\",\n }),\n\n ...($invalid && {\n border: `1px solid ${theme.colors.negative}!important`,\n }),\n })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n <HvWarningText {...props} />\n))({\n float: \"left\",\n});\n\nexport const StyledListItem = styled(\n (props: HvListItemProps) => <HvListItem {...props} />,\n transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n marginBottom: 2,\n height: 24,\n lineHeight: \"24px\",\n \"&:not(:last-child)\": {\n marginBottom: 2,\n },\n [`&.${listItemClasses.gutters}`]: {\n padding: \"0 5px\",\n },\n ...($singleLine && {\n display: \"table-cell\",\n paddingTop: \"2px!important\",\n }),\n}));\n\nexport const StyledTag = styled(\n (props: HvTagProps) => <HvTag {...props} />,\n transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n [`& .${tagsInputClasses.chipRoot}`]: {\n maxWidth: \"none\",\n },\n ...($selected && {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n }),\n}));\n\nexport const StyledInputListItem = styled(\n (props: HvListItemProps) => <HvListItem {...props} />,\n transientOptions\n)(\n ({\n $singleLine,\n $isTagSelected,\n }: {\n $singleLine: boolean;\n $isTagSelected: boolean;\n }) => ({\n display: \"flex\",\n flexGrow: 1,\n height: 24,\n lineHeight: \"24px\",\n [`&.${listItemClasses.gutters}`]: {\n padding: \"0 5px\",\n },\n ...($singleLine && {\n display: \"table-cell\",\n minWidth: 100,\n width: \"100%\",\n paddingTop: \"3px!important\",\n verticalAlign: \"middle\",\n }),\n ...($isTagSelected && {\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n }),\n })\n);\n\nexport const StyledInput = styled(\n (props: HvInputProps) => <HvInput {...props} />,\n transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n [`& .${baseInputClasses.root}`]: {\n width: \"100%\",\n border: \"none\",\n [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n background: \"none\",\n },\n [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n background: \"none\",\n },\n },\n [`&& .${baseInputClasses.inputRoot}`]: {\n marginLeft: 0,\n marginRight: 0,\n flex: \"1 1 auto\",\n minWidth: 48,\n height: 24,\n lineHeight: \"24px\",\n padding: 0,\n border: \"none\",\n },\n [`& .${baseInputClasses.inputBorderContainer}`]: {\n border: \"none\",\n background: \"none\",\n },\n [`& .${baseInputClasses.inputRootFocused}`]: {\n outline: \"none!important\",\n boxShadow: \"none!important\",\n },\n [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n backgroundColor: \"transparent \",\n border: \"none\",\n \"&:hover\": {\n border: \"none\",\n },\n },\n [`&& .${baseInputClasses.input}`]: {\n marginLeft: 0,\n },\n ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n <HvSuggestions {...props} />\n))({\n width: \"100%\",\n position: \"relative\",\n top: 59,\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}

package/dist/esm/components/TimePicker/TimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvFormElement,\n HvBaseDropdown,\n HvLabel,\n HvWarningText,\n HvInfoMessage,\n HvFormElementProps,\n HvBaseDropdownProps,\n useControlled,\n useUniqueId,\n setId,\n ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n if (!value) return undefined;\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\" \| \"onFocus\" \| \"onBlur\"\n > {\n /** Id to be applied to the form element root node. /\n id?: string;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: Partial<HvTimePickerClasses>;\n /* Current value of the element when _controlled_. Follows the 24-hour format. /\n value?: HvTimePickerValue;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue;\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 /\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\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n\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 = (props: HvTimePickerProps) => {\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 } = props;\n const id = useUniqueId(idProp, \"hvtimepicker\");\n const ref = useRef<HTMLDivElement>(null);\n const { classes, cx } = useClasses(classesProp);\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 } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n ref\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled(status, \"standBy\");\n\n const 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 label={label} className={classes.label} {...labelProps} />\n )}\n {description && (\n <HvInfoMessage className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={ref}\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-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...dropdownProps}\n >\n <div ref={ref} 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"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}
1	+ {"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvFormElement,\n HvBaseDropdown,\n HvLabel,\n HvWarningText,\n HvInfoMessage,\n HvFormElementProps,\n HvBaseDropdownProps,\n useControlled,\n useUniqueId,\n setId,\n ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n if (!value) return undefined;\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\" \| \"onFocus\" \| \"onBlur\"\n > {\n /** Id to be applied to the form element root node. /\n id?: string;\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;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue;\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 /\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\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n\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 = (props: HvTimePickerProps) => {\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 } = props;\n const id = useUniqueId(idProp, \"hvtimepicker\");\n const ref = useRef<HTMLDivElement>(null);\n const { classes, cx } = useClasses(classesProp);\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 } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n ref\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled(status, \"standBy\");\n\n const 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 label={label} className={classes.label} {...labelProps} />\n )}\n {description && (\n <HvInfoMessage className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={ref}\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-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...dropdownProps}\n >\n <div ref={ref} 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"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/esm/components/TimePicker/Unit/Unit.js CHANGED Viewed

@@ -1,8 +1,7 @@
-import { ClassNames } from "@emotion/react";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
-import { styles } from "./Unit.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./Unit.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvToggleButton } from "../../ToggleButton/ToggleButton.js";
 import { HvInput } from "../../Input/Input.js";
 const Unit = ({
@@ -14,56 +13,55 @@ const Unit = ({
   onAdd,
   onSub
 }) => {
+  const {
+    classes
+  } = useClasses();
   const {
     type,
     text
   } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css
-    }) => /* @__PURE__ */ jsxs("div", {
-      className: css(styles.root),
-      children: [type !== "literal" && /* @__PURE__ */ jsx(DropUpXS, {
-        onClick: onAdd
-      }), type === "literal" && /* @__PURE__ */ jsx("div", {
-        className: css(styles.separator),
-        children: text
-      }), type === "dayPeriod" && /* @__PURE__ */ jsx(HvToggleButton, {
-        className: css(styles.periodToggle),
-        onClick: onAdd,
-        children: text
-      }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsx(HvInput, {
-        id,
-        disableClear: true,
-        style: {
-          ...theme.typography.title3
-        },
-        classes: {
-          input: css(styles.input),
-          root: css(styles.inputContainer),
-          inputBorderContainer: css(styles.inputBorderContainer),
-          inputRoot: css(styles.inputRoot)
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        required: true,
-        status: state.validationState,
-        value: text.padStart(2, "0"),
-        onChange,
-        placeholder,
-        inputProps: {
-          autoComplete: "off",
-          type: "number"
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.root,
+    children: [type !== "literal" && /* @__PURE__ */ jsx(DropUpXS, {
+      onClick: onAdd
+    }), type === "literal" && /* @__PURE__ */ jsx("div", {
+      className: classes.separator,
+      children: text
+    }), type === "dayPeriod" && /* @__PURE__ */ jsx(HvToggleButton, {
+      className: classes.periodToggle,
+      onClick: onAdd,
+      children: text
+    }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsx(HvInput, {
+      id,
+      disableClear: true,
+      style: {
+        ...theme.typography.title3
+      },
+      classes: {
+        input: classes.input,
+        root: classes.inputContainer,
+        inputBorderContainer: classes.inputBorderContainer,
+        inputRoot: classes.inputRoot
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
         }
-      }), type !== "literal" && /* @__PURE__ */ jsx(DropDownXS, {
-        onClick: onSub
-      })]
-    })
+      },
+      required: true,
+      status: state.validationState,
+      value: text.padStart(2, "0"),
+      onChange,
+      placeholder,
+      inputProps: {
+        autoComplete: "off",
+        type: "number"
+      }
+    }), type !== "literal" && /* @__PURE__ */ jsx(DropDownXS, {
+      onClick: onSub
+    })]
   });
 };
 export {

package/dist/esm/components/TimePicker/Unit/Unit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Unit.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { ~~ClassNames } from \"@emotion/react\";\nimport {~~ DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n DropDownXS as SubtractTimeIcon,\n DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { ~~styles~~ } from \"./Unit.styles\";\n\ninterface UnitProps {\n id?: string;\n state: DateFieldState;\n segment: DateSegment;\n placeholder?: string;\n /** Called when the value changes /\n onChange?: HvInputProps[\"onChange\"];\n /* Called when the up/add arrow is pressed /\n onAdd?: () => void;\n /* Called when the down/subtract arrow is pressed */\n onSub?: () => void;\n}\n\nexport const Unit = ({\n id,\n state,\n segment,\n placeholder: placeholderProp,\n onChange,\n onAdd,\n onSub,\n}: UnitProps) => {\n const { type, text } = segment;\n const placeholder = placeholderProp ?? segment.placeholder;\n\n return (\n <~~ClassNames>\n {({ css }) => (\n <~~div className={~~css(styles~~.root)}>\n {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n {type === \"literal\" && ~~(\n~~ <div className={~~css(styles~~.separator)}>{text}</div~~>\n )~~}\n {type === \"dayPeriod\" && (\n <HvToggleButton\n className={~~css(styles~~.periodToggle)}\n onClick={onAdd}\n >\n {text}\n </HvToggleButton>\n )}\n {[\"hour\", \"minute\", \"second\"].includes(type) && (\n <HvInput\n id={id}\n disableClear\n style={{\n ...theme.typography.title3,\n }}\n classes={{\n input: ~~css(styles~~.input),\n root: ~~css(styles~~.inputContainer),\n inputBorderContainer: ~~css(styles~~.inputBorderContainer),\n inputRoot: ~~css(styles~~.inputRoot),\n }}\n onKeyDown={(event) => {\n if ((event as KeyboardEvent).key === \"Enter\") {\n event.preventDefault();\n event.stopPropagation();\n }\n }}\n required\n status={state.validationState}\n value={text.padStart(2, \"0\")}\n onChange={onChange}\n placeholder={placeholder}\n inputProps={{ autoComplete: \"off\", type: \"number\" }}\n />\n )}\n {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n </div>\n ~~)}\n </ClassNames>\n~~ );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","~~type~~","~~text~~","~~ClassNames~~","~~children~~","~~css","~~className","~~styles~~","~~root~~","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","~~classes","~~input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":"~~;;;;;;;AAuBO~~,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,~~EAASP~~,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,~~6BACGO~~,~~YAAU~~;AAAA,~~IAAAC~~,~~UACRA~~,~~CAAC~~;~~AAAA,MAAEC;~~AAAAA,~~IAAAA~~,~~2BACF~~,~~OAAA;AAAA,MAAKC,WAAWD,IAAIE,OAAOC,IAAI;AAAA,MAAEJ,WAC9BH,~~SAAS,~~iCAAcQ~~,UAAW;AAAA,~~QAACC~~,~~SAASX~~;AAAAA,~~MAAQ~~,CAAA,~~GACpDE~~,SAAS,~~iCACR~~,OAAA;AAAA,~~QAAKK~~,~~WAAWD~~,~~IAAIE,OAAOI,SAAS~~;~~AAAA~~,~~QAAEP~~,~~UAAEF~~;AAAAA,~~MAAU~~,CAAA,~~GAEnDD~~,SAAS,~~mCACPW~~,gBAAc;AAAA,~~QACbN~~,~~WAAWD~~,~~IAAIE,OAAOM,YAAY~~;~~AAAA~~,~~QAClCH~~,~~SAASX~~;AAAAA,~~QAAMK~~,~~UAEdF~~;AAAAA,~~MAAAA~~,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,~~EAAEY~~,~~SAASb~~,IAAI,~~KACzCc~~,oBAACC,SAAO;AAAA,~~QACNvB~~;AAAAA,~~QACAwB~~,cAAY;AAAA,~~QACZC~~,OAAO;AAAA,~~UACL~~,GAAGC,MAAMC,WAAWC;AAAAA,~~QACtB~~;AAAA,~~QACAC~~,SAAS;AAAA,~~UACPC~~,~~OAAOlB~~,~~IAAIE,OAAOgB,KAAK~~;~~AAAA~~,~~UACvBf~~,~~MAAMH~~,~~IAAIE,OAAOiB,cAAc~~;~~AAAA~~,~~UAC/BC~~,~~sBAAsBpB~~,~~IAAIE,OAAOkB,oBAAoB~~;~~AAAA~~,~~UACrDC~~,~~WAAWrB~~,~~IAAIE,OAAOmB,SAAS~~;~~AAAA~~,~~QACjC~~;AAAA,~~QACAC~~,WAAYC,CAAU,UAAA;AACfA,~~cAAAA~~,MAAwBC,QAAQ,SAAS;AAC5CD,~~kBAAME~~,eAAe;AACrBF,~~kBAAMG~~,gBAAgB;AAAA,~~UACxB~~;AAAA,~~QACF~~;AAAA,~~QACAC~~,UAAQ;AAAA,~~QACRC~~,~~QAAQvC~~,~~MAAMwC~~;AAAAA,~~QACdC~~,~~OAAOjC~~,~~KAAKkC~~,SAAS,GAAG,GAAG;AAAA,~~QAC3BtC~~;AAAAA,~~QACAF~~;AAAAA,~~QACAyC~~,YAAY;AAAA,~~UAAEC~~,cAAc;AAAA,~~UAAOrC~~,MAAM;AAAA,~~QAAS~~;AAAA,~~MACnD~~,CAAA,GAEFA,SAAS,~~iCAAcsC~~,YAAgB;AAAA,~~QAAC7B~~,~~SAASV~~;AAAAA,~~MAAAA~~,CAAQ,CAAC;AAAA,~~IAAA~~,CACxD;~~AAAA,EAAA,CAEG~~;~~AAEhB;~~"}
1	+ {"version":3,"file":"Unit.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n DropDownXS as SubtractTimeIcon,\n DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n id?: string;\n state: DateFieldState;\n segment: DateSegment;\n placeholder?: string;\n /** Called when the value changes /\n onChange?: HvInputProps[\"onChange\"];\n /* Called when the up/add arrow is pressed /\n onAdd?: () => void;\n /* Called when the down/subtract arrow is pressed */\n onSub?: () => void;\n}\n\nexport const Unit = ({\n id,\n state,\n segment,\n placeholder: placeholderProp,\n onChange,\n onAdd,\n onSub,\n}: UnitProps) => {\n const { classes } = useClasses();\n const { type, text } = segment;\n const placeholder = placeholderProp ?? segment.placeholder;\n\n return (\n <div className={classes.root}>\n {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n {type === \"dayPeriod\" && (\n <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n {text}\n </HvToggleButton>\n )}\n {[\"hour\", \"minute\", \"second\"].includes(type) && (\n <HvInput\n id={id}\n disableClear\n style={{\n ...theme.typography.title3,\n }}\n classes={{\n input: classes.input,\n root: classes.inputContainer,\n inputBorderContainer: classes.inputBorderContainer,\n inputRoot: classes.inputRoot,\n }}\n onKeyDown={(event) => {\n if ((event as KeyboardEvent).key === \"Enter\") {\n event.preventDefault();\n event.stopPropagation();\n }\n }}\n required\n status={state.validationState}\n value={text.padStart(2, \"0\")}\n onChange={onChange}\n placeholder={placeholder}\n inputProps={{ autoComplete: \"off\", type: \"number\" }}\n />\n )}\n {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n </div>\n );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","classes","useClasses","type","text","className","root","children","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;AAsBO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,MAAYC,WAAW;AACzB,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAAST,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,8BACE,OAAA;AAAA,IAAKS,WAAWJ,QAAQK;AAAAA,IAAKC,WAC1BJ,SAAS,iCAAcK,UAAW;AAAA,MAACC,SAASV;AAAAA,IAAQ,CAAA,GACpDI,SAAS,iCAAa,OAAA;AAAA,MAAKE,WAAWJ,QAAQS;AAAAA,MAAUH,UAAEH;AAAAA,IAAU,CAAA,GACpED,SAAS,mCACPQ,gBAAc;AAAA,MAACN,WAAWJ,QAAQW;AAAAA,MAAcH,SAASV;AAAAA,MAAMQ,UAC7DH;AAAAA,IAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAES,SAASV,IAAI,KACzCW,oBAACC,SAAO;AAAA,MACNtB;AAAAA,MACAuB,cAAY;AAAA,MACZC,OAAO;AAAA,QACL,GAAGC,MAAMC,WAAWC;AAAAA,MACtB;AAAA,MACAnB,SAAS;AAAA,QACPoB,OAAOpB,QAAQoB;AAAAA,QACff,MAAML,QAAQqB;AAAAA,QACdC,sBAAsBtB,QAAQsB;AAAAA,QAC9BC,WAAWvB,QAAQuB;AAAAA,MACrB;AAAA,MACAC,WAAYC,CAAU,UAAA;AACfA,YAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,gBAAME,eAAe;AACrBF,gBAAMG,gBAAgB;AAAA,QACxB;AAAA,MACF;AAAA,MACAC,UAAQ;AAAA,MACRC,QAAQrC,MAAMsC;AAAAA,MACdC,OAAO7B,KAAK8B,SAAS,GAAG,GAAG;AAAA,MAC3BpC;AAAAA,MACAF;AAAAA,MACAuC,YAAY;AAAA,QAAEC,cAAc;AAAA,QAAOjC,MAAM;AAAA,MAAS;AAAA,IACnD,CAAA,GAEFA,SAAS,iCAAckC,YAAgB;AAAA,MAAC5B,SAAST;AAAAA,IAAAA,CAAQ,CAAC;AAAA,EAAA,CACxD;AAET;"}

package/dist/esm/components/TimePicker/Unit/Unit.styles.js CHANGED Viewed

@@ -1,5 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTimePickerUnit", {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -49,8 +53,9 @@ const styles = {
   inputBorderContainer: {
     top: 40
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Unit.styles.js.map

package/dist/esm/components/TimePicker/Unit/Unit.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Unit.styles.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { ~~CSSInterpolation~~ } from \"@~~emotion~~/~~css~~\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const ~~styles~~ = {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n textAlign: \"center\",\n ...theme.typography.sTitle,\n },\n\n separator: {\n width: 8,\n },\n\n periodToggle: {\n height: 40,\n width: 40,\n },\n\n element: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 40,\n width: 40,\n },\n\n input: {\n ...theme.typography.sTitle,\n fontWeight: 600,\n textAlign: \"center\",\n height: 40,\n width: 40,\n padding: 0,\n margin: 0,\n \"&::placeholder\": {\n fontSize: 16,\n fontWeight: 600,\n },\n },\n inputRoot: {\n width: 40,\n height: 40,\n },\n\n subtractIcon: {\n marginTop: theme.space.xs,\n },\n inputContainer: {\n minWidth: 40,\n maxWidth: 40,\n },\n inputBorderContainer: {\n top: 40,\n },\n} ~~satisfies Record<string, CSSInterpolation>;\~~n"],"names":["~~styles~~","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";~~AAGO~~,~~MAAMA~~,~~SAAS~~;AAAA,~~EACpBC~~,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF;"}
1	+ {"version":3,"file":"Unit.styles.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n textAlign: \"center\",\n ...theme.typography.sTitle,\n },\n\n separator: {\n width: 8,\n },\n\n periodToggle: {\n height: 40,\n width: 40,\n },\n\n element: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 40,\n width: 40,\n },\n\n input: {\n ...theme.typography.sTitle,\n fontWeight: 600,\n textAlign: \"center\",\n height: 40,\n width: 40,\n padding: 0,\n margin: 0,\n \"&::placeholder\": {\n fontSize: 16,\n fontWeight: 600,\n },\n },\n inputRoot: {\n width: 40,\n height: 40,\n },\n\n subtractIcon: {\n marginTop: theme.space.xs,\n },\n inputContainer: {\n minWidth: 40,\n maxWidth: 40,\n },\n inputBorderContainer: {\n top: 40,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF,CAAC;"}