@react-md/core 1.0.0-next.3 → 1.0.0-next.5
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/.turbo/turbo-build.log +5 -5
- package/CHANGELOG.md +12 -0
- package/coverage/clover.xml +529 -437
- package/coverage/coverage-final.json +3 -3
- package/coverage/lcov-report/ListItem.tsx.html +2 -2
- package/coverage/lcov-report/ListItemLink.tsx.html +616 -0
- package/coverage/lcov-report/getListItemHeight.ts.html +298 -0
- package/coverage/lcov-report/index.html +38 -23
- package/coverage/lcov.info +423 -317
- package/dist/_core.scss +1 -1
- package/dist/form/_form.scss +1 -1
- package/dist/list/ListItem.js +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemLink.js +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/getListItemHeight.d.ts +0 -1
- package/dist/list/getListItemHeight.js +2 -2
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/types.d.ts +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/menu/_menu.scss +0 -2
- package/dist/theme/_theme.scss +20 -10
- package/package.json +7 -7
- package/src/_core.scss +1 -1
- package/src/form/_form.scss +1 -1
- package/src/list/ListItem.tsx +1 -1
- package/src/list/ListItemLink.tsx +1 -1
- package/src/list/__tests__/getListItemHeight.ts +2 -2
- package/src/list/getListItemHeight.ts +2 -3
- package/src/list/types.ts +1 -1
- package/src/menu/_menu.scss +0 -2
- package/src/theme/_theme.scss +20 -10
- package/.turbo/turbo-lint.log +0 -12
- package/.turbo/turbo-test.log +0 -179
- package/.turbo/turbo-typecheck.log +0 -4
package/dist/_core.scss
CHANGED
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
@forward "button/button" as button-*;
|
|
17
17
|
@forward "badge/badge" as badge-*;
|
|
18
18
|
@forward "tabs/tabs" as tabs-*;
|
|
19
|
+
@forward "avatar/avatar" as avatar-*;
|
|
19
20
|
@forward "chip/chip" as chip-*;
|
|
20
21
|
@forward "table/table" as table-*;
|
|
21
22
|
@forward "app-bar/app-bar" as app-bar-*;
|
|
22
23
|
@forward "responsive-item/responsive-item" as responsive-item-*;
|
|
23
24
|
@forward "overlay/overlay" as overlay-*;
|
|
24
|
-
@forward "avatar/avatar" as avatar-*;
|
|
25
25
|
@forward "card/card" as card-*;
|
|
26
26
|
@forward "link/link" as link-*;
|
|
27
27
|
@forward "list/list" as list-*;
|
package/dist/form/_form.scss
CHANGED
|
@@ -190,7 +190,7 @@ $switch-track-horizontal-padding: 0.875em !default;
|
|
|
190
190
|
$switch-track-light-background-color: colors.$grey-400 !default;
|
|
191
191
|
$switch-track-dark-background-color: if(
|
|
192
192
|
theme.$disable-dark-elevation,
|
|
193
|
-
$switch-track-light-
|
|
193
|
+
$switch-track-light-background-color,
|
|
194
194
|
map.get(theme.$dark-elevation-colors, 24)
|
|
195
195
|
) !default;
|
|
196
196
|
$switch-track-background-color: theme.get-default-color(
|
package/dist/list/ListItem.js
CHANGED
|
@@ -71,7 +71,7 @@ import { listItem } from "./listItemStyles.js";
|
|
|
71
71
|
* }
|
|
72
72
|
* ```
|
|
73
73
|
*/ export const ListItem = /*#__PURE__*/ forwardRef(function ListItem(props, ref) {
|
|
74
|
-
const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight
|
|
74
|
+
const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight, leftAddon, leftAddonType, leftAddonPosition, leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType, rightAddonPosition, rightAddonClassName, rightAddonForceWrap, disableLeftAddonSpacing, disableLeftAddonCenteredMedia, disableRightAddonCenteredMedia, multiline = false, disabled = false, disabledOpacity = false, role = "button", onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, tabIndex: propTabIndex, children: propChildren, presentational = role === "presentation", ...remaining } = props;
|
|
75
75
|
let tabIndex = propTabIndex;
|
|
76
76
|
if (!presentational && typeof tabIndex === "undefined") {
|
|
77
77
|
tabIndex = disabled ? -1 : 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { listItem } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps, type ListItemHeight } from \"./types.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-list-item-keyline\"?: string | number;\n \"--rmd-list-item-padding-h\"?: string | number;\n \"--rmd-list-item-padding-v\"?: string | number;\n \"--rmd-list-item-height\"?: string | number;\n \"--rmd-list-item-medium-height\"?: string | number;\n \"--rmd-list-item-large-height\"?: string | number;\n \"--rmd-list-item-extra-large-height\"?: string | number;\n \"--rmd-list-item-multiline-clamp\"?: string | number;\n \"--rmd-list-item-multiline-height\"?: string | number;\n \"--rmd-list-item-media-size\"?: string | number;\n \"--rmd-list-item-media-spacing\"?: string | number;\n \"--rmd-list-item-text-multiline-height\"?: string | number;\n }\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n */\nexport interface ListItemProps\n extends HTMLAttributes<HTMLLIElement>,\n ListItemChildrenProps {\n /**\n * @defaultValue `\"button\"`\n */\n role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n /**\n * @defaultValue `disabled ? -1 : 0`\n */\n tabIndex?: number;\n\n /**\n * @see {@link ListItemHeight}\n * @defaultValue `\"auto\"`\n */\n height?: ListItemHeight;\n\n /**\n * @defaultValue `false`\n */\n multiline?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * Note: This does nothing if the `disabled` prop is not enabled.\n *\n * @defaultValue `false`\n * @remarks \\@since 2.4.3\n */\n disabledOpacity?: boolean;\n\n /**\n * Set this to `false` if the list item should not gain the interaction\n * states: hover, focus, press, etc. This is kind of like being disabled\n * without the disabled styles being applied.\n *\n * @defaultValue `role === \"presentation\"`\n */\n presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <List>\n * <ListItem\n * onClick={() => {\n * // do something\n * }}\n * >\n * Item 1\n * </ListItem>\n * <ListItem\n * onClick={() => {\n * // do something\n * }}\n * secondaryText={<span>Some <strong>additional</strong> content.</span>}\n * >\n * Item 2\n * </ListItem>\n * </List>\n * );\n * );\n * }\n * ```\n *\n * @example\n * Applying Addons Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <List>\n * <ListItem leftAddon={<FavoriteIcon />}>\n * Item 1\n * </ListItem>\n * <ListItem rightAddon={<FavoriteIcon />}>\n * Item 2\n * </ListItem>\n * <ListItem\n * leftAddon={<FavoriteIcon />}\n * rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n * rightAddonType=\"media\"\n * >\n * Item 3\n * </ListItem>\n * </List>\n * );\n * );\n * }\n * ```\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n function ListItem(props, ref) {\n const {\n className,\n textProps,\n textClassName,\n secondaryTextClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n disableTextChildren = false,\n height: propHeight = \"auto\",\n leftAddon,\n leftAddonType,\n leftAddonPosition,\n leftAddonClassName,\n leftAddonForceWrap,\n rightAddon,\n rightAddonType,\n rightAddonPosition,\n rightAddonClassName,\n rightAddonForceWrap,\n disableLeftAddonSpacing,\n disableLeftAddonCenteredMedia,\n disableRightAddonCenteredMedia,\n multiline = false,\n disabled = false,\n disabledOpacity = false,\n role = \"button\",\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n tabIndex: propTabIndex,\n children: propChildren,\n presentational = role === \"presentation\",\n ...remaining\n } = props;\n\n let tabIndex = propTabIndex;\n if (!presentational && typeof tabIndex === \"undefined\") {\n tabIndex = disabled ? -1 : 0;\n }\n\n const { pressedClassName, ripples, handlers } = useElementInteraction({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled: disabled || presentational,\n });\n const children = useHigherContrastChildren(\n propChildren,\n !disableTextChildren\n );\n\n const height = getListItemHeight({\n height: propHeight,\n leftAddon,\n leftAddonType,\n rightAddon,\n rightAddonType,\n secondaryText,\n });\n\n return (\n <li\n {...remaining}\n {...handlers}\n aria-disabled={disabled || undefined}\n ref={ref}\n role={role}\n tabIndex={tabIndex}\n className={listItem({\n className,\n height,\n disabled,\n disabledOpacity,\n multiline,\n clickable: !presentational,\n pressedClassName,\n })}\n >\n <ListItemChildren\n multiline={multiline}\n textClassName={textClassName}\n secondaryTextClassName={secondaryTextClassName}\n disableTextChildren={disableTextChildren}\n primaryText={primaryText}\n textProps={textProps}\n secondaryText={secondaryText}\n secondaryTextProps={secondaryTextProps}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonClassName={leftAddonClassName}\n leftAddonForceWrap={leftAddonForceWrap}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonClassName={rightAddonClassName}\n rightAddonForceWrap={rightAddonForceWrap}\n disableLeftAddonSpacing={disableLeftAddonSpacing}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItemChildren>\n {ripples}\n </li>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","getListItemHeight","ListItemChildren","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","li","aria-disabled","undefined","clickable"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAuE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,aAAa,MAAM,EAC3BC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG7C;IAEJ,IAAIwC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWd,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEoB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGtD,sBAAsB;QACpEmC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb,UAAUA,YAAYkB;IACxB;IACA,MAAMF,WAAW/C,0BACfgD,cACA,CAAClC;IAGH,MAAMC,SAASd,kBAAkB;QAC/Bc,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC0C;QACE,GAAGJ,SAAS;QACZ,GAAGG,QAAQ;QACZE,iBAAexB,YAAYyB;QAC3BlD,KAAKA;QACL2B,MAAMA;QACNY,UAAUA;QACVtC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAC;YACAF;YACA2B,WAAW,CAACR;YACZE;QACF;;0BAEA,KAACjD;gBACC4B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BkB;;YAEFK;;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { listItem } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps, type ListItemHeight } from \"./types.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-list-item-keyline\"?: string | number;\n \"--rmd-list-item-padding-h\"?: string | number;\n \"--rmd-list-item-padding-v\"?: string | number;\n \"--rmd-list-item-height\"?: string | number;\n \"--rmd-list-item-medium-height\"?: string | number;\n \"--rmd-list-item-large-height\"?: string | number;\n \"--rmd-list-item-extra-large-height\"?: string | number;\n \"--rmd-list-item-multiline-clamp\"?: string | number;\n \"--rmd-list-item-multiline-height\"?: string | number;\n \"--rmd-list-item-media-size\"?: string | number;\n \"--rmd-list-item-media-spacing\"?: string | number;\n \"--rmd-list-item-text-multiline-height\"?: string | number;\n }\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n */\nexport interface ListItemProps\n extends HTMLAttributes<HTMLLIElement>,\n ListItemChildrenProps {\n /**\n * @defaultValue `\"button\"`\n */\n role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n /**\n * @defaultValue `disabled ? -1 : 0`\n */\n tabIndex?: number;\n\n /**\n * @see {@link ListItemHeight}\n * @defaultValue `\"auto\"`\n */\n height?: ListItemHeight;\n\n /**\n * @defaultValue `false`\n */\n multiline?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * Note: This does nothing if the `disabled` prop is not enabled.\n *\n * @defaultValue `false`\n * @remarks \\@since 2.4.3\n */\n disabledOpacity?: boolean;\n\n /**\n * Set this to `false` if the list item should not gain the interaction\n * states: hover, focus, press, etc. This is kind of like being disabled\n * without the disabled styles being applied.\n *\n * @defaultValue `role === \"presentation\"`\n */\n presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <List>\n * <ListItem\n * onClick={() => {\n * // do something\n * }}\n * >\n * Item 1\n * </ListItem>\n * <ListItem\n * onClick={() => {\n * // do something\n * }}\n * secondaryText={<span>Some <strong>additional</strong> content.</span>}\n * >\n * Item 2\n * </ListItem>\n * </List>\n * );\n * );\n * }\n * ```\n *\n * @example\n * Applying Addons Example\n * ```tsx\n * import { List, ListItem } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <List>\n * <ListItem leftAddon={<FavoriteIcon />}>\n * Item 1\n * </ListItem>\n * <ListItem rightAddon={<FavoriteIcon />}>\n * Item 2\n * </ListItem>\n * <ListItem\n * leftAddon={<FavoriteIcon />}\n * rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n * rightAddonType=\"media\"\n * >\n * Item 3\n * </ListItem>\n * </List>\n * );\n * );\n * }\n * ```\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n function ListItem(props, ref) {\n const {\n className,\n textProps,\n textClassName,\n secondaryTextClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n disableTextChildren = false,\n height: propHeight,\n leftAddon,\n leftAddonType,\n leftAddonPosition,\n leftAddonClassName,\n leftAddonForceWrap,\n rightAddon,\n rightAddonType,\n rightAddonPosition,\n rightAddonClassName,\n rightAddonForceWrap,\n disableLeftAddonSpacing,\n disableLeftAddonCenteredMedia,\n disableRightAddonCenteredMedia,\n multiline = false,\n disabled = false,\n disabledOpacity = false,\n role = \"button\",\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n tabIndex: propTabIndex,\n children: propChildren,\n presentational = role === \"presentation\",\n ...remaining\n } = props;\n\n let tabIndex = propTabIndex;\n if (!presentational && typeof tabIndex === \"undefined\") {\n tabIndex = disabled ? -1 : 0;\n }\n\n const { pressedClassName, ripples, handlers } = useElementInteraction({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled: disabled || presentational,\n });\n const children = useHigherContrastChildren(\n propChildren,\n !disableTextChildren\n );\n\n const height = getListItemHeight({\n height: propHeight,\n leftAddon,\n leftAddonType,\n rightAddon,\n rightAddonType,\n secondaryText,\n });\n\n return (\n <li\n {...remaining}\n {...handlers}\n aria-disabled={disabled || undefined}\n ref={ref}\n role={role}\n tabIndex={tabIndex}\n className={listItem({\n className,\n height,\n disabled,\n disabledOpacity,\n multiline,\n clickable: !presentational,\n pressedClassName,\n })}\n >\n <ListItemChildren\n multiline={multiline}\n textClassName={textClassName}\n secondaryTextClassName={secondaryTextClassName}\n disableTextChildren={disableTextChildren}\n primaryText={primaryText}\n textProps={textProps}\n secondaryText={secondaryText}\n secondaryTextProps={secondaryTextProps}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonClassName={leftAddonClassName}\n leftAddonForceWrap={leftAddonForceWrap}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonClassName={rightAddonClassName}\n rightAddonForceWrap={rightAddonForceWrap}\n disableLeftAddonSpacing={disableLeftAddonSpacing}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItemChildren>\n {ripples}\n </li>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","getListItemHeight","ListItemChildren","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","li","aria-disabled","undefined","clickable"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAuE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG7C;IAEJ,IAAIwC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWd,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEoB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGtD,sBAAsB;QACpEmC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAb,UAAUA,YAAYkB;IACxB;IACA,MAAMF,WAAW/C,0BACfgD,cACA,CAAClC;IAGH,MAAMC,SAASd,kBAAkB;QAC/Bc,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC0C;QACE,GAAGJ,SAAS;QACZ,GAAGG,QAAQ;QACZE,iBAAexB,YAAYyB;QAC3BlD,KAAKA;QACL2B,MAAMA;QACNY,UAAUA;QACVtC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAC;YACAF;YACA2B,WAAW,CAACR;YACZE;QACF;;0BAEA,KAACjD;gBACC4B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BkB;;YAEFK;;;AAGP,GACA"}
|
|
@@ -11,7 +11,7 @@ import { listItem } from "./listItemStyles.js";
|
|
|
11
11
|
*
|
|
12
12
|
* The `ListItemLink` should be used to render links within the `List` component.
|
|
13
13
|
*/ export const ListItemLink = /*#__PURE__*/ forwardRef(function ListItemLink(props, ref) {
|
|
14
|
-
const { as: Link = "a", to, href, className, liProps, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight
|
|
14
|
+
const { as: Link = "a", to, href, className, liProps, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight, leftAddon, leftAddonType = "icon", leftAddonPosition = "middle", leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType = "icon", rightAddonPosition = "middle", rightAddonClassName, rightAddonForceWrap, disableLeftAddonCenteredMedia = false, disableRightAddonCenteredMedia = false, multiline = false, disabled = false, disabledOpacity = false, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, role, tabIndex = disabled || role === "menuitem" ? -1 : undefined, children: propChildren, ...remaining } = props;
|
|
15
15
|
const { pressedClassName, ripples, handlers } = useElementInteraction({
|
|
16
16
|
onBlur,
|
|
17
17
|
onClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/ListItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { listItem, type ListItemClassNameOptions } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\nexport interface ListItemLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement>,\n ListItemClassNameOptions,\n ListItemChildrenProps {\n /** @defaultValue `\"a\"` */\n as?: CustomLinkComponent;\n\n /**\n * This should only be used if the {@link as} {@link CustomLinkComponent}\n * accepts a `to` prop instead of {@link href}.\n */\n to?: string;\n\n /**\n * The link's href. Either this or the {@link to} prop **should** be provided.\n */\n href?: string;\n\n /**\n * Any additional props to provide the wrapping `<li>` element such as\n * `style`, `className`, and `ref`.\n */\n liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n /**\n * @defaultValue `disabled ? -1 : undefined`\n */\n tabIndex?: number;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItemLink` should be used to render links within the `List` component.\n */\nexport const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n function ListItemLink(props, ref) {\n const {\n as: Link = \"a\",\n to,\n href,\n className,\n liProps,\n textProps,\n textClassName,\n secondaryTextClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n disableTextChildren = false,\n height: propHeight
|
|
1
|
+
{"version":3,"sources":["../../src/list/ListItemLink.tsx"],"sourcesContent":["\"use client\";\nimport {\n forwardRef,\n type AnchorHTMLAttributes,\n type HTMLAttributes,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport { listItem, type ListItemClassNameOptions } from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\nexport interface ListItemLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement>,\n ListItemClassNameOptions,\n ListItemChildrenProps {\n /** @defaultValue `\"a\"` */\n as?: CustomLinkComponent;\n\n /**\n * This should only be used if the {@link as} {@link CustomLinkComponent}\n * accepts a `to` prop instead of {@link href}.\n */\n to?: string;\n\n /**\n * The link's href. Either this or the {@link to} prop **should** be provided.\n */\n href?: string;\n\n /**\n * Any additional props to provide the wrapping `<li>` element such as\n * `style`, `className`, and `ref`.\n */\n liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n /**\n * @defaultValue `disabled ? -1 : undefined`\n */\n tabIndex?: number;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItemLink` should be used to render links within the `List` component.\n */\nexport const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n function ListItemLink(props, ref) {\n const {\n as: Link = \"a\",\n to,\n href,\n className,\n liProps,\n textProps,\n textClassName,\n secondaryTextClassName,\n primaryText,\n secondaryText,\n secondaryTextProps,\n disableTextChildren = false,\n height: propHeight,\n leftAddon,\n leftAddonType = \"icon\",\n leftAddonPosition = \"middle\",\n leftAddonClassName,\n leftAddonForceWrap,\n rightAddon,\n rightAddonType = \"icon\",\n rightAddonPosition = \"middle\",\n rightAddonClassName,\n rightAddonForceWrap,\n disableLeftAddonCenteredMedia = false,\n disableRightAddonCenteredMedia = false,\n multiline = false,\n disabled = false,\n disabledOpacity = false,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n role,\n tabIndex = disabled || role === \"menuitem\" ? -1 : undefined,\n children: propChildren,\n ...remaining\n } = props;\n\n const { pressedClassName, ripples, handlers } = useElementInteraction({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n const children = useHigherContrastChildren(\n propChildren,\n !disableTextChildren\n );\n\n const height = getListItemHeight({\n height: propHeight,\n leftAddon,\n leftAddonType,\n rightAddon,\n rightAddonType,\n secondaryText,\n });\n\n return (\n <li {...liProps} role=\"none\">\n <Link\n ref={ref}\n {...remaining}\n {...handlers}\n role={role}\n className={listItem({\n className,\n link: true,\n height,\n disabled,\n disabledOpacity,\n multiline,\n pressedClassName,\n })}\n // TODO: Figure out a better type for the CustomLinkComponent to fix this\n to={to as string}\n href={href as string}\n tabIndex={tabIndex}\n >\n <ListItemChildren\n multiline={multiline}\n textClassName={textClassName}\n secondaryTextClassName={secondaryTextClassName}\n disableTextChildren={disableTextChildren}\n primaryText={primaryText}\n textProps={textProps}\n secondaryText={secondaryText}\n secondaryTextProps={secondaryTextProps}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonClassName={leftAddonClassName}\n leftAddonForceWrap={leftAddonForceWrap}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonClassName={rightAddonClassName}\n rightAddonForceWrap={rightAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItemChildren>\n {ripples}\n </Link>\n </li>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItemLink","props","ref","as","Link","to","href","className","liProps","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disabledOpacity","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","role","tabIndex","undefined","children","propChildren","remaining","pressedClassName","ripples","handlers","li","link"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAGL,QAAQ;AACf,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAGxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,QAAQ,QAAuC,sBAAsB;AAiC9E;;;;CAIC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,OAAO,GAAG,EACdC,EAAE,EACFC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,oBAAoB,QAAQ,EAC5BC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,qBAAqB,QAAQ,EAC7BC,mBAAmB,EACnBC,mBAAmB,EACnBC,gCAAgC,KAAK,EACrCC,iCAAiC,KAAK,EACtCC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,kBAAkB,KAAK,EACvBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,IAAI,EACJC,WAAWd,YAAYa,SAAS,aAAa,CAAC,IAAIE,SAAS,EAC3DC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGhD;IAEJ,MAAM,EAAEiD,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGzD,sBAAsB;QACpEsC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAZ;IACF;IACA,MAAMgB,WAAWnD,0BACfoD,cACA,CAACjC;IAGH,MAAMC,SAASlB,kBAAkB;QAC/BkB,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,KAACwC;QAAI,GAAG7C,OAAO;QAAEoC,MAAK;kBACpB,cAAA,MAACxC;YACCF,KAAKA;YACJ,GAAG+C,SAAS;YACZ,GAAGG,QAAQ;YACZR,MAAMA;YACNrC,WAAWR,SAAS;gBAClBQ;gBACA+C,MAAM;gBACNtC;gBACAe;gBACAC;gBACAF;gBACAoB;YACF;YACA,yEAAyE;YACzE7C,IAAIA;YACJC,MAAMA;YACNuC,UAAUA;;8BAEV,KAAChD;oBACCiC,WAAWA;oBACXpB,eAAeA;oBACfC,wBAAwBA;oBACxBI,qBAAqBA;oBACrBH,aAAaA;oBACbH,WAAWA;oBACXI,eAAeA;oBACfC,oBAAoBA;oBACpBI,WAAWA;oBACXC,eAAeA;oBACfC,mBAAmBA;oBACnBC,oBAAoBA;oBACpBC,oBAAoBA;oBACpBC,YAAYA;oBACZC,gBAAgBA;oBAChBC,oBAAoBA;oBACpBC,qBAAqBA;oBACrBC,qBAAqBA;oBACrBC,+BAA+BA;oBAC/BC,gCAAgCA;8BAE/BkB;;gBAEFI;;;;AAIT,GACA"}
|
|
@@ -6,7 +6,6 @@ import type { ListItemChildrenProps, ListItemHeight } from "./types.js";
|
|
|
6
6
|
export interface ListItemHeightOptions extends Pick<ListItemChildrenProps, "leftAddon" | "rightAddon" | "leftAddonType" | "rightAddonType" | "secondaryText"> {
|
|
7
7
|
/**
|
|
8
8
|
* @see {@link ListItemHeight}
|
|
9
|
-
* @defaultValue `"auto"`
|
|
10
9
|
*/
|
|
11
10
|
height?: ListItemHeight;
|
|
12
11
|
}
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* @see {@link ListItemHeight}
|
|
6
6
|
* @internal
|
|
7
7
|
*/ export function getListItemHeight(options = {}) {
|
|
8
|
-
const { height
|
|
9
|
-
if (height
|
|
8
|
+
const { height, leftAddon, leftAddonType = "icon", rightAddon, rightAddonType = "icon", secondaryText } = options;
|
|
9
|
+
if (height) {
|
|
10
10
|
return height;
|
|
11
11
|
}
|
|
12
12
|
const isIcon = leftAddon && leftAddonType === "icon" || rightAddon && rightAddonType === "icon";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/getListItemHeight.ts"],"sourcesContent":["import type { ListItemChildrenProps, ListItemHeight } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface ListItemHeightOptions\n extends Pick<\n ListItemChildrenProps,\n | \"leftAddon\"\n | \"rightAddon\"\n | \"leftAddonType\"\n | \"rightAddonType\"\n | \"secondaryText\"\n > {\n /**\n * @see {@link ListItemHeight}\n
|
|
1
|
+
{"version":3,"sources":["../../src/list/getListItemHeight.ts"],"sourcesContent":["import type { ListItemChildrenProps, ListItemHeight } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface ListItemHeightOptions\n extends Pick<\n ListItemChildrenProps,\n | \"leftAddon\"\n | \"rightAddon\"\n | \"leftAddonType\"\n | \"rightAddonType\"\n | \"secondaryText\"\n > {\n /**\n * @see {@link ListItemHeight}\n */\n height?: ListItemHeight;\n}\n\n/**\n * Gets the expected height for the `ListItem` or `SimpleListItem` based on the\n * addons and `secondaryText` props.\n *\n * @see {@link ListItemHeight}\n * @internal\n */\nexport function getListItemHeight(\n options: ListItemHeightOptions = {}\n): ListItemHeight {\n const {\n height,\n leftAddon,\n leftAddonType = \"icon\",\n rightAddon,\n rightAddonType = \"icon\",\n secondaryText,\n } = options;\n\n if (height) {\n return height;\n }\n\n const isIcon =\n (leftAddon && leftAddonType === \"icon\") ||\n (rightAddon && rightAddonType === \"icon\");\n const isAvatar =\n (leftAddon && leftAddonType === \"avatar\") ||\n (rightAddon && rightAddonType === \"avatar\");\n const isGraphic =\n (leftAddon &&\n (leftAddonType === \"media\" || leftAddonType === \"large-media\")) ||\n (rightAddon &&\n (rightAddonType === \"media\" || rightAddonType === \"large-media\"));\n\n // secondary text will always be extra large due to the default `line-height`\n if (isGraphic || secondaryText) {\n return \"extra-large\";\n }\n\n if (isAvatar) {\n return \"large\";\n }\n\n if (isIcon) {\n return \"medium\";\n }\n\n return \"normal\";\n}\n"],"names":["getListItemHeight","options","height","leftAddon","leftAddonType","rightAddon","rightAddonType","secondaryText","isIcon","isAvatar","isGraphic"],"mappings":"AAqBA;;;;;;CAMC,GACD,OAAO,SAASA,kBACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,gBAAgB,MAAM,EACtBC,UAAU,EACVC,iBAAiB,MAAM,EACvBC,aAAa,EACd,GAAGN;IAEJ,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,MAAMM,SACJ,AAACL,aAAaC,kBAAkB,UAC/BC,cAAcC,mBAAmB;IACpC,MAAMG,WACJ,AAACN,aAAaC,kBAAkB,YAC/BC,cAAcC,mBAAmB;IACpC,MAAMI,YACJ,AAACP,aACEC,CAAAA,kBAAkB,WAAWA,kBAAkB,aAAY,KAC7DC,cACEC,CAAAA,mBAAmB,WAAWA,mBAAmB,aAAY;IAElE,6EAA6E;IAC7E,IAAII,aAAaH,eAAe;QAC9B,OAAO;IACT;IAEA,IAAIE,UAAU;QACZ,OAAO;IACT;IAEA,IAAID,QAAQ;QACV,OAAO;IACT;IAEA,OAAO;AACT"}
|
package/dist/list/types.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { type PropsWithRef } from "../types.js";
|
|
|
5
5
|
*
|
|
6
6
|
* Conversions:
|
|
7
7
|
*
|
|
8
|
-
* - height !== "auto" -> height
|
|
8
|
+
* - height !== undefined && height !== "auto" -> height
|
|
9
9
|
* - secondaryText or left/right addon is media/media-large -> "extra-large"
|
|
10
10
|
* - left/right addon is avatar -> "large"
|
|
11
11
|
* - left/right addon is icon -> "medium"
|
package/dist/list/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * The height to apply to the list item.\n *\n * Conversions:\n *\n * - height !== \"auto\" -> height\n * - secondaryText or left/right addon is media/media-large -> \"extra-large\"\n * - left/right addon is avatar -> \"large\"\n * - left/right addon is icon -> \"medium\"\n * - no addons and no secondary text -> \"normal\"\n */\nexport type ListItemHeight =\n | \"auto\"\n | \"normal\"\n | \"medium\"\n | \"large\"\n | \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" | \"middle\" | \"bottom\";\nexport type ListItemAddonType = \"icon\" | \"avatar\" | \"media\" | \"large-media\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListItemChildrenAddonProps {\n /**\n * An optional addon to display to the left of the `primaryText` or\n * `children` and should be used with the `leftAddonType` prop to adjust\n * spacing.\n */\n leftAddon?: ReactNode;\n\n /**\n * The type of the addon that appears to the left of the `primaryText` or\n * `children`.\n *\n * @defaultValue `\"icon\"`\n */\n leftAddonType?: ListItemAddonType;\n\n /**\n * The vertical position the left icon, avatar, media, or large media\n * should be placed.\n *\n * @defaultValue `\"middle\"`\n */\n leftAddonPosition?: ListItemAddonPosition;\n\n /**\n * @remarks \\@since 6.0.0\n */\n leftAddonClassName?: string;\n\n /**\n * Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n *\n * @defaultValue `leftAddonType === \"media\" || leftAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n */\n leftAddonForceWrap?: boolean;\n\n /**\n * Set this to `true` to disable the additional spacing applied to the addons\n * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n * value is used instead.\n *\n * @defaultValue `false`\n */\n disableLeftAddonSpacing?: boolean;\n\n /**\n * An optional addon to display to the right of the `primaryText` or\n * `children` and should be used with the `rightAddonType` prop to adjust\n * spacing.\n */\n rightAddon?: ReactNode;\n\n /**\n * The type of the addon that appears to the right of the `primaryText` or\n * `children`.\n *\n * @defaultValue `\"icon\"`\n */\n rightAddonType?: ListItemAddonType;\n\n /**\n * The vertical position the right icon, avatar, media, or large media\n * should be placed.\n *\n * @defaultValue `\"middle\"`\n */\n rightAddonPosition?: ListItemAddonPosition;\n\n /**\n * @remarks \\@since 6.0.0\n */\n rightAddonClassName?: string;\n\n /**\n * Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n *\n * @defaultValue `rightAddonType === \"media\" || rightAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n */\n rightAddonForceWrap?: boolean;\n\n /**\n * The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n *\n * When this is set to `true`, the flex styles will not be applied.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableLeftAddonCenteredMedia?: boolean;\n\n /**\n * The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n *\n * When this is set to `true`, the flex styles will not be applied.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableRightAddonCenteredMedia?: boolean;\n}\n\nexport interface ListItemChildrenProps extends ListItemChildrenAddonProps {\n /**\n * The main content to display. When the `textChildren` prop is enabled and\n * there is child content, it will be treated as primary text and update the\n * styles automatically.\n */\n children?: ReactNode;\n\n /**\n * Any additional props that should be passed to the `<span>` surrounding\n * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n *\n * @remarks \\@since 6.0.0\n */\n textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n /**\n * An optional className to apply to the `<span>` that surrounds the\n * `primaryText` and optionally `secondaryText` within the list item.\n */\n textClassName?: string;\n\n /**\n * An optional className to apply to the `<span>` that surrounds the\n * `secondaryText` within the list item.\n */\n secondaryTextClassName?: string;\n\n /**\n * Set this to `true` if the {@link children} should not automatically be\n * wrapped in the `ListItemText` component.\n *\n * @remarks \\@since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n * @defaultValue `false`\n */\n disableTextChildren?: boolean;\n\n /**\n * An optional element that should be rendered as the `primaryText` within the\n * list item. It is most likely easier to use the `children` prop instead, but\n * this allows you to create more complex components with the `ListItem` since\n * you can provided `children` and have the styles for the `primaryText` still\n * applied. By default, this will only allow one line of text and add ellipsis\n * for any text overflow.\n */\n primaryText?: ReactNode;\n\n /**\n * An optional element that should be rendered as the `secondaryText` within\n * the list item. By default, this will only span one line and add ellipsis\n * for overflow.\n */\n secondaryText?: ReactNode;\n\n /**\n * Any additional props that should be passed to the `<span>` surrounding\n * the {@link secondaryText}.\n *\n * @remarks \\@since 6.0.0\n */\n secondaryTextProps?: PropsWithRef<\n HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n >;\n\n /**\n * Set this to `true` to allow the {@link secondaryText} to span multiple\n * lines and use the CSS clamp after two lines of text are visible. The number\n * of lines can be configured by `core.$list-item-multiline-clamp` or\n * `@include core.list-set-var(item-multiline-clamp, $new-value)`.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n * @defaultValue `false`\n */\n multiline?: boolean;\n}\n"],"names":[],"mappings":"AA4IA,WA2EC"}
|
|
1
|
+
{"version":3,"sources":["../../src/list/types.ts"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\n/**\n * The height to apply to the list item.\n *\n * Conversions:\n *\n * - height !== undefined && height !== \"auto\" -> height\n * - secondaryText or left/right addon is media/media-large -> \"extra-large\"\n * - left/right addon is avatar -> \"large\"\n * - left/right addon is icon -> \"medium\"\n * - no addons and no secondary text -> \"normal\"\n */\nexport type ListItemHeight =\n | \"auto\"\n | \"normal\"\n | \"medium\"\n | \"large\"\n | \"extra-large\";\n\nexport type ListItemAddonPosition = \"top\" | \"middle\" | \"bottom\";\nexport type ListItemAddonType = \"icon\" | \"avatar\" | \"media\" | \"large-media\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface ListItemChildrenAddonProps {\n /**\n * An optional addon to display to the left of the `primaryText` or\n * `children` and should be used with the `leftAddonType` prop to adjust\n * spacing.\n */\n leftAddon?: ReactNode;\n\n /**\n * The type of the addon that appears to the left of the `primaryText` or\n * `children`.\n *\n * @defaultValue `\"icon\"`\n */\n leftAddonType?: ListItemAddonType;\n\n /**\n * The vertical position the left icon, avatar, media, or large media\n * should be placed.\n *\n * @defaultValue `\"middle\"`\n */\n leftAddonPosition?: ListItemAddonPosition;\n\n /**\n * @remarks \\@since 6.0.0\n */\n leftAddonClassName?: string;\n\n /**\n * Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n *\n * @defaultValue `leftAddonType === \"media\" || leftAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n */\n leftAddonForceWrap?: boolean;\n\n /**\n * Set this to `true` to disable the additional spacing applied to the addons\n * that appear before the `children` and the normal `--rmd-text-icon-spacing`\n * value is used instead.\n *\n * @defaultValue `false`\n */\n disableLeftAddonSpacing?: boolean;\n\n /**\n * An optional addon to display to the right of the `primaryText` or\n * `children` and should be used with the `rightAddonType` prop to adjust\n * spacing.\n */\n rightAddon?: ReactNode;\n\n /**\n * The type of the addon that appears to the right of the `primaryText` or\n * `children`.\n *\n * @defaultValue `\"icon\"`\n */\n rightAddonType?: ListItemAddonType;\n\n /**\n * The vertical position the right icon, avatar, media, or large media\n * should be placed.\n *\n * @defaultValue `\"middle\"`\n */\n rightAddonPosition?: ListItemAddonPosition;\n\n /**\n * @remarks \\@since 6.0.0\n */\n rightAddonClassName?: string;\n\n /**\n * Set this to `true` if your addon does not accept a `className` prop to\n * apply the correct styling.\n *\n * @defaultValue `rightAddonType === \"media\" || rightAddonType === \"large-media\"`\n * @remarks \\@since 6.0.0\n */\n rightAddonForceWrap?: boolean;\n\n /**\n * The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n *\n * When this is set to `true`, the flex styles will not be applied.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableLeftAddonCenteredMedia?: boolean;\n\n /**\n * The media items are centered by default using:\n * ```scss\n * align-items: center;\n * display: flex;\n * justify-content: center;\n * ```\n *\n * When this is set to `true`, the flex styles will not be applied.\n *\n * @defaultValue `false`\n * @remarks \\@since 6.0.0\n */\n disableRightAddonCenteredMedia?: boolean;\n}\n\nexport interface ListItemChildrenProps extends ListItemChildrenAddonProps {\n /**\n * The main content to display. When the `textChildren` prop is enabled and\n * there is child content, it will be treated as primary text and update the\n * styles automatically.\n */\n children?: ReactNode;\n\n /**\n * Any additional props that should be passed to the `<span>` surrounding\n * the {@link children}, {@link primaryText}, and {@link secondaryText}.\n *\n * @remarks \\@since 6.0.0\n */\n textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;\n\n /**\n * An optional className to apply to the `<span>` that surrounds the\n * `primaryText` and optionally `secondaryText` within the list item.\n */\n textClassName?: string;\n\n /**\n * An optional className to apply to the `<span>` that surrounds the\n * `secondaryText` within the list item.\n */\n secondaryTextClassName?: string;\n\n /**\n * Set this to `true` if the {@link children} should not automatically be\n * wrapped in the `ListItemText` component.\n *\n * @remarks \\@since 6.0.0 Renamed from `textChildren` since it was defaulted on.\n * @defaultValue `false`\n */\n disableTextChildren?: boolean;\n\n /**\n * An optional element that should be rendered as the `primaryText` within the\n * list item. It is most likely easier to use the `children` prop instead, but\n * this allows you to create more complex components with the `ListItem` since\n * you can provided `children` and have the styles for the `primaryText` still\n * applied. By default, this will only allow one line of text and add ellipsis\n * for any text overflow.\n */\n primaryText?: ReactNode;\n\n /**\n * An optional element that should be rendered as the `secondaryText` within\n * the list item. By default, this will only span one line and add ellipsis\n * for overflow.\n */\n secondaryText?: ReactNode;\n\n /**\n * Any additional props that should be passed to the `<span>` surrounding\n * the {@link secondaryText}.\n *\n * @remarks \\@since 6.0.0\n */\n secondaryTextProps?: PropsWithRef<\n HTMLAttributes<HTMLSpanElement>,\n HTMLSpanElement\n >;\n\n /**\n * Set this to `true` to allow the {@link secondaryText} to span multiple\n * lines and use the CSS clamp after two lines of text are visible. The number\n * of lines can be configured by `core.$list-item-multiline-clamp` or\n * `@include core.list-set-var(item-multiline-clamp, $new-value)`.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp}\n * @defaultValue `false`\n */\n multiline?: boolean;\n}\n"],"names":[],"mappings":"AA4IA,WA2EC"}
|
package/dist/menu/_menu.scss
CHANGED
|
@@ -65,8 +65,6 @@ $variables: (background-color, color, min-width, spacing);
|
|
|
65
65
|
.rmd-menu-item {
|
|
66
66
|
@include icon.set-var(spacing, get-var(spacing));
|
|
67
67
|
|
|
68
|
-
height: var(--rmd-list-item-height);
|
|
69
|
-
|
|
70
68
|
&--focused {
|
|
71
69
|
// can't use `:focus-visible` here since this is mostly for virtual
|
|
72
70
|
// keyboard movement for comboboxes. the focus is on the button or textbox
|
package/dist/theme/_theme.scss
CHANGED
|
@@ -30,7 +30,7 @@ $color-scheme: light !default;
|
|
|
30
30
|
///
|
|
31
31
|
/// If this is set to `false`, all surfaces will mimic the light theme and have
|
|
32
32
|
/// a single surface color.
|
|
33
|
-
$disable-dark-elevation:
|
|
33
|
+
$disable-dark-elevation: $color-scheme == light !default;
|
|
34
34
|
|
|
35
35
|
/// This value should be set to `false` if you do not want the initial bundle to
|
|
36
36
|
/// include the `@media (prefers-color-scheme: dark)` styles.
|
|
@@ -189,6 +189,18 @@ $theme-variables: (
|
|
|
189
189
|
#{$property}: theme-get-var($name, $fallback);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
+
@mixin use-light-theme-elevation-colors {
|
|
193
|
+
@each $z-value, $background-color in $dark-elevation-colors {
|
|
194
|
+
@include set-dark-elevation-color($z-value, $light-theme-surface-color);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@mixin use-dark-theme-elevation-colors {
|
|
199
|
+
@each $z-value, $background-color in $dark-elevation-colors {
|
|
200
|
+
@include set-dark-elevation-color($z-value, $background-color);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
192
204
|
@mixin use-light-theme-colors {
|
|
193
205
|
@include theme-set-var(background-color, $light-theme-background-color);
|
|
194
206
|
@if $disable-dark-elevation {
|
|
@@ -203,9 +215,7 @@ $theme-variables: (
|
|
|
203
215
|
@include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
|
|
204
216
|
|
|
205
217
|
@if not $disable-dark-elevation and $color-scheme != light {
|
|
206
|
-
@
|
|
207
|
-
@include set-dark-elevation-color($z-value, $light-theme-surface-color);
|
|
208
|
-
}
|
|
218
|
+
@include use-light-theme-elevation-colors;
|
|
209
219
|
}
|
|
210
220
|
}
|
|
211
221
|
|
|
@@ -223,9 +233,7 @@ $theme-variables: (
|
|
|
223
233
|
@include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
|
|
224
234
|
|
|
225
235
|
@if not $disable-dark-elevation {
|
|
226
|
-
@
|
|
227
|
-
@include set-dark-elevation-color($z-value, $background-color);
|
|
228
|
-
}
|
|
236
|
+
@include use-dark-theme-elevation-colors;
|
|
229
237
|
}
|
|
230
238
|
}
|
|
231
239
|
|
|
@@ -250,9 +258,11 @@ $theme-variables: (
|
|
|
250
258
|
@include theme-set-var(text-hint-color, $text-hint-color);
|
|
251
259
|
@include theme-set-var(text-disabled-color, $text-disabled-color);
|
|
252
260
|
|
|
253
|
-
@if not $disable-dark-elevation
|
|
254
|
-
@
|
|
255
|
-
@include
|
|
261
|
+
@if not $disable-dark-elevation {
|
|
262
|
+
@if $color-scheme == dark {
|
|
263
|
+
@include use-dark-theme-elevation-colors;
|
|
264
|
+
} @else if $color-scheme == light {
|
|
265
|
+
@include use-light-theme-elevation-colors;
|
|
256
266
|
}
|
|
257
267
|
}
|
|
258
268
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-md/core",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.5",
|
|
4
4
|
"description": "The core components and functionality for react-md.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sass": "./dist/_core.scss",
|
|
@@ -61,15 +61,15 @@
|
|
|
61
61
|
"@jest/globals": "^29.7.0",
|
|
62
62
|
"@jest/types": "^29.6.3",
|
|
63
63
|
"@swc/cli": "^0.1.63",
|
|
64
|
-
"@swc/core": "1.3.
|
|
65
|
-
"@swc/jest": "^0.2.
|
|
64
|
+
"@swc/core": "1.3.105",
|
|
65
|
+
"@swc/jest": "^0.2.31",
|
|
66
66
|
"@testing-library/dom": "^9.3.4",
|
|
67
|
-
"@testing-library/jest-dom": "^6.
|
|
67
|
+
"@testing-library/jest-dom": "^6.3.0",
|
|
68
68
|
"@testing-library/react": "^14.1.2",
|
|
69
69
|
"@testing-library/user-event": "^14.5.2",
|
|
70
70
|
"@types/lodash": "^4.14.202",
|
|
71
|
-
"@types/node": "^20.11.
|
|
72
|
-
"@types/react": "^18.2.
|
|
71
|
+
"@types/node": "^20.11.6",
|
|
72
|
+
"@types/react": "^18.2.48",
|
|
73
73
|
"@types/react-dom": "^18.2.18",
|
|
74
74
|
"chokidar": "^3.5.3",
|
|
75
75
|
"filesize": "^10.1.0",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"npm-run-all": "^4.1.5",
|
|
83
83
|
"postcss": "^8.4.33",
|
|
84
84
|
"postcss-scss": "^4.0.9",
|
|
85
|
-
"stylelint": "^16.
|
|
85
|
+
"stylelint": "^16.2.0",
|
|
86
86
|
"stylelint-config-prettier-scss": "^1.0.0",
|
|
87
87
|
"stylelint-config-recommended-scss": "^14.0.0",
|
|
88
88
|
"stylelint-order": "^6.0.4",
|
package/src/_core.scss
CHANGED
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
@forward "button/button" as button-*;
|
|
17
17
|
@forward "badge/badge" as badge-*;
|
|
18
18
|
@forward "tabs/tabs" as tabs-*;
|
|
19
|
+
@forward "avatar/avatar" as avatar-*;
|
|
19
20
|
@forward "chip/chip" as chip-*;
|
|
20
21
|
@forward "table/table" as table-*;
|
|
21
22
|
@forward "app-bar/app-bar" as app-bar-*;
|
|
22
23
|
@forward "responsive-item/responsive-item" as responsive-item-*;
|
|
23
24
|
@forward "overlay/overlay" as overlay-*;
|
|
24
|
-
@forward "avatar/avatar" as avatar-*;
|
|
25
25
|
@forward "card/card" as card-*;
|
|
26
26
|
@forward "link/link" as link-*;
|
|
27
27
|
@forward "list/list" as list-*;
|
package/src/form/_form.scss
CHANGED
|
@@ -190,7 +190,7 @@ $switch-track-horizontal-padding: 0.875em !default;
|
|
|
190
190
|
$switch-track-light-background-color: colors.$grey-400 !default;
|
|
191
191
|
$switch-track-dark-background-color: if(
|
|
192
192
|
theme.$disable-dark-elevation,
|
|
193
|
-
$switch-track-light-
|
|
193
|
+
$switch-track-light-background-color,
|
|
194
194
|
map.get(theme.$dark-elevation-colors, 24)
|
|
195
195
|
) !default;
|
|
196
196
|
$switch-track-background-color: theme.get-default-color(
|
package/src/list/ListItem.tsx
CHANGED
|
@@ -151,7 +151,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
|
|
|
151
151
|
secondaryText,
|
|
152
152
|
secondaryTextProps,
|
|
153
153
|
disableTextChildren = false,
|
|
154
|
-
height: propHeight
|
|
154
|
+
height: propHeight,
|
|
155
155
|
leftAddon,
|
|
156
156
|
leftAddonType,
|
|
157
157
|
leftAddonPosition,
|
|
@@ -63,7 +63,7 @@ export const ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(
|
|
|
63
63
|
secondaryText,
|
|
64
64
|
secondaryTextProps,
|
|
65
65
|
disableTextChildren = false,
|
|
66
|
-
height: propHeight
|
|
66
|
+
height: propHeight,
|
|
67
67
|
leftAddon,
|
|
68
68
|
leftAddonType = "icon",
|
|
69
69
|
leftAddonPosition = "middle",
|
|
@@ -2,12 +2,12 @@ import { describe, expect, it } from "@jest/globals";
|
|
|
2
2
|
import { getListItemHeight } from "../getListItemHeight.js";
|
|
3
3
|
|
|
4
4
|
describe("getListItemHeight", () => {
|
|
5
|
-
it('should return "normal" if no addons are provided when the height is omitted
|
|
5
|
+
it('should return "normal" if no addons are provided when the height is omitted', () => {
|
|
6
6
|
expect(getListItemHeight({})).toBe("normal");
|
|
7
|
-
expect(getListItemHeight({ height: "auto" })).toBe("normal");
|
|
8
7
|
});
|
|
9
8
|
|
|
10
9
|
it("should return the height if it was provided", () => {
|
|
10
|
+
expect(getListItemHeight({ height: "auto" })).toBe("auto");
|
|
11
11
|
expect(getListItemHeight({ height: "normal" })).toBe("normal");
|
|
12
12
|
expect(getListItemHeight({ height: "normal", leftAddon: "Addon" })).toBe(
|
|
13
13
|
"normal"
|
|
@@ -15,7 +15,6 @@ export interface ListItemHeightOptions
|
|
|
15
15
|
> {
|
|
16
16
|
/**
|
|
17
17
|
* @see {@link ListItemHeight}
|
|
18
|
-
* @defaultValue `"auto"`
|
|
19
18
|
*/
|
|
20
19
|
height?: ListItemHeight;
|
|
21
20
|
}
|
|
@@ -31,7 +30,7 @@ export function getListItemHeight(
|
|
|
31
30
|
options: ListItemHeightOptions = {}
|
|
32
31
|
): ListItemHeight {
|
|
33
32
|
const {
|
|
34
|
-
height
|
|
33
|
+
height,
|
|
35
34
|
leftAddon,
|
|
36
35
|
leftAddonType = "icon",
|
|
37
36
|
rightAddon,
|
|
@@ -39,7 +38,7 @@ export function getListItemHeight(
|
|
|
39
38
|
secondaryText,
|
|
40
39
|
} = options;
|
|
41
40
|
|
|
42
|
-
if (height
|
|
41
|
+
if (height) {
|
|
43
42
|
return height;
|
|
44
43
|
}
|
|
45
44
|
|
package/src/list/types.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { type PropsWithRef } from "../types.js";
|
|
|
6
6
|
*
|
|
7
7
|
* Conversions:
|
|
8
8
|
*
|
|
9
|
-
* - height !== "auto" -> height
|
|
9
|
+
* - height !== undefined && height !== "auto" -> height
|
|
10
10
|
* - secondaryText or left/right addon is media/media-large -> "extra-large"
|
|
11
11
|
* - left/right addon is avatar -> "large"
|
|
12
12
|
* - left/right addon is icon -> "medium"
|
package/src/menu/_menu.scss
CHANGED
|
@@ -65,8 +65,6 @@ $variables: (background-color, color, min-width, spacing);
|
|
|
65
65
|
.rmd-menu-item {
|
|
66
66
|
@include icon.set-var(spacing, get-var(spacing));
|
|
67
67
|
|
|
68
|
-
height: var(--rmd-list-item-height);
|
|
69
|
-
|
|
70
68
|
&--focused {
|
|
71
69
|
// can't use `:focus-visible` here since this is mostly for virtual
|
|
72
70
|
// keyboard movement for comboboxes. the focus is on the button or textbox
|
package/src/theme/_theme.scss
CHANGED
|
@@ -30,7 +30,7 @@ $color-scheme: light !default;
|
|
|
30
30
|
///
|
|
31
31
|
/// If this is set to `false`, all surfaces will mimic the light theme and have
|
|
32
32
|
/// a single surface color.
|
|
33
|
-
$disable-dark-elevation:
|
|
33
|
+
$disable-dark-elevation: $color-scheme == light !default;
|
|
34
34
|
|
|
35
35
|
/// This value should be set to `false` if you do not want the initial bundle to
|
|
36
36
|
/// include the `@media (prefers-color-scheme: dark)` styles.
|
|
@@ -189,6 +189,18 @@ $theme-variables: (
|
|
|
189
189
|
#{$property}: theme-get-var($name, $fallback);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
+
@mixin use-light-theme-elevation-colors {
|
|
193
|
+
@each $z-value, $background-color in $dark-elevation-colors {
|
|
194
|
+
@include set-dark-elevation-color($z-value, $light-theme-surface-color);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@mixin use-dark-theme-elevation-colors {
|
|
199
|
+
@each $z-value, $background-color in $dark-elevation-colors {
|
|
200
|
+
@include set-dark-elevation-color($z-value, $background-color);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
192
204
|
@mixin use-light-theme-colors {
|
|
193
205
|
@include theme-set-var(background-color, $light-theme-background-color);
|
|
194
206
|
@if $disable-dark-elevation {
|
|
@@ -203,9 +215,7 @@ $theme-variables: (
|
|
|
203
215
|
@include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
|
|
204
216
|
|
|
205
217
|
@if not $disable-dark-elevation and $color-scheme != light {
|
|
206
|
-
@
|
|
207
|
-
@include set-dark-elevation-color($z-value, $light-theme-surface-color);
|
|
208
|
-
}
|
|
218
|
+
@include use-light-theme-elevation-colors;
|
|
209
219
|
}
|
|
210
220
|
}
|
|
211
221
|
|
|
@@ -223,9 +233,7 @@ $theme-variables: (
|
|
|
223
233
|
@include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
|
|
224
234
|
|
|
225
235
|
@if not $disable-dark-elevation {
|
|
226
|
-
@
|
|
227
|
-
@include set-dark-elevation-color($z-value, $background-color);
|
|
228
|
-
}
|
|
236
|
+
@include use-dark-theme-elevation-colors;
|
|
229
237
|
}
|
|
230
238
|
}
|
|
231
239
|
|
|
@@ -250,9 +258,11 @@ $theme-variables: (
|
|
|
250
258
|
@include theme-set-var(text-hint-color, $text-hint-color);
|
|
251
259
|
@include theme-set-var(text-disabled-color, $text-disabled-color);
|
|
252
260
|
|
|
253
|
-
@if not $disable-dark-elevation
|
|
254
|
-
@
|
|
255
|
-
@include
|
|
261
|
+
@if not $disable-dark-elevation {
|
|
262
|
+
@if $color-scheme == dark {
|
|
263
|
+
@include use-dark-theme-elevation-colors;
|
|
264
|
+
} @else if $color-scheme == light {
|
|
265
|
+
@include use-light-theme-elevation-colors;
|
|
256
266
|
}
|
|
257
267
|
}
|
|
258
268
|
|
package/.turbo/turbo-lint.log
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
> @react-md/core@1.0.0-next.2 lint /home/mlaursen/code/react-md/packages/core
|
|
3
|
-
> npm-run-all lint-scripts lint-styles
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
> @react-md/core@1.0.0-next.2 lint-scripts /home/mlaursen/code/react-md/packages/core
|
|
7
|
-
> eslint "src/**/*.{ts,tsx,js,jsx,cjs,mjs}"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
> @react-md/core@1.0.0-next.2 lint-styles /home/mlaursen/code/react-md/packages/core
|
|
11
|
-
> stylelint "src/**/*.{css,scss}"
|
|
12
|
-
|