@react-md/core 7.0.1 → 7.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/_base.scss +10 -4
  2. package/dist/form/Select.js +1 -2
  3. package/dist/form/Select.js.map +1 -1
  4. package/dist/form/utils.js +1 -1
  5. package/dist/form/utils.js.map +1 -1
  6. package/dist/icon/_icon.scss +19 -0
  7. package/dist/icon/configureMaterialSymbols.d.ts +1 -0
  8. package/dist/icon/configureMaterialSymbols.js +64 -0
  9. package/dist/icon/configureMaterialSymbols.js.map +1 -0
  10. package/dist/icon/getMaterialSymbolOption.d.ts +6 -0
  11. package/dist/icon/getMaterialSymbolOption.js +14 -0
  12. package/dist/icon/getMaterialSymbolOption.js.map +1 -0
  13. package/dist/icon/getMaterialSymbolsUrl.d.ts +58 -0
  14. package/dist/icon/getMaterialSymbolsUrl.js +32 -0
  15. package/dist/icon/getMaterialSymbolsUrl.js.map +1 -0
  16. package/dist/icon/symbols.d.ts +4 -0
  17. package/dist/icon/symbols.js +25 -0
  18. package/dist/icon/symbols.js.map +1 -0
  19. package/dist/layout/useExpandableLayout.d.ts +2 -2
  20. package/dist/layout/useExpandableLayout.js.map +1 -1
  21. package/dist/menu/MenuItemButton.js +1 -0
  22. package/dist/menu/MenuItemButton.js.map +1 -1
  23. package/dist/menu/MenuItemFileInput.js +1 -2
  24. package/dist/menu/MenuItemFileInput.js.map +1 -1
  25. package/dist/menu/MenuItemInputToggle.js +1 -1
  26. package/dist/menu/MenuItemInputToggle.js.map +1 -1
  27. package/dist/positioning/utils.js +0 -4
  28. package/dist/positioning/utils.js.map +1 -1
  29. package/dist/theme/_theme.scss +42 -3
  30. package/dist/transition/useMaxWidthTransition.d.ts +1 -1
  31. package/dist/transition/useMaxWidthTransition.js.map +1 -1
  32. package/dist/types.d.ts +5 -0
  33. package/dist/types.js.map +1 -1
  34. package/dist/window-splitter/styles.d.ts +2 -2
  35. package/dist/window-splitter/styles.js.map +1 -1
  36. package/package.json +51 -42
  37. package/src/form/Select.tsx +1 -2
  38. package/src/form/utils.ts +1 -1
  39. package/src/icon/configureMaterialSymbols.tsx +25 -0
  40. package/src/icon/getMaterialSymbolOption.ts +20 -0
  41. package/src/icon/getMaterialSymbolsUrl.ts +112 -0
  42. package/src/icon/symbols.ts +26 -0
  43. package/src/layout/useExpandableLayout.ts +6 -2
  44. package/src/menu/MenuItemButton.tsx +1 -0
  45. package/src/menu/MenuItemFileInput.tsx +1 -2
  46. package/src/menu/MenuItemInputToggle.tsx +1 -1
  47. package/src/positioning/utils.ts +0 -4
  48. package/src/transition/useMaxWidthTransition.ts +1 -1
  49. package/src/types.ts +6 -0
  50. package/src/window-splitter/styles.ts +2 -2
