@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.
Files changed (70) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/react-aria.esm.js +322 -222
  3. package/dist/react-aria.esm.js.map +1 -1
  4. package/dist/react-aria.js +320 -220
  5. package/dist/react-aria.js.map +1 -1
  6. package/dist/registerButton.d.ts +1 -1
  7. package/dist/registerTooltip.d.ts +4 -1
  8. package/dist/variant-utils.d.ts +16 -0
  9. package/package.json +2 -2
  10. package/skinny/registerButton.cjs.js +18 -17
  11. package/skinny/registerButton.cjs.js.map +1 -1
  12. package/skinny/registerButton.d.ts +1 -1
  13. package/skinny/registerButton.esm.js +19 -17
  14. package/skinny/registerButton.esm.js.map +1 -1
  15. package/skinny/registerCheckbox.cjs.js +1 -1
  16. package/skinny/registerCheckbox.esm.js +1 -1
  17. package/skinny/registerCheckboxGroup.cjs.js +1 -1
  18. package/skinny/registerCheckboxGroup.esm.js +1 -1
  19. package/skinny/registerComboBox.cjs.js +2 -2
  20. package/skinny/registerComboBox.esm.js +2 -2
  21. package/skinny/registerDialogTrigger.cjs.js +1 -1
  22. package/skinny/registerDialogTrigger.esm.js +1 -1
  23. package/skinny/registerInput.cjs.js +1 -1
  24. package/skinny/registerInput.esm.js +1 -1
  25. package/skinny/{registerListBox-8c096263.esm.js → registerListBox-5425b5fe.esm.js} +2 -2
  26. package/skinny/registerListBox-5425b5fe.esm.js.map +1 -0
  27. package/skinny/{registerListBox-4761c48d.cjs.js → registerListBox-62e01fbb.cjs.js} +2 -2
  28. package/skinny/registerListBox-62e01fbb.cjs.js.map +1 -0
  29. package/skinny/registerListBox.cjs.js +2 -2
  30. package/skinny/registerListBox.esm.js +2 -2
  31. package/skinny/registerListBoxItem.cjs.js +1 -1
  32. package/skinny/registerListBoxItem.esm.js +1 -1
  33. package/skinny/registerModal.cjs.js +14 -3
  34. package/skinny/registerModal.cjs.js.map +1 -1
  35. package/skinny/registerModal.esm.js +14 -3
  36. package/skinny/registerModal.esm.js.map +1 -1
  37. package/skinny/registerRadio.cjs.js +1 -1
  38. package/skinny/registerRadio.esm.js +1 -1
  39. package/skinny/registerRadioGroup.cjs.js +1 -1
  40. package/skinny/registerRadioGroup.esm.js +1 -1
  41. package/skinny/registerSelect.cjs.js +2 -2
  42. package/skinny/registerSelect.esm.js +2 -2
  43. package/skinny/registerSlider.cjs.js +1 -1
  44. package/skinny/registerSlider.esm.js +1 -1
  45. package/skinny/registerSliderOutput.cjs.js +1 -1
  46. package/skinny/registerSliderOutput.esm.js +1 -1
  47. package/skinny/registerSliderThumb.cjs.js +1 -1
  48. package/skinny/registerSliderThumb.esm.js +1 -1
  49. package/skinny/registerSliderTrack.cjs.js +1 -1
  50. package/skinny/registerSliderTrack.esm.js +1 -1
  51. package/skinny/registerSwitch.cjs.js +1 -1
  52. package/skinny/registerSwitch.esm.js +1 -1
  53. package/skinny/registerTextArea.cjs.js +1 -1
  54. package/skinny/registerTextArea.esm.js +1 -1
  55. package/skinny/registerTextField.cjs.js +1 -1
  56. package/skinny/registerTextField.esm.js +1 -1
  57. package/skinny/registerTooltip.cjs.js +118 -46
  58. package/skinny/registerTooltip.cjs.js.map +1 -1
  59. package/skinny/registerTooltip.d.ts +4 -1
  60. package/skinny/registerTooltip.esm.js +117 -45
  61. package/skinny/registerTooltip.esm.js.map +1 -1
  62. package/skinny/{variant-utils-23360776.esm.js → variant-utils-5f90385f.esm.js} +17 -1
  63. package/skinny/variant-utils-5f90385f.esm.js.map +1 -0
  64. package/skinny/{variant-utils-db5b9590.cjs.js → variant-utils-6c6ef452.cjs.js} +17 -1
  65. package/skinny/variant-utils-6c6ef452.cjs.js.map +1 -0
  66. package/skinny/variant-utils.d.ts +16 -0
  67. package/skinny/registerListBox-4761c48d.cjs.js.map +0 -1
  68. package/skinny/registerListBox-8c096263.esm.js.map +0 -1
  69. package/skinny/variant-utils-23360776.esm.js.map +0 -1
  70. 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
- export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {
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 { useTooltipTrigger } from 'react-aria';
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 __objRest = (source, exclude) => {
27
- var target = {};
28
- for (var prop in source)
29
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
30
- target[prop] = source[prop];
31
- if (source != null && __getOwnPropSymbols)
32
- for (var prop of __getOwnPropSymbols(source)) {
33
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
34
- target[prop] = source[prop];
35
- }
36
- return target;
37
- };
38
- function BaseTooltip(props) {
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 { triggerProps, tooltipProps } = useTooltipTrigger(
46
- restProps,
47
- state,
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
- const hasContent = tooltipContent && tooltipContent.type.name !== "CanvasSlotPlaceholder";
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
- "div",
77
+ TooltipTrigger,
54
78
  {
55
- style: { position: "relative" },
56
- className: resetClassName
79
+ isDisabled,
80
+ delay,
81
+ closeDelay,
82
+ trigger,
83
+ isOpen: _isOpen,
84
+ defaultOpen,
85
+ onOpenChange
57
86
  },
58
- React.isValidElement(focusableChild) ? React.cloneElement(focusableChild, __spreadValues({
59
- ref
60
- }, mergeProps(
61
- focusableChild.props,
62
- triggerProps
63
- ))) : null,
64
- (isAutoOpen || state.isOpen) && /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(
65
- hasContent ? tooltipContent : /* @__PURE__ */ React.createElement("p", null, "Add some content to the tooltip..."),
66
- mergeProps(tooltipProps, tooltipContent == null ? void 0 : tooltipContent.props.attrs, { className })
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
- defaultValueHint: 1500,
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
- defaultValueHint: 500,
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: "readonly",
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":"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"}
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-23360776.esm.js.map
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-db5b9590.cjs.js.map
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;;;;"}