@doist/reactist 25.0.0-beta → 25.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/reactist.cjs.development.js +120 -93
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/avatar/avatar.js.map +1 -1
- package/es/banner/banner.js.map +1 -1
- package/es/button/button.js +1 -1
- package/es/button/button.js.map +1 -1
- package/es/checkbox-field/checkbox-field.js.map +1 -1
- package/es/components/deprecated-dropdown/dropdown.js.map +1 -1
- package/es/components/deprecated-input/input.js +5 -1
- package/es/components/deprecated-input/input.js.map +1 -1
- package/es/heading/heading.js.map +1 -1
- package/es/loading/loading.js.map +1 -1
- package/es/menu/menu.js +56 -34
- package/es/menu/menu.js.map +1 -1
- package/es/modal/modal.js +16 -14
- package/es/modal/modal.js.map +1 -1
- package/es/password-field/password-field.js.map +1 -1
- package/es/prose/prose.js.map +1 -1
- package/es/select-field/select-field.js.map +1 -1
- package/es/switch-field/switch-field.js.map +1 -1
- package/es/tabs/tabs.js +30 -34
- package/es/tabs/tabs.js.map +1 -1
- package/es/text-area/text-area.js.map +1 -1
- package/es/text-field/text-field.js.map +1 -1
- package/es/tooltip/tooltip.js +13 -12
- package/es/tooltip/tooltip.js.map +1 -1
- package/es/utils/polymorphism.js +1 -1
- package/es/utils/polymorphism.js.map +1 -1
- package/lib/alert/alert.d.ts +1 -1
- package/lib/avatar/avatar.d.ts +4 -4
- package/lib/avatar/avatar.js.map +1 -1
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +2 -2
- package/lib/banner/banner.js.map +1 -1
- package/lib/base-field/base-field.d.ts +3 -3
- package/lib/button/button.d.ts +2 -2
- package/lib/button/button.js.map +1 -1
- package/lib/checkbox-field/checkbox-field.d.ts +29 -17
- package/lib/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/checkbox-field/checkbox-icon.d.ts +1 -1
- package/lib/components/color-picker/color-picker.d.ts +2 -2
- package/lib/components/deprecated-dropdown/dropdown.d.ts +5 -5
- package/lib/components/deprecated-dropdown/dropdown.js.map +1 -1
- package/lib/components/deprecated-input/input.d.ts +6 -6
- package/lib/components/deprecated-input/input.js +1 -1
- package/lib/components/deprecated-input/input.js.map +1 -1
- package/lib/components/deprecated-select/select.d.ts +2 -2
- package/lib/components/icons/CloseIcon.svg.d.ts +2 -2
- package/lib/components/icons/ThinQuestionMarkIcon.svg.d.ts +2 -2
- package/lib/components/icons/ThreeDotsIcon.svg.d.ts +2 -2
- package/lib/components/keyboard-shortcut/keyboard-shortcut.d.ts +1 -1
- package/lib/components/progress-bar/progress-bar.d.ts +2 -2
- package/lib/components/time/time.d.ts +1 -1
- package/lib/divider/divider.d.ts +2 -2
- package/lib/heading/heading.d.ts +4 -12
- package/lib/heading/heading.js.map +1 -1
- package/lib/icons/alert-icon.d.ts +2 -2
- package/lib/icons/close-icon.d.ts +2 -2
- package/lib/icons/password-hidden-icon.d.ts +2 -2
- package/lib/icons/password-visible-icon.d.ts +2 -2
- package/lib/loading/loading.d.ts +4 -5
- package/lib/loading/loading.js.map +1 -1
- package/lib/menu/menu.d.ts +20 -19
- package/lib/menu/menu.js +1 -1
- package/lib/menu/menu.js.map +1 -1
- package/lib/modal/modal-stories-components.d.ts +9 -9
- package/lib/modal/modal.d.ts +20 -28
- package/lib/modal/modal.js +1 -1
- package/lib/modal/modal.js.map +1 -1
- package/lib/notice/notice.d.ts +1 -1
- package/lib/password-field/password-field.d.ts +3 -8
- package/lib/password-field/password-field.js.map +1 -1
- package/lib/prose/prose.d.ts +4 -7
- package/lib/prose/prose.js.map +1 -1
- package/lib/select-field/select-field.d.ts +3 -7
- package/lib/select-field/select-field.js.map +1 -1
- package/lib/spinner/spinner.d.ts +2 -2
- package/lib/switch-field/switch-field.d.ts +12 -11
- package/lib/switch-field/switch-field.js.map +1 -1
- package/lib/tabs/tabs.d.ts +24 -16
- package/lib/tabs/tabs.js +1 -1
- package/lib/tabs/tabs.js.map +1 -1
- package/lib/text-area/text-area.d.ts +3 -8
- package/lib/text-area/text-area.js.map +1 -1
- package/lib/text-field/text-field.d.ts +5 -10
- package/lib/text-field/text-field.js.map +1 -1
- package/lib/toast/use-toasts.d.ts +1 -1
- package/lib/tooltip/tooltip.d.ts +4 -7
- package/lib/tooltip/tooltip.js +1 -1
- package/lib/tooltip/tooltip.js.map +1 -1
- package/lib/utils/polymorphism.d.ts +4 -2
- package/lib/utils/polymorphism.js.map +1 -1
- package/lib/utils/test-helpers.d.ts +2 -2
- package/package.json +3 -3
package/es/avatar/avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n '#fcc652',\n '#e9952c',\n '#e16b2d',\n '#d84b40',\n '#e8435a',\n '#e5198a',\n '#ad3889',\n '#86389c',\n '#a8a8a8',\n '#98be2f',\n '#5d9d50',\n '#5f9f85',\n '#5bbcb6',\n '#32a3bf',\n '#2bafeb',\n '#2d88c3',\n '#3863cc',\n '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n /** @deprecated Please use `exceptionallySetClassName` */\n className?: string\n
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst AVATAR_COLORS = [\n '#fcc652',\n '#e9952c',\n '#e16b2d',\n '#d84b40',\n '#e8435a',\n '#e5198a',\n '#ad3889',\n '#86389c',\n '#a8a8a8',\n '#98be2f',\n '#5d9d50',\n '#5f9f85',\n '#5bbcb6',\n '#32a3bf',\n '#2bafeb',\n '#2d88c3',\n '#3863cc',\n '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n /** @deprecated Please use `exceptionallySetClassName` */\n className?: string\n /** @deprecated */\n colorList?: string[]\n size?: ResponsiveProp<AvatarSize>\n avatarUrl?: string\n user: { name?: string; email: string }\n}\n\nfunction Avatar({\n user,\n avatarUrl,\n size = 'l',\n className,\n colorList = AVATAR_COLORS,\n exceptionallySetClassName,\n ...props\n}: Props) {\n const userInitials = getInitials(user.name) || getInitials(user.email)\n const avatarSize = size ? size : 'l'\n\n const style = avatarUrl\n ? {\n backgroundImage: `url(${avatarUrl})`,\n textIndent: '-9999px', // hide the initials\n }\n : {\n backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n }\n\n const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n return (\n <Box\n className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n style={style}\n {...props}\n >\n {userInitials}\n </Box>\n )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":";;;;;;;;AASA,MAAMA,aAAa,GAAG,CAClB,SADkB,EAElB,SAFkB,EAGlB,SAHkB,EAIlB,SAJkB,EAKlB,SALkB,EAMlB,SANkB,EAOlB,SAPkB,EAQlB,SARkB,EASlB,SATkB,EAUlB,SAVkB,EAWlB,SAXkB,EAYlB,SAZkB,EAalB,SAbkB,EAclB,SAdkB,EAelB,SAfkB,EAgBlB,SAhBkB,EAiBlB,SAjBkB,EAkBlB,SAlBkB,CAAtB;;AAiCA,SAASC,MAAT;MAAgB;IACZC,IADY;IAEZC,SAFY;IAGZC,IAAI,GAAG,GAHK;IAIZC,SAJY;IAKZC,SAAS,GAAGN,aALA;IAMZO;;MACGC;;EAEH,MAAMC,YAAY,GAAGC,WAAW,CAACR,IAAI,CAACS,IAAN,CAAX,IAA0BD,WAAW,CAACR,IAAI,CAACU,KAAN,CAA1D;EACA,MAAMC,UAAU,GAAGT,IAAI,GAAGA,IAAH,GAAU,GAAjC;EAEA,MAAMU,KAAK,GAAGX,SAAS,GACjB;IACIY,eAAe,WAASZ,SAAT,MADnB;IAEIa,UAAU,EAAE,SAFhB;;GADiB,GAKjB;IACIC,eAAe,EAAEX,SAAS,CAACY,YAAY,CAAChB,IAAI,CAACU,KAAN,EAAaN,SAAS,CAACa,MAAvB,CAAb;GANpC;EASA,MAAMC,aAAa,GAAGC,aAAa,CAACC,MAAD,EAAS,MAAT,EAAiBT,UAAjB,CAAnC;EAEA,oBACIU,aAAA,CAACC,GAAD;IACInB,SAAS,EAAE,CAACA,SAAD,EAAYiB,MAAM,CAACG,MAAnB,EAA2BL,aAA3B,EAA0Cb,yBAA1C,CADf;IAEIO,KAAK,EAAEA;KACHN,KAHR,GAKKC,YALL,CADJ;AASH;;AACDR,MAAM,CAACyB,WAAP,GAAqB,QAArB;;;;"}
|
package/es/banner/banner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n id?: string\n /**\n * The tone of the Banner. Affects the background color and the outline.\n */\n tone: BannerTone\n /**\n * The icon that should be added inside the Banner.\n */\n icon: React.
|
|
1
|
+
{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n id?: string\n\n /**\n * The tone of the Banner. Affects the background color and the outline.\n */\n tone: BannerTone\n\n /**\n * The icon that should be added inside the Banner.\n */\n icon: React.ReactElement | string | number\n\n /**\n * The title to be displayed at the top of the Banner.\n */\n title: React.ReactNode\n\n /**\n * An optional description to be displayed inside the Banner.\n */\n description?: React.ReactNode\n\n /**\n * An optional action to displayed inside the Banner.\n */\n action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { id, tone, icon, title, description, action, ...props }: BannerProps,\n ref,\n) {\n const titleId = useId()\n const descriptionId = useId()\n return (\n <Box\n {...props}\n ref={ref}\n id={id}\n role=\"status\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n aria-live=\"polite\"\n tabIndex={0}\n borderRadius=\"standard\"\n className={[styles.banner, styles[`banner-${tone}`]]}\n >\n <Columns space=\"medium\" alignY=\"center\">\n <Column\n width=\"content\"\n aria-hidden\n style={{\n /* Make sure the icon is centered vertically */\n lineHeight: 0,\n }}\n >\n {icon}\n </Column>\n <Column>\n <Box paddingY=\"xsmall\">\n {description ? (\n <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n {title}\n </Box>\n ) : (\n <Box\n id={titleId}\n className={[\n styles.title,\n // If the banner does not have a description, we need to slightly tweak\n // the styling of the title applying an extra css class\n styles[`title-without-description`],\n styles[`title-${tone}`],\n ]}\n >\n {title}\n </Box>\n )}\n {description ? (\n <Box\n id={descriptionId}\n className={[styles.description, styles[`description-${tone}`]]}\n >\n {description}\n </Box>\n ) : null}\n </Box>\n </Column>\n {action ? <Column width=\"content\">{action}</Column> : null}\n </Columns>\n </Box>\n )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["Banner","React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":";;;;;;;;MAsCMA,MAAM,gBAAGC,UAAA,CAA8C,SAASD,MAAT,OAEzDE,GAFyD;MACzD;IAAEC,EAAF;IAAMC,IAAN;IAAYC,IAAZ;IAAkBC,KAAlB;IAAyBC,WAAzB;IAAsCC;;MAAWC;;EAGjD,MAAMC,OAAO,GAAGC,KAAK,EAArB;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B;EACA,oBACIV,aAAA,CAACY,GAAD,oCACQJ,KADR;IAEIP,GAAG,EAAEA,GAFT;IAGIC,EAAE,EAAEA,EAHR;IAIIW,IAAI,EAAC,QAJT;uBAKqBJ,OALrB;wBAMsBE,aANtB;iBAOc,QAPd;IAQIG,QAAQ,EAAE,CARd;IASIC,YAAY,EAAC,UATjB;IAUIC,SAAS,EAAE,CAACC,MAAM,CAACC,MAAR,EAAgBD,MAAM,aAAWd,IAAX,CAAtB;mBAEXH,aAAA,CAACmB,OAAD;IAASC,KAAK,EAAC;IAASC,MAAM,EAAC;GAA/B,eACIrB,aAAA,CAACsB,MAAD;IACIC,KAAK,EAAC;;IAENC,KAAK,EAAE;;MAEHC,UAAU,EAAE;;GALpB,EAQKrB,IARL,CADJ,eAWIJ,aAAA,CAACsB,MAAD,MAAA,eACItB,aAAA,CAACY,GAAD;IAAKc,QAAQ,EAAC;GAAd,EACKpB,WAAW,gBACRN,aAAA,CAACY,GAAD;IAAKV,EAAE,EAAEO;IAASO,SAAS,EAAE,CAACC,MAAM,CAACZ,KAAR,EAAeY,MAAM,YAAUd,IAAV,CAArB;GAA7B,EACKE,KADL,CADQ,gBAKRL,aAAA,CAACY,GAAD;IACIV,EAAE,EAAEO;IACJO,SAAS,EAAE,CACPC,MAAM,CAACZ,KADA;;IAIPY,MAAM,6BAJC,EAKPA,MAAM,YAAUd,IAAV,CALC;GAFf,EAUKE,KAVL,CANR,EAmBKC,WAAW,gBACRN,aAAA,CAACY,GAAD;IACIV,EAAE,EAAES;IACJK,SAAS,EAAE,CAACC,MAAM,CAACX,WAAR,EAAqBW,MAAM,kBAAgBd,IAAhB,CAA3B;GAFf,EAIKG,WAJL,CADQ,GAOR,IA1BR,CADJ,CAXJ,EAyCKC,MAAM,gBAAGP,aAAA,CAACsB,MAAD;IAAQC,KAAK,EAAC;GAAd,EAAyBhB,MAAzB,CAAH,GAA+C,IAzC1D,CAZJ,CADJ;AA0DH,CAhEc;;;;"}
|
package/es/button/button.js
CHANGED
|
@@ -75,7 +75,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
|
|
|
75
75
|
* [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
|
|
76
76
|
*/
|
|
77
77
|
|
|
78
|
-
const IconButton = /*#__PURE__*/forwardRef(function
|
|
78
|
+
const IconButton = /*#__PURE__*/forwardRef(function IconButton(_ref2, ref) {
|
|
79
79
|
let {
|
|
80
80
|
variant,
|
|
81
81
|
tone = 'normal',
|
package/es/button/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ninterface CommonButtonProps\n extends ObfuscatedClassName,\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n Pick<RoleProps, 'render'> {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n\n /**\n * The button's tone.\n *\n * @default 'normal'\n */\n tone?: ButtonTone\n\n /**\n * The button's size.\n *\n * @default 'normal'\n */\n size?: ButtonSize\n\n /**\n * Controls the shape of the button.\n *\n * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n * fully curved to the point that they are as round as possible.\n *\n * In icon-only buttons this allows to have the button be circular.\n *\n * @default 'normal'\n */\n shape?: 'normal' | 'rounded'\n\n /**\n * Whether the button is disabled or not.\n *\n * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n * the button and read its label, even if they can't activate it.\n *\n * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n * but by using aria-disabled, we can make them behave as if they were.\n *\n * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n * mimic the behavior of a native disabled attribute.\n *\n * @default false\n */\n disabled?: boolean\n\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n\n /**\n * The type of the button.\n *\n * @default 'button'\n */\n type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n /**\n * The button label content.\n */\n children: React.ReactNode\n\n /**\n * The icon to display at the start of the button (before the label).\n */\n startIcon?: IconElement\n\n /**\n * The icon to display at the end of the button (after the label).\n */\n endIcon?: IconElement\n\n /**\n * The width of the button.\n *\n * - `'auto'`: The button will be as wide as its content.\n * - `'full'`: The button will be as wide as its container.\n *\n * @default 'auto'\n */\n width?: 'auto' | 'full'\n\n /**\n * The alignment of the button label inside the button.\n *\n * @default 'center'\n */\n align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n type = 'button',\n disabled = false,\n loading = false,\n tooltip,\n render,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n width = 'auto',\n align = 'center',\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Role.button\n {...props}\n render={render}\n type={render != null ? undefined : type}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={classNames([\n getBoxClassNames({ width }),\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n disabled ? styles.disabled : null,\n ])}\n >\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n\n {children ? (\n <Box\n as=\"span\"\n className={styles.label}\n overflow=\"hidden\"\n width={width === 'full' ? 'full' : undefined}\n textAlign={width === 'auto' ? 'center' : align}\n >\n {children}\n </Box>\n ) : null}\n\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n </Role.button>\n )\n\n return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n /**\n * The icon to display inside the button.\n */\n icon: IconElement\n\n /**\n * The button label.\n *\n * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n * provided explicitly).\n */\n 'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n type = 'button',\n disabled = false,\n loading = false,\n tooltip,\n render,\n onClick,\n exceptionallySetClassName,\n children,\n icon,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Role.button\n {...props}\n render={render}\n type={render != null ? undefined : type}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={classNames([\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n styles.iconButton,\n disabled ? styles.disabled : null,\n ])}\n >\n {(loading && <Spinner />) || icon}\n </Role.button>\n )\n\n const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","Role","button","undefined","className","classNames","getBoxClassNames","styles","baseButton","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactElement | string\n\ninterface CommonButtonProps\n extends ObfuscatedClassName,\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n Pick<RoleProps, 'render'> {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n\n /**\n * The button's tone.\n *\n * @default 'normal'\n */\n tone?: ButtonTone\n\n /**\n * The button's size.\n *\n * @default 'normal'\n */\n size?: ButtonSize\n\n /**\n * Controls the shape of the button.\n *\n * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n * fully curved to the point that they are as round as possible.\n *\n * In icon-only buttons this allows to have the button be circular.\n *\n * @default 'normal'\n */\n shape?: 'normal' | 'rounded'\n\n /**\n * Whether the button is disabled or not.\n *\n * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n * the button and read its label, even if they can't activate it.\n *\n * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n * but by using aria-disabled, we can make them behave as if they were.\n *\n * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n * mimic the behavior of a native disabled attribute.\n *\n * @default false\n */\n disabled?: boolean\n\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n\n /**\n * The type of the button.\n *\n * @default 'button'\n */\n type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n /**\n * The button label content.\n */\n children?: React.ReactNode\n\n /**\n * The icon to display at the start of the button (before the label).\n */\n startIcon?: IconElement\n\n /**\n * The icon to display at the end of the button (after the label).\n */\n endIcon?: IconElement\n\n /**\n * The width of the button.\n *\n * - `'auto'`: The button will be as wide as its content.\n * - `'full'`: The button will be as wide as its container.\n *\n * @default 'auto'\n */\n width?: 'auto' | 'full'\n\n /**\n * The alignment of the button label inside the button.\n *\n * @default 'center'\n */\n align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n type = 'button',\n disabled = false,\n loading = false,\n tooltip,\n render,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n width = 'auto',\n align = 'center',\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Role.button\n {...props}\n render={render}\n type={render != null ? undefined : type}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={classNames([\n getBoxClassNames({ width }),\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n disabled ? styles.disabled : null,\n ])}\n >\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n\n {children ? (\n <Box\n as=\"span\"\n className={styles.label}\n overflow=\"hidden\"\n width={width === 'full' ? 'full' : undefined}\n textAlign={width === 'auto' ? 'center' : align}\n >\n {children}\n </Box>\n ) : null}\n\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n </Role.button>\n )\n\n return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n /**\n * The icon to display inside the button.\n */\n icon: IconElement\n\n /**\n * The button label.\n *\n * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n * provided explicitly).\n */\n 'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n {\n variant,\n tone = 'normal',\n size = 'normal',\n shape = 'normal',\n type = 'button',\n disabled = false,\n loading = false,\n tooltip,\n render,\n onClick,\n exceptionallySetClassName,\n children,\n icon,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Role.button\n {...props}\n render={render}\n type={render != null ? undefined : type}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={classNames([\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n shape === 'rounded' ? styles['shape-rounded'] : null,\n styles.iconButton,\n disabled ? styles.disabled : null,\n ])}\n >\n {(loading && <Spinner />) || icon}\n </Role.button>\n )\n\n const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","Role","button","undefined","className","classNames","getBoxClassNames","styles","baseButton","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\
|
|
1
|
+
{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ninterface CheckboxFieldProps\n extends Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n > {\n 'aria-checked'?: never\n /**\n *\n * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n */\n 'aria-controls'?: string\n\n /**\n * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n */\n 'aria-describedby'?: string\n\n /**\n * Defines a string value that labels the current checkbox for assistive technologies.\n */\n 'aria-label'?: string\n\n /**\n * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n */\n 'aria-labelledby'?: string\n\n /**\n * Defines whether or not the checkbox is disabled.\n */\n disabled?: boolean\n\n /**\n * The label for the checkbox element.\n */\n label?: React.ReactNode\n\n /**\n * The icon that should be added to the checkbox label.\n */\n icon?: React.ReactElement | string | number\n\n /**\n * Defines whether or not the checkbox can be of a `mixed` state.\n */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {icon ? (\n <Box display=\"flex\" className={styles.icon} aria-hidden>\n {icon}\n </Box>\n ) : null}\n {label ? (\n <Box display=\"flex\" className={styles.label}>\n <Text>{label}</Text>\n </Box>\n ) : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n onShowBody?: () => void\n onHideBody?: () => void\n allowBodyInteractions?: boolean\n top?: boolean\n right?: boolean\n scrolling_parent?: string\n children?: [\n React.ReactElement<TriggerProps>,\n React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n ]\n className?: string\n}\n\ntype BoxState = {\n top: boolean\n showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n public static displayName: string\n\n constructor(props: BoxProps, context: React.Context<unknown>) {\n super(props, context)\n this.state = {\n showBody: false,\n top: props.top || false,\n }\n\n this._timeout = undefined\n }\n\n componentWillUnmount() {\n document.removeEventListener('click', this._handleClickOutside, true)\n if (this._timeout) {\n clearTimeout(this._timeout)\n }\n }\n _timeout?: ReturnType<typeof setTimeout>\n\n _handleClickOutside = (event: MouseEvent) => {\n const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n this._toggleShowBody()\n else if (!this.props.allowBodyInteractions) {\n // won't close when body interactions are allowed\n this._timeout = setTimeout(() => {\n if (this.state.showBody) {\n this._toggleShowBody()\n }\n }, 100)\n }\n }\n\n _toggleShowBody = () => {\n if (!this.state.showBody) {\n // will show\n if (this.props.onShowBody) this.props.onShowBody()\n document.addEventListener('click', this._handleClickOutside, true)\n } else {\n // will hide\n if (this.props.onHideBody) this.props.onHideBody()\n document.removeEventListener('click', this._handleClickOutside, true)\n }\n\n this.setState({\n showBody: !this.state.showBody,\n })\n }\n\n _getTriggerComponent() {\n const _trigger = this.props.children?.[0]\n return _trigger\n ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n : undefined\n }\n\n // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n _setPosition = (body: HTMLElement | null) => {\n if (body) {\n const scrollingParent = document.getElementById(\n this.props.scrolling_parent ? this.props.scrolling_parent : '',\n )\n\n if (scrollingParent) {\n const dropdown = ReactDOM.findDOMNode(this)\n if (!dropdown) {\n return\n }\n const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n .offsetTop\n const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n if (!dropdownTrigger) {\n return\n }\n const dropdownTriggerHeight = dropdownTrigger.clientHeight\n const dropdownBodyHeight = body.clientHeight\n\n const scrollingParentHeight = scrollingParent.clientHeight\n const scrollingParentOffset = scrollingParent.scrollTop\n\n const bottomOffset =\n scrollingParentHeight +\n scrollingParentOffset -\n dropdownVerticalPosition -\n dropdownTriggerHeight\n\n const top = bottomOffset < dropdownBodyHeight\n\n if (top !== this.state.top) {\n this.setState({ top })\n }\n }\n }\n }\n\n _getBodyComponent() {\n if (!this.state.showBody) {\n return null\n }\n const { top } = this.state\n const { right = false, children } = this.props\n const props = { top, right, setPosition: this._setPosition }\n\n const className = classNames({\n body_wrapper: true,\n with_arrow: true,\n top: top,\n bottom: !top,\n })\n\n const body = children?.[1]\n\n const contentMarkup =\n typeof body === 'function'\n ? body(props)\n : body\n ? React.cloneElement(body, props)\n : undefined\n return (\n <div className={className} style={{ position: 'relative' }}>\n {contentMarkup}\n </div>\n )\n }\n\n render() {\n const className = classNames('reactist_dropdown', this.props.className)\n const { top } = this.state\n\n return (\n <div\n style={{ display: 'inline-block' }}\n className={className}\n data-testid=\"reactist-dropdown-box\"\n >\n {top && this._getBodyComponent()}\n {this._getTriggerComponent()}\n {!top && this._getBodyComponent()}\n </div>\n )\n }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n tooltip?: React.ReactNode\n /**\n * @private the onClick prop is not to be used externally\n */\n onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n { children, onClick, tooltip, className, ...props },\n ref,\n) {\n function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n event.preventDefault()\n event.stopPropagation()\n if (onClick) onClick(event)\n }\n\n return (\n <Button\n {...props}\n className={classNames('trigger', className)}\n onClick={handleClick}\n tooltip={tooltip}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n setPosition?: React.Ref<HTMLDivElement>\n children?: React.ReactNode\n top?: boolean\n right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n if (top) {\n style.top = 'auto'\n style.bottom = 0\n }\n\n if (right) {\n style.right = 'auto'\n style.left = 0\n }\n\n return (\n <div\n ref={setPosition}\n style={style}\n className=\"body\"\n id=\"reactist-dropdown-body\"\n data-testid=\"reactist-dropdown-body\"\n >\n {children}\n </div>\n )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n Box,\n Trigger,\n Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","constructor","props","context","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onShowBody","document","addEventListener","onHideBody","removeEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","dropdownTriggerHeight","clientHeight","dropdownBodyHeight","scrollingParentHeight","scrollingParentOffset","scrollTop","bottomOffset","top","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","ref","tooltip","handleClick","preventDefault","stopPropagation","Button","Body","left","id","Dropdown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n onShowBody?: () => void\n onHideBody?: () => void\n allowBodyInteractions?: boolean\n top?: boolean\n right?: boolean\n scrolling_parent?: string\n children?: [\n React.ReactElement<TriggerProps>,\n React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n ]\n className?: string\n}\n\ntype BoxState = {\n top: boolean\n showBody: boolean\n}\n\nclass Box extends React.Component<BoxProps, BoxState> {\n public static displayName: string\n\n constructor(props: BoxProps, context: React.Context<unknown>) {\n super(props, context)\n this.state = {\n showBody: false,\n top: props.top || false,\n }\n\n this._timeout = undefined\n }\n\n componentWillUnmount() {\n document.removeEventListener('click', this._handleClickOutside, true)\n if (this._timeout) {\n clearTimeout(this._timeout)\n }\n }\n _timeout?: ReturnType<typeof setTimeout>\n\n _handleClickOutside = (event: MouseEvent) => {\n const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n this._toggleShowBody()\n else if (!this.props.allowBodyInteractions) {\n // won't close when body interactions are allowed\n this._timeout = setTimeout(() => {\n if (this.state.showBody) {\n this._toggleShowBody()\n }\n }, 100)\n }\n }\n\n _toggleShowBody = () => {\n if (!this.state.showBody) {\n // will show\n if (this.props.onShowBody) this.props.onShowBody()\n document.addEventListener('click', this._handleClickOutside, true)\n } else {\n // will hide\n if (this.props.onHideBody) this.props.onHideBody()\n document.removeEventListener('click', this._handleClickOutside, true)\n }\n\n this.setState({\n showBody: !this.state.showBody,\n })\n }\n\n _getTriggerComponent() {\n const _trigger = this.props.children?.[0]\n return _trigger\n ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n : undefined\n }\n\n // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n _setPosition = (body: HTMLElement | null) => {\n if (body) {\n const scrollingParent = document.getElementById(\n this.props.scrolling_parent ? this.props.scrolling_parent : '',\n )\n\n if (scrollingParent) {\n const dropdown = ReactDOM.findDOMNode(this)\n if (!dropdown) {\n return\n }\n const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n .offsetTop\n const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n if (!dropdownTrigger) {\n return\n }\n const dropdownTriggerHeight = dropdownTrigger.clientHeight\n const dropdownBodyHeight = body.clientHeight\n\n const scrollingParentHeight = scrollingParent.clientHeight\n const scrollingParentOffset = scrollingParent.scrollTop\n\n const bottomOffset =\n scrollingParentHeight +\n scrollingParentOffset -\n dropdownVerticalPosition -\n dropdownTriggerHeight\n\n const top = bottomOffset < dropdownBodyHeight\n\n if (top !== this.state.top) {\n this.setState({ top })\n }\n }\n }\n }\n\n _getBodyComponent() {\n if (!this.state.showBody) {\n return null\n }\n const { top } = this.state\n const { right = false, children } = this.props\n const props = { top, right, setPosition: this._setPosition }\n\n const className = classNames({\n body_wrapper: true,\n with_arrow: true,\n top: top,\n bottom: !top,\n })\n\n const body = children?.[1]\n\n const contentMarkup =\n typeof body === 'function'\n ? body(props)\n : body\n ? React.cloneElement(body, props)\n : undefined\n return (\n <div className={className} style={{ position: 'relative' }}>\n {contentMarkup}\n </div>\n )\n }\n\n render() {\n const className = classNames('reactist_dropdown', this.props.className)\n const { top } = this.state\n\n return (\n <div\n style={{ display: 'inline-block' }}\n className={className}\n data-testid=\"reactist-dropdown-box\"\n >\n {top && this._getBodyComponent()}\n {this._getTriggerComponent()}\n {!top && this._getBodyComponent()}\n </div>\n )\n }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n tooltip?: React.ReactNode\n /**\n * @private the onClick prop is not to be used externally\n */\n onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n { children, onClick, tooltip, className, ...props },\n ref,\n) {\n function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n event.preventDefault()\n event.stopPropagation()\n if (onClick) onClick(event)\n }\n\n return (\n <Button\n {...props}\n className={classNames('trigger', className)}\n onClick={handleClick}\n tooltip={tooltip}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n setPosition?: React.Ref<HTMLDivElement>\n children?: React.ReactNode\n top?: boolean\n right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n if (top) {\n style.top = 'auto'\n style.bottom = 0\n }\n\n if (right) {\n style.right = 'auto'\n style.left = 0\n }\n\n return (\n <div\n ref={setPosition}\n style={style}\n className=\"body\"\n id=\"reactist-dropdown-body\"\n data-testid=\"reactist-dropdown-body\"\n >\n {children}\n </div>\n )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n Box,\n Trigger,\n Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","constructor","props","context","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onShowBody","document","addEventListener","onHideBody","removeEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","dropdownTriggerHeight","clientHeight","dropdownBodyHeight","scrollingParentHeight","scrollingParentOffset","scrollTop","bottomOffset","top","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","ref","tooltip","handleClick","preventDefault","stopPropagation","Button","Body","left","id","Dropdown"],"mappings":"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"}
|
|
@@ -2,7 +2,11 @@ import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBab
|
|
|
2
2
|
import { forwardRef, createElement } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
6
10
|
const className = classNames('reactist_input', props.className);
|
|
7
11
|
return /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
|
|
8
12
|
className: className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../src/components/deprecated-input/input.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../src/components/deprecated-input/input.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n className?: string\n}\n\n/**\n * @deprecated\n */\nconst Input = React.forwardRef<HTMLInputElement, Props>(function Input(props, ref) {\n const className = classNames('reactist_input', props.className)\n return <input {...props} className={className} ref={ref} />\n})\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":["Input","React","props","ref","className","classNames","displayName"],"mappings":";;;;AASA;;;;MAGMA,KAAK,gBAAGC,UAAA,CAA0C,SAASD,KAAT,CAAeE,KAAf,EAAsBC,GAAtB;EACpD,MAAMC,SAAS,GAAGC,UAAU,CAAC,gBAAD,EAAmBH,KAAK,CAACE,SAAzB,CAA5B;EACA,oBAAOH,aAAA,QAAA,oCAAWC,KAAX;IAAkBE,SAAS,EAAEA,SAA7B;IAAwCD,GAAG,EAAEA;KAApD;AACH,CAHa;AAIdH,KAAK,CAACM,WAAN,GAAoB,OAApB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName
|
|
1
|
+
{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName, Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {\n children: React.ReactNode\n /**\n * The semantic level of the heading.\n */\n level: HeadingLevel\n\n /**\n * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n *\n * @default 'regular'\n */\n weight?: 'regular' | 'medium' | 'light'\n\n /**\n * Shifts the default heading visual text size up or down, depending on the original size\n * imposed by the `level`. The heading continues to be semantically at the given level.\n *\n * By default, no value is applied, and the default size from the level is applied. The values\n * have the following effect:\n *\n * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n * level look visually as if it were of the immediately lower level).\n * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n * scale.\n * - 'largest' can be thought of as applying 'larger' twice.\n *\n * @see level\n * @default undefined\n */\n size?: 'smaller' | 'larger' | 'largest'\n\n /**\n * The tone (semantic color) of the heading.\n *\n * @default 'normal'\n */\n tone?: Tone\n\n /**\n * Used to truncate the heading to a given number of lines.\n *\n * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n * truncated. If the text fits without it being truncated, no ellipsis is added.\n *\n * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n *\n * @default undefined\n */\n lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n\n /**\n * How to align the heading text horizontally.\n *\n * @default 'start'\n */\n align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n function Heading(\n {\n level,\n weight = 'regular',\n size,\n tone = 'normal',\n children,\n lineClamp,\n align,\n exceptionallySetClassName,\n ...props\n },\n ref,\n ) {\n // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n const headingElementName = `h${level}` as HeadingElement\n const lineClampMultipleLines =\n typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n return (\n <Box\n {...props}\n className={[\n exceptionallySetClassName,\n styles.heading,\n weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n getClassNames(styles, 'size', size),\n lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n ]}\n textAlign={align}\n // Prevents emojis from being cut-off\n // See https://github.com/Doist/reactist/pull/528\n paddingRight={lineClamp ? 'xsmall' : undefined}\n as={headingElementName}\n ref={ref}\n >\n {children}\n </Box>\n )\n },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["Heading","React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":";;;;;;;MAqEMA,OAAO,gBAAGC,UAAA,CACZ,SAASD,OAAT,OAYIE,GAZJ;MACI;IACIC,KADJ;IAEIC,MAAM,GAAG,SAFb;IAGIC,IAHJ;IAIIC,IAAI,GAAG,QAJX;IAKIC,QALJ;IAMIC,SANJ;IAOIC,KAPJ;IAQIC;;MACGC;;;;EAMP,MAAMC,kBAAkB,SAAOT,KAA/B;EACA,MAAMU,sBAAsB,GACxB,OAAOL,SAAP,KAAqB,QAArB,GAAgCM,QAAQ,CAACN,SAAD,EAAY,EAAZ,CAAR,GAA0B,CAA1D,GAA8D,CAACA,SAAS,IAAI,CAAd,IAAmB,CADrF;EAGA,oBACIP,aAAA,CAACc,GAAD,oCACQJ,KADR;IAEIK,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,OAFA,EAGPd,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAH1D,EAIPE,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IAJnD,EAKPa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBZ,IAAjB,CALN,EAMPQ,sBAAsB,GAAGI,MAAM,CAACJ,sBAAV,GAAmC,IANlD,EAOPL,SAAS,GAAGW,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAFf;IAWIC,SAAS,EAAEZ,KAXf;;;IAcIa,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAdzC;IAeIC,EAAE,EAAEZ,kBAfR;IAgBIV,GAAG,EAAEA;MAEJK,QAlBL,CADJ;AAsBH,CA3CW;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n
|
|
1
|
+
{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps &\n ObfuscatedClassName & {\n /**\n * The size of the loading spinner.\n * @default 'small'\n */\n size?: Size\n\n /**\n * Identifies the element (or elements) that describes the loading component for assistive technologies.\n */\n 'aria-describedby'?: string\n } & (\n | {\n /** Defines a string value that labels the current loading component for assistive technologies. */\n 'aria-label': string\n 'aria-labelledby'?: never\n }\n | {\n /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n 'aria-labelledby': string\n 'aria-label'?: never\n }\n )\n\nconst sizeMapping: Record<Size, number> = {\n xsmall: 16,\n small: 24,\n medium: 36,\n large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n const numericSize = sizeMapping[size] ?? sizeMapping.small\n const ariaLabel = props['aria-label']\n ? props['aria-label']\n : !props['aria-labelledby']\n ? 'Loading…'\n : undefined\n\n return (\n <Box\n {...props}\n aria-label={ariaLabel}\n className={exceptionallySetClassName}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"progressbar\"\n >\n <Spinner size={numericSize} aria-hidden />\n </Box>\n )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAqCA,MAAMA,WAAW,GAAyB;EACtCC,MAAM,EAAE,EAD8B;EAEtCC,KAAK,EAAE,EAF+B;EAGtCC,MAAM,EAAE,EAH8B;EAItCC,KAAK,EAAE;AAJ+B,CAA1C;;AAOA,SAASC,OAAT;;;MAAiB;IAAEC,IAAI,GAAG,OAAT;IAAkBC;;MAA8BC;;EAC7D,MAAMC,WAAW,wBAAGT,WAAW,CAACM,IAAD,CAAd,gCAAwBN,WAAW,CAACE,KAArD;EACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;EAMA,oBACIC,aAAA,CAACC,GAAD,oCACQL,KADR;kBAEgBE,SAFhB;IAGII,SAAS,EAAEP,yBAHf;IAIIQ,OAAO,EAAC,MAJZ;IAKIC,UAAU,EAAC,QALf;IAMIC,cAAc,EAAC,QANnB;IAOIC,IAAI,EAAC;mBAELN,aAAA,CAACO,OAAD;IAASb,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}
|
package/es/menu/menu.js
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { useState, useMemo, createElement, useContext, useCallback, useEffect,
|
|
2
|
+
import { useState, useMemo, createElement, forwardRef, useContext, useCallback, useEffect, Children, createContext } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import {
|
|
5
|
-
import { useMenuStore, MenuButton as MenuButton$1, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
|
|
4
|
+
import { useMenuStore, MenuButton as MenuButton$1, Role, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
|
|
6
5
|
|
|
7
6
|
const _excluded = ["children", "onItemSelect"],
|
|
8
7
|
_excluded2 = ["exceptionallySetClassName"],
|
|
9
|
-
_excluded3 = ["
|
|
8
|
+
_excluded3 = ["render"],
|
|
10
9
|
_excluded4 = ["exceptionallySetClassName", "modal"],
|
|
11
|
-
_excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"
|
|
10
|
+
_excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
|
|
12
11
|
_excluded6 = ["label", "children", "exceptionallySetClassName"];
|
|
13
|
-
const MenuContext = /*#__PURE__*/createContext(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const MenuContext = /*#__PURE__*/createContext({
|
|
13
|
+
menuStore: null,
|
|
14
|
+
handleItemSelect: () => undefined,
|
|
15
|
+
getAnchorRect: null,
|
|
16
|
+
setAnchorRect: () => undefined
|
|
17
|
+
});
|
|
19
18
|
/**
|
|
20
19
|
* Wrapper component to control a menu. It does not render anything, only providing the state
|
|
21
20
|
* management for the menu components inside it.
|
|
@@ -48,7 +47,7 @@ function Menu(_ref) {
|
|
|
48
47
|
*/
|
|
49
48
|
|
|
50
49
|
|
|
51
|
-
const MenuButton = /*#__PURE__*/
|
|
50
|
+
const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref2, ref) {
|
|
52
51
|
let {
|
|
53
52
|
exceptionallySetClassName
|
|
54
53
|
} = _ref2,
|
|
@@ -57,18 +56,20 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
|
|
|
57
56
|
const {
|
|
58
57
|
menuStore
|
|
59
58
|
} = useContext(MenuContext);
|
|
59
|
+
|
|
60
|
+
if (!menuStore) {
|
|
61
|
+
throw new Error('MenuButton must be wrapped in <Menu/>');
|
|
62
|
+
}
|
|
63
|
+
|
|
60
64
|
return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
61
65
|
store: menuStore,
|
|
62
66
|
ref: ref,
|
|
63
67
|
className: classNames('reactist_menubutton', exceptionallySetClassName)
|
|
64
68
|
}));
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
//
|
|
68
|
-
|
|
69
|
-
const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
|
|
69
|
+
});
|
|
70
|
+
const ContextMenuTrigger = /*#__PURE__*/forwardRef(function ContextMenuTrigger(_ref3, ref) {
|
|
70
71
|
let {
|
|
71
|
-
|
|
72
|
+
render
|
|
72
73
|
} = _ref3,
|
|
73
74
|
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
74
75
|
|
|
@@ -76,6 +77,11 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
|
|
|
76
77
|
setAnchorRect,
|
|
77
78
|
menuStore
|
|
78
79
|
} = useContext(MenuContext);
|
|
80
|
+
|
|
81
|
+
if (!menuStore) {
|
|
82
|
+
throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
|
|
83
|
+
}
|
|
84
|
+
|
|
79
85
|
const handleContextMenu = useCallback(function handleContextMenu(event) {
|
|
80
86
|
event.preventDefault();
|
|
81
87
|
setAnchorRect({
|
|
@@ -88,16 +94,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
|
|
|
88
94
|
useEffect(() => {
|
|
89
95
|
if (!isOpen) setAnchorRect(null);
|
|
90
96
|
}, [isOpen, setAnchorRect]);
|
|
91
|
-
return /*#__PURE__*/createElement(
|
|
97
|
+
return /*#__PURE__*/createElement(Role.div, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
92
98
|
onContextMenu: handleContextMenu,
|
|
93
|
-
ref
|
|
99
|
+
ref: ref,
|
|
100
|
+
render: render
|
|
94
101
|
}));
|
|
95
102
|
});
|
|
96
103
|
/**
|
|
97
104
|
* The dropdown menu itself, containing a list of menu items.
|
|
98
105
|
*/
|
|
99
106
|
|
|
100
|
-
const MenuList = /*#__PURE__*/
|
|
107
|
+
const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref4, ref) {
|
|
101
108
|
let {
|
|
102
109
|
exceptionallySetClassName,
|
|
103
110
|
modal = true
|
|
@@ -108,6 +115,11 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
|
|
|
108
115
|
menuStore,
|
|
109
116
|
getAnchorRect
|
|
110
117
|
} = useContext(MenuContext);
|
|
118
|
+
|
|
119
|
+
if (!menuStore) {
|
|
120
|
+
throw new Error('MenuList must be wrapped in <Menu/>');
|
|
121
|
+
}
|
|
122
|
+
|
|
111
123
|
const isOpen = menuStore.useState('open');
|
|
112
124
|
return isOpen ? /*#__PURE__*/createElement(Portal, {
|
|
113
125
|
preserveTabOrder: true
|
|
@@ -126,15 +138,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
|
|
|
126
138
|
* callback.
|
|
127
139
|
*/
|
|
128
140
|
|
|
129
|
-
const MenuItem = /*#__PURE__*/
|
|
141
|
+
const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
|
|
130
142
|
let {
|
|
131
143
|
value,
|
|
132
144
|
children,
|
|
133
145
|
onSelect,
|
|
134
146
|
hideOnSelect = true,
|
|
135
147
|
onClick,
|
|
136
|
-
exceptionallySetClassName
|
|
137
|
-
as = 'button'
|
|
148
|
+
exceptionallySetClassName
|
|
138
149
|
} = _ref5,
|
|
139
150
|
props = _objectWithoutProperties(_ref5, _excluded5);
|
|
140
151
|
|
|
@@ -142,6 +153,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
|
|
|
142
153
|
handleItemSelect,
|
|
143
154
|
menuStore
|
|
144
155
|
} = useContext(MenuContext);
|
|
156
|
+
|
|
157
|
+
if (!menuStore) {
|
|
158
|
+
throw new Error('MenuItem must be wrapped in <Menu/>');
|
|
159
|
+
}
|
|
160
|
+
|
|
145
161
|
const {
|
|
146
162
|
hide
|
|
147
163
|
} = menuStore;
|
|
@@ -153,7 +169,6 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
|
|
|
153
169
|
if (shouldClose) hide();
|
|
154
170
|
}, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
|
|
155
171
|
return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
156
|
-
as: as,
|
|
157
172
|
store: menuStore,
|
|
158
173
|
ref: ref,
|
|
159
174
|
onClick: handleClick,
|
|
@@ -191,6 +206,11 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
|
|
|
191
206
|
handleItemSelect: parentMenuItemSelect,
|
|
192
207
|
menuStore
|
|
193
208
|
} = useContext(MenuContext);
|
|
209
|
+
|
|
210
|
+
if (!menuStore) {
|
|
211
|
+
throw new Error('SubMenu must be wrapped in <Menu/>');
|
|
212
|
+
}
|
|
213
|
+
|
|
194
214
|
const {
|
|
195
215
|
hide: parentMenuHide
|
|
196
216
|
} = menuStore;
|
|
@@ -199,19 +219,16 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
|
|
|
199
219
|
parentMenuItemSelect == null ? void 0 : parentMenuItemSelect(value);
|
|
200
220
|
parentMenuHide();
|
|
201
221
|
}, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
|
|
202
|
-
const [button, list] = Children.toArray(children);
|
|
203
|
-
|
|
204
|
-
const renderMenuButton = useCallback(function renderMenuButton(props) {
|
|
205
|
-
return /*#__PURE__*/cloneElement(button, props);
|
|
206
|
-
}, [button]);
|
|
222
|
+
const [button, list] = Children.toArray(children);
|
|
223
|
+
const buttonElement = button;
|
|
207
224
|
return /*#__PURE__*/createElement(Menu, {
|
|
208
225
|
onItemSelect: handleSubItemSelect
|
|
209
226
|
}, /*#__PURE__*/createElement(MenuItem$1, {
|
|
210
|
-
as: "div",
|
|
211
227
|
store: menuStore,
|
|
212
228
|
ref: ref,
|
|
213
|
-
hideOnClick: false
|
|
214
|
-
|
|
229
|
+
hideOnClick: false,
|
|
230
|
+
render: buttonElement
|
|
231
|
+
}, buttonElement.props.children), list);
|
|
215
232
|
});
|
|
216
233
|
/**
|
|
217
234
|
* A way to semantically group some menu items.
|
|
@@ -220,7 +237,7 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
|
|
|
220
237
|
* before and/or after the group if you so wish.
|
|
221
238
|
*/
|
|
222
239
|
|
|
223
|
-
const MenuGroup = /*#__PURE__*/
|
|
240
|
+
const MenuGroup = /*#__PURE__*/forwardRef(function MenuGroup(_ref6, ref) {
|
|
224
241
|
let {
|
|
225
242
|
label,
|
|
226
243
|
children,
|
|
@@ -231,6 +248,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
|
|
|
231
248
|
const {
|
|
232
249
|
menuStore
|
|
233
250
|
} = useContext(MenuContext);
|
|
251
|
+
|
|
252
|
+
if (!menuStore) {
|
|
253
|
+
throw new Error('MenuGroup must be wrapped in <Menu/>');
|
|
254
|
+
}
|
|
255
|
+
|
|
234
256
|
return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
235
257
|
ref: ref,
|
|
236
258
|
store: menuStore,
|