@plasmicapp/react-web 0.2.102 → 0.2.105
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/README.md +13 -0
- package/dist/all.d.ts +471 -108
- package/dist/index.d.ts +1 -0
- package/dist/plume/menu-button/menu-trigger.d.ts +1 -1
- package/dist/plume/select/index.d.ts +1 -0
- package/dist/plume/triggered-overlay/index.d.ts +1 -0
- package/dist/react-web.cjs.development.js +480 -339
- package/dist/react-web.cjs.development.js.map +1 -1
- package/dist/react-web.cjs.production.min.js +1 -1
- package/dist/react-web.cjs.production.min.js.map +1 -1
- package/dist/react-web.esm.js +476 -339
- package/dist/react-web.esm.js.map +1 -1
- package/dist/render/triggers.d.ts +4 -4
- package/dist/states/helpers.d.ts +9 -0
- package/dist/states/index.d.ts +7 -7
- package/dist/stories/PlasmicImg.stories.d.ts +2 -2
- package/dist/stories/UseDollarState.stories.d.ts +40 -0
- package/package.json +27 -21
- package/skinny/dist/collection-utils-3487dd27.js +238 -0
- package/skinny/dist/collection-utils-3487dd27.js.map +1 -0
- package/skinny/dist/collection-utils-47e89cbe.js +238 -0
- package/skinny/dist/collection-utils-47e89cbe.js.map +1 -0
- package/skinny/dist/collection-utils-4dae6efa.js +292 -0
- package/skinny/dist/collection-utils-4dae6efa.js.map +1 -0
- package/skinny/dist/collection-utils-57c273dc.js +238 -0
- package/skinny/dist/collection-utils-57c273dc.js.map +1 -0
- package/skinny/dist/collection-utils-57ec40f9.js +292 -0
- package/skinny/dist/collection-utils-57ec40f9.js.map +1 -0
- package/skinny/dist/collection-utils-96cde83c.js +238 -0
- package/skinny/dist/collection-utils-96cde83c.js.map +1 -0
- package/skinny/dist/collection-utils-b0b8f30e.js +291 -0
- package/skinny/dist/collection-utils-b0b8f30e.js.map +1 -0
- package/skinny/dist/common-182a0b0c.js +201 -0
- package/skinny/dist/common-182a0b0c.js.map +1 -0
- package/skinny/dist/index.d.ts +1 -0
- package/skinny/dist/index.js +68 -45
- package/skinny/dist/index.js.map +1 -1
- package/skinny/dist/plume/button/index.js +5 -5
- package/skinny/dist/plume/button/index.js.map +1 -1
- package/skinny/dist/plume/checkbox/index.js +6 -6
- package/skinny/dist/plume/checkbox/index.js.map +1 -1
- package/skinny/dist/plume/menu/index.js +11 -11
- package/skinny/dist/plume/menu/index.js.map +1 -1
- package/skinny/dist/plume/menu-button/index.js +6 -6
- package/skinny/dist/plume/menu-button/index.js.map +1 -1
- package/skinny/dist/plume/menu-button/menu-trigger.d.ts +1 -1
- package/skinny/dist/plume/select/index.d.ts +1 -0
- package/skinny/dist/plume/select/index.js +12 -12
- package/skinny/dist/plume/select/index.js.map +1 -1
- package/skinny/dist/plume/switch/index.js +6 -6
- package/skinny/dist/plume/switch/index.js.map +1 -1
- package/skinny/dist/plume/text-input/index.js +5 -5
- package/skinny/dist/plume/text-input/index.js.map +1 -1
- package/skinny/dist/plume/triggered-overlay/index.d.ts +1 -0
- package/skinny/dist/plume/triggered-overlay/index.js +8 -7
- package/skinny/dist/plume/triggered-overlay/index.js.map +1 -1
- package/skinny/dist/plume-utils-5c413fd1.js +35 -0
- package/skinny/dist/plume-utils-5c413fd1.js.map +1 -0
- package/skinny/dist/plume-utils-623b91cc.js +35 -0
- package/skinny/dist/plume-utils-623b91cc.js.map +1 -0
- package/skinny/dist/props-utils-4633caf6.js +8 -0
- package/skinny/dist/props-utils-4633caf6.js.map +1 -0
- package/skinny/dist/props-utils-5c0ad25a.js +59 -0
- package/skinny/dist/props-utils-5c0ad25a.js.map +1 -0
- package/skinny/dist/props-utils-754f655a.js +39 -0
- package/skinny/dist/props-utils-754f655a.js.map +1 -0
- package/skinny/dist/props-utils-b2ad4997.js +8 -0
- package/skinny/dist/props-utils-b2ad4997.js.map +1 -0
- package/skinny/dist/props-utils-c632595f.js +59 -0
- package/skinny/dist/props-utils-c632595f.js.map +1 -0
- package/skinny/dist/props-utils-fd5f444e.js +59 -0
- package/skinny/dist/props-utils-fd5f444e.js.map +1 -0
- package/skinny/dist/react-utils-118d8539.js +190 -0
- package/skinny/dist/react-utils-118d8539.js.map +1 -0
- package/skinny/dist/react-utils-2a2fd6c9.js +339 -0
- package/skinny/dist/react-utils-2a2fd6c9.js.map +1 -0
- package/skinny/dist/react-utils-2d70bbbe.js +172 -0
- package/skinny/dist/react-utils-2d70bbbe.js.map +1 -0
- package/skinny/dist/react-utils-35cb2a4e.js +201 -0
- package/skinny/dist/react-utils-35cb2a4e.js.map +1 -0
- package/skinny/dist/react-utils-675565b4.js +334 -0
- package/skinny/dist/react-utils-675565b4.js.map +1 -0
- package/skinny/dist/render/PlasmicImg/index.js +3 -3
- package/skinny/dist/render/PlasmicImg/index.js.map +1 -1
- package/skinny/dist/render/PlasmicImg.d.ts +62 -0
- package/skinny/dist/render/triggers.d.ts +4 -4
- package/skinny/dist/ssr-64e38713.js +108 -0
- package/skinny/dist/ssr-64e38713.js.map +1 -0
- package/skinny/dist/ssr-902d1292.js +105 -0
- package/skinny/dist/ssr-902d1292.js.map +1 -0
- package/skinny/dist/ssr-a8081074.js +108 -0
- package/skinny/dist/ssr-a8081074.js.map +1 -0
- package/skinny/dist/ssr-d2fd94f2.js +31 -0
- package/skinny/dist/ssr-d2fd94f2.js.map +1 -0
- package/skinny/dist/states/helpers.d.ts +9 -0
- package/skinny/dist/states/index.d.ts +7 -7
- package/skinny/dist/stories/UseDollarState.stories.d.ts +41 -0
- package/skinny/dist/tslib.es6-00014098.js +148 -0
- package/skinny/dist/tslib.es6-00014098.js.map +1 -0
- package/skinny/dist/tslib.es6-73236e8e.js +141 -0
- package/skinny/dist/tslib.es6-73236e8e.js.map +1 -0
- package/README +0 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plume/menu-button/menu-trigger.tsx","../../../../src/plume/menu-button/DropdownMenu.tsx","../../../../src/plume/menu-button/menu-button.tsx"],"sourcesContent":["import { Placement } from \"@react-types/overlays\";\nimport * as React from \"react\";\nimport { useMenuTrigger as useAriaMenuTrigger } from \"@react-aria/menu\";\nimport { usePress } from \"@react-aria/interactions\";\nimport { MenuTriggerState } from \"@react-stately/menu\";\nimport { mergeProps } from \"../../react-utils\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport { getPlumeType, PLUME_STRICT_MODE } from \"../plume-utils\";\nimport { TriggeredOverlayContextValue } from \"../triggered-overlay/context\";\n\n/**\n * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,\n * useOverlayPosition, useOverlay, and usePress\n */\nexport function useMenuTrigger(\n opts: {\n isDisabled?: boolean;\n triggerRef: React.RefObject<HTMLElement>;\n placement?: Placement;\n menuMatchTriggerWidth?: boolean;\n menuWidth?: number;\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n },\n state: MenuTriggerState\n) {\n const {\n triggerRef,\n isDisabled,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n menu,\n } = opts;\n\n const { menuTriggerProps: triggerPressProps, menuProps } = useAriaMenuTrigger(\n {\n type: \"menu\",\n isDisabled,\n },\n state,\n triggerRef\n );\n\n const { pressProps: triggerProps } = usePress({\n ...triggerPressProps,\n isDisabled,\n });\n\n const makeMenu = () => {\n let realMenu = typeof menu === \"function\" ? menu() : menu;\n if (!realMenu) {\n return null;\n }\n if (getPlumeType(realMenu) !== \"menu\") {\n if (PLUME_STRICT_MODE) {\n throw new Error(`Must use an instance of the Menu component.`);\n }\n return null;\n }\n\n return React.cloneElement(realMenu, mergeProps(realMenu.props, menuProps));\n };\n\n const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n () => ({\n triggerRef,\n state,\n autoFocus: state.focusStrategy ?? true,\n placement,\n overlayMatchTriggerWidth: menuMatchTriggerWidth,\n overlayMinTriggerWidth: true,\n overlayWidth: menuWidth,\n }),\n [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n );\n\n return {\n triggerProps,\n makeMenu,\n triggerContext,\n };\n}\n","import { Placement } from \"@react-types/overlays\";\nimport * as React from \"react\";\nimport { useMenuTriggerState } from \"@react-stately/menu\";\nimport { mergeProps } from \"../../react-utils\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport { TriggeredOverlayContext } from \"../triggered-overlay/context\";\nimport { useMenuTrigger } from \"./menu-trigger\";\n\nexport interface DropdownMenuProps {\n /**\n * A ReactElement that takes in a `ref` as well as the usual mouse and\n * pointer events. The dropdown menu will be positioned relative to this\n * trigger.\n */\n children: React.ReactElement;\n\n /**\n * The menu to show; must be either a ReactElement of Menu type, or\n * a function that creates one if you prefer to delay creating it until\n * the menu has been triggered.\n */\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n\n /**\n * Where to place the menu relative to the trigger.\n */\n placement?: Placement;\n\n /**\n * Whether the menu is currently shown.\n */\n isOpen?: boolean;\n\n /**\n * Uncontrolled open state.\n */\n defaultOpen?: boolean;\n\n /**\n * Event handler fired when Menu's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function DropdownMenu(props: DropdownMenuProps) {\n const {\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n placement,\n menu,\n } = props;\n\n const triggerRef = React.useRef<HTMLElement>(null);\n\n const state = useMenuTriggerState({\n isOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip: true,\n });\n\n const { triggerProps, makeMenu, triggerContext } = useMenuTrigger(\n {\n triggerRef,\n placement,\n menu,\n },\n state\n );\n\n return (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {React.cloneElement(\n children,\n mergeProps(children.props, triggerProps, { ref: triggerRef })\n )}\n {state.isOpen && makeMenu()}\n </TriggeredOverlayContext.Provider>\n );\n}\n","import { Placement } from \"@react-types/overlays\";\nimport { DOMProps, FocusableProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useFocusable } from \"@react-aria/focus\";\nimport { useMenuTriggerState } from \"@react-stately/menu\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"../triggered-overlay/context\";\nimport { useMenuTrigger } from \"./menu-trigger\";\n\nexport interface BaseMenuButtonProps\n extends DOMProps,\n FocusableProps,\n StyleProps,\n Pick<React.ComponentProps<\"button\">, \"title\"> {\n /**\n * The menu to show; can either be a Menu instance, or a function that returns a Menu\n * instance if you want to defer creating the instance till when it's opened.\n */\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n\n /**\n * Whether the button is disabled\n */\n isDisabled?: boolean;\n\n /**\n * Whether the menu is currently shown.\n */\n isOpen?: boolean;\n\n /**\n * Uncontrolled open state\n */\n defaultOpen?: boolean;\n\n /**\n * Event handler fired when Menu's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n\n /**\n * Desired placement location of the Select dropdown\n */\n placement?: Placement;\n /**\n * If true, menu width will always match the trigger button width.\n * If false, then menu width will have min-width matching the\n * trigger button width.\n */\n menuMatchTriggerWidth?: boolean;\n\n /**\n * If set, menu width will be exactly this width, overriding\n * menuMatchTriggerWidth.\n */\n menuWidth?: number;\n}\n\nexport interface MenuButtonConfig<C extends AnyPlasmicClass> {\n isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n menuSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n trigger: keyof PlasmicClassOverrides<C>;\n}\n\ninterface MenuButtonState {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n}\n\nexport type MenuButtonRef = React.Ref<MenuButtonRefValue>;\n\nexport interface MenuButtonRefValue extends MenuButtonState {\n getRoot: () => HTMLElement | null;\n getTrigger: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\nexport function useMenuButton<\n P extends BaseMenuButtonProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: MenuButtonConfig<C>,\n outerRef: MenuButtonRef = null\n) {\n const {\n placement,\n isOpen,\n defaultOpen,\n onOpenChange,\n isDisabled,\n menu,\n autoFocus,\n menuMatchTriggerWidth,\n menuWidth,\n } = props;\n\n useEnsureSSRProvider();\n const rootRef = React.useRef<HTMLElement>(null);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n const state = useMenuTriggerState({\n isOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip: true,\n });\n\n const { triggerProps, makeMenu, triggerContext } = useMenuTrigger(\n {\n isDisabled,\n triggerRef,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n menu,\n },\n state\n );\n\n const { focusableProps: triggerFocusProps } = useFocusable(props, triggerRef);\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isOpenVariant, active: state.isOpen },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.menuSlot]: state.isOpen ? makeMenu() : undefined,\n };\n\n const overrides: Overrides = {\n [config.root]: {\n wrapChildren: (children) => (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {children}\n </TriggeredOverlayContext.Provider>\n ),\n props: {\n ref: rootRef,\n },\n },\n [config.trigger]: {\n props: mergeProps(\n triggerProps,\n triggerFocusProps,\n getStyleProps(props),\n pick(props, \"title\"),\n {\n ref: triggerRef,\n autoFocus,\n disabled: !!isDisabled,\n // Make sure this button is not interpreted as submit\n type: \"button\",\n }\n ),\n },\n };\n\n const plumeState: MenuButtonState = React.useMemo(\n () => ({\n open: () => state.open(),\n close: () => state.close(),\n isOpen: () => state.isOpen,\n }),\n [state]\n );\n\n React.useImperativeHandle(\n outerRef,\n () => ({\n getRoot: () => rootRef.current,\n getTrigger: () => triggerRef.current,\n focus: () => triggerRef.current && triggerRef.current.focus(),\n blur: () => triggerRef.current && triggerRef.current.blur(),\n open: plumeState.open,\n close: plumeState.close,\n isOpen: plumeState.isOpen,\n }),\n [rootRef, triggerRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n state: plumeState,\n };\n}\n"],"names":["useAriaMenuTrigger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plume/menu-button/menu-trigger.tsx","../../../../src/plume/menu-button/DropdownMenu.tsx","../../../../src/plume/menu-button/menu-button.tsx"],"sourcesContent":["import { Placement } from \"@react-types/overlays\";\nimport * as React from \"react\";\nimport { useMenuTrigger as useAriaMenuTrigger } from \"@react-aria/menu\";\nimport { usePress } from \"@react-aria/interactions\";\nimport { MenuTriggerState } from \"@react-stately/menu\";\nimport { mergeProps } from \"../../react-utils\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport { getPlumeType, PLUME_STRICT_MODE } from \"../plume-utils\";\nimport { TriggeredOverlayContextValue } from \"../triggered-overlay/context\";\n\n/**\n * A menu trigger hook that combines react-aria's useMenuTrigger, useAriaMenuTrigger,\n * useOverlayPosition, useOverlay, and usePress\n */\nexport function useMenuTrigger(\n opts: {\n isDisabled?: boolean;\n triggerRef: React.RefObject<HTMLElement>;\n placement?: Placement;\n menuMatchTriggerWidth?: boolean;\n menuWidth?: number;\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n },\n state: MenuTriggerState\n) {\n const {\n triggerRef,\n isDisabled,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n menu,\n } = opts;\n\n const { menuTriggerProps: triggerPressProps, menuProps } = useAriaMenuTrigger(\n {\n type: \"menu\",\n isDisabled,\n },\n state,\n triggerRef\n );\n\n const { pressProps: triggerProps } = usePress({\n ...triggerPressProps,\n isDisabled,\n });\n\n const makeMenu = () => {\n let realMenu = typeof menu === \"function\" ? menu() : menu;\n if (!realMenu) {\n return null;\n }\n if (getPlumeType(realMenu) !== \"menu\") {\n if (PLUME_STRICT_MODE) {\n throw new Error(`Must use an instance of the Menu component.`);\n }\n return null;\n }\n\n return React.cloneElement(realMenu, mergeProps(realMenu.props, menuProps));\n };\n\n const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n () => ({\n triggerRef,\n state,\n autoFocus: state.focusStrategy ?? true,\n placement,\n overlayMatchTriggerWidth: menuMatchTriggerWidth,\n overlayMinTriggerWidth: true,\n overlayWidth: menuWidth,\n }),\n [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n );\n\n return {\n triggerProps,\n makeMenu,\n triggerContext,\n };\n}\n","import { Placement } from \"@react-types/overlays\";\nimport * as React from \"react\";\nimport { useMenuTriggerState } from \"@react-stately/menu\";\nimport { mergeProps } from \"../../react-utils\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport { TriggeredOverlayContext } from \"../triggered-overlay/context\";\nimport { useMenuTrigger } from \"./menu-trigger\";\n\nexport interface DropdownMenuProps {\n /**\n * A ReactElement that takes in a `ref` as well as the usual mouse and\n * pointer events. The dropdown menu will be positioned relative to this\n * trigger.\n */\n children: React.ReactElement;\n\n /**\n * The menu to show; must be either a ReactElement of Menu type, or\n * a function that creates one if you prefer to delay creating it until\n * the menu has been triggered.\n */\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n\n /**\n * Where to place the menu relative to the trigger.\n */\n placement?: Placement;\n\n /**\n * Whether the menu is currently shown.\n */\n isOpen?: boolean;\n\n /**\n * Uncontrolled open state.\n */\n defaultOpen?: boolean;\n\n /**\n * Event handler fired when Menu's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function DropdownMenu(props: DropdownMenuProps) {\n const {\n isOpen,\n defaultOpen,\n onOpenChange,\n children,\n placement,\n menu,\n } = props;\n\n const triggerRef = React.useRef<HTMLElement>(null);\n\n const state = useMenuTriggerState({\n isOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip: true,\n });\n\n const { triggerProps, makeMenu, triggerContext } = useMenuTrigger(\n {\n triggerRef,\n placement,\n menu,\n },\n state\n );\n\n return (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {React.cloneElement(\n children,\n mergeProps(children.props, triggerProps, { ref: triggerRef })\n )}\n {state.isOpen && makeMenu()}\n </TriggeredOverlayContext.Provider>\n );\n}\n","import { Placement } from \"@react-types/overlays\";\nimport { DOMProps, FocusableProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useFocusable } from \"@react-aria/focus\";\nimport { useMenuTriggerState } from \"@react-stately/menu\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport { BaseMenuProps } from \"../menu/menu\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"../triggered-overlay/context\";\nimport { useMenuTrigger } from \"./menu-trigger\";\n\nexport interface BaseMenuButtonProps\n extends DOMProps,\n FocusableProps,\n StyleProps,\n Pick<React.ComponentProps<\"button\">, \"title\"> {\n /**\n * The menu to show; can either be a Menu instance, or a function that returns a Menu\n * instance if you want to defer creating the instance till when it's opened.\n */\n menu:\n | React.ReactElement<BaseMenuProps>\n | (() => React.ReactElement<BaseMenuProps>);\n\n /**\n * Whether the button is disabled\n */\n isDisabled?: boolean;\n\n /**\n * Whether the menu is currently shown.\n */\n isOpen?: boolean;\n\n /**\n * Uncontrolled open state\n */\n defaultOpen?: boolean;\n\n /**\n * Event handler fired when Menu's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n\n /**\n * Desired placement location of the Select dropdown\n */\n placement?: Placement;\n /**\n * If true, menu width will always match the trigger button width.\n * If false, then menu width will have min-width matching the\n * trigger button width.\n */\n menuMatchTriggerWidth?: boolean;\n\n /**\n * If set, menu width will be exactly this width, overriding\n * menuMatchTriggerWidth.\n */\n menuWidth?: number;\n}\n\nexport interface MenuButtonConfig<C extends AnyPlasmicClass> {\n isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n menuSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n trigger: keyof PlasmicClassOverrides<C>;\n}\n\ninterface MenuButtonState {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n}\n\nexport type MenuButtonRef = React.Ref<MenuButtonRefValue>;\n\nexport interface MenuButtonRefValue extends MenuButtonState {\n getRoot: () => HTMLElement | null;\n getTrigger: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\nexport function useMenuButton<\n P extends BaseMenuButtonProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: MenuButtonConfig<C>,\n outerRef: MenuButtonRef = null\n) {\n const {\n placement,\n isOpen,\n defaultOpen,\n onOpenChange,\n isDisabled,\n menu,\n autoFocus,\n menuMatchTriggerWidth,\n menuWidth,\n } = props;\n\n useEnsureSSRProvider();\n const rootRef = React.useRef<HTMLElement>(null);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n const state = useMenuTriggerState({\n isOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip: true,\n });\n\n const { triggerProps, makeMenu, triggerContext } = useMenuTrigger(\n {\n isDisabled,\n triggerRef,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n menu,\n },\n state\n );\n\n const { focusableProps: triggerFocusProps } = useFocusable(props, triggerRef);\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isOpenVariant, active: state.isOpen },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.menuSlot]: state.isOpen ? makeMenu() : undefined,\n };\n\n const overrides: Overrides = {\n [config.root]: {\n wrapChildren: (children) => (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {children}\n </TriggeredOverlayContext.Provider>\n ),\n props: {\n ref: rootRef,\n },\n },\n [config.trigger]: {\n props: mergeProps(\n triggerProps,\n triggerFocusProps,\n getStyleProps(props),\n pick(props, \"title\"),\n {\n ref: triggerRef,\n autoFocus,\n disabled: !!isDisabled,\n // Make sure this button is not interpreted as submit\n type: \"button\",\n }\n ),\n },\n };\n\n const plumeState: MenuButtonState = React.useMemo(\n () => ({\n open: () => state.open(),\n close: () => state.close(),\n isOpen: () => state.isOpen,\n }),\n [state]\n );\n\n React.useImperativeHandle(\n outerRef,\n () => ({\n getRoot: () => rootRef.current,\n getTrigger: () => triggerRef.current,\n focus: () => triggerRef.current && triggerRef.current.focus(),\n blur: () => triggerRef.current && triggerRef.current.blur(),\n open: plumeState.open,\n close: plumeState.close,\n isOpen: plumeState.isOpen,\n }),\n [rootRef, triggerRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n state: plumeState,\n };\n}\n"],"names":["useAriaMenuTrigger"],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ export declare function useMenuTrigger(opts: {
|
|
|
15
15
|
menuWidth?: number;
|
|
16
16
|
menu: React.ReactElement<BaseMenuProps> | (() => React.ReactElement<BaseMenuProps>);
|
|
17
17
|
}, state: MenuTriggerState): {
|
|
18
|
-
triggerProps:
|
|
18
|
+
triggerProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
|
|
19
19
|
makeMenu: () => React.ReactElement<BaseMenuProps, string | React.JSXElementConstructor<any>> | null;
|
|
20
20
|
triggerContext: TriggeredOverlayContextValue;
|
|
21
21
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { BaseSelectProps, SelectRef, SelectRefValue, useSelect, } from "./select";
|
|
2
2
|
export { BaseSelectOptionProps, SelectOptionRef, useSelectOption, } from "./select-option";
|
|
3
3
|
export { BaseSelectOptionGroupProps, useSelectOptionGroup, } from "./select-option-group";
|
|
4
|
+
export { SelectContext } from "./context";
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { a as __assign, p as pick, b as __spreadArray, _ as __rest } from '../../
|
|
1
|
+
import { a as __assign, p as pick, b as __spreadArray, c as __read, _ as __rest } from '../../common-182a0b0c.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useSelect as useSelect$1, HiddenSelect } from '@react-aria/select';
|
|
4
4
|
import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
|
|
5
5
|
import { usePress } from '@react-aria/interactions';
|
|
6
6
|
import { useSelectState } from '@react-stately/select';
|
|
7
|
-
import { m as mergeProps, d as mergeRefs } from '../../react-utils-
|
|
7
|
+
import { m as mergeProps, d as mergeRefs } from '../../react-utils-35cb2a4e.js';
|
|
8
8
|
import { a as useEnsureSSRProvider } from '../../ssr-fbf922f6.js';
|
|
9
|
-
import { g as getChildProp, r as renderCollectionNode, u as useDerivedItemsFromChildren, a as renderAsCollectionChild } from '../../collection-utils-
|
|
10
|
-
import { m as mergeVariantToggles, n as noOutline } from '../../plume-utils-
|
|
11
|
-
import { g as getStyleProps } from '../../props-utils-
|
|
9
|
+
import { g as getChildProp, r as renderCollectionNode, u as useDerivedItemsFromChildren, a as renderAsCollectionChild } from '../../collection-utils-57c273dc.js';
|
|
10
|
+
import { m as mergeVariantToggles, n as noOutline } from '../../plume-utils-623b91cc.js';
|
|
11
|
+
import { g as getStyleProps } from '../../props-utils-b2ad4997.js';
|
|
12
12
|
import { T as TriggeredOverlayContext } from '../../context-034b8d25.js';
|
|
13
13
|
import { useSeparator } from '@react-aria/separator';
|
|
14
14
|
import 'classnames';
|
|
@@ -91,7 +91,7 @@ function useSelect(plasmicClass, props, config, ref) {
|
|
|
91
91
|
var triggerContent = state.selectedItem
|
|
92
92
|
? selectedContent !== null && selectedContent !== void 0 ? selectedContent : getChildProp(state.selectedItem.value, "children")
|
|
93
93
|
: null;
|
|
94
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.placeholderVariant, active: !state.selectedItem }, { def: config.isDisabledVariant, active: isDisabled }));
|
|
94
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.placeholderVariant, active: !state.selectedItem }, { def: config.isDisabledVariant, active: isDisabled }));
|
|
95
95
|
var triggerContext = React.useMemo(function () { return ({
|
|
96
96
|
triggerRef: triggerRef,
|
|
97
97
|
state: state,
|
|
@@ -125,7 +125,7 @@ function useSelect(plasmicClass, props, config, ref) {
|
|
|
125
125
|
wrap: function (content) { return (React.createElement(ListBoxWrapper, { state: state, menuProps: menuProps }, content)); },
|
|
126
126
|
},
|
|
127
127
|
_a);
|
|
128
|
-
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (_b = {}, _b[config.triggerContentSlot] = triggerContent, _b[config.placeholderSlot] = placeholder, _b[config.optionsSlot] = (React.createElement(SelectContext.Provider, { value: state }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
|
|
128
|
+
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (_b = {}, _b[config.triggerContentSlot] = triggerContent, _b[config.placeholderSlot] = placeholder, _b[config.optionsSlot] = (React.createElement(SelectContext.Provider, { value: state }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
|
|
129
129
|
var plumeState = React.useMemo(function () { return ({
|
|
130
130
|
open: function () { return state.open(); },
|
|
131
131
|
close: function () { return state.close(); },
|
|
@@ -192,8 +192,8 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
|
|
|
192
192
|
shouldFocusOnHover: true,
|
|
193
193
|
isVirtualized: false,
|
|
194
194
|
}, state, rootRef), optionProps = _c.optionProps, labelProps = _c.labelProps;
|
|
195
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({ def: config.isSelectedVariant, active: isSelected }, { def: config.isDisabledVariant, active: isDisabled }, { def: config.isHighlightedVariant, active: isHighlighted }));
|
|
196
|
-
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (_a = {}, _a[config.labelSlot] = children, _a));
|
|
195
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({ def: config.isSelectedVariant, active: isSelected }, { def: config.isDisabledVariant, active: isDisabled }, { def: config.isHighlightedVariant, active: isHighlighted }));
|
|
196
|
+
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (_a = {}, _a[config.labelSlot] = children, _a));
|
|
197
197
|
var overrides = (_b = {},
|
|
198
198
|
_b[config.root] = {
|
|
199
199
|
props: mergeProps(optionProps, getStyleProps(props), {
|
|
@@ -232,11 +232,11 @@ function useSelectOptionGroup(plasmicClass, props, config) {
|
|
|
232
232
|
var separatorProps = useSeparator({
|
|
233
233
|
elementType: "li",
|
|
234
234
|
}).separatorProps;
|
|
235
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
|
|
235
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
|
|
236
236
|
def: config.isFirstVariant,
|
|
237
237
|
active: state.collection.getFirstKey() === node.key,
|
|
238
238
|
}));
|
|
239
|
-
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
|
|
239
|
+
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
|
|
240
240
|
return renderCollectionNode(childNode);
|
|
241
241
|
}), _a));
|
|
242
242
|
var overrides = (_b = {},
|
|
@@ -262,5 +262,5 @@ function useSelectOptionGroup(plasmicClass, props, config) {
|
|
|
262
262
|
};
|
|
263
263
|
}
|
|
264
264
|
|
|
265
|
-
export { useSelect, useSelectOption, useSelectOptionGroup };
|
|
265
|
+
export { SelectContext, useSelect, useSelectOption, useSelectOptionGroup };
|
|
266
266
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plume/select/context.tsx","../../../../src/plume/select/select.tsx","../../../../src/plume/select/select-option.tsx","../../../../src/plume/select/select-option-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ListState } from \"@react-stately/list\";\n\nexport const SelectContext = React.createContext<ListState<any> | undefined>(\n undefined\n);\n","import { Placement } from \"@react-types/overlays\";\nimport { AriaSelectProps } from \"@react-types/select\";\nimport {\n AriaLabelingProps,\n DOMProps,\n FocusableDOMProps,\n FocusableProps,\n InputBase,\n} from \"@react-types/shared\";\nimport * as React from \"react\";\nimport {\n HiddenSelect,\n useSelect as useAriaSelect,\n} from \"@react-aria/select\";\nimport {\n useListBox\n} from \"@react-aria/listbox\";\nimport {\n usePress\n} from \"@react-aria/interactions\";\nimport {\n SelectState as AriaSelectState,\n useSelectState as useAriaSelectState,\n} from \"@react-stately/select\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n getChildProp,\n renderAsCollectionChild,\n renderCollectionNode,\n useDerivedItemsFromChildren,\n} from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n noOutline,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport {\n TriggeredOverlayContext,\n TriggeredOverlayContextValue,\n} from \"../triggered-overlay/context\";\nimport { SelectContext } from \"./context\";\nimport { BaseSelectOptionProps } from \"./select-option\";\nimport { BaseSelectOptionGroupProps } from \"./select-option-group\";\n\nexport interface BaseSelectProps\n extends DOMProps,\n AriaLabelingProps,\n FocusableDOMProps,\n InputBase,\n FocusableProps,\n StyleProps {\n /**\n * Key of the currently selected value\n */\n value?: string | null;\n\n /**\n * Event handler fired when currently selected value changes\n */\n onChange?: (value: string | null) => void;\n\n /**\n * Uncontrolled key of the default selected value\n */\n defaultValue?: string;\n\n /**\n * List of Select.Options\n */\n children?: React.ReactNode;\n\n /**\n * Whether the Select is currently open\n */\n isOpen?: boolean;\n\n /**\n * Event handler fired when Select's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n\n /**\n * Uncontrolled default open state\n */\n defaultOpen?: boolean;\n\n /**\n * Form name of the select element\n */\n name?: string;\n\n /**\n * By default, Select will render whatever is in Select.Option as the\n * content in the trigger button when it is selected. You can override\n * what content by passing in `selectedContent` here.\n */\n selectedContent?: React.ReactNode;\n\n /**\n * Desired placement location of the Select dropdown\n */\n placement?: Placement;\n\n /**\n * If true, menu width will always match the trigger button width.\n * If false, then menu width will have min-width matching the\n * trigger button width.\n */\n menuMatchTriggerWidth?: boolean;\n\n /**\n * If set, menu width will be exactly this width, overriding\n * menuMatchTriggerWidth.\n */\n menuWidth?: number;\n\n /**\n * Content to display when nothing is selected.\n */\n placeholder?: React.ReactNode;\n}\n\nconst COLLECTION_OPTS = {\n itemPlumeType: \"select-option\",\n sectionPlumeType: \"select-option-group\",\n};\n\ntype AriaOptionType = React.ReactElement<BaseSelectOptionProps>;\ntype AriaGroupType = React.ReactElement<BaseSelectOptionGroupProps>;\ntype AriaSelectItemType = AriaOptionType | AriaGroupType;\n\n/**\n * Converts props in our BaseSelectProps into props that react-aria's\n * useSelect() understands.\n *\n * Because we're not exposing the Collections API (see ./index.tsx),\n * we are converting our own API into props for useSelect.\n *\n * Specifically, in Plume's API,\n * - `children` flattens to a list of ReactElements of type Select.Option\n * or Select.OptionGroup\n *\n * and we map it this way to the Collections API:\n * - `items` is a list of those flattened ReactElements from `children`!\n * - `children`, as a render prop, is supposed to take one of the `items`\n * and return a `Section` or `Item` element. We take an Option/OptionGroup\n * element, and use its props to render the appropriate `Section` or\n * `Item`. The \"trick\" here is that we then stuff the Option element as\n * `Item.children`, and the OptionGroup element as `Section.title`.\n *\n * When the Collections API does its work deriving `Node`s, the corresponding\n * Option/OptionGroup ReactElements will end up as `Node.rendered`.\n *\n * Then, when we are actually rendering the content of the dropdown, we\n * iterate through each collected `Node`, and renders\n * React.cloneElement(Node.rendered, {_node: node}). This \"secretly\" passes\n * the derived collection `Node` as a prop to Option and OptionGroup, and they\n * can make use of the derived `Node.key` etc in their rendering functions.\n *\n * One thing to note here is that we never \"rendered\" the Option/OptionGroup\n * React elements that the user constructed; instead, we just looked at the\n * props used on those elements, and passed those onto the Collections API.\n * What gets rendered to the screen is the cloned version of these elements\n * with the secret derived `_node` prop. That means Option and OptionGroup\n * render functions can assume that _node is passed in.\n */\nfunction useAriaSelectProps(props: BaseSelectProps) {\n let {\n value,\n defaultValue,\n children,\n onChange,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n ...rest\n } = props;\n\n const { items, disabledKeys } = useDerivedItemsFromChildren(children, {\n ...COLLECTION_OPTS,\n invalidChildError: `Can only use Select.Option and Select.OptionGroup as children to Select`,\n requireItemValue: true,\n });\n\n const collectionChildRenderer = React.useCallback(\n (child) => renderAsCollectionChild(child, COLLECTION_OPTS),\n []\n );\n\n const onSelectionChange = React.useMemo(() => {\n if (onChange) {\n return (val: string | null) =>\n onChange!(\n (val == null || val === \"null\" ? null : val) as string | null\n );\n } else {\n return undefined;\n }\n }, [onChange]);\n\n return {\n ariaProps: {\n ...rest,\n children: collectionChildRenderer,\n onSelectionChange,\n items,\n disabledKeys,\n defaultSelectedKey: defaultValue,\n\n // react-aria is picky about selectedKey; if it is null, it means \"no selection\";\n // if it is undefined, it means \"uncontrolled\". So here, if the user passes in a\n // value prop, then we make sure selectedKey will be null and not undefined, so\n // we don't accidentally enter uncontrolled mode.\n ...(\"value\" in props && { selectedKey: value ?? null }),\n } as AriaSelectProps<AriaSelectItemType>,\n };\n}\n\nexport type SelectRef = React.Ref<SelectRefValue>;\n\nexport interface SelectRefValue extends SelectState {\n getTrigger: () => HTMLElement | null;\n getRoot: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\ninterface SelectConfig<C extends AnyPlasmicClass> {\n placeholderVariant?: VariantDef<PlasmicClassVariants<C>>;\n isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n triggerContentSlot: keyof PlasmicClassArgs<C>;\n optionsSlot: keyof PlasmicClassArgs<C>;\n placeholderSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n trigger: keyof PlasmicClassOverrides<C>;\n overlay: keyof PlasmicClassOverrides<C>;\n optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\ninterface SelectState {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n getSelectedValue: () => string | null;\n setSelectedValue: (value: string | null) => void;\n}\n\nexport function useSelect<P extends BaseSelectProps, C extends AnyPlasmicClass>(\n plasmicClass: C,\n props: P,\n config: SelectConfig<C>,\n ref: React.Ref<SelectRefValue> = null\n) {\n useEnsureSSRProvider();\n const { ariaProps } = useAriaSelectProps(props);\n const { placement } = props;\n const state = useAriaSelectState<AriaSelectItemType>(ariaProps);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const rootRef = React.useRef<HTMLElement>(null);\n\n const {\n isDisabled,\n name,\n menuWidth,\n menuMatchTriggerWidth,\n autoFocus,\n placeholder,\n selectedContent,\n } = props;\n\n const { triggerProps: triggerPressProps, menuProps } = useAriaSelect(\n ariaProps,\n state,\n triggerRef\n );\n\n const { pressProps: triggerProps } = usePress({\n ...triggerPressProps,\n isDisabled,\n });\n\n const triggerContent = state.selectedItem\n ? selectedContent ?? getChildProp(state.selectedItem.value, \"children\")\n : null;\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isOpenVariant, active: state.isOpen },\n { def: config.placeholderVariant, active: !state.selectedItem },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n () => ({\n triggerRef,\n state,\n placement,\n overlayMatchTriggerWidth: menuMatchTriggerWidth,\n overlayMinTriggerWidth: true,\n overlayWidth: menuWidth,\n }),\n [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n );\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(getStyleProps(props), {\n ref: rootRef,\n }),\n wrapChildren: (children) => (\n <>\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n name={name}\n isDisabled={isDisabled}\n />\n {children}\n </>\n ),\n },\n [config.trigger]: {\n props: mergeProps(triggerProps, {\n ref: triggerRef,\n autoFocus,\n disabled: !!isDisabled,\n // Don't trigger form submission!\n type: \"button\",\n }),\n },\n [config.overlay]: {\n wrap: (content) => (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {content}\n </TriggeredOverlayContext.Provider>\n ),\n },\n [config.optionsContainer]: {\n wrap: (content) => (\n <ListBoxWrapper state={state} menuProps={menuProps}>\n {content as React.ReactElement}\n </ListBoxWrapper>\n ),\n },\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.triggerContentSlot]: triggerContent,\n [config.placeholderSlot]: placeholder,\n [config.optionsSlot]: (\n <SelectContext.Provider value={state}>\n {Array.from(state.collection).map((node) => renderCollectionNode(node))}\n </SelectContext.Provider>\n ),\n };\n\n const plumeState: SelectState = React.useMemo(\n () => ({\n open: () => state.open(),\n close: () => state.close(),\n isOpen: () => state.isOpen,\n getSelectedValue: () =>\n state.selectedKey ? `${state.selectedKey}` : null,\n setSelectedValue: (key) => state.setSelectedKey(key as any),\n }),\n [state]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n getRoot: () => rootRef.current,\n getTrigger: () => triggerRef.current,\n focus: () => triggerRef.current?.focus(),\n blur: () => triggerRef.current?.blur(),\n open: () => plumeState.open(),\n close: () => plumeState.close(),\n isOpen: () => plumeState.isOpen(),\n getSelectedValue: () => plumeState.getSelectedValue(),\n setSelectedValue: (key) => plumeState.setSelectedValue(key),\n }),\n [rootRef, triggerRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n state: plumeState,\n };\n}\n\nfunction ListBoxWrapper(props: {\n state: AriaSelectState<any>;\n menuProps: React.HTMLAttributes<Element>;\n children: React.ReactElement;\n}) {\n const { state, menuProps, children } = props;\n\n const ref = React.useRef<HTMLElement>(null);\n\n const { listBoxProps } = useListBox(\n {\n ...menuProps,\n isVirtualized: false,\n autoFocus: state.focusStrategy || true,\n disallowEmptySelection: true,\n },\n state,\n ref\n );\n\n return React.cloneElement(\n children,\n mergeProps(children.props, listBoxProps, { style: noOutline(), ref })\n );\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useOption as useAriaOption } from \"@react-aria/listbox\";\nimport { pick } from \"../../common\";\nimport { mergeProps, mergeRefs } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { ItemLikeProps } from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n noOutline,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n VariantDef,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionProps extends ItemLikeProps, StyleProps {}\n\ninterface SelectOptionConfig<C extends AnyPlasmicClass> {\n isSelectedVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n isHighlightedVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n labelSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n labelContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type SelectOptionRef = React.Ref<HTMLElement>;\n\nexport function useSelectOption<\n P extends BaseSelectOptionProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: SelectOptionConfig<C>,\n outerRef: SelectOptionRef = null\n) {\n const state = React.useContext(SelectContext);\n\n if (!state) {\n // If no context, then we are being incorrectly used. Complain or just don't\n // bother installing any hooks. It's okay to violate rules of hooks here\n // because this instance won't suddenly be used correctly in another render.\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a Select.Option within a Select component.\"\n );\n }\n\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { children } = props;\n\n const rootRef = React.useRef<HTMLElement>(null);\n const onRef = mergeRefs(rootRef, outerRef);\n\n // We pass in the Node secretly as an undocumented prop from <Select />\n const node = (props as any)._node as Node<\n React.ReactElement<BaseSelectOptionProps>\n >;\n\n const isSelected = state.selectionManager.isSelected(node.key);\n const isDisabled = state.disabledKeys.has(node.key);\n const isHighlighted =\n state.selectionManager.isFocused &&\n state.selectionManager.focusedKey === node.key;\n\n const { optionProps, labelProps } = useAriaOption(\n {\n isSelected,\n isDisabled,\n \"aria-label\": node && node[\"aria-label\"],\n key: node.key,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n isVirtualized: false,\n },\n state,\n rootRef\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isSelectedVariant, active: isSelected },\n { def: config.isDisabledVariant, active: isDisabled },\n { def: config.isHighlightedVariant, active: isHighlighted }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.labelSlot]: children,\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(optionProps, getStyleProps(props), {\n ref: onRef,\n style: noOutline(),\n }),\n },\n [config.labelContainer]: {\n props: labelProps,\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useListBoxSection } from \"@react-aria/listbox\";\nimport { useSeparator } from \"@react-aria/separator\";\nimport { pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport { renderCollectionNode, SectionLikeProps } from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionGroupProps\n extends SectionLikeProps,\n StyleProps {}\n\ninterface SelectOptionGroupConfig<C extends AnyPlasmicClass> {\n noTitleVariant: PlasmicClassVariants<C>;\n isFirstVariant: PlasmicClassVariants<C>;\n\n optionsSlot: keyof PlasmicClassArgs<C>;\n titleSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n separator: keyof PlasmicClassOverrides<C>;\n titleContainer: keyof PlasmicClassOverrides<C>;\n optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSelectOptionGroup<\n P extends BaseSelectOptionGroupProps,\n C extends AnyPlasmicClass\n>(plasmicClass: C, props: P, config: SelectOptionGroupConfig<C>) {\n const state = React.useContext(SelectContext);\n\n // `node` should exist if the OptionGroup was instantiated properly\n // within a Select\n const node = (props as any)._node as\n | Node<React.ReactElement<BaseSelectOptionGroupProps>>\n | undefined;\n\n if (!state || !node) {\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a Select.OptionGroup within a Select component.\"\n );\n }\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { headingProps, groupProps } = useListBoxSection({\n heading: props.title,\n \"aria-label\": props[\"aria-label\"],\n });\n\n const { separatorProps } = useSeparator({\n elementType: \"li\",\n });\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.noTitleVariant, active: !props.title },\n {\n def: config.isFirstVariant,\n active: state.collection.getFirstKey() === node.key,\n }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.titleSlot]: props.title,\n [config.optionsSlot]: Array.from(node.childNodes).map((childNode) =>\n renderCollectionNode(childNode)\n ),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: getStyleProps(props),\n },\n [config.separator]: {\n props: {\n ...separatorProps,\n },\n },\n [config.titleContainer]: {\n props: {\n role: \"presentation\",\n ...headingProps,\n },\n ...(!props.title && {\n render: () => null,\n }),\n },\n [config.optionsContainer]: {\n props: {\n ...groupProps,\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":["useAriaSelectState","useAriaSelect","useAriaOption"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plume/select/context.tsx","../../../../src/plume/select/select.tsx","../../../../src/plume/select/select-option.tsx","../../../../src/plume/select/select-option-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ListState } from \"@react-stately/list\";\n\nexport const SelectContext = React.createContext<ListState<any> | undefined>(\n undefined\n);\n","import { Placement } from \"@react-types/overlays\";\nimport { AriaSelectProps } from \"@react-types/select\";\nimport {\n AriaLabelingProps,\n DOMProps,\n FocusableDOMProps,\n FocusableProps,\n InputBase,\n} from \"@react-types/shared\";\nimport * as React from \"react\";\nimport {\n HiddenSelect,\n useSelect as useAriaSelect,\n} from \"@react-aria/select\";\nimport {\n useListBox\n} from \"@react-aria/listbox\";\nimport {\n usePress\n} from \"@react-aria/interactions\";\nimport {\n SelectState as AriaSelectState,\n useSelectState as useAriaSelectState,\n} from \"@react-stately/select\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n getChildProp,\n renderAsCollectionChild,\n renderCollectionNode,\n useDerivedItemsFromChildren,\n} from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n noOutline,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport {\n TriggeredOverlayContext,\n TriggeredOverlayContextValue,\n} from \"../triggered-overlay/context\";\nimport { SelectContext } from \"./context\";\nimport { BaseSelectOptionProps } from \"./select-option\";\nimport { BaseSelectOptionGroupProps } from \"./select-option-group\";\n\nexport interface BaseSelectProps\n extends DOMProps,\n AriaLabelingProps,\n FocusableDOMProps,\n InputBase,\n FocusableProps,\n StyleProps {\n /**\n * Key of the currently selected value\n */\n value?: string | null;\n\n /**\n * Event handler fired when currently selected value changes\n */\n onChange?: (value: string | null) => void;\n\n /**\n * Uncontrolled key of the default selected value\n */\n defaultValue?: string;\n\n /**\n * List of Select.Options\n */\n children?: React.ReactNode;\n\n /**\n * Whether the Select is currently open\n */\n isOpen?: boolean;\n\n /**\n * Event handler fired when Select's open state changes\n */\n onOpenChange?: (isOpen: boolean) => void;\n\n /**\n * Uncontrolled default open state\n */\n defaultOpen?: boolean;\n\n /**\n * Form name of the select element\n */\n name?: string;\n\n /**\n * By default, Select will render whatever is in Select.Option as the\n * content in the trigger button when it is selected. You can override\n * what content by passing in `selectedContent` here.\n */\n selectedContent?: React.ReactNode;\n\n /**\n * Desired placement location of the Select dropdown\n */\n placement?: Placement;\n\n /**\n * If true, menu width will always match the trigger button width.\n * If false, then menu width will have min-width matching the\n * trigger button width.\n */\n menuMatchTriggerWidth?: boolean;\n\n /**\n * If set, menu width will be exactly this width, overriding\n * menuMatchTriggerWidth.\n */\n menuWidth?: number;\n\n /**\n * Content to display when nothing is selected.\n */\n placeholder?: React.ReactNode;\n}\n\nconst COLLECTION_OPTS = {\n itemPlumeType: \"select-option\",\n sectionPlumeType: \"select-option-group\",\n};\n\ntype AriaOptionType = React.ReactElement<BaseSelectOptionProps>;\ntype AriaGroupType = React.ReactElement<BaseSelectOptionGroupProps>;\ntype AriaSelectItemType = AriaOptionType | AriaGroupType;\n\n/**\n * Converts props in our BaseSelectProps into props that react-aria's\n * useSelect() understands.\n *\n * Because we're not exposing the Collections API (see ./index.tsx),\n * we are converting our own API into props for useSelect.\n *\n * Specifically, in Plume's API,\n * - `children` flattens to a list of ReactElements of type Select.Option\n * or Select.OptionGroup\n *\n * and we map it this way to the Collections API:\n * - `items` is a list of those flattened ReactElements from `children`!\n * - `children`, as a render prop, is supposed to take one of the `items`\n * and return a `Section` or `Item` element. We take an Option/OptionGroup\n * element, and use its props to render the appropriate `Section` or\n * `Item`. The \"trick\" here is that we then stuff the Option element as\n * `Item.children`, and the OptionGroup element as `Section.title`.\n *\n * When the Collections API does its work deriving `Node`s, the corresponding\n * Option/OptionGroup ReactElements will end up as `Node.rendered`.\n *\n * Then, when we are actually rendering the content of the dropdown, we\n * iterate through each collected `Node`, and renders\n * React.cloneElement(Node.rendered, {_node: node}). This \"secretly\" passes\n * the derived collection `Node` as a prop to Option and OptionGroup, and they\n * can make use of the derived `Node.key` etc in their rendering functions.\n *\n * One thing to note here is that we never \"rendered\" the Option/OptionGroup\n * React elements that the user constructed; instead, we just looked at the\n * props used on those elements, and passed those onto the Collections API.\n * What gets rendered to the screen is the cloned version of these elements\n * with the secret derived `_node` prop. That means Option and OptionGroup\n * render functions can assume that _node is passed in.\n */\nfunction useAriaSelectProps(props: BaseSelectProps) {\n let {\n value,\n defaultValue,\n children,\n onChange,\n placement,\n menuMatchTriggerWidth,\n menuWidth,\n ...rest\n } = props;\n\n const { items, disabledKeys } = useDerivedItemsFromChildren(children, {\n ...COLLECTION_OPTS,\n invalidChildError: `Can only use Select.Option and Select.OptionGroup as children to Select`,\n requireItemValue: true,\n });\n\n const collectionChildRenderer = React.useCallback(\n (child) => renderAsCollectionChild(child, COLLECTION_OPTS),\n []\n );\n\n const onSelectionChange = React.useMemo(() => {\n if (onChange) {\n return (val: string | null) =>\n onChange!(\n (val == null || val === \"null\" ? null : val) as string | null\n );\n } else {\n return undefined;\n }\n }, [onChange]);\n\n return {\n ariaProps: {\n ...rest,\n children: collectionChildRenderer,\n onSelectionChange,\n items,\n disabledKeys,\n defaultSelectedKey: defaultValue,\n\n // react-aria is picky about selectedKey; if it is null, it means \"no selection\";\n // if it is undefined, it means \"uncontrolled\". So here, if the user passes in a\n // value prop, then we make sure selectedKey will be null and not undefined, so\n // we don't accidentally enter uncontrolled mode.\n ...(\"value\" in props && { selectedKey: value ?? null }),\n } as AriaSelectProps<AriaSelectItemType>,\n };\n}\n\nexport type SelectRef = React.Ref<SelectRefValue>;\n\nexport interface SelectRefValue extends SelectState {\n getTrigger: () => HTMLElement | null;\n getRoot: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\ninterface SelectConfig<C extends AnyPlasmicClass> {\n placeholderVariant?: VariantDef<PlasmicClassVariants<C>>;\n isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n triggerContentSlot: keyof PlasmicClassArgs<C>;\n optionsSlot: keyof PlasmicClassArgs<C>;\n placeholderSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n trigger: keyof PlasmicClassOverrides<C>;\n overlay: keyof PlasmicClassOverrides<C>;\n optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\ninterface SelectState {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n getSelectedValue: () => string | null;\n setSelectedValue: (value: string | null) => void;\n}\n\nexport function useSelect<P extends BaseSelectProps, C extends AnyPlasmicClass>(\n plasmicClass: C,\n props: P,\n config: SelectConfig<C>,\n ref: React.Ref<SelectRefValue> = null\n) {\n useEnsureSSRProvider();\n const { ariaProps } = useAriaSelectProps(props);\n const { placement } = props;\n const state = useAriaSelectState<AriaSelectItemType>(ariaProps);\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const rootRef = React.useRef<HTMLElement>(null);\n\n const {\n isDisabled,\n name,\n menuWidth,\n menuMatchTriggerWidth,\n autoFocus,\n placeholder,\n selectedContent,\n } = props;\n\n const { triggerProps: triggerPressProps, menuProps } = useAriaSelect(\n ariaProps,\n state,\n triggerRef\n );\n\n const { pressProps: triggerProps } = usePress({\n ...triggerPressProps,\n isDisabled,\n });\n\n const triggerContent = state.selectedItem\n ? selectedContent ?? getChildProp(state.selectedItem.value, \"children\")\n : null;\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isOpenVariant, active: state.isOpen },\n { def: config.placeholderVariant, active: !state.selectedItem },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n () => ({\n triggerRef,\n state,\n placement,\n overlayMatchTriggerWidth: menuMatchTriggerWidth,\n overlayMinTriggerWidth: true,\n overlayWidth: menuWidth,\n }),\n [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n );\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(getStyleProps(props), {\n ref: rootRef,\n }),\n wrapChildren: (children) => (\n <>\n <HiddenSelect\n state={state}\n triggerRef={triggerRef}\n name={name}\n isDisabled={isDisabled}\n />\n {children}\n </>\n ),\n },\n [config.trigger]: {\n props: mergeProps(triggerProps, {\n ref: triggerRef,\n autoFocus,\n disabled: !!isDisabled,\n // Don't trigger form submission!\n type: \"button\",\n }),\n },\n [config.overlay]: {\n wrap: (content) => (\n <TriggeredOverlayContext.Provider value={triggerContext}>\n {content}\n </TriggeredOverlayContext.Provider>\n ),\n },\n [config.optionsContainer]: {\n wrap: (content) => (\n <ListBoxWrapper state={state} menuProps={menuProps}>\n {content as React.ReactElement}\n </ListBoxWrapper>\n ),\n },\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.triggerContentSlot]: triggerContent,\n [config.placeholderSlot]: placeholder,\n [config.optionsSlot]: (\n <SelectContext.Provider value={state}>\n {Array.from(state.collection).map((node) => renderCollectionNode(node))}\n </SelectContext.Provider>\n ),\n };\n\n const plumeState: SelectState = React.useMemo(\n () => ({\n open: () => state.open(),\n close: () => state.close(),\n isOpen: () => state.isOpen,\n getSelectedValue: () =>\n state.selectedKey ? `${state.selectedKey}` : null,\n setSelectedValue: (key) => state.setSelectedKey(key as any),\n }),\n [state]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n getRoot: () => rootRef.current,\n getTrigger: () => triggerRef.current,\n focus: () => triggerRef.current?.focus(),\n blur: () => triggerRef.current?.blur(),\n open: () => plumeState.open(),\n close: () => plumeState.close(),\n isOpen: () => plumeState.isOpen(),\n getSelectedValue: () => plumeState.getSelectedValue(),\n setSelectedValue: (key) => plumeState.setSelectedValue(key),\n }),\n [rootRef, triggerRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n state: plumeState,\n };\n}\n\nfunction ListBoxWrapper(props: {\n state: AriaSelectState<any>;\n menuProps: React.HTMLAttributes<Element>;\n children: React.ReactElement;\n}) {\n const { state, menuProps, children } = props;\n\n const ref = React.useRef<HTMLElement>(null);\n\n const { listBoxProps } = useListBox(\n {\n ...menuProps,\n isVirtualized: false,\n autoFocus: state.focusStrategy || true,\n disallowEmptySelection: true,\n },\n state,\n ref\n );\n\n return React.cloneElement(\n children,\n mergeProps(children.props, listBoxProps, { style: noOutline(), ref })\n );\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useOption as useAriaOption } from \"@react-aria/listbox\";\nimport { pick } from \"../../common\";\nimport { mergeProps, mergeRefs } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { ItemLikeProps } from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n noOutline,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n VariantDef,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionProps extends ItemLikeProps, StyleProps {}\n\ninterface SelectOptionConfig<C extends AnyPlasmicClass> {\n isSelectedVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n isHighlightedVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n labelSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n labelContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type SelectOptionRef = React.Ref<HTMLElement>;\n\nexport function useSelectOption<\n P extends BaseSelectOptionProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: SelectOptionConfig<C>,\n outerRef: SelectOptionRef = null\n) {\n const state = React.useContext(SelectContext);\n\n if (!state) {\n // If no context, then we are being incorrectly used. Complain or just don't\n // bother installing any hooks. It's okay to violate rules of hooks here\n // because this instance won't suddenly be used correctly in another render.\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a Select.Option within a Select component.\"\n );\n }\n\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { children } = props;\n\n const rootRef = React.useRef<HTMLElement>(null);\n const onRef = mergeRefs(rootRef, outerRef);\n\n // We pass in the Node secretly as an undocumented prop from <Select />\n const node = (props as any)._node as Node<\n React.ReactElement<BaseSelectOptionProps>\n >;\n\n const isSelected = state.selectionManager.isSelected(node.key);\n const isDisabled = state.disabledKeys.has(node.key);\n const isHighlighted =\n state.selectionManager.isFocused &&\n state.selectionManager.focusedKey === node.key;\n\n const { optionProps, labelProps } = useAriaOption(\n {\n isSelected,\n isDisabled,\n \"aria-label\": node && node[\"aria-label\"],\n key: node.key,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n isVirtualized: false,\n },\n state,\n rootRef\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isSelectedVariant, active: isSelected },\n { def: config.isDisabledVariant, active: isDisabled },\n { def: config.isHighlightedVariant, active: isHighlighted }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.labelSlot]: children,\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(optionProps, getStyleProps(props), {\n ref: onRef,\n style: noOutline(),\n }),\n },\n [config.labelContainer]: {\n props: labelProps,\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useListBoxSection } from \"@react-aria/listbox\";\nimport { useSeparator } from \"@react-aria/separator\";\nimport { pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport { renderCollectionNode, SectionLikeProps } from \"../collection-utils\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionGroupProps\n extends SectionLikeProps,\n StyleProps {}\n\ninterface SelectOptionGroupConfig<C extends AnyPlasmicClass> {\n noTitleVariant: PlasmicClassVariants<C>;\n isFirstVariant: PlasmicClassVariants<C>;\n\n optionsSlot: keyof PlasmicClassArgs<C>;\n titleSlot: keyof PlasmicClassArgs<C>;\n\n root: keyof PlasmicClassOverrides<C>;\n separator: keyof PlasmicClassOverrides<C>;\n titleContainer: keyof PlasmicClassOverrides<C>;\n optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSelectOptionGroup<\n P extends BaseSelectOptionGroupProps,\n C extends AnyPlasmicClass\n>(plasmicClass: C, props: P, config: SelectOptionGroupConfig<C>) {\n const state = React.useContext(SelectContext);\n\n // `node` should exist if the OptionGroup was instantiated properly\n // within a Select\n const node = (props as any)._node as\n | Node<React.ReactElement<BaseSelectOptionGroupProps>>\n | undefined;\n\n if (!state || !node) {\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a Select.OptionGroup within a Select component.\"\n );\n }\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { headingProps, groupProps } = useListBoxSection({\n heading: props.title,\n \"aria-label\": props[\"aria-label\"],\n });\n\n const { separatorProps } = useSeparator({\n elementType: \"li\",\n });\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.noTitleVariant, active: !props.title },\n {\n def: config.isFirstVariant,\n active: state.collection.getFirstKey() === node.key,\n }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.titleSlot]: props.title,\n [config.optionsSlot]: Array.from(node.childNodes).map((childNode) =>\n renderCollectionNode(childNode)\n ),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: getStyleProps(props),\n },\n [config.separator]: {\n props: {\n ...separatorProps,\n },\n },\n [config.titleContainer]: {\n props: {\n role: \"presentation\",\n ...headingProps,\n },\n ...(!props.title && {\n render: () => null,\n }),\n },\n [config.optionsContainer]: {\n props: {\n ...groupProps,\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":["useAriaSelectState","useAriaSelect","useAriaOption"],"mappings":";;;;;;;;;;;;;;;;;IAGa,aAAa,GAAG,KAAK,CAAC,aAAa,CAC9C,SAAS;;AC8HX,IAAM,eAAe,GAAG;IACtB,aAAa,EAAE,eAAe;IAC9B,gBAAgB,EAAE,qBAAqB;CACxC,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,kBAAkB,CAAC,KAAsB;QAE9C,KAAK,GAQH,KAAK,MARF,EACL,YAAY,GAOV,KAAK,aAPK,EACZ,QAAQ,GAMN,KAAK,SANC,EACR,QAAQ,GAKN,KAAK,SALC,EAKN,KAAK,UAJE,EAIP,KAAK,sBAHc,EAGnB,KAAK,UAFE,MACN,IAAI,UACL,KAAK,EATL,oGASH,EAAS;IAEJ,IAAA,KAA0B,2BAA2B,CAAC,QAAQ,wBAC/D,eAAe,KAClB,iBAAiB,EAAE,yEAAyE,EAC5F,gBAAgB,EAAE,IAAI,IACtB,EAJM,KAAK,WAAA,EAAE,YAAY,kBAIzB,CAAC;IAEH,IAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAC/C,UAAC,KAAK,IAAK,OAAA,uBAAuB,CAAC,KAAK,EAAE,eAAe,CAAC,GAAA,EAC1D,EAAE,CACH,CAAC;IAEF,IAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC;QACtC,IAAI,QAAQ,EAAE;YACZ,OAAO,UAAC,GAAkB;gBACxB,OAAA,QAAS,EACN,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,MAAM,GAAG,IAAI,GAAG,GAAG,EAC5C;aAAA,CAAC;SACL;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;KACF,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO;QACL,SAAS,EAAE,+BACN,IAAI,KACP,QAAQ,EAAE,uBAAuB,EACjC,iBAAiB,mBAAA;YACjB,KAAK,OAAA;YACL,YAAY,cAAA,EACZ,kBAAkB,EAAE,YAAY,MAM5B,OAAO,IAAI,KAAK,IAAI,EAAE,WAAW,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,EAAE,EAChB;KACzC,CAAC;AACJ,CAAC;SAkCe,SAAS,CACvB,YAAe,EACf,KAAQ,EACR,MAAuB,EACvB,GAAqC;;IAArC,oBAAA,EAAA,UAAqC;IAErC,oBAAoB,EAAE,CAAC;IACf,IAAA,SAAS,GAAK,kBAAkB,CAAC,KAAK,CAAC,UAA9B,CAA+B;IACxC,IAAA,SAAS,GAAK,KAAK,UAAV,CAAW;IAC5B,IAAM,KAAK,GAAGA,cAAkB,CAAqB,SAAS,CAAC,CAAC;IAChE,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACzD,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAG9C,IAAA,UAAU,GAOR,KAAK,WAPG,EACV,IAAI,GAMF,KAAK,KANH,EACJ,SAAS,GAKP,KAAK,UALE,EACT,qBAAqB,GAInB,KAAK,sBAJc,EACrB,SAAS,GAGP,KAAK,UAHE,EACT,WAAW,GAET,KAAK,YAFI,EACX,eAAe,GACb,KAAK,gBADQ,CACP;IAEJ,IAAA,KAAiDC,WAAa,CAClE,SAAS,EACT,KAAK,EACL,UAAU,CACX,EAJqB,iBAAiB,kBAAA,EAAE,SAAS,eAIjD,CAAC;IAEM,IAAY,YAAY,GAAK,QAAQ,uBACxC,iBAAiB,KACpB,UAAU,YAAA,IACV,WAH8B,CAG7B;IAEH,IAAM,cAAc,GAAG,KAAK,CAAC,YAAY;UACrC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC;UACrE,IAAI,CAAC;IAET,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,MAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EACnD,EAAE,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,EAC/D,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,CACtD,CACF,CAAC;IAEF,IAAM,cAAc,GAAiC,KAAK,CAAC,OAAO,CAChE,cAAM,QAAC;QACL,UAAU,YAAA;QACV,KAAK,OAAA;QACL,SAAS,WAAA;QACT,wBAAwB,EAAE,qBAAqB;QAC/C,sBAAsB,EAAE,IAAI;QAC5B,YAAY,EAAE,SAAS;KACxB,IAAC,EACF,CAAC,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,CAAC,CACjE,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACtC,GAAG,EAAE,OAAO;aACb,CAAC;YACF,YAAY,EAAE,UAAC,QAAQ,IAAK,QAC1B;gBACE,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,GACtB;gBACD,QAAQ,CACR,IACJ;SACF;QACD,GAAC,MAAM,CAAC,OAAO,IAAG;YAChB,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE;gBAC9B,GAAG,EAAE,UAAU;gBACf,SAAS,WAAA;gBACT,QAAQ,EAAE,CAAC,CAAC,UAAU;;gBAEtB,IAAI,EAAE,QAAQ;aACf,CAAC;SACH;QACD,GAAC,MAAM,CAAC,OAAO,IAAG;YAChB,IAAI,EAAE,UAAC,OAAO,IAAK,QACjB,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IACpD,OAAO,CACyB,IACpC;SACF;QACD,GAAC,MAAM,CAAC,gBAAgB,IAAG;YACzB,IAAI,EAAE,UAAC,OAAO,IAAK,QACjB,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IAC/C,OAA6B,CACf,IAClB;SACF;WACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,mBAC9C,MAAM,CAAC,kBAAkB,IAAG,cAAc,KAC1C,MAAM,CAAC,eAAe,IAAG,WAAW,KACpC,MAAM,CAAC,WAAW,KACjB,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,oBAAoB,CAAC,IAAI,CAAC,GAAA,CAAC,CAChD,CAC1B,MACF,CAAC;IAEF,IAAM,UAAU,GAAgB,KAAK,CAAC,OAAO,CAC3C,cAAM,QAAC;QACL,IAAI,EAAE,cAAM,OAAA,KAAK,CAAC,IAAI,EAAE,GAAA;QACxB,KAAK,EAAE,cAAM,OAAA,KAAK,CAAC,KAAK,EAAE,GAAA;QAC1B,MAAM,EAAE,cAAM,OAAA,KAAK,CAAC,MAAM,GAAA;QAC1B,gBAAgB,EAAE;YAChB,OAAA,KAAK,CAAC,WAAW,GAAG,KAAG,KAAK,CAAC,WAAa,GAAG,IAAI;SAAA;QACnD,gBAAgB,EAAE,UAAC,GAAG,IAAK,OAAA,KAAK,CAAC,cAAc,CAAC,GAAU,CAAC,GAAA;KAC5D,IAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,cAAM,QAAC;QACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,OAAO,GAAA;QAC9B,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,OAAO,GAAA;QACpC,KAAK,EAAE,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QACxC,IAAI,EAAE,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA,EAAA;QACtC,IAAI,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,EAAE,GAAA;QAC7B,KAAK,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,EAAE,GAAA;QAC/B,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,MAAM,EAAE,GAAA;QACjC,gBAAgB,EAAE,cAAM,OAAA,UAAU,CAAC,gBAAgB,EAAE,GAAA;QACrD,gBAAgB,EAAE,UAAC,GAAG,IAAK,OAAA,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAA;KAC5D,IAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAClC,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;QACD,KAAK,EAAE,UAAU;KAClB,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,KAIvB;IACS,IAAA,KAAK,GAA0B,KAAK,MAA/B,EAAE,SAAS,GAAe,KAAK,UAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE7C,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAEpC,IAAA,YAAY,GAAK,UAAU,uBAE5B,SAAS,KACZ,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,KAAK,CAAC,aAAa,IAAI,IAAI,EACtC,sBAAsB,EAAE,IAAI,KAE9B,KAAK,EACL,GAAG,CACJ,aATmB,CASlB;IAEF,OAAO,KAAK,CAAC,YAAY,CACvB,QAAQ,EACR,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,GAAG,KAAA,EAAE,CAAC,CACtE,CAAC;AACJ;;SCzYgB,eAAe,CAI7B,YAAe,EACf,KAAQ,EACR,MAA6B,EAC7B,QAAgC;;IAAhC,yBAAA,EAAA,eAAgC;IAEhC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,CAAC,KAAK,EAAE;;;;QAIa;YACrB,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;SACH;KAGF;IAEO,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,KAAK,GAAG,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;;IAG3C,IAAM,IAAI,GAAI,KAAa,CAAC,KAE3B,CAAC;IAEF,IAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/D,IAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpD,IAAM,aAAa,GACjB,KAAK,CAAC,gBAAgB,CAAC,SAAS;QAChC,KAAK,CAAC,gBAAgB,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC;IAE3C,IAAA,KAA8BC,SAAa,CAC/C;QACE,UAAU,YAAA;QACV,UAAU,YAAA;QACV,YAAY,EAAE,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC;QACxC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,qBAAqB,EAAE,IAAI;QAC3B,kBAAkB,EAAE,IAAI;QACxB,aAAa,EAAE,KAAK;KACrB,EACD,KAAK,EACL,OAAO,CACR,EAZO,WAAW,iBAAA,EAAE,UAAU,gBAY9B,CAAC;IAEF,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,MAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,EACrD,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,EACrD,EAAE,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,EAAE,aAAa,EAAE,CAC5D,CACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,mBAC9C,MAAM,CAAC,SAAS,IAAG,QAAQ,MAC7B,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;gBACnD,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,SAAS,EAAE;aACnB,CAAC;SACH;QACD,GAAC,MAAM,CAAC,cAAc,IAAG;YACvB,KAAK,EAAE,UAAU;SAClB;WACF,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;KACF,CAAC;AACJ;;SCvFgB,oBAAoB,CAGlC,YAAe,EAAE,KAAQ,EAAE,MAAkC;;IAC7D,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;;;IAI9C,IAAM,IAAI,GAAI,KAAa,CAAC,KAEf,CAAC;IAEd,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;QACI;YACrB,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;SACH;KAEF;IAEK,IAAA,KAA+B,iBAAiB,CAAC;QACrD,OAAO,EAAE,KAAK,CAAC,KAAK;QACpB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;KAClC,CAAC,EAHM,YAAY,kBAAA,EAAE,UAAU,gBAG9B,CAAC;IAEK,IAAA,cAAc,GAAK,YAAY,CAAC;QACtC,WAAW,EAAE,IAAI;KAClB,CAAC,eAFoB,CAEnB;IAEH,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,MAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,EACpD;QACE,GAAG,EAAE,MAAM,CAAC,cAAc;QAC1B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,GAAG;KACpD,CACF,CACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,mBAC9C,MAAM,CAAC,SAAS,IAAG,KAAK,CAAC,KAAK,KAC9B,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,SAAS;QAC9D,OAAA,oBAAoB,CAAC,SAAS,CAAC;KAAA,CAChC,MACF,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;SAC5B;QACD,GAAC,MAAM,CAAC,SAAS,IAAG;YAClB,KAAK,eACA,cAAc,CAClB;SACF;QACD,GAAC,MAAM,CAAC,cAAc,eACpB,KAAK,aACH,IAAI,EAAE,cAAc,IACjB,YAAY,MAEb,CAAC,KAAK,CAAC,KAAK,IAAI;YAClB,MAAM,EAAE,cAAM,OAAA,IAAI,GAAA;SACnB,EACF;QACD,GAAC,MAAM,CAAC,gBAAgB,IAAG;YACzB,KAAK,eACA,UAAU,CACd;SACF;WACF,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;KACF,CAAC;AACJ;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { a as __assign, p as pick, b as __spreadArray } from '../../
|
|
1
|
+
import { a as __assign, p as pick, b as __spreadArray, c as __read } from '../../common-182a0b0c.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useSwitch as useSwitch$1 } from '@react-aria/switch';
|
|
4
4
|
import { VisuallyHidden } from '@react-aria/visually-hidden';
|
|
5
5
|
import { useToggleState } from '@react-stately/toggle';
|
|
6
|
-
import { m as mergeProps } from '../../react-utils-
|
|
6
|
+
import { m as mergeProps } from '../../react-utils-35cb2a4e.js';
|
|
7
7
|
import { a as useEnsureSSRProvider } from '../../ssr-fbf922f6.js';
|
|
8
|
-
import { m as mergeVariantToggles } from '../../plume-utils-
|
|
9
|
-
import { g as getStyleProps } from '../../props-utils-
|
|
8
|
+
import { m as mergeVariantToggles } from '../../plume-utils-623b91cc.js';
|
|
9
|
+
import { g as getStyleProps } from '../../props-utils-b2ad4997.js';
|
|
10
10
|
import 'classnames';
|
|
11
11
|
import '@react-aria/ssr';
|
|
12
12
|
|
|
@@ -26,7 +26,7 @@ function useSwitch(plasmicClass, props, config, ref) {
|
|
|
26
26
|
var ariaProps = asAriaSwitchProps(props);
|
|
27
27
|
var state = useToggleState(ariaProps);
|
|
28
28
|
var inputProps = useSwitch$1(ariaProps, state, inputRef).inputProps;
|
|
29
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({
|
|
29
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({
|
|
30
30
|
def: config.isDisabledVariant,
|
|
31
31
|
active: isDisabled,
|
|
32
32
|
}, {
|
|
@@ -48,7 +48,7 @@ function useSwitch(plasmicClass, props, config, ref) {
|
|
|
48
48
|
children)); },
|
|
49
49
|
},
|
|
50
50
|
_a);
|
|
51
|
-
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
|
|
51
|
+
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
|
|
52
52
|
var plumeState = React.useMemo(function () { return ({
|
|
53
53
|
setChecked: function (checked) { return state.setSelected(checked); },
|
|
54
54
|
}); }, [state]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plume/switch/index.tsx"],"sourcesContent":["import { AriaSwitchProps } from \"@react-types/switch\";\nimport * as React from \"react\";\nimport { useSwitch as useAriaSwitch } from \"@react-aria/switch\";\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\nimport { useToggleState } from \"@react-stately/toggle\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\n\nexport type SwitchRef = React.Ref<SwitchRefValue>;\nexport interface SwitchRefValue extends SwitchState {\n getRoot: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\ninterface SwitchState {\n setChecked: (checked: boolean) => void;\n}\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, \"isSelected\" | \"defaultSelected\">,\n StyleProps {\n /**\n * Whether the Switch is checked or not; controlled\n */\n isChecked?: boolean;\n\n /**\n * Whether the Switch is checked by default; uncontrolled\n */\n defaultChecked?: boolean;\n}\n\nfunction asAriaSwitchProps(props: SwitchProps) {\n const ariaProps = {\n ...props,\n isSelected: props.isChecked,\n defaultSelected: props.defaultChecked,\n };\n delete ariaProps[\"isChecked\"];\n delete ariaProps[\"defaultChecked\"];\n return ariaProps;\n}\n\ninterface SwitchConfig<C extends AnyPlasmicClass> {\n isCheckedVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n noLabelVariant?: VariantDef<PlasmicClassVariants<C>>;\n labelSlot?: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSwitch<P extends SwitchProps, C extends AnyPlasmicClass>(\n plasmicClass: C,\n props: P,\n config: SwitchConfig<C>,\n ref: SwitchRef = null\n) {\n const { children, isDisabled } = props;\n useEnsureSSRProvider();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLElement>(null);\n const ariaProps = asAriaSwitchProps(props);\n const state = useToggleState(ariaProps);\n const { inputProps } = useAriaSwitch(ariaProps, state, inputRef);\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n {\n def: config.isDisabledVariant,\n active: isDisabled,\n },\n {\n def: config.isCheckedVariant,\n active: state.isSelected,\n },\n {\n def: config.noLabelVariant,\n active: !children,\n }\n ),\n };\n const overrides: Overrides = {\n [config.root]: {\n as: \"label\",\n props: mergeProps(getStyleProps(props), {\n ref: rootRef,\n }),\n wrapChildren: (children) => (\n <>\n <VisuallyHidden isFocusable>\n <input {...inputProps} ref={inputRef} />\n </VisuallyHidden>\n {children}\n </>\n ),\n },\n };\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n ...(config.labelSlot ? { [config.labelSlot]: children } : {}),\n };\n\n const plumeState: SwitchState = React.useMemo(\n () => ({\n setChecked: (checked: boolean) => state.setSelected(checked),\n }),\n [state]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n getRoot: () => rootRef.current,\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n setChecked: (checked) => plumeState.setChecked(checked),\n }),\n [rootRef, inputRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n args: args as PlasmicClassArgs<C>,\n },\n state: plumeState,\n };\n}\n"],"names":["useAriaSwitch"],"mappings":";;;;;;;;;;;;AA4CA,SAAS,iBAAiB,CAAC,KAAkB;IAC3C,IAAM,SAAS,yBACV,KAAK,KACR,UAAU,EAAE,KAAK,CAAC,SAAS,EAC3B,eAAe,EAAE,KAAK,CAAC,cAAc,GACtC,CAAC;IACF,OAAO,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,OAAO,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnC,OAAO,SAAS,CAAC;AACnB,CAAC;SAUe,SAAS,CACvB,YAAe,EACf,KAAQ,EACR,MAAuB,EACvB,GAAqB;;IAArB,oBAAA,EAAA,UAAqB;IAEb,IAAA,QAAQ,GAAiB,KAAK,SAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IACvC,oBAAoB,EAAE,CAAC;IACvB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAChC,IAAA,UAAU,GAAKA,WAAa,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,WAA9C,CAA+C;IACjE,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plume/switch/index.tsx"],"sourcesContent":["import { AriaSwitchProps } from \"@react-types/switch\";\nimport * as React from \"react\";\nimport { useSwitch as useAriaSwitch } from \"@react-aria/switch\";\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\nimport { useToggleState } from \"@react-stately/toggle\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\n\nexport type SwitchRef = React.Ref<SwitchRefValue>;\nexport interface SwitchRefValue extends SwitchState {\n getRoot: () => HTMLElement | null;\n focus: () => void;\n blur: () => void;\n}\n\ninterface SwitchState {\n setChecked: (checked: boolean) => void;\n}\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, \"isSelected\" | \"defaultSelected\">,\n StyleProps {\n /**\n * Whether the Switch is checked or not; controlled\n */\n isChecked?: boolean;\n\n /**\n * Whether the Switch is checked by default; uncontrolled\n */\n defaultChecked?: boolean;\n}\n\nfunction asAriaSwitchProps(props: SwitchProps) {\n const ariaProps = {\n ...props,\n isSelected: props.isChecked,\n defaultSelected: props.defaultChecked,\n };\n delete ariaProps[\"isChecked\"];\n delete ariaProps[\"defaultChecked\"];\n return ariaProps;\n}\n\ninterface SwitchConfig<C extends AnyPlasmicClass> {\n isCheckedVariant: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n noLabelVariant?: VariantDef<PlasmicClassVariants<C>>;\n labelSlot?: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSwitch<P extends SwitchProps, C extends AnyPlasmicClass>(\n plasmicClass: C,\n props: P,\n config: SwitchConfig<C>,\n ref: SwitchRef = null\n) {\n const { children, isDisabled } = props;\n useEnsureSSRProvider();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const rootRef = React.useRef<HTMLElement>(null);\n const ariaProps = asAriaSwitchProps(props);\n const state = useToggleState(ariaProps);\n const { inputProps } = useAriaSwitch(ariaProps, state, inputRef);\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n {\n def: config.isDisabledVariant,\n active: isDisabled,\n },\n {\n def: config.isCheckedVariant,\n active: state.isSelected,\n },\n {\n def: config.noLabelVariant,\n active: !children,\n }\n ),\n };\n const overrides: Overrides = {\n [config.root]: {\n as: \"label\",\n props: mergeProps(getStyleProps(props), {\n ref: rootRef,\n }),\n wrapChildren: (children) => (\n <>\n <VisuallyHidden isFocusable>\n <input {...inputProps} ref={inputRef} />\n </VisuallyHidden>\n {children}\n </>\n ),\n },\n };\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n ...(config.labelSlot ? { [config.labelSlot]: children } : {}),\n };\n\n const plumeState: SwitchState = React.useMemo(\n () => ({\n setChecked: (checked: boolean) => state.setSelected(checked),\n }),\n [state]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n getRoot: () => rootRef.current,\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n setChecked: (checked) => plumeState.setChecked(checked),\n }),\n [rootRef, inputRef, plumeState]\n );\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n args: args as PlasmicClassArgs<C>,\n },\n state: plumeState,\n };\n}\n"],"names":["useAriaSwitch"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign, p as pick, b as __spreadArray, o as omit } from '../../
|
|
1
|
+
import { _ as __rest, a as __assign, p as pick, b as __spreadArray, c as __read, o as omit } from '../../common-182a0b0c.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { m as mergeVariantToggles } from '../../plume-utils-
|
|
3
|
+
import { m as mergeVariantToggles } from '../../plume-utils-623b91cc.js';
|
|
4
4
|
|
|
5
5
|
function useTextInput(plasmicClass, props, config, ref) {
|
|
6
6
|
var _a, _b, _c;
|
|
@@ -24,8 +24,8 @@ function useTextInput(plasmicClass, props, config, ref) {
|
|
|
24
24
|
return inputRef.current;
|
|
25
25
|
},
|
|
26
26
|
}); }, [rootRef, inputRef]);
|
|
27
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({ def: config.showStartIconVariant, active: showStartIcon }, { def: config.showEndIconVariant, active: showEndIcon }, { def: config.isDisabledVariant, active: isDisabled }));
|
|
28
|
-
var args = __assign(__assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (config.startIconSlot && (_a = {}, _a[config.startIconSlot] = startIcon, _a))), (config.endIconSlot && (_b = {}, _b[config.endIconSlot] = endIcon, _b)));
|
|
27
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({ def: config.showStartIconVariant, active: showStartIcon }, { def: config.showEndIconVariant, active: showEndIcon }, { def: config.isDisabledVariant, active: isDisabled }));
|
|
28
|
+
var args = __assign(__assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (config.startIconSlot && (_a = {}, _a[config.startIconSlot] = startIcon, _a))), (config.endIconSlot && (_b = {}, _b[config.endIconSlot] = endIcon, _b)));
|
|
29
29
|
var overrides = (_c = {},
|
|
30
30
|
_c[config.root] = {
|
|
31
31
|
props: {
|
|
@@ -35,7 +35,7 @@ function useTextInput(plasmicClass, props, config, ref) {
|
|
|
35
35
|
},
|
|
36
36
|
},
|
|
37
37
|
_c[config.input] = {
|
|
38
|
-
props: __assign(__assign({}, omit.apply(void 0, __spreadArray(__spreadArray([rest], plasmicClass.internalArgProps.filter(function (prop) { return prop !== "required"; })), plasmicClass.internalVariantProps))), { disabled: isDisabled, ref: inputRef, className: inputClassName, style: inputStyle }),
|
|
38
|
+
props: __assign(__assign({}, omit.apply(void 0, __spreadArray(__spreadArray([rest], __read(plasmicClass.internalArgProps.filter(function (prop) { return prop !== "required"; }))), __read(plasmicClass.internalVariantProps)))), { disabled: isDisabled, ref: inputRef, className: inputClassName, style: inputStyle }),
|
|
39
39
|
},
|
|
40
40
|
_c);
|
|
41
41
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plume/text-input/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { omit, pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\n\nexport interface BaseTextInputProps\n extends Omit<React.ComponentProps<\"input\">, \"type\" | \"disabled\"> {\n showStartIcon?: boolean;\n showEndIcon?: boolean;\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n isDisabled?: boolean;\n type?: \"text\" | \"password\" | \"email\" | \"url\" | string;\n inputClassName?: string;\n inputStyle?: React.CSSProperties;\n}\n\nexport interface TextInputRefValue {\n focus: () => void;\n blur: () => void;\n getRoot: () => HTMLElement | null;\n getInput: () => HTMLInputElement | null;\n}\n\nexport type TextInputRef = React.Ref<TextInputRefValue>;\n\ninterface TextInputConfig<C extends AnyPlasmicClass> {\n showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;\n showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n startIconSlot?: keyof PlasmicClassArgs<C>;\n endIconSlot?: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n input: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useTextInput<\n P extends BaseTextInputProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: TextInputConfig<C>,\n ref: TextInputRef = null\n) {\n const {\n isDisabled,\n startIcon,\n endIcon,\n showStartIcon,\n showEndIcon,\n className,\n style,\n inputClassName,\n inputStyle,\n ...rest\n } = props;\n const rootRef = React.useRef<HTMLElement>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(\n ref,\n () => ({\n focus() {\n inputRef.current?.focus();\n },\n blur() {\n inputRef.current?.blur();\n },\n getRoot() {\n return rootRef.current;\n },\n getInput() {\n return inputRef.current;\n },\n }),\n [rootRef, inputRef]\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.showStartIconVariant, active: showStartIcon },\n { def: config.showEndIconVariant, active: showEndIcon },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n ...(config.startIconSlot && { [config.startIconSlot]: startIcon }),\n ...(config.endIconSlot && { [config.endIconSlot]: endIcon }),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: {\n ref: rootRef,\n className,\n style,\n },\n },\n [config.input]: {\n props: {\n ...omit(\n rest as any,\n // We need to remove `required` from the list of internalArgProps to\n // be omitted in the props being passed through because Plume pkg\n // <= 19.1.1 had a bug: input[required] was not linked to the\n // `required` arg as it should.\n ...plasmicClass.internalArgProps.filter(\n (prop) => prop !== \"required\"\n ),\n ...plasmicClass.internalVariantProps\n ),\n disabled: isDisabled,\n ref: inputRef,\n className: inputClassName,\n style: inputStyle,\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":[],"mappings":";;;;SA2CgB,YAAY,CAI1B,YAAe,EACf,KAAQ,EACR,MAA0B,EAC1B,GAAwB;;IAAxB,oBAAA,EAAA,UAAwB;IAGtB,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,SAAS,GASP,KAAK,UATE,EACT,OAAO,GAQL,KAAK,QARA,EACP,aAAa,GAOX,KAAK,cAPM,EACb,WAAW,GAMT,KAAK,YANI,EACX,SAAS,GAKP,KAAK,UALE,EACT,KAAK,GAIH,KAAK,MAJF,EACL,cAAc,GAGZ,KAAK,eAHO,EACd,UAAU,GAER,KAAK,WAFG,EACP,IAAI,UACL,KAAK,EAXH,4HAWL,CADQ,CACC;IACV,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,cAAM,QAAC;QACL,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC3B;QACD,IAAI;;YACF,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;SAC1B;QACD,OAAO;YACL,OAAO,OAAO,CAAC,OAAO,CAAC;SACxB;QACD,QAAQ;YACN,OAAO,QAAQ,CAAC,OAAO,CAAC;SACzB;KACF,IAAC,EACF,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAC;IAEF,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plume/text-input/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { omit, pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n VariantDef,\n} from \"../plume-utils\";\n\nexport interface BaseTextInputProps\n extends Omit<React.ComponentProps<\"input\">, \"type\" | \"disabled\"> {\n showStartIcon?: boolean;\n showEndIcon?: boolean;\n startIcon?: React.ReactNode;\n endIcon?: React.ReactNode;\n isDisabled?: boolean;\n type?: \"text\" | \"password\" | \"email\" | \"url\" | string;\n inputClassName?: string;\n inputStyle?: React.CSSProperties;\n}\n\nexport interface TextInputRefValue {\n focus: () => void;\n blur: () => void;\n getRoot: () => HTMLElement | null;\n getInput: () => HTMLInputElement | null;\n}\n\nexport type TextInputRef = React.Ref<TextInputRefValue>;\n\ninterface TextInputConfig<C extends AnyPlasmicClass> {\n showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;\n showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;\n isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n startIconSlot?: keyof PlasmicClassArgs<C>;\n endIconSlot?: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n input: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useTextInput<\n P extends BaseTextInputProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: TextInputConfig<C>,\n ref: TextInputRef = null\n) {\n const {\n isDisabled,\n startIcon,\n endIcon,\n showStartIcon,\n showEndIcon,\n className,\n style,\n inputClassName,\n inputStyle,\n ...rest\n } = props;\n const rootRef = React.useRef<HTMLElement>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(\n ref,\n () => ({\n focus() {\n inputRef.current?.focus();\n },\n blur() {\n inputRef.current?.blur();\n },\n getRoot() {\n return rootRef.current;\n },\n getInput() {\n return inputRef.current;\n },\n }),\n [rootRef, inputRef]\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.showStartIconVariant, active: showStartIcon },\n { def: config.showEndIconVariant, active: showEndIcon },\n { def: config.isDisabledVariant, active: isDisabled }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n ...(config.startIconSlot && { [config.startIconSlot]: startIcon }),\n ...(config.endIconSlot && { [config.endIconSlot]: endIcon }),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: {\n ref: rootRef,\n className,\n style,\n },\n },\n [config.input]: {\n props: {\n ...omit(\n rest as any,\n // We need to remove `required` from the list of internalArgProps to\n // be omitted in the props being passed through because Plume pkg\n // <= 19.1.1 had a bug: input[required] was not linked to the\n // `required` arg as it should.\n ...plasmicClass.internalArgProps.filter(\n (prop) => prop !== \"required\"\n ),\n ...plasmicClass.internalVariantProps\n ),\n disabled: isDisabled,\n ref: inputRef,\n className: inputClassName,\n style: inputStyle,\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":[],"mappings":";;;;SA2CgB,YAAY,CAI1B,YAAe,EACf,KAAQ,EACR,MAA0B,EAC1B,GAAwB;;IAAxB,oBAAA,EAAA,UAAwB;IAGtB,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,SAAS,GASP,KAAK,UATE,EACT,OAAO,GAQL,KAAK,QARA,EACP,aAAa,GAOX,KAAK,cAPM,EACb,WAAW,GAMT,KAAK,YANI,EACX,SAAS,GAKP,KAAK,UALE,EACT,KAAK,GAIH,KAAK,MAJF,EACL,cAAc,GAGZ,KAAK,eAHO,EACd,UAAU,GAER,KAAK,WAFG,EACP,IAAI,UACL,KAAK,EAXH,4HAWL,CADQ,CACC;IACV,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,cAAM,QAAC;QACL,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC3B;QACD,IAAI;;YACF,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;SAC1B;QACD,OAAO;YACL,OAAO,OAAO,CAAC,OAAO,CAAC;SACxB;QACD,QAAQ;YACN,OAAO,QAAQ,CAAC,OAAO,CAAC;SACzB;KACF,IAAC,EACF,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAC;IAEF,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,MAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,EAAE,aAAa,EAAE,EAC3D,EAAE,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,EAAE,WAAW,EAAE,EACvD,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,CACtD,CACF,CAAC;IAEF,IAAM,IAAI,kCACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,OAC3C,MAAM,CAAC,aAAa,cAAM,GAAC,MAAM,CAAC,aAAa,IAAG,SAAS,KAAE,KAC7D,MAAM,CAAC,WAAW,cAAM,GAAC,MAAM,CAAC,WAAW,IAAG,OAAO,KAAE,EAC5D,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE;gBACL,GAAG,EAAE,OAAO;gBACZ,SAAS,WAAA;gBACT,KAAK,OAAA;aACN;SACF;QACD,GAAC,MAAM,CAAC,KAAK,IAAG;YACd,KAAK,wBACA,IAAI,4CACL,IAAW,UAKR,YAAY,CAAC,gBAAgB,CAAC,MAAM,CACrC,UAAC,IAAI,IAAK,OAAA,IAAI,KAAK,UAAU,GAAA,CAC9B,WACE,YAAY,CAAC,oBAAoB,QAEtC,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,UAAU,GAClB;SACF;WACF,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;KACF,CAAC;AACJ;;;;"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { a as __assign, p as pick, b as __spreadArray } from '../../
|
|
1
|
+
import { c as __read, a as __assign, p as pick, b as __spreadArray } from '../../common-182a0b0c.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
|
|
4
4
|
import { FocusScope } from '@react-aria/focus';
|
|
5
5
|
import * as ReactDOM from 'react-dom';
|
|
6
|
-
import { d as mergeRefs, u as useIsomorphicLayoutEffect, m as mergeProps } from '../../react-utils-
|
|
7
|
-
import { m as mergeVariantToggles } from '../../plume-utils-
|
|
8
|
-
import { g as getStyleProps } from '../../props-utils-
|
|
6
|
+
import { d as mergeRefs, u as useIsomorphicLayoutEffect, m as mergeProps } from '../../react-utils-35cb2a4e.js';
|
|
7
|
+
import { m as mergeVariantToggles } from '../../plume-utils-623b91cc.js';
|
|
8
|
+
import { g as getStyleProps } from '../../props-utils-b2ad4997.js';
|
|
9
9
|
import { T as TriggeredOverlayContext } from '../../context-034b8d25.js';
|
|
10
|
+
export { T as TriggeredOverlayContext } from '../../context-034b8d25.js';
|
|
10
11
|
import 'classnames';
|
|
11
12
|
|
|
12
13
|
function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
|
|
@@ -26,7 +27,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
|
|
|
26
27
|
var children = props.children;
|
|
27
28
|
var triggerRef = context.triggerRef, placement = context.placement, overlayMatchTriggerWidth = context.overlayMatchTriggerWidth, overlayMinTriggerWidth = context.overlayMinTriggerWidth, overlayWidth = context.overlayWidth, state = context.state;
|
|
28
29
|
// Measure the width of the trigger to inform the width of the menu (below).
|
|
29
|
-
var _c = React.useState(false), isRendered = _c[0], setRendered = _c[1];
|
|
30
|
+
var _c = __read(React.useState(false), 2), isRendered = _c[0], setRendered = _c[1];
|
|
30
31
|
var triggerWidth = triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)
|
|
31
32
|
? triggerRef.current.offsetWidth
|
|
32
33
|
: undefined;
|
|
@@ -75,8 +76,8 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
|
|
|
75
76
|
minWidth: overlayMinTriggerWidth ? triggerWidth : "auto",
|
|
76
77
|
},
|
|
77
78
|
}, overlayAriaProps, overlayPositionProps);
|
|
78
|
-
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalVariantProps))), mergeVariantToggles({ def: config.isPlacedTopVariant, active: placementAxis === "top" }, { def: config.isPlacedBottomVariant, active: placementAxis === "bottom" }, { def: config.isPlacedLeftVariant, active: placementAxis === "left" }, { def: config.isPlacedRightVariant, active: placementAxis === "right" }));
|
|
79
|
-
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], plasmicClass.internalArgProps))), (_a = {}, _a[config.contentSlot] = (React.createElement(FocusScope, { restoreFocus: true },
|
|
79
|
+
var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps)))), mergeVariantToggles({ def: config.isPlacedTopVariant, active: placementAxis === "top" }, { def: config.isPlacedBottomVariant, active: placementAxis === "bottom" }, { def: config.isPlacedLeftVariant, active: placementAxis === "left" }, { def: config.isPlacedRightVariant, active: placementAxis === "right" }));
|
|
80
|
+
var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps)))), (_a = {}, _a[config.contentSlot] = (React.createElement(FocusScope, { restoreFocus: true },
|
|
80
81
|
React.createElement(DismissButton, { onDismiss: state.close }),
|
|
81
82
|
children)), _a));
|
|
82
83
|
var overrides = (_b = {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/plume/triggered-overlay/triggered-overlay.tsx"],"sourcesContent":["import { DOMProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport {\n DismissButton,\n useOverlay,\n useOverlayPosition,\n} from \"@react-aria/overlays\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport * as ReactDOM from \"react-dom\";\nimport { pick } from \"../../common\";\nimport {\n mergeProps,\n mergeRefs,\n useIsomorphicLayoutEffect,\n} from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n VariantDef,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"./context\";\n\nexport interface BaseTriggeredOverlayProps extends StyleProps, DOMProps {\n children?: React.ReactNode;\n}\n\nexport interface TriggeredOverlayConfig<C extends AnyPlasmicClass> {\n isPlacedTopVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedBottomVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedLeftVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedRightVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n contentSlot: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n contentContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type TriggeredOverlayRef = React.Ref<HTMLElement>;\n\nexport function useTriggeredOverlay<\n P extends BaseTriggeredOverlayProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: TriggeredOverlayConfig<C>,\n outerRef: TriggeredOverlayRef = null\n) {\n const overlayRef = React.useRef<HTMLElement>(null);\n const onOverlayRef = mergeRefs(overlayRef, outerRef);\n\n const context = React.useContext(TriggeredOverlayContext);\n\n if (!context) {\n // If no context, then we are not being correctly used. Either complain, or\n // exit early. It's okay to exit early and break the rules of React hooks\n // because we won't suddenly have the appropriate context anyway for this instance.\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a triggered overlay with a TriggeredOverlayContext\"\n );\n }\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { children } = props;\n const {\n triggerRef,\n placement,\n overlayMatchTriggerWidth,\n overlayMinTriggerWidth,\n overlayWidth,\n state,\n } = context;\n\n // Measure the width of the trigger to inform the width of the menu (below).\n const [isRendered, setRendered] = React.useState(false);\n const triggerWidth =\n triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n ? triggerRef.current.offsetWidth\n : undefined;\n\n useIsomorphicLayoutEffect(() => {\n if (\n !isRendered &&\n triggerRef.current &&\n (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n ) {\n setRendered(true);\n }\n }, [\n triggerRef,\n isRendered,\n overlayMatchTriggerWidth,\n overlayMinTriggerWidth,\n ]);\n\n const { overlayProps: overlayAriaProps } = useOverlay(\n {\n isOpen: state.isOpen,\n onClose: state.close,\n isDismissable: true,\n shouldCloseOnBlur: true,\n },\n overlayRef\n );\n\n const {\n overlayProps: overlayPositionProps,\n updatePosition,\n placement: placementAxis,\n } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef,\n placement: placement ?? \"bottom left\",\n shouldFlip: true,\n isOpen: state.isOpen,\n onClose: state.close,\n containerPadding: 0,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (state.isOpen) {\n requestAnimationFrame(() => {\n updatePosition();\n });\n }\n }, [state.isOpen, updatePosition]);\n\n const overlayProps = mergeProps(\n {\n style: {\n left: \"auto\",\n right: \"auto\",\n top: \"auto\",\n bottom: \"auto\",\n position: \"absolute\",\n width:\n overlayWidth ?? (overlayMatchTriggerWidth ? triggerWidth : \"auto\"),\n minWidth: overlayMinTriggerWidth ? triggerWidth : \"auto\",\n },\n },\n overlayAriaProps,\n overlayPositionProps\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isPlacedTopVariant, active: placementAxis === \"top\" },\n { def: config.isPlacedBottomVariant, active: placementAxis === \"bottom\" },\n { def: config.isPlacedLeftVariant, active: placementAxis === \"left\" },\n { def: config.isPlacedRightVariant, active: placementAxis === \"right\" }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.contentSlot]: (\n <FocusScope restoreFocus>\n <DismissButton onDismiss={state.close} />\n {children}\n {/* We don't use the DismissButton at the end because it ends up taking up 1px space :-/ */}\n {/* <DismissButton onDismiss={state.close} /> */}\n </FocusScope>\n ),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(overlayProps, getStyleProps(props), {\n ref: onOverlayRef,\n }),\n wrap: (root) => {\n if (typeof document !== \"undefined\") {\n return ReactDOM.createPortal(root, document.body);\n } else {\n // Possibly being invoked on the server during SSR; no need to\n // bother with a portal in that case.\n return root;\n }\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/plume/triggered-overlay/triggered-overlay.tsx"],"sourcesContent":["import { DOMProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport {\n DismissButton,\n useOverlay,\n useOverlayPosition,\n} from \"@react-aria/overlays\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport * as ReactDOM from \"react-dom\";\nimport { pick } from \"../../common\";\nimport {\n mergeProps,\n mergeRefs,\n useIsomorphicLayoutEffect,\n} from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n AnyPlasmicClass,\n mergeVariantToggles,\n PlasmicClassArgs,\n PlasmicClassOverrides,\n PlasmicClassVariants,\n PLUME_STRICT_MODE,\n VariantDef,\n} from \"../plume-utils\";\nimport {\n getDefaultPlasmicProps,\n getStyleProps,\n StyleProps,\n} from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"./context\";\n\nexport interface BaseTriggeredOverlayProps extends StyleProps, DOMProps {\n children?: React.ReactNode;\n}\n\nexport interface TriggeredOverlayConfig<C extends AnyPlasmicClass> {\n isPlacedTopVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedBottomVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedLeftVariant?: VariantDef<PlasmicClassVariants<C>>;\n isPlacedRightVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n contentSlot: keyof PlasmicClassArgs<C>;\n root: keyof PlasmicClassOverrides<C>;\n contentContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type TriggeredOverlayRef = React.Ref<HTMLElement>;\n\nexport function useTriggeredOverlay<\n P extends BaseTriggeredOverlayProps,\n C extends AnyPlasmicClass\n>(\n plasmicClass: C,\n props: P,\n config: TriggeredOverlayConfig<C>,\n outerRef: TriggeredOverlayRef = null\n) {\n const overlayRef = React.useRef<HTMLElement>(null);\n const onOverlayRef = mergeRefs(overlayRef, outerRef);\n\n const context = React.useContext(TriggeredOverlayContext);\n\n if (!context) {\n // If no context, then we are not being correctly used. Either complain, or\n // exit early. It's okay to exit early and break the rules of React hooks\n // because we won't suddenly have the appropriate context anyway for this instance.\n if (PLUME_STRICT_MODE) {\n throw new Error(\n \"You can only use a triggered overlay with a TriggeredOverlayContext\"\n );\n }\n return getDefaultPlasmicProps(plasmicClass, props);\n }\n\n const { children } = props;\n const {\n triggerRef,\n placement,\n overlayMatchTriggerWidth,\n overlayMinTriggerWidth,\n overlayWidth,\n state,\n } = context;\n\n // Measure the width of the trigger to inform the width of the menu (below).\n const [isRendered, setRendered] = React.useState(false);\n const triggerWidth =\n triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n ? triggerRef.current.offsetWidth\n : undefined;\n\n useIsomorphicLayoutEffect(() => {\n if (\n !isRendered &&\n triggerRef.current &&\n (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n ) {\n setRendered(true);\n }\n }, [\n triggerRef,\n isRendered,\n overlayMatchTriggerWidth,\n overlayMinTriggerWidth,\n ]);\n\n const { overlayProps: overlayAriaProps } = useOverlay(\n {\n isOpen: state.isOpen,\n onClose: state.close,\n isDismissable: true,\n shouldCloseOnBlur: true,\n },\n overlayRef\n );\n\n const {\n overlayProps: overlayPositionProps,\n updatePosition,\n placement: placementAxis,\n } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef,\n placement: placement ?? \"bottom left\",\n shouldFlip: true,\n isOpen: state.isOpen,\n onClose: state.close,\n containerPadding: 0,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (state.isOpen) {\n requestAnimationFrame(() => {\n updatePosition();\n });\n }\n }, [state.isOpen, updatePosition]);\n\n const overlayProps = mergeProps(\n {\n style: {\n left: \"auto\",\n right: \"auto\",\n top: \"auto\",\n bottom: \"auto\",\n position: \"absolute\",\n width:\n overlayWidth ?? (overlayMatchTriggerWidth ? triggerWidth : \"auto\"),\n minWidth: overlayMinTriggerWidth ? triggerWidth : \"auto\",\n },\n },\n overlayAriaProps,\n overlayPositionProps\n );\n\n const variants = {\n ...pick(props, ...plasmicClass.internalVariantProps),\n ...mergeVariantToggles(\n { def: config.isPlacedTopVariant, active: placementAxis === \"top\" },\n { def: config.isPlacedBottomVariant, active: placementAxis === \"bottom\" },\n { def: config.isPlacedLeftVariant, active: placementAxis === \"left\" },\n { def: config.isPlacedRightVariant, active: placementAxis === \"right\" }\n ),\n };\n\n const args = {\n ...pick(props, ...plasmicClass.internalArgProps),\n [config.contentSlot]: (\n <FocusScope restoreFocus>\n <DismissButton onDismiss={state.close} />\n {children}\n {/* We don't use the DismissButton at the end because it ends up taking up 1px space :-/ */}\n {/* <DismissButton onDismiss={state.close} /> */}\n </FocusScope>\n ),\n };\n\n const overrides: Overrides = {\n [config.root]: {\n props: mergeProps(overlayProps, getStyleProps(props), {\n ref: onOverlayRef,\n }),\n wrap: (root) => {\n if (typeof document !== \"undefined\") {\n return ReactDOM.createPortal(root, document.body);\n } else {\n // Possibly being invoked on the server during SSR; no need to\n // bother with a portal in that case.\n return root;\n }\n },\n },\n };\n\n return {\n plasmicProps: {\n variants: variants as PlasmicClassVariants<C>,\n args: args as PlasmicClassArgs<C>,\n overrides: overrides as PlasmicClassOverrides<C>,\n },\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { m as mapValues, g as groupBy } from './tslib.es6-73236e8e.js';
|
|
3
|
+
|
|
4
|
+
var PLUME_STRICT_MODE = true;
|
|
5
|
+
function mergeVariantToggles() {
|
|
6
|
+
var toggles = [];
|
|
7
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
8
|
+
toggles[_i] = arguments[_i];
|
|
9
|
+
}
|
|
10
|
+
var definedToggles = toggles.filter(function (x) { return !!x.def; });
|
|
11
|
+
var grouped = groupBy(definedToggles, function (_a) {
|
|
12
|
+
var def = _a.def;
|
|
13
|
+
return def.group;
|
|
14
|
+
});
|
|
15
|
+
return mapValues(grouped, function (subToggles) {
|
|
16
|
+
return Object.fromEntries(subToggles.map(function (_a) {
|
|
17
|
+
var def = _a.def, active = _a.active;
|
|
18
|
+
return [def.variant, !!active];
|
|
19
|
+
}));
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function noOutline() {
|
|
23
|
+
return { outline: "none" };
|
|
24
|
+
}
|
|
25
|
+
function getPlumeType(child) {
|
|
26
|
+
var _a;
|
|
27
|
+
if (!React.isValidElement(child)) {
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
var childType = child.type;
|
|
31
|
+
return (childType.__plumeType || ((_a = childType.getPlumeType) === null || _a === void 0 ? void 0 : _a.call(childType, child.props)));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { PLUME_STRICT_MODE as P, getPlumeType as g, mergeVariantToggles as m, noOutline as n };
|
|
35
|
+
//# sourceMappingURL=plume-utils-5c413fd1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plume-utils-5c413fd1.js","sources":["../../src/plume/plume-utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { groupBy, mapValues } from \"../common\";\nimport { SingleChoiceArg } from \"../render/elements\";\n\nexport let PLUME_STRICT_MODE = true;\n\nexport function setPlumeStrictMode(mode: boolean) {\n PLUME_STRICT_MODE = mode;\n}\n\ntype VariantArgChoices<T> = T extends (infer M)[]\n ? M\n : T extends SingleChoiceArg<infer M>\n ? M\n : never;\ntype VariantArgsChoices<V> = { [k in keyof V]-?: VariantArgChoices<V[k]> };\ntype DictValues<V extends Record<string, any>> = V[keyof V];\ntype DictTuples<V extends Record<string, any>> = DictValues<\n { [K in keyof V]: [K, V[K]] }\n>;\nexport type VariantDefTuple<V> = DictTuples<VariantArgsChoices<V>>;\n\ntype DistributeTuple<T> = T extends [infer T1, infer T2]\n ? { group: T1; variant: T2 }\n : never;\n\nexport type VariantDef<V> = DistributeTuple<VariantDefTuple<V>>;\n\nexport type PlasmicClass<\n V extends Record<string, any>,\n A extends Record<string, any>,\n O extends Record<string, any>\n> = {\n (props: { variants?: V; args?: A; overrides?: O }): React.ReactElement | null;\n internalVariantProps: (keyof V)[];\n internalArgProps: (keyof A)[];\n};\n\nexport type AnyPlasmicClass = PlasmicClass<any, any, any>;\n\nexport type PlasmicClassVariants<\n C extends AnyPlasmicClass\n> = C extends PlasmicClass<infer V, any, any> ? V : unknown;\nexport type PlasmicClassArgs<\n C extends AnyPlasmicClass\n> = C extends PlasmicClass<any, infer A, any> ? A : unknown;\nexport type PlasmicClassOverrides<\n C extends AnyPlasmicClass\n> = C extends PlasmicClass<any, any, infer O> ? O : unknown;\n\ntype BooleanLike = boolean | undefined | null;\n\nexport function mergeVariantToggles<V>(\n ...toggles: { def?: VariantDef<V>; active: BooleanLike }[]\n) {\n const definedToggles = toggles.filter((x) => !!x.def) as {\n def: VariantDef<V>;\n active: BooleanLike;\n }[];\n const grouped = groupBy(definedToggles, ({ def }) => def.group as string);\n return mapValues(grouped, (subToggles) => {\n return Object.fromEntries(\n subToggles.map(({ def, active }) => [def.variant, !!active])\n );\n });\n}\n\nexport function noOutline() {\n return { outline: \"none\" };\n}\n\nexport function getPlumeType(child: React.ReactChild): string | undefined {\n if (!React.isValidElement(child)) {\n return undefined;\n }\n const childType = child.type as any;\n return (childType.__plumeType || childType.getPlumeType?.(child.props)) as\n | string\n | undefined;\n}\n"],"names":[],"mappings":";;;IAIW,iBAAiB,GAAG,KAAK;SAgDpB,mBAAmB;IACjC,iBAA0D;SAA1D,UAA0D,EAA1D,qBAA0D,EAA1D,IAA0D;QAA1D,4BAA0D;;IAE1D,IAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,CAAC,GAAG,GAAA,CAGjD,CAAC;IACJ,IAAM,OAAO,GAAG,OAAO,CAAC,cAAc,EAAE,UAAC,EAAO;YAAL,GAAG,SAAA;QAAO,OAAA,GAAG,CAAC,KAAe;KAAA,CAAC,CAAC;IAC1E,OAAO,SAAS,CAAC,OAAO,EAAE,UAAC,UAAU;QACnC,OAAO,MAAM,CAAC,WAAW,CACvB,UAAU,CAAC,GAAG,CAAC,UAAC,EAAe;gBAAb,GAAG,SAAA,EAAE,MAAM,YAAA;YAAO,OAAA,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC;SAAA,CAAC,CAC7D,CAAC;KACH,CAAC,CAAC;AACL,CAAC;SAEe,SAAS;IACvB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAC7B,CAAC;SAEe,YAAY,CAAC,KAAuB;;IAClD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAChC,OAAO,SAAS,CAAC;KAClB;IACD,IAAM,SAAS,GAAG,KAAK,CAAC,IAAW,CAAC;IACpC,QAAQ,SAAS,CAAC,WAAW,KAAI,MAAA,SAAS,CAAC,YAAY,+CAAtB,SAAS,EAAgB,KAAK,CAAC,KAAK,CAAC,CAAA,EAExD;AAChB;;;;"}
|