@hitachivantara/uikit-react-core 5.78.0 → 5.80.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/Button/Button.cjs +24 -31
- package/dist/cjs/Button/Button.styles.cjs +38 -59
- package/dist/cjs/Switch/Switch.cjs +14 -1
- package/dist/cjs/Tabs/Tabs.cjs +7 -2
- package/dist/cjs/Tabs/Tabs.styles.cjs +2 -1
- package/dist/cjs/index.cjs +0 -4
- package/dist/esm/Button/Button.js +26 -33
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/Button.styles.js +38 -59
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/Switch/Switch.js +14 -1
- package/dist/esm/Switch/Switch.js.map +1 -1
- package/dist/esm/Tabs/Tabs.js +7 -2
- package/dist/esm/Tabs/Tabs.js.map +1 -1
- package/dist/esm/Tabs/Tabs.styles.js +2 -1
- package/dist/esm/Tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/index.js +0 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +33 -20
- package/package.json +6 -6
- package/dist/cjs/Button/types.cjs +0 -33
- package/dist/esm/Button/types.js +0 -33
- package/dist/esm/Button/types.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n /**\n * Classes applied to the root element\n */\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n \":focus-visible\": {\n ...outlineStyles,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n color: \"var(--color, currentcolor)\",\n backgroundColor: \"transparent\",\n height: \"var(--HvButton-height)\",\n border: \"1px solid transparent\",\n borderRadius: `var(--radius, ${theme.radii.base})`,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \":hover, :focus-visible\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n contained: {\n color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,\n backgroundColor: \"var(--color)\",\n \":where(:not($disabled))\": {\n \":hover, :focus-visible\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n },\n \":active\": {\n backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n },\n },\n },\n subtle: {\n borderColor: \"currentcolor\",\n },\n ghost: {},\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n HvSize,\n { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n xs: { height: \"24px\", fontSize: \"sm\" },\n sm: { height: \"24px\", fontSize: \"sm\" },\n md: { height: \"32px\" },\n lg: { height: \"48px\", space: \"md\" },\n xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n const { height, space = \"sm\", fontSize } = sizes[size];\n return {\n height,\n padding: theme.spacing(0, space),\n fontSize: fontSize && theme.fontSizes[fontSize],\n };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = () => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport {
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (\n event:\n | Event\n | React.KeyboardEvent<HTMLUListElement>\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /**\n * The variant to be used in the header.\n * @deprecated Use `variant` instead\n */\n category?: HvButtonVariant;\n /** The variant to be used in the header. */\n variant?: HvButtonVariant;\n /** Button size. */\n size?: HvSize;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n (props, ref) => {\n const { open, children, ...others } = props;\n\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n placement={popperPlacement as Placement}\n {...others}\n >\n {children}\n </HvDropdownButton>\n );\n },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n labels: labelsProp,\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (\n event:\n | React.KeyboardEvent<HTMLUListElement>\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLIElement>,\n ) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef,\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HeaderComponent\n id={setId(id, \"icon-button\")}\n disabled={disabled}\n className={cx(classes.icon, {\n [classes.iconSelected]: open,\n })}\n size={size}\n variant={variant ?? category}\n open={open}\n aria-label={labels.dropdownMenu}\n >\n {icon || <MoreOptionsVertical role=\"presentation\" />}\n </HeaderComponent>\n }\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n ReactElement,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n ReactElement,\n useMemo,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n /** If all the buttons are disabled. */\n disabled?: boolean;\n /** If the MultiButton is to be displayed vertically. */\n vertical?: boolean;\n /** Category of button to use */\n variant?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvMultiButtonClasses;\n /** Button size. */\n size?: HvSize;\n /** Add a split between buttons */\n split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n const {\n className,\n children,\n classes: classesProp,\n disabled = false,\n vertical = false,\n variant = \"secondarySubtle\",\n size,\n split,\n ...others\n } = useDefaultProps(\"HvMultiButton\", props);\n const { classes, cx } = useClasses(classesProp);\n\n // Filter children: remove invalid and undefined/null\n const buttons = useMemo(() => {\n const btns: ReactElement[] = [];\n Children.forEach(children, (child) => {\n if (child && isValidElement(child)) {\n btns.push(child);\n }\n });\n return btns;\n }, [children]);\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.multiple]: !split,\n [classes.vertical]: vertical,\n [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n [classes.splitGroup]: split,\n [classes.splitGroupDisabled]: split && disabled,\n },\n className,\n )}\n {...others}\n >\n {buttons.map((child, index) => {\n const childIsSelected = !!child.props.selected;\n return cloneElement(child, {\n key: index,\n variant,\n disabled: disabled || child.props.disabled,\n size,\n className: cx(child.props.className, classes.button, {\n [classes.firstButton]: index === 0,\n [classes.lastButton]: index === buttons.length - 1,\n [classes.selected]: childIsSelected,\n }),\n });\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAA;AACpB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IAAA,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,cAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AACtC,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,QAAA,CACF;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback } from "react";
|
|
3
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
4
|
+
import { getColor } from "@hitachivantara/uikit-styles";
|
|
4
5
|
import { isInvalid } from "../Forms/FormElement/validationStates.js";
|
|
5
6
|
import { useControlled } from "../hooks/useControlled.js";
|
|
6
7
|
import { useUniqueId } from "../hooks/useUniqueId.js";
|
|
@@ -11,6 +12,7 @@ import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
|
|
|
11
12
|
import { HvFormElement } from "../Forms/FormElement/FormElement.js";
|
|
12
13
|
import { HvLabel } from "../Forms/Label/Label.js";
|
|
13
14
|
import { HvWarningText } from "../Forms/WarningText/WarningText.js";
|
|
15
|
+
const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
|
|
14
16
|
const HvSwitch = forwardRef(
|
|
15
17
|
(props, ref) => {
|
|
16
18
|
const {
|
|
@@ -34,9 +36,10 @@ const HvSwitch = forwardRef(
|
|
|
34
36
|
statusMessage,
|
|
35
37
|
"aria-errormessage": ariaErrorMessage,
|
|
36
38
|
inputProps,
|
|
39
|
+
color,
|
|
37
40
|
...others
|
|
38
41
|
} = useDefaultProps("HvSwitch", props);
|
|
39
|
-
const { classes, cx } = useClasses(classesProp);
|
|
42
|
+
const { classes, cx, css } = useClasses(classesProp);
|
|
40
43
|
const elementId = useUniqueId(id);
|
|
41
44
|
const [isChecked, setIsChecked] = useControlled(
|
|
42
45
|
checked,
|
|
@@ -114,6 +117,16 @@ const HvSwitch = forwardRef(
|
|
|
114
117
|
"aria-describedby": ariaDescribedBy,
|
|
115
118
|
...inputProps
|
|
116
119
|
},
|
|
120
|
+
...color && {
|
|
121
|
+
classes: {
|
|
122
|
+
switchBase: css({
|
|
123
|
+
"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
|
|
124
|
+
backgroundColor: getColor(color),
|
|
125
|
+
borderColor: isSemantical(color) ? getColor(`${color}_120`) : "#00000032"
|
|
126
|
+
}
|
|
127
|
+
})
|
|
128
|
+
}
|
|
129
|
+
},
|
|
117
130
|
...others
|
|
118
131
|
}
|
|
119
132
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvSwitchClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The value of the form element.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\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 inputted via inputProps.\n */\n label?: React.ReactNode;\n /**\n * Properties passed on to the label element.\n */\n labelProps?: HvLabelProps;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: string;\n /**\n * Identifies the element that provides an error message for the switch.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** @ignore */\n ref?: MuiSwitchProps[\"ref\"];\n /** @ignore */\n component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value],\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 = isInvalid(validationState);\n\n let errorMessageId: string | undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0HO,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,MACA,iBAAiB;AAAA,MAEjB;AAAA,MAEA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MAErB;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IAAA;AAGlB,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAEnE,UAAM,gBAAgB;AAAA,MACpB,CAAC,KAA0C,eAAwB;AACjE,qBAAa,MAAM;AAEb,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAEO,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,KAAK,YAAY,KAAK;AAAA,MACnC;AAAA,MACA,CAAC,UAAU,UAAU,cAAc,oBAAoB,KAAK;AAAA,IAAA;AAOxD,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAEvB,UAAA,iBAAiB,UAAU,eAAe;AAE5C,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IACN;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cAClB,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,iBAAiB;AAAA,gBACrC,CAAC,QAAQ,aAAa,GAAG;AAAA,cAAA,CAC1B;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,IAAI,QAAQ,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,kBACzD;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,kBACV;AAAA,kBACA,SAAS;AAAA,kBACT,YAAY;AAAA,oBACV,gBAAgB,iBAAiB,OAAO;AAAA,oBACxC,qBAAqB;AAAA,oBACrB,cAAc;AAAA,oBACd,mBAAmB;AAAA,oBACnB,oBAAoB;AAAA,oBACpB,GAAG;AAAA,kBACL;AAAA,kBACC,GAAG;AAAA,gBAAA;AAAA,cACN;AAAA,YAAA;AAAA,UACF;AAAA,UACC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,WAAW,QAAQ;AAAA,cACnB,eAAa;AAAA,cACb,kBAAgB;AAAA,cAChB,UAAQ;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"color\" | \"onChange\" | \"classes\"> {\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvSwitchClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The value of the form element.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\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 inputted via inputProps.\n */\n label?: React.ReactNode;\n /**\n * Properties passed on to the label element.\n */\n labelProps?: HvLabelProps;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: string;\n /**\n * Identifies the element that provides an error message for the switch.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** @ignore */\n ref?: MuiSwitchProps[\"ref\"];\n /** @ignore */\n component?: MuiSwitchProps[\"component\"];\n /** Color applied to the switch. */\n color?: HvColorAny;\n}\n\nconst isSemantical = (color: HvColorAny) =>\n [\"positive\", \"negative\", \"warning\"].includes(color);\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n color,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value],\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 = isInvalid(validationState);\n\n let errorMessageId: string | undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...(color && {\n classes: {\n switchBase: css({\n \"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track\":\n {\n backgroundColor: getColor(color),\n borderColor: isSemantical(color)\n ? getColor(`${color}_120`)\n : \"#00000032\",\n },\n }),\n },\n })}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
package/dist/esm/Tabs/Tabs.js
CHANGED
|
@@ -4,8 +4,12 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
|
4
4
|
import { useClasses } from "./Tabs.styles.js";
|
|
5
5
|
import { staticClasses } from "./Tabs.styles.js";
|
|
6
6
|
const HvTabs = (props) => {
|
|
7
|
-
const {
|
|
8
|
-
|
|
7
|
+
const {
|
|
8
|
+
classes: classesProp,
|
|
9
|
+
floating = false,
|
|
10
|
+
...others
|
|
11
|
+
} = useDefaultProps("HvTabs", props);
|
|
12
|
+
const { classes, cx } = useClasses(classesProp);
|
|
9
13
|
return /* @__PURE__ */ jsx(
|
|
10
14
|
Tabs,
|
|
11
15
|
{
|
|
@@ -16,6 +20,7 @@ const HvTabs = (props) => {
|
|
|
16
20
|
scroller: classes.scroller
|
|
17
21
|
},
|
|
18
22
|
TabIndicatorProps: { children: /* @__PURE__ */ jsx("div", {}) },
|
|
23
|
+
className: cx(floating && classes.floating),
|
|
19
24
|
...others
|
|
20
25
|
}
|
|
21
26
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["import Tabs, { TabsProps as MuiTabsProps } from \"@mui/material/Tabs\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n /**\n * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n */\n value?: any;\n /**\n * Callback fired when the value changes.\n */\n onChange?: (event: React.SyntheticEvent, value: any) => void;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvTabsClasses;\n /** @ignore */\n ref?: MuiTabsProps[\"ref\"];\n /** @ignore */\n component?: MuiTabsProps[\"component\"];\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n const {
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["import Tabs, { TabsProps as MuiTabsProps } from \"@mui/material/Tabs\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n /**\n * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n */\n value?: any;\n /**\n * Callback fired when the value changes.\n */\n onChange?: (event: React.SyntheticEvent, value: any) => void;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvTabsClasses;\n /** @ignore */\n ref?: MuiTabsProps[\"ref\"];\n /** @ignore */\n component?: MuiTabsProps[\"component\"];\n\n floating?: boolean;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n const {\n classes: classesProp,\n floating = false,\n ...others\n } = useDefaultProps(\"HvTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <Tabs\n classes={{\n root: classes.root,\n flexContainer: classes.flexContainer,\n indicator: classes.indicator,\n scroller: classes.scroller,\n }}\n TabIndicatorProps={{ children: <div /> }}\n className={cx(floating && classes.floating)}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAsCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,eAAe,QAAQ;AAAA,QACvB,WAAW,QAAQ;AAAA,QACnB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACA,mBAAmB,EAAE,UAAU,oBAAC,QAAI,CAAA,EAAG;AAAA,MACvC,WAAW,GAAG,YAAY,QAAQ,QAAQ;AAAA,MACzC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n root: {\n minHeight: 0,\n overflow: \"visible\",\n },\n indicator: {\n display: \"flex\",\n justifyContent: \"center\",\n backgroundColor: \"transparent\",\n \"& > div\": {\n width: \"100%\",\n backgroundColor: `${theme.colors.secondary}`,\n },\n height: 2,\n },\n scroller: {\n overflow: \"visible !important\",\n },\n flexContainer: {\n \"& button:first-of-type\": {\n marginLeft: \"3px\",\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB,GAAG,MAAM,OAAO,SAAS;AAAA,IAC5C;AAAA,IACA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,EACF;
|
|
1
|
+
{"version":3,"file":"Tabs.styles.js","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n root: {\n minHeight: 0,\n overflow: \"visible\",\n },\n indicator: {\n display: \"flex\",\n justifyContent: \"center\",\n backgroundColor: \"transparent\",\n \"& > div\": {\n width: \"100%\",\n backgroundColor: `${theme.colors.secondary}`,\n },\n height: 2,\n },\n scroller: {\n overflow: \"visible !important\",\n },\n flexContainer: {\n \"& button:first-of-type\": {\n marginLeft: \"3px\",\n },\n },\n floating: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB,GAAG,MAAM,OAAO,SAAS;AAAA,IAC5C;AAAA,IACA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -116,7 +116,6 @@ import { staticClasses as staticClasses31 } from "./BulkActions/BulkActions.styl
|
|
|
116
116
|
import { HvBulkActions } from "./BulkActions/BulkActions.js";
|
|
117
117
|
import { HvButton } from "./Button/Button.js";
|
|
118
118
|
import { staticClasses as staticClasses32 } from "./Button/Button.styles.js";
|
|
119
|
-
import { buttonRadius, buttonSize, buttonVariant } from "./Button/types.js";
|
|
120
119
|
import { staticClasses as staticClasses33 } from "./Calendar/Calendar.styles.js";
|
|
121
120
|
import { HvCalendar } from "./Calendar/Calendar.js";
|
|
122
121
|
import { staticClasses as staticClasses34 } from "./Calendar/CalendarHeader/CalendarHeader.styles.js";
|
|
@@ -489,9 +488,6 @@ export {
|
|
|
489
488
|
staticClasses31 as bulkActionsClasses,
|
|
490
489
|
staticClasses2 as buttonBaseClasses,
|
|
491
490
|
staticClasses32 as buttonClasses,
|
|
492
|
-
buttonRadius,
|
|
493
|
-
buttonSize,
|
|
494
|
-
buttonVariant,
|
|
495
491
|
staticClasses33 as calendarClasses,
|
|
496
492
|
staticClasses34 as calendarHeaderClasses,
|
|
497
493
|
staticClasses35 as cardClasses,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ import { HvColor } from '@hitachivantara/uikit-styles';
|
|
|
46
46
|
import { HvColorAny } from '@hitachivantara/uikit-styles';
|
|
47
47
|
import { HvExtraDeepProps } from '@hitachivantara/uikit-react-shared';
|
|
48
48
|
import { HvExtraProps } from '@hitachivantara/uikit-react-shared';
|
|
49
|
+
import { HvRadius } from '@hitachivantara/uikit-styles';
|
|
49
50
|
import { HvSemanticColor } from '@hitachivantara/uikit-styles';
|
|
50
51
|
import { HvSize } from '@hitachivantara/uikit-styles';
|
|
51
52
|
import { HvSupportColor } from '@hitachivantara/uikit-styles';
|
|
@@ -442,6 +443,7 @@ export declare const buttonClasses: {
|
|
|
442
443
|
focusVisible: string;
|
|
443
444
|
disabled: string;
|
|
444
445
|
icon: string;
|
|
446
|
+
contained: string;
|
|
445
447
|
subtle: string;
|
|
446
448
|
ghost: string;
|
|
447
449
|
semantic: string;
|
|
@@ -453,12 +455,6 @@ export declare const buttonClasses: {
|
|
|
453
455
|
secondary: string;
|
|
454
456
|
};
|
|
455
457
|
|
|
456
|
-
export declare const buttonRadius: readonly ["none", "base", "round", "circle", "full"];
|
|
457
|
-
|
|
458
|
-
export declare const buttonSize: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
459
|
-
|
|
460
|
-
export declare const buttonVariant: readonly ["primary", "primarySubtle", "primaryGhost", "positive", "positiveSubtle", "positiveGhost", "negative", "negativeSubtle", "negativeGhost", "warning", "warningSubtle", "warningGhost", "secondarySubtle", "secondaryGhost", "semantic", "secondary", "ghost"];
|
|
461
|
-
|
|
462
458
|
export declare const calendarClasses: {
|
|
463
459
|
root: string;
|
|
464
460
|
rangeCalendarContainer: string;
|
|
@@ -2013,7 +2009,7 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
|
|
|
2013
2009
|
*/
|
|
2014
2010
|
export declare const HvButton: <C extends ElementType<any, keyof JSX_2.IntrinsicElements> = "button">(props: {
|
|
2015
2011
|
/** Use the variant prop to change the visual style of the button. */
|
|
2016
|
-
variant?:
|
|
2012
|
+
variant?: HvButtonVariant | undefined;
|
|
2017
2013
|
/** Whether the button is an icon-only button. */
|
|
2018
2014
|
icon?: boolean | undefined;
|
|
2019
2015
|
/** Whether the button is disabled or not. */
|
|
@@ -2024,6 +2020,8 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
|
|
|
2024
2020
|
startIcon?: React.ReactNode;
|
|
2025
2021
|
/** Element placed after the children. */
|
|
2026
2022
|
endIcon?: React.ReactNode;
|
|
2023
|
+
/** Color of the button. */
|
|
2024
|
+
color?: HvColorAny | undefined;
|
|
2027
2025
|
/** Button size. */
|
|
2028
2026
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
|
2029
2027
|
/** Button border radius. */
|
|
@@ -2038,6 +2036,7 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
|
|
|
2038
2036
|
focusVisible: string;
|
|
2039
2037
|
disabled: string;
|
|
2040
2038
|
icon: string;
|
|
2039
|
+
contained: string;
|
|
2041
2040
|
subtle: string;
|
|
2042
2041
|
ghost: string;
|
|
2043
2042
|
semantic: string;
|
|
@@ -2060,8 +2059,8 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
|
|
|
2060
2059
|
component?: C | undefined;
|
|
2061
2060
|
} & {
|
|
2062
2061
|
children?: ReactNode;
|
|
2063
|
-
} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
|
|
2064
|
-
ref?: PolymorphicRef<C> | undefined;
|
|
2062
|
+
} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
|
|
2063
|
+
ref?: PolymorphicRef<C> | undefined; /** Class names to be applied. */
|
|
2065
2064
|
} & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
|
|
2066
2065
|
|
|
2067
2066
|
/**
|
|
@@ -2123,10 +2122,12 @@ export declare type HvButtonProps<C extends React.ElementType = "button"> = Poly
|
|
|
2123
2122
|
startIcon?: React.ReactNode;
|
|
2124
2123
|
/** Element placed after the children. */
|
|
2125
2124
|
endIcon?: React.ReactNode;
|
|
2125
|
+
/** Color of the button. */
|
|
2126
|
+
color?: HvColorAny;
|
|
2126
2127
|
/** Button size. */
|
|
2127
|
-
size?:
|
|
2128
|
+
size?: HvSize;
|
|
2128
2129
|
/** Button border radius. */
|
|
2129
|
-
radius?:
|
|
2130
|
+
radius?: HvRadius;
|
|
2130
2131
|
/** Defines the default colors of the button are forced into the icon. */
|
|
2131
2132
|
overrideIconColors?: boolean;
|
|
2132
2133
|
/** A Jss Object used to override or extend the styles applied. */
|
|
@@ -2141,11 +2142,13 @@ export declare type HvButtonProps<C extends React.ElementType = "button"> = Poly
|
|
|
2141
2142
|
focusableWhenDisabled?: boolean;
|
|
2142
2143
|
}>;
|
|
2143
2144
|
|
|
2144
|
-
|
|
2145
|
+
/** @deprecated use `HvRadius` */
|
|
2146
|
+
export declare type HvButtonRadius = HvRadius;
|
|
2145
2147
|
|
|
2146
|
-
|
|
2148
|
+
/** @deprecated use `HvSize` */
|
|
2149
|
+
export declare type HvButtonSize = HvSize;
|
|
2147
2150
|
|
|
2148
|
-
export declare type HvButtonVariant =
|
|
2151
|
+
export declare type HvButtonVariant = "contained" | "subtle" | "ghost" | `primary${TypeSuffix}` | `secondary${TypeSuffix}` | `positive${TypeSuffix}` | `negative${TypeSuffix}` | `warning${TypeSuffix}` | "semantic";
|
|
2149
2152
|
|
|
2150
2153
|
export declare const HvCalendar: (props: HvCalendarProps) => JSX_3.Element;
|
|
2151
2154
|
|
|
@@ -3252,7 +3255,7 @@ export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement,
|
|
|
3252
3255
|
/** The variant to be used in the header. */
|
|
3253
3256
|
variant?: HvButtonVariant;
|
|
3254
3257
|
/** Button size. */
|
|
3255
|
-
size?:
|
|
3258
|
+
size?: HvSize;
|
|
3256
3259
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
3257
3260
|
classes?: HvDropDownMenuClasses;
|
|
3258
3261
|
/** An object containing all the labels. */
|
|
@@ -4131,7 +4134,7 @@ export declare const HvIconButton: <C extends ElementType<any, keyof JSX_2.Intri
|
|
|
4131
4134
|
component?: C | undefined;
|
|
4132
4135
|
} & {
|
|
4133
4136
|
children?: ReactNode;
|
|
4134
|
-
} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T_2 ? T_2 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T_2 extends any ? T_2 : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> ? T_1 extends any ? T_1 : never : never : never) & {
|
|
4137
|
+
} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T_2 ? T_2 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T_2 extends any ? T_2 : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> ? T_1 extends any ? T_1 : never : never : never) & {
|
|
4135
4138
|
ref?: PolymorphicRef<C> | undefined;
|
|
4136
4139
|
} & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
|
|
4137
4140
|
|
|
@@ -4725,7 +4728,7 @@ export declare interface HvMultiButtonProps extends HvBaseProps {
|
|
|
4725
4728
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
4726
4729
|
classes?: HvMultiButtonClasses;
|
|
4727
4730
|
/** Button size. */
|
|
4728
|
-
size?:
|
|
4731
|
+
size?: HvSize;
|
|
4729
4732
|
/** Add a split between buttons */
|
|
4730
4733
|
split?: boolean;
|
|
4731
4734
|
}
|
|
@@ -5427,6 +5430,8 @@ export declare interface HvRadioProps extends Omit<RadioProps, "onChange" | "cla
|
|
|
5427
5430
|
|
|
5428
5431
|
export declare type HvRadioStatus = "standBy" | "valid" | "invalid";
|
|
5429
5432
|
|
|
5433
|
+
export { HvRadius }
|
|
5434
|
+
|
|
5430
5435
|
export declare const HvRightControl: ({ id, classes: classesProp, className, children, values, onSort, hideSortBy, sortProps, ...others }: HvRightControlProps) => JSX_3.Element;
|
|
5431
5436
|
|
|
5432
5437
|
export declare type HvRightControlClasses = ExtractNames<typeof useClasses_57>;
|
|
@@ -6118,7 +6123,7 @@ export declare interface HvSwitchColumnCellProp {
|
|
|
6118
6123
|
switchProps?: HvBaseSwitchProps;
|
|
6119
6124
|
}
|
|
6120
6125
|
|
|
6121
|
-
export declare interface HvSwitchProps extends Omit<SwitchProps, "onChange" | "classes"> {
|
|
6126
|
+
export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onChange" | "classes"> {
|
|
6122
6127
|
/**
|
|
6123
6128
|
* A Jss Object used to override or extend the styles applied to the switch.
|
|
6124
6129
|
*/
|
|
@@ -6202,6 +6207,8 @@ export declare interface HvSwitchProps extends Omit<SwitchProps, "onChange" | "c
|
|
|
6202
6207
|
ref?: SwitchProps["ref"];
|
|
6203
6208
|
/** @ignore */
|
|
6204
6209
|
component?: SwitchProps["component"];
|
|
6210
|
+
/** Color applied to the switch. */
|
|
6211
|
+
color?: HvColorAny;
|
|
6205
6212
|
}
|
|
6206
6213
|
|
|
6207
6214
|
export declare const HvTab: (props: HvTabProps) => JSX_3.Element;
|
|
@@ -6560,6 +6567,7 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
|
|
|
6560
6567
|
ref?: TabsProps["ref"];
|
|
6561
6568
|
/** @ignore */
|
|
6562
6569
|
component?: TabsProps["component"];
|
|
6570
|
+
floating?: boolean;
|
|
6563
6571
|
}
|
|
6564
6572
|
|
|
6565
6573
|
/**
|
|
@@ -8182,6 +8190,7 @@ export declare const tabsClasses: {
|
|
|
8182
8190
|
indicator: string;
|
|
8183
8191
|
scroller: string;
|
|
8184
8192
|
flexContainer: string;
|
|
8193
|
+
floating: string;
|
|
8185
8194
|
};
|
|
8186
8195
|
|
|
8187
8196
|
export declare const tagClasses: {
|
|
@@ -8343,6 +8352,8 @@ declare interface TreeViewNode {
|
|
|
8343
8352
|
|
|
8344
8353
|
declare type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
|
|
8345
8354
|
|
|
8355
|
+
declare type TypeSuffix = "" | "Subtle" | "Ghost";
|
|
8356
|
+
|
|
8346
8357
|
export declare const typographyClasses: {
|
|
8347
8358
|
root: string;
|
|
8348
8359
|
disabled: string;
|
|
@@ -8623,12 +8634,13 @@ declare const useClasses_112: (classesProp?: Partial<Record<"label" | "root" | "
|
|
|
8623
8634
|
readonly cx: (...args: any) => string;
|
|
8624
8635
|
};
|
|
8625
8636
|
|
|
8626
|
-
declare const useClasses_113: (classesProp?: Partial<Record<"root" | "
|
|
8637
|
+
declare const useClasses_113: (classesProp?: Partial<Record<"root" | "indicator" | "floating" | "flexContainer" | "scroller", string>>, addStatic?: boolean) => {
|
|
8627
8638
|
readonly classes: {
|
|
8628
8639
|
root: string;
|
|
8629
8640
|
indicator: string;
|
|
8630
8641
|
scroller: string;
|
|
8631
8642
|
flexContainer: string;
|
|
8643
|
+
floating: string;
|
|
8632
8644
|
};
|
|
8633
8645
|
readonly css: any;
|
|
8634
8646
|
readonly cx: (...args: any) => string;
|
|
@@ -8887,7 +8899,7 @@ declare const useClasses_129: (classesProp?: Partial<Record<"content" | "header"
|
|
|
8887
8899
|
readonly cx: (...args: any) => string;
|
|
8888
8900
|
};
|
|
8889
8901
|
|
|
8890
|
-
declare const useClasses_13: (classesProp?: Partial<Record<"secondary" | "primary" | "root" | "disabled" | "semantic" | "icon" | "secondarySubtle" | "ghost" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "subtle" | "focusVisible" | "startIcon" | "endIcon", string>>, addStatic?: boolean) => {
|
|
8902
|
+
declare const useClasses_13: (classesProp?: Partial<Record<"secondary" | "primary" | "root" | "disabled" | "semantic" | "icon" | "secondarySubtle" | "ghost" | "secondaryGhost" | "contained" | "primaryGhost" | "primarySubtle" | "subtle" | "focusVisible" | "startIcon" | "endIcon", string>>, addStatic?: boolean) => {
|
|
8891
8903
|
readonly classes: {
|
|
8892
8904
|
root: string;
|
|
8893
8905
|
startIcon: string;
|
|
@@ -8895,6 +8907,7 @@ declare const useClasses_13: (classesProp?: Partial<Record<"secondary" | "primar
|
|
|
8895
8907
|
focusVisible: string;
|
|
8896
8908
|
disabled: string;
|
|
8897
8909
|
icon: string;
|
|
8910
|
+
contained: string;
|
|
8898
8911
|
subtle: string;
|
|
8899
8912
|
ghost: string;
|
|
8900
8913
|
semantic: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.80.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@emotion/cache": "^11.11.0",
|
|
34
34
|
"@emotion/serialize": "^1.1.2",
|
|
35
|
-
"@hitachivantara/uikit-react-icons": "^5.12.
|
|
36
|
-
"@hitachivantara/uikit-react-shared": "^5.3.
|
|
37
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
38
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
35
|
+
"@hitachivantara/uikit-react-icons": "^5.12.6",
|
|
36
|
+
"@hitachivantara/uikit-react-shared": "^5.3.11",
|
|
37
|
+
"@hitachivantara/uikit-react-utils": "^0.2.11",
|
|
38
|
+
"@hitachivantara/uikit-styles": "^5.38.0",
|
|
39
39
|
"@internationalized/date": "^3.2.0",
|
|
40
40
|
"@mui/base": "^5.0.0-beta.40",
|
|
41
41
|
"@popperjs/core": "^2.11.8",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "309e11f68246c260c0b9b73a9f7a6bee3773d87e",
|
|
66
66
|
"exports": {
|
|
67
67
|
".": {
|
|
68
68
|
"types": "./dist/types/index.d.ts",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const buttonVariant = [
|
|
4
|
-
"primary",
|
|
5
|
-
"primarySubtle",
|
|
6
|
-
"primaryGhost",
|
|
7
|
-
"positive",
|
|
8
|
-
"positiveSubtle",
|
|
9
|
-
"positiveGhost",
|
|
10
|
-
"negative",
|
|
11
|
-
"negativeSubtle",
|
|
12
|
-
"negativeGhost",
|
|
13
|
-
"warning",
|
|
14
|
-
"warningSubtle",
|
|
15
|
-
"warningGhost",
|
|
16
|
-
"secondarySubtle",
|
|
17
|
-
"secondaryGhost",
|
|
18
|
-
"semantic",
|
|
19
|
-
// deprecated props
|
|
20
|
-
"secondary",
|
|
21
|
-
"ghost"
|
|
22
|
-
];
|
|
23
|
-
const buttonSize = ["xs", "sm", "md", "lg", "xl"];
|
|
24
|
-
const buttonRadius = [
|
|
25
|
-
"none",
|
|
26
|
-
"base",
|
|
27
|
-
"round",
|
|
28
|
-
"circle",
|
|
29
|
-
"full"
|
|
30
|
-
];
|
|
31
|
-
exports.buttonRadius = buttonRadius;
|
|
32
|
-
exports.buttonSize = buttonSize;
|
|
33
|
-
exports.buttonVariant = buttonVariant;
|
package/dist/esm/Button/types.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
const buttonVariant = [
|
|
2
|
-
"primary",
|
|
3
|
-
"primarySubtle",
|
|
4
|
-
"primaryGhost",
|
|
5
|
-
"positive",
|
|
6
|
-
"positiveSubtle",
|
|
7
|
-
"positiveGhost",
|
|
8
|
-
"negative",
|
|
9
|
-
"negativeSubtle",
|
|
10
|
-
"negativeGhost",
|
|
11
|
-
"warning",
|
|
12
|
-
"warningSubtle",
|
|
13
|
-
"warningGhost",
|
|
14
|
-
"secondarySubtle",
|
|
15
|
-
"secondaryGhost",
|
|
16
|
-
"semantic",
|
|
17
|
-
// deprecated props
|
|
18
|
-
"secondary",
|
|
19
|
-
"ghost"
|
|
20
|
-
];
|
|
21
|
-
const buttonSize = ["xs", "sm", "md", "lg", "xl"];
|
|
22
|
-
const buttonRadius = [
|
|
23
|
-
"none",
|
|
24
|
-
"base",
|
|
25
|
-
"round",
|
|
26
|
-
"circle",
|
|
27
|
-
"full"
|
|
28
|
-
];
|
|
29
|
-
export {
|
|
30
|
-
buttonRadius,
|
|
31
|
-
buttonSize,
|
|
32
|
-
buttonVariant
|
|
33
|
-
};
|