@hitachivantara/uikit-react-core 5.68.0 → 5.69.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 +1 -1
- package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs +1 -1
- package/dist/cjs/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.cjs +1 -1
- package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs +4 -3
- package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs +4 -12
- package/dist/cjs/Calendar/utils.cjs +5 -5
- package/dist/cjs/Carousel/Carousel.cjs +2 -3
- package/dist/cjs/Dropdown/List/List.cjs +14 -22
- package/dist/cjs/Dropdown/List/List.styles.cjs +13 -1
- package/dist/cjs/Pagination/Pagination.cjs +1 -2
- package/dist/cjs/ProgressBar/ProgressBar.cjs +1 -2
- package/dist/cjs/Table/TableBody/TableBody.cjs +1 -1
- package/dist/cjs/Table/TableCell/TableCell.cjs +1 -1
- package/dist/cjs/Table/TableHead/TableHead.cjs +1 -1
- package/dist/cjs/Table/TableHeader/TableHeader.cjs +1 -1
- package/dist/cjs/Table/TableRow/TableRow.cjs +1 -1
- package/dist/cjs/Table/TableSectionContext.cjs +2 -2
- package/dist/cjs/Typography/Typography.cjs +1 -1
- package/dist/cjs/providers/ThemeProvider.cjs +31 -4
- package/dist/cjs/utils/helpers.cjs +0 -4
- package/dist/esm/BaseSwitch/BaseSwitch.js.map +1 -1
- package/dist/esm/Button/Button.js +1 -1
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js +1 -1
- package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js +5 -4
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js +4 -12
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js.map +1 -1
- package/dist/esm/Calendar/utils.js +5 -5
- package/dist/esm/Calendar/utils.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js +2 -3
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js +15 -23
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/Dropdown/List/List.styles.js +13 -1
- package/dist/esm/Dropdown/List/List.styles.js.map +1 -1
- package/dist/esm/Pagination/Pagination.js +1 -2
- package/dist/esm/Pagination/Pagination.js.map +1 -1
- package/dist/esm/ProgressBar/ProgressBar.js +1 -2
- package/dist/esm/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/Switch/Switch.js.map +1 -1
- package/dist/esm/Table/TableBody/TableBody.js +1 -1
- package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableHead/TableHead.js +1 -1
- package/dist/esm/Table/TableHead/TableHead.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/TableRow/TableRow.js +1 -1
- package/dist/esm/Table/TableRow/TableRow.js.map +1 -1
- package/dist/esm/Table/TableSectionContext.js +1 -1
- package/dist/esm/Table/TableSectionContext.js.map +1 -1
- package/dist/esm/Typography/Typography.js +1 -1
- package/dist/esm/Typography/Typography.js.map +1 -1
- package/dist/esm/Typography/utils.js.map +1 -1
- package/dist/esm/providers/ThemeProvider.js +31 -4
- package/dist/esm/providers/ThemeProvider.js.map +1 -1
- package/dist/esm/utils/helpers.js +0 -4
- package/dist/esm/utils/helpers.js.map +1 -1
- package/dist/types/index.d.ts +27 -26
- package/package.json +7 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport {
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n clamp,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n /** The value of the progress bar. */\n value: number;\n /**\n * The status of the progress bar.\n *\n * inProgress is black, error is red and completed is green.\n *\n * When uncontrolled and unspecified it will default to \"inProgress\".\n */\n status?: HvProgressBarStatus;\n /** Aria Properties passed on to the progress bar. */\n labelProps?: HvTypographyProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvProgressBarClasses;\n /**\n * True if the text label should not be displayed.\n */\n hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n const {\n className,\n classes: classesProp,\n value = 0,\n status = \"inProgress\",\n labelProps,\n hideLabel,\n ...others\n } = useDefaultProps(\"HvProgressBar\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const clampedValue = clamp(value, 100);\n\n return (\n <div\n className={cx(classes.root, classes.progress, className)}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={clampedValue}\n {...others}\n >\n <div className={classes.progressContainer}>\n {!hideLabel && (\n <HvTypography\n className={classes.progressBarLabel}\n variant=\"caption2\"\n style={{ width: `${clampedValue}%` }}\n {...labelProps}\n >\n {`${clampedValue}%`}\n </HvTypography>\n )}\n <div className={classes.progressBarContainer}>\n <div\n style={{ width: `${clampedValue}%` }}\n className={cx(classes.progressBar, {\n [classes.progressDone]: status === \"completed\",\n [classes.progressError]: status === \"error\",\n })}\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAwCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,MAAM,OAAO,GAAG;AAGnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -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?: (event: React.ChangeEvent
|
|
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":"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"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
|
|
3
3
|
import { useForkRef } from "../../hooks/useForkRef.js";
|
|
4
4
|
import TableContext from "../TableContext.js";
|
|
5
|
-
import TableSectionContext from "../TableSectionContext.js";
|
|
5
|
+
import { TableSectionContext } from "../TableSectionContext.js";
|
|
6
6
|
import { useClasses } from "./TableBody.styles.js";
|
|
7
7
|
import { staticClasses } from "./TableBody.styles.js";
|
|
8
8
|
import { HvFocus } from "../../Focus/Focus.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useContext,\n useRef,\n} from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /**\n * Content to be rendered\n */\n children: React.ReactNode;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to tbody.\n */\n component?: React.ElementType;\n /** Sets whether or not there should be arrow navigation between the table rows */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n type: \"body\",\n filterClassName: \"_grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n (\n {\n classes: classesProp,\n className,\n component,\n children,\n withNavigation = false,\n ...others\n },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const bodyRef = useRef(null);\n\n const handleRef = useForkRef(externalRef, bodyRef);\n\n const Component =\n component || tableContext?.components?.TBody || defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(classes.root, className)}\n ref={handleRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n >\n {withNavigation\n ? Children.map(children, (element) => {\n if (isValidElement(element)) {\n return (\n <HvFocus\n id={`my-id-${element.key}`}\n rootRef={bodyRef}\n key={`row-${element.key}`}\n strategy=\"grid\"\n filterClass={tableSectionContext.filterClassName}\n navigationJump={1}\n focusDisabled={false}\n selected={element.props.selected}\n >\n {element}\n </HvFocus>\n );\n }\n })\n : children}\n </Component>\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useContext,\n useRef,\n} from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n TableSectionContext,\n TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /**\n * Content to be rendered\n */\n children: React.ReactNode;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to tbody.\n */\n component?: React.ElementType;\n /** Sets whether or not there should be arrow navigation between the table rows */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n type: \"body\",\n filterClassName: \"_grid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n (\n {\n classes: classesProp,\n className,\n component,\n children,\n withNavigation = false,\n ...others\n },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const bodyRef = useRef(null);\n\n const handleRef = useForkRef(externalRef, bodyRef);\n\n const Component =\n component || tableContext?.components?.TBody || defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(classes.root, className)}\n ref={handleRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n >\n {withNavigation\n ? Children.map(children, (element) => {\n if (isValidElement(element)) {\n return (\n <HvFocus\n id={`my-id-${element.key}`}\n rootRef={bodyRef}\n key={`row-${element.key}`}\n strategy=\"grid\"\n filterClass={tableSectionContext.filterClassName}\n navigationJump={1}\n focusDisabled={false}\n selected={element.props.selected}\n >\n {element}\n </HvFocus>\n );\n }\n })\n : children}\n </Component>\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAwCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAAA;AAAA,UAU7B;AAAA,QACD,CAAA,IACD;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
|
|
@@ -3,7 +3,7 @@ import { forwardRef, useContext } from "react";
|
|
|
3
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
4
4
|
import { capitalize } from "../../utils/helpers.js";
|
|
5
5
|
import TableContext from "../TableContext.js";
|
|
6
|
-
import TableSectionContext from "../TableSectionContext.js";
|
|
6
|
+
import { TableSectionContext } from "../TableSectionContext.js";
|
|
7
7
|
import { useClasses } from "./TableCell.styles.js";
|
|
8
8
|
import { staticClasses } from "./TableCell.styles.js";
|
|
9
9
|
const defaultComponent = "td";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** Inline styles to be applied to the root element. */\n style?: React.CSSProperties;\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** Whether or not the cell is part of a sorted column. */\n sorted?: boolean;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n\n const Component =\n component || tableContext?.components?.Td || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableCellClasses],\n {\n [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableCellClasses\n ]]: variant !== \"default\",\n [classes.sorted]: sorted,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n },\n className,\n )}\n {...others}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** Inline styles to be applied to the root element. */\n style?: React.CSSProperties;\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** Whether or not the cell is part of a sorted column. */\n sorted?: boolean;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n\n const Component =\n component || tableContext?.components?.Td || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableCellClasses],\n {\n [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableCellClasses\n ]]: variant !== \"default\",\n [classes.sorted]: sorted,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n },\n className,\n )}\n {...others}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext } from "react";
|
|
3
3
|
import TableContext from "../TableContext.js";
|
|
4
|
-
import TableSectionContext from "../TableSectionContext.js";
|
|
4
|
+
import { TableSectionContext } from "../TableSectionContext.js";
|
|
5
5
|
import { useClasses } from "./TableHead.styles.js";
|
|
6
6
|
import { staticClasses } from "./TableHead.styles.js";
|
|
7
7
|
const tableSectionContext = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHead.js","sources":["../../../../src/Table/TableHead/TableHead.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHead.styles\";\n\nexport { staticClasses as tableHeadClasses };\n\nexport type HvTableHeadClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeadProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /**\n * Content to be rendered\n */\n children: React.ReactNode;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to thead.\n */\n component?: React.ElementType;\n /**\n * The table has sticky headers.\n */\n stickyHeader?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeadClasses;\n}\n\nconst tableSectionContext = {\n type: \"head\",\n};\n\nconst defaultComponent = \"thead\";\n\n/**\n * HvTableHead acts as a `thead` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles\n */\nexport const HvTableHead = forwardRef<HTMLElement, HvTableHeadProps>(\n (\n { classes: classesProp, className, component, stickyHeader, ...others },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const Component =\n component || tableContext?.components?.THead || defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(\n classes.root,\n { [classes.stickyHeader]: stickyHeader },\n className,\n )}\n ref={externalRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n />\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TableHead.js","sources":["../../../../src/Table/TableHead/TableHead.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n TableSectionContext,\n TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHead.styles\";\n\nexport { staticClasses as tableHeadClasses };\n\nexport type HvTableHeadClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeadProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /**\n * Content to be rendered\n */\n children: React.ReactNode;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to thead.\n */\n component?: React.ElementType;\n /**\n * The table has sticky headers.\n */\n stickyHeader?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeadClasses;\n}\n\nconst tableSectionContext = {\n type: \"head\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"thead\";\n\n/**\n * HvTableHead acts as a `thead` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles\n */\nexport const HvTableHead = forwardRef<HTMLElement, HvTableHeadProps>(\n (\n { classes: classesProp, className, component, stickyHeader, ...others },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const Component =\n component || tableContext?.components?.THead || defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(\n classes.root,\n { [classes.stickyHeader]: stickyHeader },\n className,\n )}\n ref={externalRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n />\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAkCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE,EAAE,SAAS,aAAa,WAAW,WAAW,cAAc,GAAG,OAAO,GACtE,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAE5C,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,UACvC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
|
|
@@ -5,7 +5,7 @@ import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
|
|
|
5
5
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
6
6
|
import { capitalize } from "../../utils/helpers.js";
|
|
7
7
|
import TableContext from "../TableContext.js";
|
|
8
|
-
import TableSectionContext from "../TableSectionContext.js";
|
|
8
|
+
import { TableSectionContext } from "../TableSectionContext.js";
|
|
9
9
|
import { useClasses, staticClasses } from "./TableHeader.styles.js";
|
|
10
10
|
import { getSortIcon, isParagraph } from "./utils.js";
|
|
11
11
|
import { HvButton } from "../../Button/Button.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** The scope of cells that the header element relates to. */\n scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant;\n /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is sorted */\n sorted?: boolean;\n /** Whether or not the cell is sortable */\n sortable?: boolean;\n /** Set sort direction icon and aria-sort. */\n sortDirection?: \"ascending\" | \"descending\" | false;\n /** Extra props to be passed onto the text in the header. */\n headerTextProps?: HvTypographyProps;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** The resize props injected in the resize handler */\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeaderClasses;\n /** Extra props to be passed onto the sort button in the header. */\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component || tableContext?.components?.Th || defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableHeaderClasses],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[\n `align${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n ]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[\n `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AAsEA,MAAM,mBAAmB;AAKlB,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,UAAA,EAAE,WAAW;AACb,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AACtD,UAAM,aAAa,SAAS;AAEtB,UAAA,QAAQ,cAAc,aAAa,QAAQ;AAEjD,UAAM,OAAO;AAAA,MACX,MAAM,YAAY,UAAU,aAAa;AAAA,MACzC,CAAC,QAAQ,aAAa;AAAA,IAAA;AAGxB,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAE/C,UAAM,OACJ,cAAc,mBACV,OACA,aACE,iBACA;AACF,UAAA,YAAY,YAAY,QAAQ;AAGtC,UAAM,QAAQ,eACV,EAAE,GAAG,WAAW,UAAU,SAC1B,IAAA;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAkC;AAAA,UAC1C,SAAS,UACP,IAAI;AAAA,YACF,CAAC,KAAK,cAAc,MAAM,EAAE,GAAG;AAAA,cAC7B,iBAAiB;AAAA,gBACf,SAAS,QAAQ,SAAS,MAAM,OAAO,KAAK;AAAA,gBAC5C;AAAA,cACF;AAAA,YACF;AAAA,UAAA,CACD;AAAA,UACH;AAAA,YACE,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QACC,QAAQ,WAAW,KAAK,CAAC,EAC3B,CAAC,GAAG,UAAU;AAAA,YACd,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,UAClB;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAW,WAAW,gBAAgB;AAAA,QACrC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,eAAe;AAAA,cACnC,CAAC,QACC,YAAY,WAAW,KAAK,CAAC,EAC/B,CAAC,GAAG,UAAU;AAAA,YAAA,CACf;AAAA,YAEA,UAAA;AAAA,cAAA,cAAc,YACb;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,MAAI;AAAA,kBACJ,oBAAoB;AAAA,kBACpB,cAAW;AAAA,kBACV,GAAG;AAAA,kBAEJ,UAAC,oBAAA,MAAA,EAAK,WAAW,QAAQ,UAAU;AAAA,gBAAA;AAAA,cACrC;AAAA,cAEF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,WAAW,GAAG;AAAA,oBACZ,CAAC,QAAQ,UAAU,GAAG,CAAC;AAAA,oBACvB,CAAC,QAAQ,eAAe,GAAG;AAAA,oBAC3B,CAAC,QAAQ,kBAAkB,GAAG;AAAA,kBAAA,CAC/B;AAAA,kBACD,SAAQ;AAAA,kBACP,GAAG;AAAA,kBAEH;AAAA,gBAAA;AAAA,cACH;AAAA,cACC,aAAc,oBAAA,OAAA,EAAK,GAAG,cAAc,WAAW,QAAQ,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** The scope of cells that the header element relates to. */\n scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant;\n /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is sorted */\n sorted?: boolean;\n /** Whether or not the cell is sortable */\n sortable?: boolean;\n /** Set sort direction icon and aria-sort. */\n sortDirection?: \"ascending\" | \"descending\" | false;\n /** Extra props to be passed onto the text in the header. */\n headerTextProps?: HvTypographyProps;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** The resize props injected in the resize handler */\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeaderClasses;\n /** Extra props to be passed onto the sort button in the header. */\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component || tableContext?.components?.Th || defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableHeaderClasses],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[\n `align${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n ]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[\n `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useContext } from "react";
|
|
3
3
|
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
|
|
4
4
|
import TableContext from "../TableContext.js";
|
|
5
|
-
import TableSectionContext from "../TableSectionContext.js";
|
|
5
|
+
import { TableSectionContext } from "../TableSectionContext.js";
|
|
6
6
|
import { useClasses } from "./TableRow.styles.js";
|
|
7
7
|
import { staticClasses } from "./TableRow.styles.js";
|
|
8
8
|
const defaultComponent = "tr";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../../../src/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableRow.styles\";\n\nexport { staticClasses as tableRowClasses };\n\nexport type HvTableRowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableRowProps\n extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n /** Content to be rendered */\n children: React.ReactNode;\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n component?: React.ElementType;\n /** Whether the table row will shade on hover. */\n hover?: boolean;\n /** Whether the table row will have the selected shading. */\n selected?: boolean;\n /** Whether the table row is expanded. */\n expanded?: boolean;\n /** Whether the table row background is striped. */\n striped?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n (props, externalRef) => {\n const {\n classes: classesProp,\n className,\n component,\n hover = false,\n selected = false,\n expanded = false,\n striped = false,\n ...others\n } = useDefaultProps(\"HvTableRow\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = tableSectionContext?.type || \"body\";\n\n const isList = tableContext.variant === \"listrow\";\n\n const Component =\n component || tableContext?.components?.Tr || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n className={cx(\n tableSectionContext.filterClassName,\n classes.root,\n classes[type as keyof HvTableRowClasses],\n {\n [classes.hover]: hover,\n [classes.selected]: selected,\n [classes.expanded]: expanded,\n [classes.striped]: striped,\n [classes.variantList]: isList && type === \"body\",\n [classes.variantListHead]: isList && type === \"head\",\n },\n className,\n )}\n role={Component === defaultComponent ? null : \"row\"}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AAiCA,MAAM,mBAAmB;AAKlB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,qBAAqB,QAAQ;AAEpC,UAAA,SAAS,aAAa,YAAY;AAExC,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,oBAAoB;AAAA,UACpB,QAAQ;AAAA,UACR,QAAQ,IAA+B;AAAA,UACvC;AAAA,YACE,CAAC,QAAQ,KAAK,GAAG;AAAA,YACjB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,WAAW,GAAG,UAAU,SAAS;AAAA,YAC1C,CAAC,QAAQ,eAAe,GAAG,UAAU,SAAS;AAAA,UAChD;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../../../src/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableRow.styles\";\n\nexport { staticClasses as tableRowClasses };\n\nexport type HvTableRowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableRowProps\n extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n /** Content to be rendered */\n children: React.ReactNode;\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n component?: React.ElementType;\n /** Whether the table row will shade on hover. */\n hover?: boolean;\n /** Whether the table row will have the selected shading. */\n selected?: boolean;\n /** Whether the table row is expanded. */\n expanded?: boolean;\n /** Whether the table row background is striped. */\n striped?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n (props, externalRef) => {\n const {\n classes: classesProp,\n className,\n component,\n hover = false,\n selected = false,\n expanded = false,\n striped = false,\n ...others\n } = useDefaultProps(\"HvTableRow\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = tableSectionContext?.type || \"body\";\n\n const isList = tableContext.variant === \"listrow\";\n\n const Component =\n component || tableContext?.components?.Tr || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n className={cx(\n tableSectionContext.filterClassName,\n classes.root,\n classes[type as keyof HvTableRowClasses],\n {\n [classes.hover]: hover,\n [classes.selected]: selected,\n [classes.expanded]: expanded,\n [classes.striped]: striped,\n [classes.variantList]: isList && type === \"body\",\n [classes.variantListHead]: isList && type === \"head\",\n },\n className,\n )}\n role={Component === defaultComponent ? null : \"row\"}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AAiCA,MAAM,mBAAmB;AAKlB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,qBAAqB,QAAQ;AAEpC,UAAA,SAAS,aAAa,YAAY;AAExC,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,oBAAoB;AAAA,UACpB,QAAQ;AAAA,UACR,QAAQ,IAA+B;AAAA,UACvC;AAAA,YACE,CAAC,QAAQ,KAAK,GAAG;AAAA,YACjB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,WAAW,GAAG,UAAU,SAAS;AAAA,YAC1C,CAAC,QAAQ,eAAe,GAAG,UAAU,SAAS;AAAA,UAChD;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSectionContext.js","sources":["../../../src/Table/TableSectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type
|
|
1
|
+
{"version":3,"file":"TableSectionContext.js","sources":["../../../src/Table/TableSectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { HvTableCellType } from \"./Table\";\n\nexport type TableSectionContextValue = {\n type?: HvTableCellType;\n filterClassName?: string;\n};\n\nexport const TableSectionContext = createContext<TableSectionContextValue>({});\n"],"names":[],"mappings":";AASa,MAAA,sBAAsB,cAAwC,CAAE,CAAA;"}
|
|
@@ -51,7 +51,7 @@ const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
|
|
|
51
51
|
} = useDefaultProps("HvTypography", props);
|
|
52
52
|
const { classes, cx } = useClasses(classesProp);
|
|
53
53
|
const { activeTheme } = useTheme();
|
|
54
|
-
const variant = mapVariant(variantProp, activeTheme?.
|
|
54
|
+
const variant = mapVariant(variantProp, activeTheme?.base);
|
|
55
55
|
const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
|
|
56
56
|
return /* @__PURE__ */ jsx(
|
|
57
57
|
Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n captionLabel: \"p\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n \"3xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n xlTitle: \"h1\",\n lTitle: \"h2\",\n mTitle: \"h3\",\n sTitle: \"h4\",\n xsTitle: \"h5\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n highlightText: \"p\",\n normalText: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} satisfies Record<\n HvTypographyVariants | HvTypographyLegacyVariants,\n React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Typography. */\n variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n /** If `true` the typography will display the look of a link. */\n link?: boolean;\n /** If `true` the typography will display the look of a disabled state. */\n disabled?: boolean;\n /**\n * If `true`, the typography will render a \"p\" element\n * @deprecated use `component=\"p\"` instead\n * */\n paragraph?: boolean;\n /**\n * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n *\n * Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n */\n noWrap?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTypographyClasses;\n }\n >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n noWrap = false,\n paragraph = false,\n disabled = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.
|
|
1
|
+
{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n captionLabel: \"p\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n \"3xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n xlTitle: \"h1\",\n lTitle: \"h2\",\n mTitle: \"h3\",\n sTitle: \"h4\",\n xsTitle: \"h5\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n highlightText: \"p\",\n normalText: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} satisfies Record<\n HvTypographyVariants | HvTypographyLegacyVariants,\n React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Typography. */\n variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n /** If `true` the typography will display the look of a link. */\n link?: boolean;\n /** If `true` the typography will display the look of a disabled state. */\n disabled?: boolean;\n /**\n * If `true`, the typography will render a \"p\" element\n * @deprecated use `component=\"p\"` instead\n * */\n paragraph?: boolean;\n /**\n * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n *\n * Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n */\n noWrap?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTypographyClasses;\n }\n >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n noWrap = false,\n paragraph = false,\n disabled = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.base);\n\n const Component =\n ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n {\n [classes.isLink]: link,\n [classes.noWrap]: noWrap,\n [classes.disabled]: disabled,\n },\n className,\n )}\n disabled={disabled}\n {...others}\n />\n );\n});\n"],"names":["HvTypography"],"mappings":";;;;;;AAsBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,QAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/Typography/utils.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/Typography/utils.ts"],"sourcesContent":["import { HvBaseTheme } from \"@hitachivantara/uikit-styles\";\n\nexport const typographyVariants = [\n \"display\",\n \"title1\",\n \"title2\",\n \"title3\",\n \"title4\",\n \"body\",\n \"label\",\n \"captionLabel\",\n \"caption1\",\n \"caption2\",\n] as const;\n\nexport type HvTypographyVariants = (typeof typographyVariants)[number];\n\n/** @deprecated */\nexport type HvTypographyLegacyVariants =\n | \"5xlTitle\"\n | \"4xlTitle\"\n | \"3xlTitle\"\n | \"xxlTitle\"\n | \"xlTitle\"\n | \"lTitle\"\n | \"mTitle\"\n | \"sTitle\"\n | \"xsTitle\"\n | \"xxsTitle\"\n | \"sectionTitle\"\n | \"highlightText\"\n | \"normalText\"\n | \"placeholderText\"\n | \"link\"\n | \"disabledText\"\n | \"selectedNavText\"\n | \"vizText\"\n | \"vizTextDisabled\"\n | \"xsInlineLink\";\n\ntype Variant = HvTypographyVariants | HvTypographyLegacyVariants;\n\nconst mappableVariants = new Map<Variant, HvTypographyVariants>([\n [\"3xlTitle\", \"display\"],\n [\"xlTitle\", \"title1\"],\n [\"mTitle\", \"title2\"],\n [\"xsTitle\", \"title3\"],\n [\"highlightText\", \"label\"],\n [\"normalText\", \"body\"],\n [\"vizText\", \"caption1\"],\n]);\n\nconst isLegacyVariant = (variant: string) => {\n return [\n \"5xlTitle\",\n \"4xlTitle\",\n \"3xlTitle\",\n \"xxlTitle\",\n \"xlTitle\",\n \"lTitle\",\n \"mTitle\",\n \"sTitle\",\n \"xsTitle\",\n \"xxsTitle\",\n \"sectionTitle\",\n \"highlightText\",\n \"normalText\",\n \"placeholderText\",\n \"link\",\n \"disabledText\",\n \"selectedNavText\",\n \"vizText\",\n \"vizTextDisabled\",\n \"xsInlineLink\",\n ].includes(variant);\n};\n\nexport const mapVariant = (variant: Variant, theme?: HvBaseTheme) => {\n if (theme === \"ds3\") return variant;\n const mappedVariant = mappableVariants.get(variant);\n\n if (import.meta.env.DEV) {\n /* eslint-disable no-console */\n const msg = `The typography variant ${variant} is deprecated.`;\n if (mappedVariant) {\n console.warn(`${msg} Use ${mappedVariant} instead.`);\n }\n if (isLegacyVariant(variant)) {\n console.warn(msg);\n }\n }\n\n return mappedVariant || variant;\n};\n"],"names":[],"mappings":"AAEO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA6BA,MAAM,uCAAuB,IAAmC;AAAA,EAC9D,CAAC,YAAY,SAAS;AAAA,EACtB,CAAC,WAAW,QAAQ;AAAA,EACpB,CAAC,UAAU,QAAQ;AAAA,EACnB,CAAC,WAAW,QAAQ;AAAA,EACpB,CAAC,iBAAiB,OAAO;AAAA,EACzB,CAAC,cAAc,MAAM;AAAA,EACrB,CAAC,WAAW,UAAU;AACxB,CAAC;AA2BY,MAAA,aAAa,CAAC,SAAkB,UAAwB;AAC/D,MAAA,UAAU,MAAc,QAAA;AACtB,QAAA,gBAAgB,iBAAiB,IAAI,OAAO;AAalD,SAAO,iBAAiB;AAC1B;"}
|
|
@@ -58,7 +58,36 @@ const HvThemeProvider = ({
|
|
|
58
58
|
]
|
|
59
59
|
);
|
|
60
60
|
const muiTheme = useMemo(() => {
|
|
61
|
+
const colors = activeTheme.colors.modes[colorMode];
|
|
61
62
|
return createTheme({
|
|
63
|
+
spacing: activeTheme.space.base,
|
|
64
|
+
typography: {
|
|
65
|
+
fontFamily: activeTheme.fontFamily.body
|
|
66
|
+
},
|
|
67
|
+
palette: {
|
|
68
|
+
primary: { main: colors.primary },
|
|
69
|
+
success: { main: colors.positive },
|
|
70
|
+
warning: { main: colors.warning },
|
|
71
|
+
error: { main: colors.negative },
|
|
72
|
+
info: { main: colors.primary },
|
|
73
|
+
text: {
|
|
74
|
+
primary: colors.secondary,
|
|
75
|
+
secondary: colors.secondary_80,
|
|
76
|
+
disabled: colors.secondary_60
|
|
77
|
+
},
|
|
78
|
+
background: {
|
|
79
|
+
default: colors.atmo2,
|
|
80
|
+
paper: colors.atmo1
|
|
81
|
+
},
|
|
82
|
+
divider: colors.atmo4,
|
|
83
|
+
action: {
|
|
84
|
+
active: colors.primary,
|
|
85
|
+
hover: colors.primary_80,
|
|
86
|
+
selected: colors.primary_80,
|
|
87
|
+
disabled: colors.secondary_60,
|
|
88
|
+
disabledBackground: colors.atmo3
|
|
89
|
+
}
|
|
90
|
+
},
|
|
62
91
|
components: {
|
|
63
92
|
MuiButtonBase: {
|
|
64
93
|
defaultProps: {
|
|
@@ -66,11 +95,9 @@ const HvThemeProvider = ({
|
|
|
66
95
|
}
|
|
67
96
|
}
|
|
68
97
|
},
|
|
69
|
-
breakpoints:
|
|
70
|
-
...activeTheme.breakpoints
|
|
71
|
-
}
|
|
98
|
+
breakpoints: activeTheme.breakpoints
|
|
72
99
|
});
|
|
73
|
-
}, [activeTheme
|
|
100
|
+
}, [activeTheme, colorMode]);
|
|
74
101
|
const emotionCacheValue = useMemo(
|
|
75
102
|
() => ({ cache: emotionCache }),
|
|
76
103
|
[emotionCache]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme | HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme: themeProp,\n emotionCache,\n colorMode: colorModeProp,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const [theme, setTheme] = useState(themeProp);\n const [colorMode, setColorMode] = useState(colorModeProp);\n\n const {\n theme: activeTheme,\n selectedTheme,\n selectedMode,\n colorModes,\n colorScheme,\n } = parseTheme(themesList, theme, colorMode);\n\n const themes = themesList.map((t) => t.name);\n\n // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n useEffect(() => {\n setTheme(themeProp);\n setColorMode(colorModeProp);\n }, [colorModeProp, themeProp]);\n\n useEffect(() => {\n setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n setTheme(newTheme);\n setColorMode(newMode);\n },\n [selectedMode, selectedTheme],\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ],\n );\n\n const muiTheme = useMemo(() => {\n return createTheme({\n components: {\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n },\n },\n },\n breakpoints:
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme | HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme: themeProp,\n emotionCache,\n colorMode: colorModeProp,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const [theme, setTheme] = useState(themeProp);\n const [colorMode, setColorMode] = useState(colorModeProp);\n\n const {\n theme: activeTheme,\n selectedTheme,\n selectedMode,\n colorModes,\n colorScheme,\n } = parseTheme(themesList, theme, colorMode);\n\n const themes = themesList.map((t) => t.name);\n\n // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n useEffect(() => {\n setTheme(themeProp);\n setColorMode(colorModeProp);\n }, [colorModeProp, themeProp]);\n\n useEffect(() => {\n setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n setTheme(newTheme);\n setColorMode(newMode);\n },\n [selectedMode, selectedTheme],\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ],\n );\n\n const muiTheme = useMemo(() => {\n const colors = activeTheme.colors.modes[colorMode];\n return createTheme({\n spacing: activeTheme.space.base,\n typography: {\n fontFamily: activeTheme.fontFamily.body,\n },\n palette: {\n primary: { main: colors.primary },\n success: { main: colors.positive },\n warning: { main: colors.warning },\n error: { main: colors.negative },\n info: { main: colors.primary },\n text: {\n primary: colors.secondary,\n secondary: colors.secondary_80,\n disabled: colors.secondary_60,\n },\n background: {\n default: colors.atmo2,\n paper: colors.atmo1,\n },\n divider: colors.atmo4,\n action: {\n active: colors.primary,\n hover: colors.primary_80,\n selected: colors.primary_80,\n disabled: colors.secondary_60,\n disabledBackground: colors.atmo3,\n },\n },\n components: {\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n },\n },\n },\n breakpoints: activeTheme.breakpoints,\n });\n }, [activeTheme, colorMode]);\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache],\n );\n\n return (\n <MuiThemeProvider theme={muiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAElD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,WAAW,YAAY,OAAO,SAAS;AAE3C,QAAM,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI;AAG3C,YAAU,MAAM;AACd,aAAS,SAAS;AAClB,iBAAa,aAAa;AAAA,EAAA,GACzB,CAAC,eAAe,SAAS,CAAC;AAE7B,YAAU,MAAM;AACE,oBAAA,eAAe,cAAc,aAAa,MAAM;AAAA,KAC/D,CAAC,aAAa,QAAQ,cAAc,aAAa,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,eAAS,QAAQ;AACjB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAG9B,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,YAAY,OAAO,MAAM,SAAS;AACjD,WAAO,YAAY;AAAA,MACjB,SAAS,YAAY,MAAM;AAAA,MAC3B,YAAY;AAAA,QACV,YAAY,YAAY,WAAW;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,SAAS,EAAE,MAAM,OAAO,SAAS;AAAA,QACjC,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,OAAO,EAAE,MAAM,OAAO,SAAS;AAAA,QAC/B,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,QAC7B,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,WAAW,OAAO;AAAA,UAClB,UAAU,OAAO;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,QAAQ;AAAA,UACN,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,oBAAoB,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,eAAe;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,MACA,aAAa,YAAY;AAAA,IAAA,CAC1B;AAAA,EAAA,GACA,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
|
|
@@ -7,9 +7,6 @@ const range = (length, start = 0) => {
|
|
|
7
7
|
const capitalize = (string = "") => {
|
|
8
8
|
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
|
|
9
9
|
};
|
|
10
|
-
const clamp = (value, max = 100, min = 0) => {
|
|
11
|
-
return Math.min(Math.max(value, min), max);
|
|
12
|
-
};
|
|
13
10
|
function isEqual(obj1, obj2) {
|
|
14
11
|
if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {
|
|
15
12
|
return obj1 === obj2;
|
|
@@ -25,7 +22,6 @@ function isEqual(obj1, obj2) {
|
|
|
25
22
|
}
|
|
26
23
|
export {
|
|
27
24
|
capitalize,
|
|
28
|
-
clamp,
|
|
29
25
|
isEqual,
|
|
30
26
|
range,
|
|
31
27
|
uniqueId
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../../../src/utils/helpers.ts"],"sourcesContent":["export const uniqueId = (prefix = \"\") => {\n return `${prefix}${Math.random().toString(36).slice(2, 9)}`;\n};\n\nexport const range = (length: number, start = 0) => {\n return Array.from({ length: length - start }, (_, i) => i + start);\n};\n\nexport const capitalize = (string = \"\") => {\n return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n};\n\nexport
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../../../src/utils/helpers.ts"],"sourcesContent":["export const uniqueId = (prefix = \"\") => {\n return `${prefix}${Math.random().toString(36).slice(2, 9)}`;\n};\n\nexport const range = (length: number, start = 0) => {\n return Array.from({ length: length - start }, (_, i) => i + start);\n};\n\nexport const capitalize = (string = \"\") => {\n return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n};\n\nexport function isEqual(obj1: unknown, obj2: unknown) {\n if (!obj1 || !obj2 || typeof obj1 !== \"object\" || typeof obj2 !== \"object\") {\n return obj1 === obj2;\n }\n\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) return false;\n\n for (const key of keys1) {\n if (\n !isEqual(obj1[key as keyof typeof obj1], obj2[key as keyof typeof obj2])\n )\n return false;\n }\n\n return true;\n}\n"],"names":[],"mappings":"AAAa,MAAA,WAAW,CAAC,SAAS,OAAO;AACvC,SAAO,GAAG,MAAM,GAAG,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D;AAEO,MAAM,QAAQ,CAAC,QAAgB,QAAQ,MAAM;AAC3C,SAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,SAAS,CAAC,GAAG,MAAM,IAAI,KAAK;AACnE;AAEa,MAAA,aAAa,CAAC,SAAS,OAAO;AAClC,SAAA,OAAO,OAAO,CAAC,EAAE,YAAA,IAAgB,OAAO,MAAM,CAAC,EAAE;AAC1D;AAEgB,SAAA,QAAQ,MAAe,MAAe;AAChD,MAAA,CAAC,QAAQ,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AAC1E,WAAO,SAAS;AAAA,EAClB;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AACxB,QAAA,QAAQ,OAAO,KAAK,IAAI;AAE9B,MAAI,MAAM,WAAW,MAAM,OAAe,QAAA;AAE1C,aAAW,OAAO,OAAO;AACvB,QACE,CAAC,QAAQ,KAAK,GAAwB,GAAG,KAAK,GAAwB,CAAC;AAEhE,aAAA;AAAA,EACX;AAEO,SAAA;AACT;"}
|