@@ -34,7 +34,7 @@ const noop = ()=>{
34
34
  // elements to be removed from the DOM, a normal `<input type="file" />`
35
35
  // can't be used. Instead, create a temporary file input element and
36
36
  // click it to trigger the file upload behavior.
37
- let input = document.createElement("input");
37
+ const input = document.createElement("input");
38
38
  input.type = "file";
39
39
  if (accept) {
40
40
  input.accept = accept;
@@ -49,7 +49,6 @@ const noop = ()=>{
49
49
  // @ts-expect-error
50
50
  input.addEventListener("change", onChange);
51
51
  input.click();
52
- input = null;
53
52
  },
54
53
  children: children
55
54
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/menu/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ChangeEventHandler,\n type InputHTMLAttributes,\n type ReactElement,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n extends\n Omit<MenuItemProps, \"onChange\">,\n Pick<\n InputHTMLAttributes<HTMLInputElement>,\n \"accept\" | \"capture\" | \"multiple\"\n > {\n /**\n * A change event handler that should do something with the selected files.\n * Usually the `onChange` returned by `useFileUpload` or:\n *\n * ```ts\n * onChange={(event) => {\n * const { files } = event.currentTarget;\n * // do something with files\n * }}\n * ```\n *\n * This is actually a native `Event` and not a `SyntheticEvent` because the\n * file input is created through `document.createElement` instead of `React`.\n * You can still access the files through `event.currentTarget.files` like\n * normal.\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n\n /**\n * Set this to `true` if the `Menu` should not close when the file input's\n * menu item is clicked.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @see {@link https://react-md.dev/components/menu#menuitemfileinput-example | DropdownMenu Demos}\n * @since 5.0.0\n * @since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport function MenuItemFileInput(props: MenuItemFileInputProps): ReactElement {\n const {\n ref,\n id: propId,\n onClick = noop,\n onChange,\n accept,\n capture,\n multiple,\n children,\n leftAddon: propLeftAddon,\n preventMenuHideOnClick = false,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"menu-item\");\n const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n return (\n <MenuItem\n {...remaining}\n id={id}\n ref={ref}\n leftAddon={leftAddon}\n onClick={(event) => {\n onClick(event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n\n // Since the menu closes when the menu item is clicked causing the\n // elements to be removed from the DOM, a normal `<input type=\"file\" />`\n // can't be used. Instead, create a temporary file input element and\n // click it to trigger the file upload behavior.\n let input: HTMLInputElement | null = document.createElement(\"input\");\n input.type = \"file\";\n if (accept) {\n input.accept = accept;\n }\n if (multiple) {\n input.multiple = multiple;\n }\n if (capture) {\n input.capture = capture === true ? \"\" : capture;\n }\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n input.addEventListener(\"change\", onChange);\n input.click();\n input = null;\n }}\n >\n {children}\n </MenuItem>\n );\n}\n"],"names":["getIcon","useEnsuredId","MenuItem","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","capture","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","addEventListener","click"],"mappings":"AAAA;;AAQA,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,QAAQ,QAA4B,gBAAgB;AAE7D,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;;;CAUC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGb;IAEJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAMO,YAAYf,QAAQ,UAAUgB;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbX,IAAIA;QACJD,KAAKA;QACLS,WAAWA;QACXN,SAAS,CAACU;YACRV,QAAQU;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,kEAAkE;YAClE,wEAAwE;YACxE,oEAAoE;YACpE,gDAAgD;YAChD,IAAIC,QAAiCC,SAASC,aAAa,CAAC;YAC5DF,MAAMG,IAAI,GAAG;YACb,IAAIb,QAAQ;gBACVU,MAAMV,MAAM,GAAGA;YACjB;YACA,IAAIE,UAAU;gBACZQ,MAAMR,QAAQ,GAAGA;YACnB;YACA,IAAID,SAAS;gBACXS,MAAMT,OAAO,GAAGA,YAAY,OAAO,KAAKA;YAC1C;YAEA,6DAA6D;YAC7D,mBAAmB;YACnBS,MAAMI,gBAAgB,CAAC,UAAUf;YACjCW,MAAMK,KAAK;YACXL,QAAQ;QACV;kBAECP;;AAGP"}
1
+ {"version":3,"sources":["../../src/menu/MenuItemFileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type ChangeEventHandler,\n type InputHTMLAttributes,\n type ReactElement,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { MenuItem, type MenuItemProps } from \"./MenuItem.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0 Removed most of the shared `FileInputProps` from this\n * implementation.\n */\nexport interface MenuItemFileInputProps\n extends\n Omit<MenuItemProps, \"onChange\">,\n Pick<\n InputHTMLAttributes<HTMLInputElement>,\n \"accept\" | \"capture\" | \"multiple\"\n > {\n /**\n * A change event handler that should do something with the selected files.\n * Usually the `onChange` returned by `useFileUpload` or:\n *\n * ```ts\n * onChange={(event) => {\n * const { files } = event.currentTarget;\n * // do something with files\n * }}\n * ```\n *\n * This is actually a native `Event` and not a `SyntheticEvent` because the\n * file input is created through `document.createElement` instead of `React`.\n * You can still access the files through `event.currentTarget.files` like\n * normal.\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n\n /**\n * Set this to `true` if the `Menu` should not close when the file input's\n * menu item is clicked.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * A wrapper for the `<input type=\"file\">` element that works within menus.\n *\n * @see {@link https://react-md.dev/components/menu#menuitemfileinput-example | DropdownMenu Demos}\n * @since 5.0.0\n * @since 6.0.0 No longer creates an invisible file input element within the\n * menu item. This allows the menu to be closed immediately when this menu item\n * is clicked.\n */\nexport function MenuItemFileInput(props: MenuItemFileInputProps): ReactElement {\n const {\n ref,\n id: propId,\n onClick = noop,\n onChange,\n accept,\n capture,\n multiple,\n children,\n leftAddon: propLeftAddon,\n preventMenuHideOnClick = false,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"menu-item\");\n const leftAddon = getIcon(\"upload\", propLeftAddon);\n\n return (\n <MenuItem\n {...remaining}\n id={id}\n ref={ref}\n leftAddon={leftAddon}\n onClick={(event) => {\n onClick(event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n\n // Since the menu closes when the menu item is clicked causing the\n // elements to be removed from the DOM, a normal `<input type=\"file\" />`\n // can't be used. Instead, create a temporary file input element and\n // click it to trigger the file upload behavior.\n const input = document.createElement(\"input\");\n input.type = \"file\";\n if (accept) {\n input.accept = accept;\n }\n if (multiple) {\n input.multiple = multiple;\n }\n if (capture) {\n input.capture = capture === true ? \"\" : capture;\n }\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n input.addEventListener(\"change\", onChange);\n input.click();\n }}\n >\n {children}\n </MenuItem>\n );\n}\n"],"names":["getIcon","useEnsuredId","MenuItem","noop","MenuItemFileInput","props","ref","id","propId","onClick","onChange","accept","capture","multiple","children","leftAddon","propLeftAddon","preventMenuHideOnClick","remaining","event","stopPropagation","input","document","createElement","type","addEventListener","click"],"mappings":"AAAA;;AAQA,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,QAAQ,QAA4B,gBAAgB;AAE7D,MAAMC,OAAO;AACX,aAAa;AACf;AAwCA;;;;;;;;;;CAUC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,yBAAyB,KAAK,EAC9B,GAAGC,WACJ,GAAGb;IAEJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAMO,YAAYf,QAAQ,UAAUgB;IAEpC,qBACE,KAACd;QACE,GAAGgB,SAAS;QACbX,IAAIA;QACJD,KAAKA;QACLS,WAAWA;QACXN,SAAS,CAACU;YACRV,QAAQU;YAER,IAAIF,wBAAwB;gBAC1BE,MAAMC,eAAe;YACvB;YAEA,kEAAkE;YAClE,wEAAwE;YACxE,oEAAoE;YACpE,gDAAgD;YAChD,MAAMC,QAAQC,SAASC,aAAa,CAAC;YACrCF,MAAMG,IAAI,GAAG;YACb,IAAIb,QAAQ;gBACVU,MAAMV,MAAM,GAAGA;YACjB;YACA,IAAIE,UAAU;gBACZQ,MAAMR,QAAQ,GAAGA;YACnB;YACA,IAAID,SAAS;gBACXS,MAAMT,OAAO,GAAGA,YAAY,OAAO,KAAKA;YAC1C;YAEA,6DAA6D;YAC7D,mBAAmB;YACnBS,MAAMI,gBAAgB,CAAC,UAAUf;YACjCW,MAAMK,KAAK;QACb;kBAECZ;;AAGP"}
@@ -24,7 +24,7 @@ const noop = ()=>{
24
24
  */ export function MenuItemInputToggle(props) {
25
25
  const { ref, id: propId, type, disabled = false, checked, onCheckedChange, preventMenuHideOnClick = false, onClick = noop, className, tabIndex = -1, children, size = "auto", icon: propIcon, iconAfter = false, iconProps, iconStyle, iconClassName, checkedIcon, indeterminate, indeterminateIcon, addon, addonType, addonPosition, addonForceWrap, disableAddonCenteredMedia, ballProps, ballStyle, ballClassName, trackProps, trackStyle, trackClassName, ...remaining } = props;
26
26
  const id = useEnsuredId(propId, "menu-item");
27
- let icon = propIcon;
27
+ let icon;
28
28
  if (type === "switch") {
29
29
  icon = /*#__PURE__*/ _jsx(SwitchTrack, {
30
30
  style: trackStyle,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\n\nimport {\n type ConfigurableInputToggleIconProps,\n type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n type ListItemAddonPosition,\n type ListItemAddonType,\n type ListItemChildrenTextProps,\n type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n menuItemInputToggle,\n menuItemInputToggleBall,\n menuItemInputToggleIcon,\n menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n checked: boolean,\n event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n extends\n HTMLAttributes<HTMLLIElement>,\n ConfigurableInputToggleIconProps,\n ListItemChildrenTextProps {\n ref?: Ref<HTMLLIElement>;\n checked: boolean;\n onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n /**\n * @defaultValue `\"menu-item-\" + useId()`\n */\n id?: string;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /**\n * Set this to `true` if the `Menu` should not close when the input toggle is\n * clicked. This can be useful when interacting with a checkbox group within a\n * menu or allowing the user to select multiple options before closing the\n * menu.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n\n /**\n * This is set to `\"auto\"` by default so the icon shrinks back down to the\n * default icon size instead of relative to the current font size. You\n * probably don't want to change this since it'll also modify the height of\n * the menu item\n *\n * @defaultValue `\"auto\"`\n */\n size?: InputToggleSize;\n\n /** @defaultValue `\"auto\"` */\n height?: ListItemHeight;\n\n /** @defaultValue `false` */\n iconAfter?: boolean;\n\n addon?: ReactNode;\n addonType?: ListItemAddonType;\n addonPosition?: ListItemAddonPosition;\n\n /** @defaultValue `false` */\n addonForceWrap?: boolean;\n\n /** @defaultValue `false` */\n disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n extends BaseMenuItemInputToggleProps, IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n trackStyle?: CSSProperties;\n trackClassName?: string;\n ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n ballStyle?: CSSProperties;\n ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n | (MenuItemCheckboxProps & { type: \"checkbox\" })\n | (MenuItemRadioProps & { type: \"radio\" })\n | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport function MenuItemInputToggle(\n props: MenuItemInputToggleProps\n): ReactElement {\n const {\n ref,\n id: propId,\n type,\n disabled = false,\n checked,\n onCheckedChange,\n preventMenuHideOnClick = false,\n onClick = noop,\n className,\n tabIndex = -1,\n children,\n size = \"auto\",\n icon: propIcon,\n iconAfter = false,\n iconProps,\n iconStyle,\n iconClassName,\n checkedIcon,\n indeterminate,\n indeterminateIcon,\n addon,\n addonType,\n addonPosition,\n addonForceWrap,\n disableAddonCenteredMedia,\n ballProps,\n ballStyle,\n ballClassName,\n trackProps,\n trackStyle,\n trackClassName,\n ...remaining\n } = props as MenuItemSwitchProps &\n MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n const id = useEnsuredId(propId, \"menu-item\");\n\n let icon = propIcon;\n if (type === \"switch\") {\n icon = (\n <SwitchTrack\n style={trackStyle}\n {...trackProps}\n className={cnb(\n menuItemInputToggleTrack(),\n trackClassName,\n trackProps?.className\n )}\n active={checked}\n ballProps={ballProps}\n ballStyle={ballStyle}\n ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n />\n );\n } else {\n icon = (\n <InputToggleIcon\n style={iconStyle}\n disableEm\n {...iconProps}\n className={cnb(\n menuItemInputToggleIcon(),\n iconClassName,\n iconProps?.className\n )}\n size={size}\n type={type}\n checked={checked}\n disabled={disabled}\n icon={propIcon}\n checkedIcon={checkedIcon}\n indeterminate={indeterminate}\n indeterminateIcon={indeterminateIcon}\n />\n );\n }\n\n let leftAddon: ReactNode;\n let leftAddonType: ListItemAddonType | undefined;\n let leftAddonPosition: ListItemAddonPosition | undefined;\n let leftAddonForceWrap: boolean | undefined;\n let disableLeftAddonCenteredMedia: boolean | undefined;\n let rightAddon: ReactNode;\n let rightAddonType: ListItemAddonType | undefined;\n let rightAddonPosition: ListItemAddonPosition | undefined;\n let rightAddonForceWrap: boolean | undefined;\n let disableRightAddonCenteredMedia: boolean | undefined;\n if (iconAfter) {\n leftAddon = addon;\n leftAddonType = addonType;\n leftAddonPosition = addonPosition;\n leftAddonForceWrap = addonForceWrap;\n disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n rightAddon = icon;\n } else {\n leftAddon = icon;\n rightAddon = addon;\n rightAddonType = addonType;\n rightAddonPosition = addonPosition;\n rightAddonForceWrap = addonForceWrap;\n disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n }\n\n return (\n <ListItem\n {...remaining}\n // I'm not actually sure if this is correct\n aria-checked={indeterminate && checked ? \"mixed\" : checked}\n id={id}\n role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n onClick={(event) => {\n onClick(event);\n onCheckedChange(!checked, event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n }}\n ref={ref}\n className={menuItemInputToggle({ type, className })}\n disabled={disabled}\n tabIndex={tabIndex}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonForceWrap={leftAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonForceWrap={rightAddonForceWrap}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItem>\n );\n}\n"],"names":["cnb","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAchC,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,mBAAmB,EACnBC,uBAAuB,EACvBC,uBAAuB,EACvBC,wBAAwB,QACnB,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AA6FA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,oBACdC,KAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,IAAI,EACJC,WAAW,KAAK,EAChBC,OAAO,EACPC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,UAAUX,IAAI,EACdY,SAAS,EACTC,WAAW,CAAC,CAAC,EACbC,QAAQ,EACRC,OAAO,MAAM,EACbC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,yBAAyB,EACzBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,cAAc,EACd,GAAGC,WACJ,GAAGlC;IAEJ,MAAME,KAAKT,aAAaU,QAAQ;IAEhC,IAAIW,OAAOC;IACX,IAAIX,SAAS,UAAU;QACrBU,qBACE,KAACvB;YACC4C,OAAOH;YACN,GAAGD,UAAU;YACdrB,WAAWrB,IACTQ,4BACAoC,gBACAF,YAAYrB;YAEd0B,QAAQ9B;YACRsB,WAAWA;YACXC,WAAWA;YACXC,eAAezC,IAAIM,2BAA2BmC;;IAGpD,OAAO;QACLhB,qBACE,KAACxB;YACC6C,OAAOjB;YACPmB,SAAS;YACR,GAAGpB,SAAS;YACbP,WAAWrB,IACTO,2BACAuB,eACAF,WAAWP;YAEbG,MAAMA;YACNT,MAAMA;YACNE,SAASA;YACTD,UAAUA;YACVS,MAAMC;YACNK,aAAaA;YACbC,eAAeA;YACfC,mBAAmBA;;IAGzB;IAEA,IAAIgB;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAI/B,WAAW;QACbsB,YAAYf;QACZgB,gBAAgBf;QAChBgB,oBAAoBf;QACpBgB,qBAAqBf;QACrBgB,gCAAgCf;QAChCgB,aAAa7B;IACf,OAAO;QACLwB,YAAYxB;QACZ6B,aAAapB;QACbqB,iBAAiBpB;QACjBqB,qBAAqBpB;QACrBqB,sBAAsBpB;QACtBqB,iCAAiCpB;IACnC;IAEA,qBACE,KAACnC;QACE,GAAG0C,SAAS;QACb,2CAA2C;QAC3Cc,gBAAc3B,iBAAiBf,UAAU,UAAUA;QACnDJ,IAAIA;QACJ+C,MAAM7C,SAAS,UAAU,kBAAkB;QAC3CK,SAAS,CAACyC;YACRzC,QAAQyC;YACR3C,gBAAgB,CAACD,SAAS4C;YAE1B,IAAI1C,wBAAwB;gBAC1B0C,MAAMC,eAAe;YACvB;QACF;QACAlD,KAAKA;QACLS,WAAWhB,oBAAoB;YAAEU;YAAMM;QAAU;QACjDL,UAAUA;QACVM,UAAUA;QACV2B,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,+BAA+BA;QAC/BC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,gCAAgCA;kBAE/BnC;;AAGP"}
1
+ {"version":3,"sources":["../../src/menu/MenuItemInputToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\n\nimport {\n type ConfigurableInputToggleIconProps,\n type IndeterminateCheckboxProps,\n} from \"../form/InputToggle.js\";\nimport { InputToggleIcon } from \"../form/InputToggleIcon.js\";\nimport { SwitchTrack } from \"../form/SwitchTrack.js\";\nimport { type InputToggleSize } from \"../form/inputToggleStyles.js\";\nimport { ListItem } from \"../list/ListItem.js\";\nimport {\n type ListItemAddonPosition,\n type ListItemAddonType,\n type ListItemChildrenTextProps,\n type ListItemHeight,\n} from \"../list/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n menuItemInputToggle,\n menuItemInputToggleBall,\n menuItemInputToggleIcon,\n menuItemInputToggleTrack,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type MenuItemInputToggleCheckedCallback = (\n checked: boolean,\n event: MouseEvent<HTMLLIElement>\n) => void;\n\n/** @since 2.8.0 */\nexport interface BaseMenuItemInputToggleProps\n extends\n HTMLAttributes<HTMLLIElement>,\n ConfigurableInputToggleIconProps,\n ListItemChildrenTextProps {\n ref?: Ref<HTMLLIElement>;\n checked: boolean;\n onCheckedChange: MenuItemInputToggleCheckedCallback;\n\n /**\n * @defaultValue `\"menu-item-\" + useId()`\n */\n id?: string;\n\n /** @defaultValue `false` */\n disabled?: boolean;\n\n /**\n * Set this to `true` if the `Menu` should not close when the input toggle is\n * clicked. This can be useful when interacting with a checkbox group within a\n * menu or allowing the user to select multiple options before closing the\n * menu.\n *\n * @defaultValue `false`\n */\n preventMenuHideOnClick?: boolean;\n\n /**\n * This is set to `\"auto\"` by default so the icon shrinks back down to the\n * default icon size instead of relative to the current font size. You\n * probably don't want to change this since it'll also modify the height of\n * the menu item\n *\n * @defaultValue `\"auto\"`\n */\n size?: InputToggleSize;\n\n /** @defaultValue `\"auto\"` */\n height?: ListItemHeight;\n\n /** @defaultValue `false` */\n iconAfter?: boolean;\n\n addon?: ReactNode;\n addonType?: ListItemAddonType;\n addonPosition?: ListItemAddonPosition;\n\n /** @defaultValue `false` */\n addonForceWrap?: boolean;\n\n /** @defaultValue `false` */\n disableAddonCenteredMedia?: boolean;\n}\n\nexport interface MenuItemCheckboxProps\n extends BaseMenuItemInputToggleProps, IndeterminateCheckboxProps {}\n\nexport type MenuItemRadioProps = BaseMenuItemInputToggleProps;\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Added additional props for styling the track and ball.\n */\nexport interface MenuItemSwitchProps extends BaseMenuItemInputToggleProps {\n trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;\n trackStyle?: CSSProperties;\n trackClassName?: string;\n ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n ballStyle?: CSSProperties;\n ballClassName?: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Updated to be a union of the different props to enforce the\n * correct props based on `type`\n */\nexport type MenuItemInputToggleProps =\n | (MenuItemCheckboxProps & { type: \"checkbox\" })\n | (MenuItemRadioProps & { type: \"radio\" })\n | (MenuItemSwitchProps & { type: \"switch\" });\n\n/**\n * **Client Component**\n *\n * This is a low-level component that should probably not be used externally and\n * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should\n * be used instead.\n *\n * @see {@link https://react-md.dev/components/menu | DropdownMenu Demos}\n * @see {@link MenuItemCheckbox} for checkbox examples\n * @see {@link MenuItemRadio} for radio examples\n * @see {@link MenuItemSwitch} for switch examples\n * @since 2.8.0\n */\nexport function MenuItemInputToggle(\n props: MenuItemInputToggleProps\n): ReactElement {\n const {\n ref,\n id: propId,\n type,\n disabled = false,\n checked,\n onCheckedChange,\n preventMenuHideOnClick = false,\n onClick = noop,\n className,\n tabIndex = -1,\n children,\n size = \"auto\",\n icon: propIcon,\n iconAfter = false,\n iconProps,\n iconStyle,\n iconClassName,\n checkedIcon,\n indeterminate,\n indeterminateIcon,\n addon,\n addonType,\n addonPosition,\n addonForceWrap,\n disableAddonCenteredMedia,\n ballProps,\n ballStyle,\n ballClassName,\n trackProps,\n trackStyle,\n trackClassName,\n ...remaining\n } = props as MenuItemSwitchProps &\n MenuItemCheckboxProps & { type: \"checkbox\" | \"radio\" | \"switch\" };\n const id = useEnsuredId(propId, \"menu-item\");\n\n let icon: ReactElement;\n if (type === \"switch\") {\n icon = (\n <SwitchTrack\n style={trackStyle}\n {...trackProps}\n className={cnb(\n menuItemInputToggleTrack(),\n trackClassName,\n trackProps?.className\n )}\n active={checked}\n ballProps={ballProps}\n ballStyle={ballStyle}\n ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}\n />\n );\n } else {\n icon = (\n <InputToggleIcon\n style={iconStyle}\n disableEm\n {...iconProps}\n className={cnb(\n menuItemInputToggleIcon(),\n iconClassName,\n iconProps?.className\n )}\n size={size}\n type={type}\n checked={checked}\n disabled={disabled}\n icon={propIcon}\n checkedIcon={checkedIcon}\n indeterminate={indeterminate}\n indeterminateIcon={indeterminateIcon}\n />\n );\n }\n\n let leftAddon: ReactNode;\n let leftAddonType: ListItemAddonType | undefined;\n let leftAddonPosition: ListItemAddonPosition | undefined;\n let leftAddonForceWrap: boolean | undefined;\n let disableLeftAddonCenteredMedia: boolean | undefined;\n let rightAddon: ReactNode;\n let rightAddonType: ListItemAddonType | undefined;\n let rightAddonPosition: ListItemAddonPosition | undefined;\n let rightAddonForceWrap: boolean | undefined;\n let disableRightAddonCenteredMedia: boolean | undefined;\n if (iconAfter) {\n leftAddon = addon;\n leftAddonType = addonType;\n leftAddonPosition = addonPosition;\n leftAddonForceWrap = addonForceWrap;\n disableLeftAddonCenteredMedia = disableAddonCenteredMedia;\n rightAddon = icon;\n } else {\n leftAddon = icon;\n rightAddon = addon;\n rightAddonType = addonType;\n rightAddonPosition = addonPosition;\n rightAddonForceWrap = addonForceWrap;\n disableRightAddonCenteredMedia = disableAddonCenteredMedia;\n }\n\n return (\n <ListItem\n {...remaining}\n // I'm not actually sure if this is correct\n aria-checked={indeterminate && checked ? \"mixed\" : checked}\n id={id}\n role={type === \"radio\" ? \"menuitemradio\" : \"menuitemcheckbox\"}\n onClick={(event) => {\n onClick(event);\n onCheckedChange(!checked, event);\n\n if (preventMenuHideOnClick) {\n event.stopPropagation();\n }\n }}\n ref={ref}\n className={menuItemInputToggle({ type, className })}\n disabled={disabled}\n tabIndex={tabIndex}\n leftAddon={leftAddon}\n leftAddonType={leftAddonType}\n leftAddonPosition={leftAddonPosition}\n leftAddonForceWrap={leftAddonForceWrap}\n disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n rightAddon={rightAddon}\n rightAddonType={rightAddonType}\n rightAddonPosition={rightAddonPosition}\n rightAddonForceWrap={rightAddonForceWrap}\n disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n >\n {children}\n </ListItem>\n );\n}\n"],"names":["cnb","InputToggleIcon","SwitchTrack","ListItem","useEnsuredId","menuItemInputToggle","menuItemInputToggleBall","menuItemInputToggleIcon","menuItemInputToggleTrack","noop","MenuItemInputToggle","props","ref","id","propId","type","disabled","checked","onCheckedChange","preventMenuHideOnClick","onClick","className","tabIndex","children","size","icon","propIcon","iconAfter","iconProps","iconStyle","iconClassName","checkedIcon","indeterminate","indeterminateIcon","addon","addonType","addonPosition","addonForceWrap","disableAddonCenteredMedia","ballProps","ballStyle","ballClassName","trackProps","trackStyle","trackClassName","remaining","style","active","disableEm","leftAddon","leftAddonType","leftAddonPosition","leftAddonForceWrap","disableLeftAddonCenteredMedia","rightAddon","rightAddonType","rightAddonPosition","rightAddonForceWrap","disableRightAddonCenteredMedia","aria-checked","role","event","stopPropagation"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAchC,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,mBAAmB,EACnBC,uBAAuB,EACvBC,uBAAuB,EACvBC,wBAAwB,QACnB,cAAc;AAErB,MAAMC,OAAO;AACX,aAAa;AACf;AA6FA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,oBACdC,KAA+B;IAE/B,MAAM,EACJC,GAAG,EACHC,IAAIC,MAAM,EACVC,IAAI,EACJC,WAAW,KAAK,EAChBC,OAAO,EACPC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,UAAUX,IAAI,EACdY,SAAS,EACTC,WAAW,CAAC,CAAC,EACbC,QAAQ,EACRC,OAAO,MAAM,EACbC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,yBAAyB,EACzBC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,cAAc,EACd,GAAGC,WACJ,GAAGlC;IAEJ,MAAME,KAAKT,aAAaU,QAAQ;IAEhC,IAAIW;IACJ,IAAIV,SAAS,UAAU;QACrBU,qBACE,KAACvB;YACC4C,OAAOH;YACN,GAAGD,UAAU;YACdrB,WAAWrB,IACTQ,4BACAoC,gBACAF,YAAYrB;YAEd0B,QAAQ9B;YACRsB,WAAWA;YACXC,WAAWA;YACXC,eAAezC,IAAIM,2BAA2BmC;;IAGpD,OAAO;QACLhB,qBACE,KAACxB;YACC6C,OAAOjB;YACPmB,SAAS;YACR,GAAGpB,SAAS;YACbP,WAAWrB,IACTO,2BACAuB,eACAF,WAAWP;YAEbG,MAAMA;YACNT,MAAMA;YACNE,SAASA;YACTD,UAAUA;YACVS,MAAMC;YACNK,aAAaA;YACbC,eAAeA;YACfC,mBAAmBA;;IAGzB;IAEA,IAAIgB;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAI/B,WAAW;QACbsB,YAAYf;QACZgB,gBAAgBf;QAChBgB,oBAAoBf;QACpBgB,qBAAqBf;QACrBgB,gCAAgCf;QAChCgB,aAAa7B;IACf,OAAO;QACLwB,YAAYxB;QACZ6B,aAAapB;QACbqB,iBAAiBpB;QACjBqB,qBAAqBpB;QACrBqB,sBAAsBpB;QACtBqB,iCAAiCpB;IACnC;IAEA,qBACE,KAACnC;QACE,GAAG0C,SAAS;QACb,2CAA2C;QAC3Cc,gBAAc3B,iBAAiBf,UAAU,UAAUA;QACnDJ,IAAIA;QACJ+C,MAAM7C,SAAS,UAAU,kBAAkB;QAC3CK,SAAS,CAACyC;YACRzC,QAAQyC;YACR3C,gBAAgB,CAACD,SAAS4C;YAE1B,IAAI1C,wBAAwB;gBAC1B0C,MAAMC,eAAe;YACvB;QACF;QACAlD,KAAKA;QACLS,WAAWhB,oBAAoB;YAAEU;YAAMM;QAAU;QACjDL,UAAUA;QACVM,UAAUA;QACV2B,WAAWA;QACXC,eAAeA;QACfC,mBAAmBA;QACnBC,oBAAoBA;QACpBC,+BAA+BA;QAC/BC,YAAYA;QACZC,gBAAgBA;QAChBC,oBAAoBA;QACpBC,qBAAqBA;QACrBC,gCAAgCA;kBAE/BnC;;AAGP"}
@@ -126,8 +126,6 @@
126
126
  case "inner-right":
127
127
  x = "100%";
128
128
  break;
129
- default:
130
- x = "0";
131
129
  }
132
130
  let y = "0";
133
131
  if (typeof yPosition === "number") {
@@ -145,8 +143,6 @@
145
143
  case "top":
146
144
  y = "0";
147
145
  break;
148
- default:
149
- y = "0";
150
146
  }
151
147
  }
152
148
  return `${x} ${y}`;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n default:\n x = \"0\";\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n default:\n y = \"0\";\n }\n }\n\n return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n el: HTMLElement | null\n): HTMLElement | null {\n if (!el) {\n return null;\n }\n\n if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.dataset.sizingSelector;\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement || document.body;\n parent.append(cloned);\n\n const rect = cloned.getBoundingClientRect();\n cloned.remove();\n\n return rect;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","dataset","sizingSelector","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","append","rect","getBoundingClientRect","remove","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n }\n }\n\n return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n el: HTMLElement | null\n): HTMLElement | null {\n if (!el) {\n return null;\n }\n\n if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.dataset.sizingSelector;\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement || document.body;\n parent.append(cloned);\n\n const rect = cloned.getBoundingClientRect();\n cloned.remove();\n\n return rect;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","dataset","sizingSelector","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","append","rect","getBoundingClientRect","remove","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}
@@ -23,6 +23,14 @@
23
23
  /// @type String
24
24
  $color-scheme: light !default;
25
25
 
26
+ /// Set this to true to prevent setting the `color-scheme` property on the
27
+ /// `:root` element or when using the
28
+ /// `theme-use-light-theme`/`theme-use-dark-theme` mixins.
29
+ ///
30
+ /// @since 7.1.0
31
+ /// @type Boolean
32
+ $disable-color-scheme: false !default;
33
+
26
34
  /// The dark elevation feature is generally recommended to keep enabled since it
27
35
  /// helps with visibility when your app is using the dark color scheme either
28
36
  /// through `$color-scheme: dark` or `using the `use-dark-theme mixin. When this
@@ -394,6 +402,7 @@ $_validated_color_scheme: utils.validate(
394
402
 
395
403
  /// The available configurable css variables and mostly used internally for the
396
404
  /// `get-var`, `set-var`, and `use-var` utils.
405
+ /// @since 7.1.0
397
406
  /// @type List
398
407
  $theme-variables: (
399
408
  background-color,
@@ -416,7 +425,8 @@ $theme-variables: (
416
425
  outline-width,
417
426
  outline-color,
418
427
  outline-grey-color,
419
- inverse-color
428
+ inverse-color,
429
+ color-scheme
420
430
  );
421
431
 
422
432
  /// Checks if a theme variable is disabled and should not be able to be
@@ -605,7 +615,15 @@ $theme-variables: (
605
615
  }
606
616
 
607
617
  /// Creates all the css variables for the light theme respecting feature flags
608
- @mixin use-light-theme-colors {
618
+ ///
619
+ /// @since 7.1.0 Supports the `$disable-color-scheme` param
620
+ /// @param {Boolean} $disable-color-scheme-var [false] - Set to `true` to
621
+ /// disable setting the color-scheme var
622
+ @mixin use-light-theme-colors($disable-color-scheme-var: false) {
623
+ @if not $disable-color-scheme and not $disable-color-scheme-var {
624
+ @include theme-set-var(color-scheme, light);
625
+ }
626
+
609
627
  @include theme-set-var(inverse-color, $light-theme-inverse-color);
610
628
  @include theme-set-var(background-color, $light-theme-background-color);
611
629
  @if $disable-dark-elevation and not $disable-surface-color {
@@ -636,7 +654,15 @@ $theme-variables: (
636
654
  }
637
655
 
638
656
  /// Creates all the css variables for the dark theme respecting feature flags
639
- @mixin use-dark-theme-colors {
657
+ ///
658
+ /// @since 7.1.0 Supports the `$disable-color-scheme` param
659
+ /// @param {Boolean} $disable-color-scheme-var [false] - Set to `true` to
660
+ /// disable setting the color-scheme var
661
+ @mixin use-dark-theme-colors($disable-color-scheme-var: false) {
662
+ @if not $disable-color-scheme and not $disable-color-scheme-var {
663
+ @include theme-set-var(color-scheme, dark);
664
+ }
665
+
640
666
  @include theme-set-var(inverse-color, $dark-theme-inverse-color);
641
667
  @include theme-set-var(background-color, $dark-theme-background-color);
642
668
  @if $disable-dark-elevation and not $disable-surface-color {
@@ -853,3 +879,16 @@ $theme-variables: (
853
879
  }
854
880
  }
855
881
  }
882
+
883
+ @mixin default-color-scheme {
884
+ @if not $disable-color-scheme {
885
+ // prettier-ignore
886
+ @include theme-use-var(
887
+ color-scheme,
888
+ $fallback: if(
889
+ sass($color-scheme == system): light dark;
890
+ else: $color-scheme
891
+ )
892
+ );
893
+ }
894
+ }
@@ -1,6 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
2
  declare module "react" {
3
- interface CSSProperites {
3
+ interface CSSProperties {
4
4
  "--rmd-max-width"?: string | number;
5
5
  "--rmd-max-width-gap"?: string | number;
6
6
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n interface CSSProperites {\n \"--rmd-max-width\"?: string | number;\n \"--rmd-max-width-gap\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {\n element: ReactNode;\n transitionIn: boolean;\n\n disabled?: boolean;\n disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n options: MaxWidthTransitionOptions\n): ReactNode {\n const { element, disabled, disableTransition, transitionIn, className } =\n options;\n\n if (disabled || !isValidElement<{ className?: string }>(element)) {\n return element;\n }\n\n const child = Children.only(element);\n return cloneElement(element, {\n className: maxWidthTransition({\n className: cnb(child.props.className, className),\n disabled: disableTransition,\n transitionIn,\n }),\n });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA4B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}
1
+ {"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-max-width\"?: string | number;\n \"--rmd-max-width-gap\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {\n element: ReactNode;\n transitionIn: boolean;\n\n disabled?: boolean;\n disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n options: MaxWidthTransitionOptions\n): ReactNode {\n const { element, disabled, disableTransition, transitionIn, className } =\n options;\n\n if (disabled || !isValidElement<{ className?: string }>(element)) {\n return element;\n }\n\n const child = Children.only(element);\n return cloneElement(element, {\n className: maxWidthTransition({\n className: cnb(child.props.className, className),\n disabled: disableTransition,\n transitionIn,\n }),\n });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA4B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}
package/dist/types.d.ts CHANGED
@@ -190,6 +190,11 @@ export type OverridableStringUnion<Defaults extends string, Overrides extends Pa
190
190
  }[keyof Overrides]> | {
191
191
  [K in keyof Overrides]: Overrides[K] extends false ? never : K;
192
192
  }[keyof Overrides];
193
+ /**
194
+ * @see https://github.com/microsoft/TypeScript/issues/29729#issuecomment-471566609
195
+ * @since 7.1.0
196
+ */
197
+ export type LiteralStringUnion<T extends U, U = string> = T | (U & {});
193
198
  /**
194
199
  * @since 6.2.0
195
200
  */
package/dist/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n type Dispatch,\n type HTMLAttributes,\n type JSX,\n type ReactElement,\n type Ref,\n type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n Props extends object,\n Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n ? E extends HTMLElement\n ? E\n : never\n : never,\n> = Props & {\n /**\n * An optional ref that can be applied.\n */\n ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n T,\n Exclude<keyof T, Keys>\n> &\n {\n [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n }[Keys];\n\nexport interface LabelA11y {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n * return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * // ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n Props,\n keyof LabelA11y\n>;\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n * name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n | string\n | { label: string }\n | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * // visible: boolean;\n * // setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * // renderAsSheet: RenderMenuAsSheet;\n * // setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n [key in Name]: Value;\n} & {\n [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n * value: number;\n * setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * // thumb1Value: number;\n * // thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n height: number;\n width: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface Point {\n x: number;\n y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n min: number;\n max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n Defaults extends string,\n Overrides extends Partial<Record<string, boolean>>,\n> =\n | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n | {\n [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAkPA;;CAEC,GACD,WAAoE"}
1
+ {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n type Dispatch,\n type HTMLAttributes,\n type JSX,\n type ReactElement,\n type Ref,\n type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n Props extends object,\n Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n ? E extends HTMLElement\n ? E\n : never\n : never,\n> = Props & {\n /**\n * An optional ref that can be applied.\n */\n ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n T,\n Exclude<keyof T, Keys>\n> &\n {\n [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n }[Keys];\n\nexport interface LabelA11y {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n * return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * // ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n Props,\n keyof LabelA11y\n>;\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n * name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n | string\n | { label: string }\n | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * // visible: boolean;\n * // setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * // renderAsSheet: RenderMenuAsSheet;\n * // setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n [key in Name]: Value;\n} & {\n [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n * value: number;\n * setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * // thumb1Value: number;\n * // thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n height: number;\n width: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface Point {\n x: number;\n y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n min: number;\n max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n Defaults extends string,\n Overrides extends Partial<Record<string, boolean>>,\n> =\n | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n | {\n [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n }[keyof Overrides];\n\n/**\n * @see https://github.com/microsoft/TypeScript/issues/29729#issuecomment-471566609\n * @since 7.1.0\n */\nexport type LiteralStringUnion<T extends U, U = string> = T | (U & {});\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAwPA;;CAEC,GACD,WAAoE"}
@@ -6,8 +6,8 @@ declare module "react" {
6
6
  "--rmd-window-splitter-y"?: string | number;
7
7
  "--rmd-window-splitter-z"?: string | number;
8
8
  "--rmd-window-splitter-position"?: string | number;
9
- "--rmd-window-splitter-backgrond-color"?: string;
10
- "--rmd-window-splitter-inactive-backgrond-color"?: string;
9
+ "--rmd-window-splitter-background-color"?: string;
10
+ "--rmd-window-splitter-inactive-background-color"?: string;
11
11
  "--rmd-window-splitter-opacity"?: string | number;
12
12
  }
13
13
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-window-splitter-size\"?: string | number;\n \"--rmd-window-splitter-background-size\"?: string | number;\n \"--rmd-window-splitter-x\"?: string | number;\n \"--rmd-window-splitter-y\"?: string | number;\n \"--rmd-window-splitter-z\"?: string | number;\n \"--rmd-window-splitter-position\"?: string | number;\n \"--rmd-window-splitter-backgrond-color\"?: string;\n \"--rmd-window-splitter-inactive-backgrond-color\"?: string;\n \"--rmd-window-splitter-opacity\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` if the window splitter should use `position: absolute`\n * instead of `position: fixed`.\n *\n * @defaultValue `false`\n */\n disableFixed?: boolean;\n\n /**\n * Set to `true` to enable a background-color to the `WindowSplitter` even\n * while not being interacted with by the user.\n *\n * @since 6.4.0\n * @defaultValue `false`\n */\n inactiveBackground?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {\n dragging?: boolean;\n reversed?: boolean;\n vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n options: WindowSplitterClassNameOptions = {}\n): string {\n const {\n vertical = false,\n dragging,\n reversed,\n disableFixed,\n inactiveBackground,\n className,\n } = options;\n\n return cnb(\n styles({\n h: !vertical,\n hr: !vertical && reversed,\n v: vertical,\n vr: vertical && reversed,\n a: disableFixed,\n dragging,\n \"no-inactive-bg\": !inactiveBackground,\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","inactiveBackground","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkDnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClBC,SAAS,EACV,GAAGN;IAEJ,OAAOJ,IACLE,OAAO;QACLS,GAAG,CAACN;QACJO,IAAI,CAACP,YAAYE;QACjBM,GAAGR;QACHS,IAAIT,YAAYE;QAChBQ,GAAGP;QACHF;QACA,kBAAkB,CAACG;IACrB,IACAC;AAEJ"}
1
+ {"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-window-splitter-size\"?: string | number;\n \"--rmd-window-splitter-background-size\"?: string | number;\n \"--rmd-window-splitter-x\"?: string | number;\n \"--rmd-window-splitter-y\"?: string | number;\n \"--rmd-window-splitter-z\"?: string | number;\n \"--rmd-window-splitter-position\"?: string | number;\n \"--rmd-window-splitter-background-color\"?: string;\n \"--rmd-window-splitter-inactive-background-color\"?: string;\n \"--rmd-window-splitter-opacity\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` if the window splitter should use `position: absolute`\n * instead of `position: fixed`.\n *\n * @defaultValue `false`\n */\n disableFixed?: boolean;\n\n /**\n * Set to `true` to enable a background-color to the `WindowSplitter` even\n * while not being interacted with by the user.\n *\n * @since 6.4.0\n * @defaultValue `false`\n */\n inactiveBackground?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {\n dragging?: boolean;\n reversed?: boolean;\n vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n options: WindowSplitterClassNameOptions = {}\n): string {\n const {\n vertical = false,\n dragging,\n reversed,\n disableFixed,\n inactiveBackground,\n className,\n } = options;\n\n return cnb(\n styles({\n h: !vertical,\n hr: !vertical && reversed,\n v: vertical,\n vr: vertical && reversed,\n a: disableFixed,\n dragging,\n \"no-inactive-bg\": !inactiveBackground,\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","inactiveBackground","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkDnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClBC,SAAS,EACV,GAAGN;IAEJ,OAAOJ,IACLE,OAAO;QACLS,GAAG,CAACN;QACJO,IAAI,CAACP,YAAYE;QACjBM,GAAGR;QACHS,IAAIT,YAAYE;QAChBQ,GAAGP;QACHF;QACA,kBAAkB,CAACG;IACrB,IACAC;AAEJ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-md/core",
3
- "version": "7.0.1",
3
+ "version": "7.0.3",
4
4
  "description": "The core components and functionality for react-md.",
5
5
  "type": "module",
6
6
  "sass": "./dist/_core.scss",
@@ -37,6 +37,7 @@
37
37
  "./form/sliderUtils": null,
38
38
  "./form/useResizingTextArea": null,
39
39
  "./form/useSliderDraggable": null,
40
+ "./icon/getMaterialSymbolOption": null,
40
41
  "./interaction/utils": null,
41
42
  "./menu/MenuWidgetKeyboardProvider": null,
42
43
  "./menu/utils": null,
@@ -52,7 +53,13 @@
52
53
  },
53
54
  "sideEffects": [
54
55
  "dist/**/*.scss",
55
- "dist/test-utils/polyfills"
56
+ "dist/form/formConfig.js",
57
+ "dist/icon/config.js",
58
+ "dist/icon/configureMaterialSymbols.js",
59
+ "dist/icon/materialConfig.js",
60
+ "dist/interaction/config.js",
61
+ "dist/media-queries/config.js",
62
+ "dist/test-utils/polyfills/**/*.js"
56
63
  ],
57
64
  "author": "Mikkel Laursen <mlaursen03@gmail.com>",
58
65
  "repository": {
@@ -75,43 +82,44 @@
75
82
  "license": "MIT",
76
83
  "dependencies": {
77
84
  "cnbuilder": "^3.1.0",
78
- "nanoid": "^5.1.6",
85
+ "nanoid": "^5.1.7",
79
86
  "remove-accents": "^0.5.0"
80
87
  },
81
88
  "devDependencies": {
82
- "@jest/globals": "^30.2.0",
83
- "@jest/types": "^30.2.0",
84
- "@microsoft/api-extractor": "^7.55.2",
85
- "@swc/cli": "^0.7.9",
86
- "@swc/core": "^1.15.8",
89
+ "@jest/globals": "^30.3.0",
90
+ "@jest/types": "^30.3.0",
91
+ "@microsoft/api-extractor": "^7.57.7",
92
+ "@mlaursen/cli": "^0.1.0",
93
+ "@swc/cli": "^0.8.0",
94
+ "@swc/core": "^1.15.18",
87
95
  "@testing-library/dom": "^10.4.1",
88
96
  "@testing-library/jest-dom": "^6.9.1",
89
- "@testing-library/react": "^16.3.1",
97
+ "@testing-library/react": "^16.3.2",
90
98
  "@testing-library/user-event": "^14.6.1",
91
99
  "@trivago/prettier-plugin-sort-imports": "^6.0.2",
92
- "@types/lodash": "^4.17.23",
93
- "@types/node": "^24.10.4",
94
- "@types/react": "^19.2.8",
100
+ "@types/lodash": "^4.17.24",
101
+ "@types/node": "^24.12.0",
102
+ "@types/react": "^19.2.14",
95
103
  "@types/react-dom": "^19.2.3",
96
- "@vitejs/plugin-react-swc": "^4.2.2",
97
- "@vitest/coverage-v8": "^4.0.16",
104
+ "@vitejs/plugin-react-swc": "^4.3.0",
105
+ "@vitest/coverage-v8": "^4.1.0",
98
106
  "chokidar": "^5.0.0",
99
- "eslint": "^9.39.2",
107
+ "concurrently": "^9.2.1",
108
+ "eslint": "^9.39.4",
100
109
  "filesize": "^11.0.13",
101
- "glob": "13.0.0",
102
- "jsdom": "^27.4.0",
103
- "lodash": "^4.17.21",
110
+ "glob": "13.0.6",
111
+ "jsdom": "^28.1.0",
112
+ "lodash": "^4.17.23",
104
113
  "lz-string": "^1.5.0",
105
- "npm-run-all2": "^8.0.2",
106
- "prettier": "^3.7.4",
107
- "react": "^19.2.3",
108
- "react-dom": "^19.2.3",
109
- "stylelint": "^16.26.1",
114
+ "prettier": "^3.8.1",
115
+ "react": "^19.2.4",
116
+ "react-dom": "^19.2.4",
117
+ "stylelint": "^17.5.0",
110
118
  "ts-morph": "^27.0.2",
111
119
  "ts-node": "^10.9.2",
112
120
  "tsx": "^4.21.0",
113
121
  "typescript": "^5.9.3",
114
- "vitest": "^4.0.16",
122
+ "vitest": "^4.1.0",
115
123
  "@react-md/eslint-config": "1.0.0",
116
124
  "@react-md/stylelint-config": "1.0.0"
117
125
  },
@@ -163,32 +171,33 @@
163
171
  "pnpm": "10.28.0"
164
172
  },
165
173
  "scripts": {
166
- "run-script": "tsx --tsconfig scripts/tsconfig.json",
167
- "export-map": "pnpm run run-script scripts/getExportMap.ts",
168
- "create-index-file": "pnpm run run-script scripts/createIndexFile.ts",
169
- "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
170
- "prepare-release": "npm-run-all clean-dist build",
171
- "build": "npm-run-all build-esm build-scss build-types",
172
- "build-esm": "swc -d ./dist --strip-leading-paths src",
173
- "build-esm-watch": "pnpm run build-esm --watch",
174
- "build-types": "tsc -P tsconfig.types.json",
175
- "build-types-watch": "pnpm run build-types --watch",
176
- "build-scss": "pnpm run run-script scripts/copySassFiles.ts",
177
- "build-scss-watch": "pnpm run build-scss --watch",
178
174
  "clean-dist": "rm -rf dist",
179
- "clean": "rm -rf .turbo dist node_modules",
180
- "typecheck": "tsc --noEmit",
181
- "typecheck-watch": "pnpm typecheck --watch",
175
+ "clean-cache": "rm -rf .turbo node_modules",
176
+ "clean": "concurrently 'pnpm clean-dist' 'pnpm clean-cache'",
182
177
  "check-format": "prettier --check .",
183
178
  "format": "prettier --write .",
184
179
  "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",
185
180
  "lint-styles": "stylelint \"src/**/*.{css,scss}\"",
186
- "lint": "npm-run-all lint-scripts lint-styles",
187
- "lint-fix": "npm-run-all \"lint-scripts --fix\" \"lint-styles --fix\"",
181
+ "lint": "concurrently 'pnpm lint-scripts' 'pnpm lint-styles'",
182
+ "lint-fix": "concurrently 'pnpm lint-scripts --fix' 'pnpm lint-styles --fix'",
183
+ "typecheck": "tsc --noEmit",
184
+ "typecheck-watch": "pnpm typecheck --watch",
188
185
  "test": "vitest",
189
186
  "test-run": "vitest run",
190
187
  "test-coverage": "vitest --coverage",
191
188
  "test-run-coverage": "pnpm test-run --coverage",
192
- "test-run-snapshot": "pnpm test-run -u"
189
+ "test-run-snapshot": "pnpm test-run -u",
190
+ "build-esm": "swc -d ./dist --strip-leading-paths src",
191
+ "build-esm-watch": "pnpm run build-esm --watch",
192
+ "build-types": "tsc -P tsconfig.types.json",
193
+ "build-types-watch": "pnpm run build-types --watch",
194
+ "build-scss": "mlaursen-cli copy-scss-files -r '_colors.scss' -r '_a11y.scss'",
195
+ "build-scss-watch": "pnpm build-scss --watch",
196
+ "build": "concurrently 'pnpm build-esm' 'pnpm build-scss' 'pnpm build-types'",
197
+ "run-script": "tsx --tsconfig scripts/tsconfig.json",
198
+ "export-map": "pnpm run run-script scripts/getExportMap.ts",
199
+ "create-index-file": "pnpm run run-script scripts/createIndexFile.ts",
200
+ "prepare-release": "pnpm clean-dist && pnpm build",
201
+ "dev": "concurrently 'pnpm build-esm-watch' 'pnpm build-scss-watch' 'pnpm build-types-watch'"
193
202
  }
194
203
  }
@@ -407,13 +407,12 @@ export function Select<Value extends string>(
407
407
  })}
408
408
  </SelectedOption>
409
409
  <input
410
- aria-hidden
410
+ inert
411
411
  id={inputId}
412
412
  ref={inputRefCallback}
413
413
  type="text"
414
414
  autoComplete={autoComplete}
415
415
  name={name}
416
- tabIndex={-1}
417
416
  disabled={disabled}
418
417
  required={required}
419
418
  placeholder=" "
package/src/form/utils.ts CHANGED
@@ -27,7 +27,7 @@ export function tryToSubmitRelatedForm<E extends HTMLElement>(
27
27
  formId: string | undefined
28
28
  ): void {
29
29
  const { currentTarget } = event;
30
- let form: HTMLElement | null = null;
30
+ let form: HTMLElement | null;
31
31
  if (formId) {
32
32
  form = document.getElementById(formId);
33
33
  } else {
@@ -0,0 +1,25 @@
1
+ /** @since 7.1.0 */
2
+ import { MaterialSymbol } from "./MaterialSymbol.js";
3
+ import { configureIcons } from "./config.js";
4
+
5
+ configureIcons({
6
+ back: <MaterialSymbol name="keyboard_arrow_left" />,
7
+ clear: <MaterialSymbol name="close_small" />,
8
+ close: <MaterialSymbol name="close" />,
9
+ checkbox: <MaterialSymbol name="check_box_outline_blank" />,
10
+ checkboxChecked: <MaterialSymbol name="check_box" />,
11
+ checkboxIndeterminate: <MaterialSymbol name="indeterminate_check_box" />,
12
+ dropdown: <MaterialSymbol name="arrow_drop_down" />,
13
+ error: <MaterialSymbol name="error" />,
14
+ expander: <MaterialSymbol name="keyboard_arrow_down" />,
15
+ forward: <MaterialSymbol name="keyboard_arrow_right" />,
16
+ menu: <MaterialSymbol name="menu" />,
17
+ notification: <MaterialSymbol name="notifications" />,
18
+ password: <MaterialSymbol name="visibility" />,
19
+ radio: <MaterialSymbol name="radio_button_unchecked" />,
20
+ radioChecked: <MaterialSymbol name="radio_button_checked" />,
21
+ remove: <MaterialSymbol name="cancel" />,
22
+ selected: <MaterialSymbol name="check" />,
23
+ sort: <MaterialSymbol name="arrow_upward" />,
24
+ upload: <MaterialSymbol name="upload" />,
25
+ });