@plasmicpkgs/react-aria 0.0.65 → 0.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -1
- package/dist/react-aria.esm.js +322 -222
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +320 -220
- package/dist/react-aria.js.map +1 -1
- package/dist/registerButton.d.ts +1 -1
- package/dist/registerTooltip.d.ts +4 -1
- package/dist/variant-utils.d.ts +16 -0
- package/package.json +2 -2
- package/skinny/registerButton.cjs.js +18 -17
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.d.ts +1 -1
- package/skinny/registerButton.esm.js +19 -17
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerCheckbox.cjs.js +1 -1
- package/skinny/registerCheckbox.esm.js +1 -1
- package/skinny/registerCheckboxGroup.cjs.js +1 -1
- package/skinny/registerCheckboxGroup.esm.js +1 -1
- package/skinny/registerComboBox.cjs.js +2 -2
- package/skinny/registerComboBox.esm.js +2 -2
- package/skinny/registerDialogTrigger.cjs.js +1 -1
- package/skinny/registerDialogTrigger.esm.js +1 -1
- package/skinny/registerInput.cjs.js +1 -1
- package/skinny/registerInput.esm.js +1 -1
- package/skinny/{registerListBox-8c096263.esm.js → registerListBox-5425b5fe.esm.js} +2 -2
- package/skinny/registerListBox-5425b5fe.esm.js.map +1 -0
- package/skinny/{registerListBox-4761c48d.cjs.js → registerListBox-62e01fbb.cjs.js} +2 -2
- package/skinny/registerListBox-62e01fbb.cjs.js.map +1 -0
- package/skinny/registerListBox.cjs.js +2 -2
- package/skinny/registerListBox.esm.js +2 -2
- package/skinny/registerListBoxItem.cjs.js +1 -1
- package/skinny/registerListBoxItem.esm.js +1 -1
- package/skinny/registerModal.cjs.js +14 -3
- package/skinny/registerModal.cjs.js.map +1 -1
- package/skinny/registerModal.esm.js +14 -3
- package/skinny/registerModal.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +1 -1
- package/skinny/registerRadio.esm.js +1 -1
- package/skinny/registerRadioGroup.cjs.js +1 -1
- package/skinny/registerRadioGroup.esm.js +1 -1
- package/skinny/registerSelect.cjs.js +2 -2
- package/skinny/registerSelect.esm.js +2 -2
- package/skinny/registerSlider.cjs.js +1 -1
- package/skinny/registerSlider.esm.js +1 -1
- package/skinny/registerSliderOutput.cjs.js +1 -1
- package/skinny/registerSliderOutput.esm.js +1 -1
- package/skinny/registerSliderThumb.cjs.js +1 -1
- package/skinny/registerSliderThumb.esm.js +1 -1
- package/skinny/registerSliderTrack.cjs.js +1 -1
- package/skinny/registerSliderTrack.esm.js +1 -1
- package/skinny/registerSwitch.cjs.js +1 -1
- package/skinny/registerSwitch.esm.js +1 -1
- package/skinny/registerTextArea.cjs.js +1 -1
- package/skinny/registerTextArea.esm.js +1 -1
- package/skinny/registerTextField.cjs.js +1 -1
- package/skinny/registerTextField.esm.js +1 -1
- package/skinny/registerTooltip.cjs.js +118 -46
- package/skinny/registerTooltip.cjs.js.map +1 -1
- package/skinny/registerTooltip.d.ts +4 -1
- package/skinny/registerTooltip.esm.js +117 -45
- package/skinny/registerTooltip.esm.js.map +1 -1
- package/skinny/{variant-utils-23360776.esm.js → variant-utils-5f90385f.esm.js} +17 -1
- package/skinny/variant-utils-5f90385f.esm.js.map +1 -0
- package/skinny/{variant-utils-db5b9590.cjs.js → variant-utils-6c6ef452.cjs.js} +17 -1
- package/skinny/variant-utils-6c6ef452.cjs.js.map +1 -0
- package/skinny/variant-utils.d.ts +16 -0
- package/skinny/registerListBox-4761c48d.cjs.js.map +0 -1
- package/skinny/registerListBox-8c096263.esm.js.map +0 -1
- package/skinny/variant-utils-23360776.esm.js.map +0 -1
- package/skinny/variant-utils-db5b9590.cjs.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { useTooltipTrigger } from \"react-aria\";\nimport { TooltipProps } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {\n children?: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n className?: string;\n}\n\nexport function BaseTooltip(props: BaseTooltipProps) {\n const { children, tooltipContent, className, resetClassName, ...restProps } =\n props;\n\n const { isSelected, selectedSlotName } =\n usePlasmicCanvasComponentInfo(props) ?? {};\n const isAutoOpen = selectedSlotName !== \"children\" && isSelected;\n\n const state = useTooltipTriggerState(restProps);\n const ref = React.useRef(null);\n const { triggerProps, tooltipProps } = useTooltipTrigger(\n restProps,\n state,\n ref\n );\n\n const hasContent =\n tooltipContent &&\n (tooltipContent.type as any).name !== \"CanvasSlotPlaceholder\";\n\n /** We are only accepting a single child here, so we can just use the first one.\n * This is because the trigger props will be applied to the child to enable the triggering of the tooltip.\n * If there has to be more than one things here, wrap them in a horizontal stack for instance.\n * */\n const focusableChild = flattenChildren(children)[0];\n\n return (\n <div\n // this is to ensure that the absolutely positioned tooltip can be positioned correctly within this relatively positioned container.\n style={{ position: \"relative\" }}\n className={resetClassName}\n >\n {React.isValidElement(focusableChild)\n ? React.cloneElement(focusableChild, {\n ref,\n ...mergeProps(\n focusableChild.props as Record<string, any>,\n triggerProps\n ),\n } as Record<string, any> & { ref?: React.Ref<HTMLElement> })\n : null}\n {(isAutoOpen || state.isOpen) && (\n <>\n {React.cloneElement(\n hasContent ? (\n tooltipContent\n ) : (\n <p>Add some content to the tooltip...</p>\n ),\n mergeProps(tooltipProps, tooltipContent?.props.attrs, { className })\n )}\n </>\n )}\n </div>\n );\n}\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n styleSections: true,\n props: {\n children: {\n type: \"slot\",\n displayName: \"Trigger\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n defaultValueHint: 1500,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n defaultValueHint: 500,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["useTooltipTriggerState","React","useTooltipTrigger","flattenChildren","mergeProps","registerComponentHelper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAAS,YAAY,KAAyB,EAAA;AApBrD,EAAA,IAAA,EAAA,CAAA;AAqBE,EAAA,MACE,EADM,GAAA,KAAA,EAAA,EAAA,QAAA,EAAU,cAAgB,EAAA,SAAA,EAAW,cArB/C,EAAA,GAsBI,EAD8D,EAAA,SAAA,GAAA,SAAA,CAC9D,EAD8D,EAAA,CAAxD,UAAU,EAAA,gBAAA,EAAgB,WAAW,EAAA,gBAAA,CAAA,CAAA,CAAA;AAG7C,EAAM,MAAA,EAAE,YAAY,gBAAiB,EAAA,GAAA,CACnC,wCAA8B,KAAK,CAAA,KAAnC,YAAwC,EAAC,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,qBAAqB,UAAc,IAAA,UAAA,CAAA;AAEtD,EAAM,MAAA,KAAA,GAAQA,oCAAuB,SAAS,CAAA,CAAA;AAC9C,EAAM,MAAA,GAAA,GAAMC,sBAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,YAAA,EAAiB,GAAAC,2BAAA;AAAA,IACrC,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UACJ,GAAA,cAAA,IACC,cAAe,CAAA,IAAA,CAAa,IAAS,KAAA,uBAAA,CAAA;AAMxC,EAAA,MAAM,cAAiB,GAAAC,gCAAA,CAAgB,QAAQ,CAAA,CAAE,CAAC,CAAA,CAAA;AAElD,EACE,uBAAAF,sBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO,EAAE,QAAA,EAAU,UAAW,EAAA;AAAA,MAC9B,SAAW,EAAA,cAAA;AAAA,KAAA;AAAA,IAEVA,uBAAM,cAAe,CAAA,cAAc,CAChC,GAAAA,sBAAA,CAAM,aAAa,cAAgB,EAAA,cAAA,CAAA;AAAA,MACjC,GAAA;AAAA,KACG,EAAAG,gBAAA;AAAA,MACD,cAAe,CAAA,KAAA;AAAA,MACf,YAAA;AAAA,MAEuD,CAC3D,GAAA,IAAA;AAAA,IAAA,CACF,UAAc,IAAA,KAAA,CAAM,MACpB,qBAAAH,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA,EACGA,sBAAM,CAAA,YAAA;AAAA,MACL,UACE,GAAA,cAAA,mBAECA,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAE,oCAAkC,CAAA;AAAA,MAEvCG,iBAAW,YAAc,EAAA,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAgB,MAAM,KAAO,EAAA,EAAE,WAAW,CAAA;AAAA,KAEvE,CAAA;AAAA,GAEJ,CAAA;AAEJ,CAAA;AAEgB,SAAA,eAAA,CACd,QACA,SACA,EAAA;AACA,EAAAC,+BAAA;AAAA,IACE,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,cAAA;AAAA,MACb,UAAY,EAAA,gDAAA;AAAA,MACZ,UAAY,EAAA,aAAA;AAAA,MACZ,YAAc,EAAA,IAAA;AAAA,MACd,aAAe,EAAA,IAAA;AAAA,MACf,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,WAAa,EAAA,SAAA;AAAA,UACb,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,WAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,WAAa,EAAA,iBAAA;AAAA;AAAA,UAEb,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,iBAAA;AAAA,SACR;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,SACR;AAAA,QACA,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,QAAA;AAAA,UACN,gBAAkB,EAAA,IAAA;AAAA,UAClB,WACE,EAAA,yDAAA;AAAA,SACJ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,QAAA;AAAA,UACN,gBAAkB,EAAA,GAAA;AAAA,UAClB,WAAa,EAAA,uDAAA;AAAA,SACf;AAAA,QACA,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,QAAA;AAAA,UACN,OAAA,EAAS,CAAC,OAAA,EAAS,iBAAiB,CAAA;AAAA,UACpC,gBAAkB,EAAA,iBAAA;AAAA,SACpB;AAAA,QACA,YAAc,EAAA;AAAA,UACZ,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,cAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;"}
|
|
1
|
+
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { AriaButtonProps, useButton } from \"react-aria\";\nimport { Tooltip, TooltipProps, TooltipTrigger } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { TooltipTriggerProps } from \"react-stately\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nfunction isForwardRefComponent(element: any): element is React.ReactElement {\n return element?.type?.$$typeof === Symbol.for(\"react.forward_ref\");\n}\n\nconst TOOLTIP_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nexport interface BaseTooltipProps\n extends TooltipTriggerProps,\n TooltipProps,\n WithVariants<typeof TOOLTIP_VARIANTS> {\n children?: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n className?: string;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\n/*\n\nReact Aria's TooltipTrigger only allows Aria Button component to act as a trigger.\nhttps://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n\nTo bypass that limitation, we originally used the useTooltipTrigger custom hooks for advanced customization, so the trigger could become anything we want.\nOne of the limitations with that was the placement prop - the useTooltipTrigger did not provide placement prop, and that caused issues with tooltip positioning.\n\nWe have a better fix now - instead of using useTooltipTrigger, we use useButton,\nso that anything we add to the slot can be treated as an Aria Button.\nThat means we can use the ready-made components provided by react-aria-components (like <TooltipTrigger> and <Tooltip>)\nand still be able to use any other component as a trigger.\n\n*/\n\nfunction TooltipButton(props: AriaButtonProps) {\n const ref = React.useRef<HTMLButtonElement | null>(null);\n const { buttonProps } = useButton(props, ref);\n const { children } = props;\n if (!isForwardRefComponent(children)) {\n // The tooltip will not be triggered because the trigger component needs to be a forward ref.\n return children;\n }\n\n return React.cloneElement(children, {\n ...buttonProps,\n ref,\n });\n}\n\nexport function BaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled,\n delay,\n closeDelay,\n trigger,\n isOpen,\n defaultOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n arrowBoundaryOffset,\n className,\n onOpenChange,\n plasmicUpdateVariant,\n } = props;\n\n const { isSelected, selectedSlotName } =\n usePlasmicCanvasComponentInfo(props) ?? {};\n const isAutoOpen = selectedSlotName !== \"children\" && isSelected;\n\n /** We are only accepting a single child here, so we can just use the first one.\n * This is because the trigger props will be applied to the child to enable the triggering of the tooltip.\n * If there has to be more than one things here, wrap them in a horizontal stack for instance.\n * */\n const focusableChild = flattenChildren(children)[0];\n const _isOpen = isAutoOpen || isOpen;\n\n return (\n <TooltipTrigger\n isDisabled={isDisabled}\n delay={delay}\n closeDelay={closeDelay}\n trigger={trigger}\n isOpen={_isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n >\n <TooltipButton>{focusableChild}</TooltipButton>\n <Tooltip\n isOpen={_isOpen}\n offset={offset}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n arrowBoundaryOffset={arrowBoundaryOffset}\n defaultOpen={defaultOpen}\n className={`${className} ${resetClassName}`}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {({ placement: _placement }) =>\n withObservedValues(\n tooltipContent,\n {\n placementTop: _placement === \"top\",\n placementBottom: _placement === \"bottom\",\n placementLeft: _placement === \"left\",\n placementRight: _placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Tooltip>\n </TooltipTrigger>\n );\n}\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n styleSections: true,\n variants,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n // So the text does not overlap with existing content\n backgroundColor: \"white\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"top\",\n // Not providing more options because https://github.com/adobe/react-spectrum/issues/6517\n options: [\"top\", \"bottom\", \"left\", \"right\"],\n },\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","useButton","flattenChildren","TooltipTrigger","Tooltip","registerComponentHelper"],"mappings":"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"}
|
|
@@ -2,7 +2,9 @@ import React from "react";
|
|
|
2
2
|
import { TooltipProps } from "react-aria-components";
|
|
3
3
|
import { TooltipTriggerProps } from "react-stately";
|
|
4
4
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
5
|
-
|
|
5
|
+
import { WithVariants } from "./variant-utils";
|
|
6
|
+
declare const TOOLTIP_VARIANTS: ("placementLeft" | "placementRight" | "placementTop" | "placementBottom")[];
|
|
7
|
+
export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps, WithVariants<typeof TOOLTIP_VARIANTS> {
|
|
6
8
|
children?: React.ReactElement<HTMLElement>;
|
|
7
9
|
tooltipContent?: React.ReactElement;
|
|
8
10
|
resetClassName?: string;
|
|
@@ -10,3 +12,4 @@ export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {
|
|
|
10
12
|
}
|
|
11
13
|
export declare function BaseTooltip(props: BaseTooltipProps): React.JSX.Element;
|
|
12
14
|
export declare function registerTooltip(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>): void;
|
|
15
|
+
export {};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
|
|
2
|
-
import { mergeProps } from '@react-aria/utils';
|
|
3
2
|
import React from 'react';
|
|
4
|
-
import {
|
|
3
|
+
import { useButton } from 'react-aria';
|
|
4
|
+
import { TooltipTrigger, Tooltip } from 'react-aria-components';
|
|
5
5
|
import flattenChildren from 'react-keyed-flatten-children';
|
|
6
|
-
import { useTooltipTriggerState } from 'react-stately';
|
|
7
6
|
import { r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
7
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
|
+
var __defProps = Object.defineProperties;
|
|
12
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
11
13
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
14
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
15
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -23,48 +25,90 @@ var __spreadValues = (a, b) => {
|
|
|
23
25
|
}
|
|
24
26
|
return a;
|
|
25
27
|
};
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
function
|
|
39
|
-
var _b;
|
|
40
|
-
const _a = props, { children, tooltipContent, className, resetClassName } = _a, restProps = __objRest(_a, ["children", "tooltipContent", "className", "resetClassName"]);
|
|
41
|
-
const { isSelected, selectedSlotName } = (_b = usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
|
|
42
|
-
const isAutoOpen = selectedSlotName !== "children" && isSelected;
|
|
43
|
-
const state = useTooltipTriggerState(restProps);
|
|
28
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
|
+
function isForwardRefComponent(element) {
|
|
30
|
+
var _a;
|
|
31
|
+
return ((_a = element == null ? void 0 : element.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
|
|
32
|
+
}
|
|
33
|
+
const TOOLTIP_VARIANTS = [
|
|
34
|
+
"placementTop",
|
|
35
|
+
"placementBottom",
|
|
36
|
+
"placementLeft",
|
|
37
|
+
"placementRight"
|
|
38
|
+
];
|
|
39
|
+
const { variants, withObservedValues } = pickAriaComponentVariants(TOOLTIP_VARIANTS);
|
|
40
|
+
function TooltipButton(props) {
|
|
44
41
|
const ref = React.useRef(null);
|
|
45
|
-
const {
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
const { buttonProps } = useButton(props, ref);
|
|
43
|
+
const { children } = props;
|
|
44
|
+
if (!isForwardRefComponent(children)) {
|
|
45
|
+
return children;
|
|
46
|
+
}
|
|
47
|
+
return React.cloneElement(children, __spreadProps(__spreadValues({}, buttonProps), {
|
|
48
48
|
ref
|
|
49
|
-
);
|
|
50
|
-
|
|
49
|
+
}));
|
|
50
|
+
}
|
|
51
|
+
function BaseTooltip(props) {
|
|
52
|
+
var _a;
|
|
53
|
+
const {
|
|
54
|
+
children,
|
|
55
|
+
isDisabled,
|
|
56
|
+
delay,
|
|
57
|
+
closeDelay,
|
|
58
|
+
trigger,
|
|
59
|
+
isOpen,
|
|
60
|
+
defaultOpen,
|
|
61
|
+
tooltipContent,
|
|
62
|
+
resetClassName,
|
|
63
|
+
placement,
|
|
64
|
+
offset,
|
|
65
|
+
crossOffset,
|
|
66
|
+
shouldFlip,
|
|
67
|
+
arrowBoundaryOffset,
|
|
68
|
+
className,
|
|
69
|
+
onOpenChange,
|
|
70
|
+
plasmicUpdateVariant
|
|
71
|
+
} = props;
|
|
72
|
+
const { isSelected, selectedSlotName } = (_a = usePlasmicCanvasComponentInfo(props)) != null ? _a : {};
|
|
73
|
+
const isAutoOpen = selectedSlotName !== "children" && isSelected;
|
|
51
74
|
const focusableChild = flattenChildren(children)[0];
|
|
75
|
+
const _isOpen = isAutoOpen || isOpen;
|
|
52
76
|
return /* @__PURE__ */ React.createElement(
|
|
53
|
-
|
|
77
|
+
TooltipTrigger,
|
|
54
78
|
{
|
|
55
|
-
|
|
56
|
-
|
|
79
|
+
isDisabled,
|
|
80
|
+
delay,
|
|
81
|
+
closeDelay,
|
|
82
|
+
trigger,
|
|
83
|
+
isOpen: _isOpen,
|
|
84
|
+
defaultOpen,
|
|
85
|
+
onOpenChange
|
|
57
86
|
},
|
|
58
|
-
React.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
87
|
+
/* @__PURE__ */ React.createElement(TooltipButton, null, focusableChild),
|
|
88
|
+
/* @__PURE__ */ React.createElement(
|
|
89
|
+
Tooltip,
|
|
90
|
+
{
|
|
91
|
+
isOpen: _isOpen,
|
|
92
|
+
offset,
|
|
93
|
+
crossOffset,
|
|
94
|
+
shouldFlip,
|
|
95
|
+
arrowBoundaryOffset,
|
|
96
|
+
defaultOpen,
|
|
97
|
+
className: `${className} ${resetClassName}`,
|
|
98
|
+
onOpenChange,
|
|
99
|
+
placement
|
|
100
|
+
},
|
|
101
|
+
({ placement: _placement }) => withObservedValues(
|
|
102
|
+
tooltipContent,
|
|
103
|
+
{
|
|
104
|
+
placementTop: _placement === "top",
|
|
105
|
+
placementBottom: _placement === "bottom",
|
|
106
|
+
placementLeft: _placement === "left",
|
|
107
|
+
placementRight: _placement === "right"
|
|
108
|
+
},
|
|
109
|
+
plasmicUpdateVariant
|
|
110
|
+
)
|
|
111
|
+
)
|
|
68
112
|
);
|
|
69
113
|
}
|
|
70
114
|
function registerTooltip(loader, overrides) {
|
|
@@ -78,14 +122,18 @@ function registerTooltip(loader, overrides) {
|
|
|
78
122
|
importName: "BaseTooltip",
|
|
79
123
|
isAttachment: true,
|
|
80
124
|
styleSections: true,
|
|
125
|
+
variants,
|
|
81
126
|
props: {
|
|
82
127
|
children: {
|
|
83
128
|
type: "slot",
|
|
84
|
-
displayName: "Trigger",
|
|
85
129
|
mergeWithParent: true,
|
|
130
|
+
displayName: "Trigger",
|
|
86
131
|
defaultValue: {
|
|
87
132
|
type: "text",
|
|
88
|
-
value: "Hover me!"
|
|
133
|
+
value: "Hover me!",
|
|
134
|
+
styles: {
|
|
135
|
+
width: "hug"
|
|
136
|
+
}
|
|
89
137
|
}
|
|
90
138
|
},
|
|
91
139
|
tooltipContent: {
|
|
@@ -95,7 +143,11 @@ function registerTooltip(loader, overrides) {
|
|
|
95
143
|
// NOTE: This is not applied in attachment
|
|
96
144
|
defaultValue: {
|
|
97
145
|
type: "text",
|
|
98
|
-
value: "Hello from Tooltip!"
|
|
146
|
+
value: "Hello from Tooltip!",
|
|
147
|
+
styles: {
|
|
148
|
+
// So the text does not overlap with existing content
|
|
149
|
+
backgroundColor: "white"
|
|
150
|
+
}
|
|
99
151
|
}
|
|
100
152
|
},
|
|
101
153
|
resetClassName: {
|
|
@@ -106,12 +158,16 @@ function registerTooltip(loader, overrides) {
|
|
|
106
158
|
},
|
|
107
159
|
delay: {
|
|
108
160
|
type: "number",
|
|
109
|
-
|
|
161
|
+
// Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.
|
|
162
|
+
defaultValue: 0,
|
|
163
|
+
defaultValueHint: 0,
|
|
110
164
|
description: "The delay (in milliseconds) for the tooltip to show up."
|
|
111
165
|
},
|
|
112
166
|
closeDelay: {
|
|
113
167
|
type: "number",
|
|
114
|
-
|
|
168
|
+
// Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.
|
|
169
|
+
defaultValue: 0,
|
|
170
|
+
defaultValueHint: 0,
|
|
115
171
|
description: "The delay (in milliseconds) for the tooltip to close."
|
|
116
172
|
},
|
|
117
173
|
trigger: {
|
|
@@ -119,6 +175,21 @@ function registerTooltip(loader, overrides) {
|
|
|
119
175
|
options: ["focus", "focus and hover"],
|
|
120
176
|
defaultValueHint: "focus and hover"
|
|
121
177
|
},
|
|
178
|
+
placement: {
|
|
179
|
+
type: "choice",
|
|
180
|
+
description: "Default placement of the popover relative to the trigger, if there is enough space",
|
|
181
|
+
defaultValueHint: "top",
|
|
182
|
+
// Not providing more options because https://github.com/adobe/react-spectrum/issues/6517
|
|
183
|
+
options: ["top", "bottom", "left", "right"]
|
|
184
|
+
},
|
|
185
|
+
isOpen: {
|
|
186
|
+
type: "boolean",
|
|
187
|
+
editOnly: true,
|
|
188
|
+
uncontrolledProp: "defaultOpen",
|
|
189
|
+
description: "Whether the overlay is open by default",
|
|
190
|
+
defaultValueHint: false,
|
|
191
|
+
hidden: () => true
|
|
192
|
+
},
|
|
122
193
|
onOpenChange: {
|
|
123
194
|
type: "eventHandler",
|
|
124
195
|
argTypes: [{ name: "isOpen", type: "boolean" }]
|
|
@@ -126,7 +197,8 @@ function registerTooltip(loader, overrides) {
|
|
|
126
197
|
},
|
|
127
198
|
states: {
|
|
128
199
|
isOpen: {
|
|
129
|
-
type: "
|
|
200
|
+
type: "writable",
|
|
201
|
+
valueProp: "isOpen",
|
|
130
202
|
onChangeProp: "onOpenChange",
|
|
131
203
|
variableType: "boolean"
|
|
132
204
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTooltip.esm.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { useTooltipTrigger } from \"react-aria\";\nimport { TooltipProps } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {\n children?: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n className?: string;\n}\n\nexport function BaseTooltip(props: BaseTooltipProps) {\n const { children, tooltipContent, className, resetClassName, ...restProps } =\n props;\n\n const { isSelected, selectedSlotName } =\n usePlasmicCanvasComponentInfo(props) ?? {};\n const isAutoOpen = selectedSlotName !== \"children\" && isSelected;\n\n const state = useTooltipTriggerState(restProps);\n const ref = React.useRef(null);\n const { triggerProps, tooltipProps } = useTooltipTrigger(\n restProps,\n state,\n ref\n );\n\n const hasContent =\n tooltipContent &&\n (tooltipContent.type as any).name !== \"CanvasSlotPlaceholder\";\n\n /** We are only accepting a single child here, so we can just use the first one.\n * This is because the trigger props will be applied to the child to enable the triggering of the tooltip.\n * If there has to be more than one things here, wrap them in a horizontal stack for instance.\n * */\n const focusableChild = flattenChildren(children)[0];\n\n return (\n <div\n // this is to ensure that the absolutely positioned tooltip can be positioned correctly within this relatively positioned container.\n style={{ position: \"relative\" }}\n className={resetClassName}\n >\n {React.isValidElement(focusableChild)\n ? React.cloneElement(focusableChild, {\n ref,\n ...mergeProps(\n focusableChild.props as Record<string, any>,\n triggerProps\n ),\n } as Record<string, any> & { ref?: React.Ref<HTMLElement> })\n : null}\n {(isAutoOpen || state.isOpen) && (\n <>\n {React.cloneElement(\n hasContent ? (\n tooltipContent\n ) : (\n <p>Add some content to the tooltip...</p>\n ),\n mergeProps(tooltipProps, tooltipContent?.props.attrs, { className })\n )}\n </>\n )}\n </div>\n );\n}\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n styleSections: true,\n props: {\n children: {\n type: \"slot\",\n displayName: \"Trigger\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n defaultValueHint: 1500,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n defaultValueHint: 500,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAAS,YAAY,KAAyB,EAAA;AApBrD,EAAA,IAAA,EAAA,CAAA;AAqBE,EAAA,MACE,EADM,GAAA,KAAA,EAAA,EAAA,QAAA,EAAU,cAAgB,EAAA,SAAA,EAAW,cArB/C,EAAA,GAsBI,EAD8D,EAAA,SAAA,GAAA,SAAA,CAC9D,EAD8D,EAAA,CAAxD,UAAU,EAAA,gBAAA,EAAgB,WAAW,EAAA,gBAAA,CAAA,CAAA,CAAA;AAG7C,EAAM,MAAA,EAAE,YAAY,gBAAiB,EAAA,GAAA,CACnC,mCAA8B,KAAK,CAAA,KAAnC,YAAwC,EAAC,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,qBAAqB,UAAc,IAAA,UAAA,CAAA;AAEtD,EAAM,MAAA,KAAA,GAAQ,uBAAuB,SAAS,CAAA,CAAA;AAC9C,EAAM,MAAA,GAAA,GAAM,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,YAAA,EAAiB,GAAA,iBAAA;AAAA,IACrC,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UACJ,GAAA,cAAA,IACC,cAAe,CAAA,IAAA,CAAa,IAAS,KAAA,uBAAA,CAAA;AAMxC,EAAA,MAAM,cAAiB,GAAA,eAAA,CAAgB,QAAQ,CAAA,CAAE,CAAC,CAAA,CAAA;AAElD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO,EAAE,QAAA,EAAU,UAAW,EAAA;AAAA,MAC9B,SAAW,EAAA,cAAA;AAAA,KAAA;AAAA,IAEV,MAAM,cAAe,CAAA,cAAc,CAChC,GAAA,KAAA,CAAM,aAAa,cAAgB,EAAA,cAAA,CAAA;AAAA,MACjC,GAAA;AAAA,KACG,EAAA,UAAA;AAAA,MACD,cAAe,CAAA,KAAA;AAAA,MACf,YAAA;AAAA,MAEuD,CAC3D,GAAA,IAAA;AAAA,IAAA,CACF,UAAc,IAAA,KAAA,CAAM,MACpB,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAM,CAAA,YAAA;AAAA,MACL,UACE,GAAA,cAAA,mBAEC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAE,oCAAkC,CAAA;AAAA,MAEvC,WAAW,YAAc,EAAA,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAgB,MAAM,KAAO,EAAA,EAAE,WAAW,CAAA;AAAA,KAEvE,CAAA;AAAA,GAEJ,CAAA;AAEJ,CAAA;AAEgB,SAAA,eAAA,CACd,QACA,SACA,EAAA;AACA,EAAA,uBAAA;AAAA,IACE,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,cAAA;AAAA,MACb,UAAY,EAAA,gDAAA;AAAA,MACZ,UAAY,EAAA,aAAA;AAAA,MACZ,YAAc,EAAA,IAAA;AAAA,MACd,aAAe,EAAA,IAAA;AAAA,MACf,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,WAAa,EAAA,SAAA;AAAA,UACb,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,WAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,WAAa,EAAA,iBAAA;AAAA;AAAA,UAEb,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,qBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,iBAAA;AAAA,SACR;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,SACR;AAAA,QACA,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,QAAA;AAAA,UACN,gBAAkB,EAAA,IAAA;AAAA,UAClB,WACE,EAAA,yDAAA;AAAA,SACJ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,QAAA;AAAA,UACN,gBAAkB,EAAA,GAAA;AAAA,UAClB,WAAa,EAAA,uDAAA;AAAA,SACf;AAAA,QACA,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,QAAA;AAAA,UACN,OAAA,EAAS,CAAC,OAAA,EAAS,iBAAiB,CAAA;AAAA,UACpC,gBAAkB,EAAA,iBAAA;AAAA,SACpB;AAAA,QACA,YAAc,EAAA;AAAA,UACZ,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,cAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"registerTooltip.esm.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { AriaButtonProps, useButton } from \"react-aria\";\nimport { Tooltip, TooltipProps, TooltipTrigger } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { TooltipTriggerProps } from \"react-stately\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nfunction isForwardRefComponent(element: any): element is React.ReactElement {\n return element?.type?.$$typeof === Symbol.for(\"react.forward_ref\");\n}\n\nconst TOOLTIP_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nexport interface BaseTooltipProps\n extends TooltipTriggerProps,\n TooltipProps,\n WithVariants<typeof TOOLTIP_VARIANTS> {\n children?: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n className?: string;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\n/*\n\nReact Aria's TooltipTrigger only allows Aria Button component to act as a trigger.\nhttps://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n\nTo bypass that limitation, we originally used the useTooltipTrigger custom hooks for advanced customization, so the trigger could become anything we want.\nOne of the limitations with that was the placement prop - the useTooltipTrigger did not provide placement prop, and that caused issues with tooltip positioning.\n\nWe have a better fix now - instead of using useTooltipTrigger, we use useButton,\nso that anything we add to the slot can be treated as an Aria Button.\nThat means we can use the ready-made components provided by react-aria-components (like <TooltipTrigger> and <Tooltip>)\nand still be able to use any other component as a trigger.\n\n*/\n\nfunction TooltipButton(props: AriaButtonProps) {\n const ref = React.useRef<HTMLButtonElement | null>(null);\n const { buttonProps } = useButton(props, ref);\n const { children } = props;\n if (!isForwardRefComponent(children)) {\n // The tooltip will not be triggered because the trigger component needs to be a forward ref.\n return children;\n }\n\n return React.cloneElement(children, {\n ...buttonProps,\n ref,\n });\n}\n\nexport function BaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled,\n delay,\n closeDelay,\n trigger,\n isOpen,\n defaultOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n arrowBoundaryOffset,\n className,\n onOpenChange,\n plasmicUpdateVariant,\n } = props;\n\n const { isSelected, selectedSlotName } =\n usePlasmicCanvasComponentInfo(props) ?? {};\n const isAutoOpen = selectedSlotName !== \"children\" && isSelected;\n\n /** We are only accepting a single child here, so we can just use the first one.\n * This is because the trigger props will be applied to the child to enable the triggering of the tooltip.\n * If there has to be more than one things here, wrap them in a horizontal stack for instance.\n * */\n const focusableChild = flattenChildren(children)[0];\n const _isOpen = isAutoOpen || isOpen;\n\n return (\n <TooltipTrigger\n isDisabled={isDisabled}\n delay={delay}\n closeDelay={closeDelay}\n trigger={trigger}\n isOpen={_isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n >\n <TooltipButton>{focusableChild}</TooltipButton>\n <Tooltip\n isOpen={_isOpen}\n offset={offset}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n arrowBoundaryOffset={arrowBoundaryOffset}\n defaultOpen={defaultOpen}\n className={`${className} ${resetClassName}`}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {({ placement: _placement }) =>\n withObservedValues(\n tooltipContent,\n {\n placementTop: _placement === \"top\",\n placementBottom: _placement === \"bottom\",\n placementLeft: _placement === \"left\",\n placementRight: _placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Tooltip>\n </TooltipTrigger>\n );\n}\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n styleSections: true,\n variants,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n // So the text does not overlap with existing content\n backgroundColor: \"white\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"top\",\n // Not providing more options because https://github.com/adobe/react-spectrum/issues/6517\n options: [\"top\", \"bottom\", \"left\", \"right\"],\n },\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -36,6 +36,22 @@ const ARIA_COMPONENTS_VARIANTS = {
|
|
|
36
36
|
indeterminate: {
|
|
37
37
|
cssSelector: "[data-indeterminate]",
|
|
38
38
|
displayName: "Indeterminate"
|
|
39
|
+
},
|
|
40
|
+
placementLeft: {
|
|
41
|
+
cssSelector: "[data-placement]=left",
|
|
42
|
+
displayName: "Placement (Left)"
|
|
43
|
+
},
|
|
44
|
+
placementRight: {
|
|
45
|
+
cssSelector: "[data-placement]=right",
|
|
46
|
+
displayName: "Placement (Right)"
|
|
47
|
+
},
|
|
48
|
+
placementTop: {
|
|
49
|
+
cssSelector: "[data-placement]=top",
|
|
50
|
+
displayName: "Placement (Top)"
|
|
51
|
+
},
|
|
52
|
+
placementBottom: {
|
|
53
|
+
cssSelector: "[data-placement]=bottom",
|
|
54
|
+
displayName: "Placement (Bottom)"
|
|
39
55
|
}
|
|
40
56
|
};
|
|
41
57
|
function ChangesObserver({
|
|
@@ -63,4 +79,4 @@ function pickAriaComponentVariants(keys) {
|
|
|
63
79
|
}
|
|
64
80
|
|
|
65
81
|
export { pickAriaComponentVariants as p };
|
|
66
|
-
//# sourceMappingURL=variant-utils-
|
|
82
|
+
//# sourceMappingURL=variant-utils-5f90385f.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-utils-5f90385f.esm.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n placementLeft: {\n cssSelector: \"[data-placement]=left\",\n displayName: \"Placement (Left)\",\n },\n placementRight: {\n cssSelector: \"[data-placement]=right\",\n displayName: \"Placement (Right)\",\n },\n placementTop: {\n cssSelector: \"[data-placement]=top\",\n displayName: \"Placement (Top)\",\n },\n placementBottom: {\n cssSelector: \"[data-placement]=bottom\",\n displayName: \"Placement (Bottom)\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n plasmicUpdateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,uBAAA;AAAA,IACb,WAAa,EAAA,kBAAA;AAAA,GACf;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,WAAa,EAAA,wBAAA;AAAA,IACb,WAAa,EAAA,mBAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,iBAAA;AAAA,GACf;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,WAAa,EAAA,yBAAA;AAAA,IACb,WAAa,EAAA,oBAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -42,6 +42,22 @@ const ARIA_COMPONENTS_VARIANTS = {
|
|
|
42
42
|
indeterminate: {
|
|
43
43
|
cssSelector: "[data-indeterminate]",
|
|
44
44
|
displayName: "Indeterminate"
|
|
45
|
+
},
|
|
46
|
+
placementLeft: {
|
|
47
|
+
cssSelector: "[data-placement]=left",
|
|
48
|
+
displayName: "Placement (Left)"
|
|
49
|
+
},
|
|
50
|
+
placementRight: {
|
|
51
|
+
cssSelector: "[data-placement]=right",
|
|
52
|
+
displayName: "Placement (Right)"
|
|
53
|
+
},
|
|
54
|
+
placementTop: {
|
|
55
|
+
cssSelector: "[data-placement]=top",
|
|
56
|
+
displayName: "Placement (Top)"
|
|
57
|
+
},
|
|
58
|
+
placementBottom: {
|
|
59
|
+
cssSelector: "[data-placement]=bottom",
|
|
60
|
+
displayName: "Placement (Bottom)"
|
|
45
61
|
}
|
|
46
62
|
};
|
|
47
63
|
function ChangesObserver({
|
|
@@ -69,4 +85,4 @@ function pickAriaComponentVariants(keys) {
|
|
|
69
85
|
}
|
|
70
86
|
|
|
71
87
|
exports.pickAriaComponentVariants = pickAriaComponentVariants;
|
|
72
|
-
//# sourceMappingURL=variant-utils-
|
|
88
|
+
//# sourceMappingURL=variant-utils-6c6ef452.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-utils-6c6ef452.cjs.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n placementLeft: {\n cssSelector: \"[data-placement]=left\",\n displayName: \"Placement (Left)\",\n },\n placementRight: {\n cssSelector: \"[data-placement]=right\",\n displayName: \"Placement (Right)\",\n },\n placementTop: {\n cssSelector: \"[data-placement]=top\",\n displayName: \"Placement (Top)\",\n },\n placementBottom: {\n cssSelector: \"[data-placement]=bottom\",\n displayName: \"Placement (Bottom)\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n plasmicUpdateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,uBAAA;AAAA,IACb,WAAa,EAAA,kBAAA;AAAA,GACf;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,WAAa,EAAA,wBAAA;AAAA,IACb,WAAa,EAAA,mBAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,iBAAA;AAAA,GACf;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,WAAa,EAAA,yBAAA;AAAA,IACb,WAAa,EAAA,oBAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAAA,sBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACGA,sBAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -37,6 +37,22 @@ declare const ARIA_COMPONENTS_VARIANTS: {
|
|
|
37
37
|
cssSelector: string;
|
|
38
38
|
displayName: string;
|
|
39
39
|
};
|
|
40
|
+
placementLeft: {
|
|
41
|
+
cssSelector: string;
|
|
42
|
+
displayName: string;
|
|
43
|
+
};
|
|
44
|
+
placementRight: {
|
|
45
|
+
cssSelector: string;
|
|
46
|
+
displayName: string;
|
|
47
|
+
};
|
|
48
|
+
placementTop: {
|
|
49
|
+
cssSelector: string;
|
|
50
|
+
displayName: string;
|
|
51
|
+
};
|
|
52
|
+
placementBottom: {
|
|
53
|
+
cssSelector: string;
|
|
54
|
+
displayName: string;
|
|
55
|
+
};
|
|
40
56
|
};
|
|
41
57
|
type AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;
|
|
42
58
|
type CodeComponentVariantsMeta = NonNullable<CodeComponentMeta<unknown>["variants"]>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBox-4761c48d.cjs.js","sources":["../src/ListBoxItemIdManager.ts","../src/registerListBox.tsx"],"sourcesContent":["type Observer = (ids: string[]) => void;\n\nexport class ListBoxItemIdManager {\n private readonly _ids: Set<string> = new Set();\n private readonly _observers: Set<Observer> = new Set();\n\n private generateDuplicateId(id: string, count = 1): string {\n const dupId = `${id} duplicate(${count})`;\n if (this._ids.has(dupId)) {\n return this.generateDuplicateId(id, count + 1);\n } else {\n return dupId;\n }\n }\n\n private generateMissingId(count = 1): string {\n const missingId = `missing(${count})`;\n if (this._ids.has(missingId)) {\n return this.generateMissingId(count + 1);\n } else {\n return missingId;\n }\n }\n\n register(id?: unknown): string {\n const idStr = id === undefined ? undefined : String(id).trim();\n let newId: string;\n\n if (!idStr) {\n // No id is provided, so generate one\n newId = this.generateMissingId();\n } else if (this._ids.has(idStr)) {\n // The provided id is already registered with another uuid (i.e. it's not unique), so just generate a new one\n newId = this.generateDuplicateId(idStr);\n } else {\n // The provided id is not already registered, so use it\n newId = idStr;\n }\n\n this._ids.add(newId);\n this.notify();\n return newId;\n }\n\n unregister(id: string) {\n this._ids.delete(id);\n this.notify();\n }\n\n subscribe(observer: Observer) {\n this._observers.add(observer);\n }\n\n // Notify all observers about an event.\n notify() {\n this._observers.forEach((observer) => observer(this.ids));\n }\n\n get ids(): string[] {\n return Array.from(this._ids);\n }\n}\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Key, ListBox } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport {\n makeDefaultListBoxItemChildren,\n registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseListBoxControlContextData {\n itemIds: string[];\n isStandalone: boolean;\n}\n\nexport interface BaseListBoxProps\n extends Omit<\n React.ComponentProps<typeof ListBox>,\n \"selectedKeys\" | \"defaultSelectedKeys\"\n >,\n HasControlContextData<BaseListBoxControlContextData> {\n children?: React.ReactNode;\n selectedKeys?: string | string[] | undefined;\n defaultSelectedKeys?: string | string[] | undefined;\n}\n\nexport const listboxHelpers = {\n states: {\n selectedKey: {\n onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n // only single selection is supported\n return Array.from(value)[0];\n },\n },\n },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n // Listbox expects it to be of type \"all\" | Iterable\n return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n ? [selectedKeys]\n : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n const {\n setControlContextData: setControlContextData,\n children,\n selectedKeys,\n defaultSelectedKeys,\n ...rest\n } = props;\n const context = React.useContext(PlasmicListBoxContext);\n const isStandalone = !context;\n const [ids, setIds] = useState<string[]>([]);\n\n const idManager = useMemo(\n () => context?.idManager ?? new ListBoxItemIdManager(),\n []\n );\n\n useEffect(() => {\n console.log(\"sarah useEffect\", { setControlContextData, ids });\n setControlContextData?.({\n itemIds: ids,\n isStandalone,\n });\n }, [ids, isStandalone, setControlContextData]);\n\n useEffect(() => {\n idManager.subscribe((_ids: string[]) => {\n setIds(_ids);\n });\n }, []);\n\n const listbox = (\n <ListBox\n selectedKeys={normalizeSelectedKeys(selectedKeys)}\n defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n {...rest}\n >\n {children}\n </ListBox>\n );\n\n if (isStandalone) {\n return (\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {listbox}\n </PlasmicListBoxContext.Provider>\n );\n }\n\n return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n const listBoxItemMeta = registerListBoxItem(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n });\n const sectionMeta = registerSection(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n props: {\n items: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-1\",\n textValue: \"Section1-Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-2\",\n textValue: \"Section1-Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-3\",\n textValue: \"Section1-Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n ],\n },\n },\n });\n\n registerComponentHelper(\n loader,\n BaseListBox,\n {\n name: LIST_BOX_COMPONENT_NAME,\n displayName: \"Aria ListBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n importName: \"BaseListBox\",\n defaultStyles: {\n width: \"250px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"List Items\",\n allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"1\",\n textValue: \"Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"2\",\n textValue: \"Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"3\",\n textValue: \"Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: sectionMeta.name,\n },\n ],\n },\n selectionMode: {\n type: \"choice\",\n description: \"The selection mode of the listbox\",\n options: [\"none\", \"single\"],\n defaultValue: \"none\",\n hidden: (_props, ctx) => !ctx?.isStandalone,\n },\n selectedKeys: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKeys\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"itemIds\", type: \"object\" }],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKeys\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n ...listboxHelpers.states.selectedKey,\n },\n },\n componentHelpers: {\n helpers: listboxHelpers,\n importName: \"listboxHelpers\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["React","PlasmicListBoxContext","useState","useMemo","_a","useEffect","ListBox","makeComponentName","registerListBoxItem","registerSection","makeDefaultListBoxItemChildren","registerComponentHelper"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBox-8c096263.esm.js","sources":["../src/ListBoxItemIdManager.ts","../src/registerListBox.tsx"],"sourcesContent":["type Observer = (ids: string[]) => void;\n\nexport class ListBoxItemIdManager {\n private readonly _ids: Set<string> = new Set();\n private readonly _observers: Set<Observer> = new Set();\n\n private generateDuplicateId(id: string, count = 1): string {\n const dupId = `${id} duplicate(${count})`;\n if (this._ids.has(dupId)) {\n return this.generateDuplicateId(id, count + 1);\n } else {\n return dupId;\n }\n }\n\n private generateMissingId(count = 1): string {\n const missingId = `missing(${count})`;\n if (this._ids.has(missingId)) {\n return this.generateMissingId(count + 1);\n } else {\n return missingId;\n }\n }\n\n register(id?: unknown): string {\n const idStr = id === undefined ? undefined : String(id).trim();\n let newId: string;\n\n if (!idStr) {\n // No id is provided, so generate one\n newId = this.generateMissingId();\n } else if (this._ids.has(idStr)) {\n // The provided id is already registered with another uuid (i.e. it's not unique), so just generate a new one\n newId = this.generateDuplicateId(idStr);\n } else {\n // The provided id is not already registered, so use it\n newId = idStr;\n }\n\n this._ids.add(newId);\n this.notify();\n return newId;\n }\n\n unregister(id: string) {\n this._ids.delete(id);\n this.notify();\n }\n\n subscribe(observer: Observer) {\n this._observers.add(observer);\n }\n\n // Notify all observers about an event.\n notify() {\n this._observers.forEach((observer) => observer(this.ids));\n }\n\n get ids(): string[] {\n return Array.from(this._ids);\n }\n}\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Key, ListBox } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport {\n makeDefaultListBoxItemChildren,\n registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseListBoxControlContextData {\n itemIds: string[];\n isStandalone: boolean;\n}\n\nexport interface BaseListBoxProps\n extends Omit<\n React.ComponentProps<typeof ListBox>,\n \"selectedKeys\" | \"defaultSelectedKeys\"\n >,\n HasControlContextData<BaseListBoxControlContextData> {\n children?: React.ReactNode;\n selectedKeys?: string | string[] | undefined;\n defaultSelectedKeys?: string | string[] | undefined;\n}\n\nexport const listboxHelpers = {\n states: {\n selectedKey: {\n onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n // only single selection is supported\n return Array.from(value)[0];\n },\n },\n },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n // Listbox expects it to be of type \"all\" | Iterable\n return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n ? [selectedKeys]\n : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n const {\n setControlContextData: setControlContextData,\n children,\n selectedKeys,\n defaultSelectedKeys,\n ...rest\n } = props;\n const context = React.useContext(PlasmicListBoxContext);\n const isStandalone = !context;\n const [ids, setIds] = useState<string[]>([]);\n\n const idManager = useMemo(\n () => context?.idManager ?? new ListBoxItemIdManager(),\n []\n );\n\n useEffect(() => {\n console.log(\"sarah useEffect\", { setControlContextData, ids });\n setControlContextData?.({\n itemIds: ids,\n isStandalone,\n });\n }, [ids, isStandalone, setControlContextData]);\n\n useEffect(() => {\n idManager.subscribe((_ids: string[]) => {\n setIds(_ids);\n });\n }, []);\n\n const listbox = (\n <ListBox\n selectedKeys={normalizeSelectedKeys(selectedKeys)}\n defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n {...rest}\n >\n {children}\n </ListBox>\n );\n\n if (isStandalone) {\n return (\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {listbox}\n </PlasmicListBoxContext.Provider>\n );\n }\n\n return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n const listBoxItemMeta = registerListBoxItem(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n });\n const sectionMeta = registerSection(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n props: {\n items: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-1\",\n textValue: \"Section1-Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-2\",\n textValue: \"Section1-Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-3\",\n textValue: \"Section1-Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n ],\n },\n },\n });\n\n registerComponentHelper(\n loader,\n BaseListBox,\n {\n name: LIST_BOX_COMPONENT_NAME,\n displayName: \"Aria ListBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n importName: \"BaseListBox\",\n defaultStyles: {\n width: \"250px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"List Items\",\n allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"1\",\n textValue: \"Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"2\",\n textValue: \"Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"3\",\n textValue: \"Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: sectionMeta.name,\n },\n ],\n },\n selectionMode: {\n type: \"choice\",\n description: \"The selection mode of the listbox\",\n options: [\"none\", \"single\"],\n defaultValue: \"none\",\n hidden: (_props, ctx) => !ctx?.isStandalone,\n },\n selectedKeys: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKeys\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"itemIds\", type: \"object\" }],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKeys\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n ...listboxHelpers.states.selectedKey,\n },\n },\n componentHelpers: {\n helpers: listboxHelpers,\n importName: \"listboxHelpers\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variant-utils-23360776.esm.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n plasmicUpdateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variant-utils-db5b9590.cjs.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n plasmicUpdateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAAA,sBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACGA,sBAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|