@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["ref={props.ref}","setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}","tabsRef={setRef}","ref={input.tabsRef}","<Element\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          merge(() => aria.tabProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {}),\n          render\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n      >\n        <SelectionIndicatorContext\n          value={{\n            get isSelected() {\n              return aria.isSelected;\n            },\n          }}\n        >\n          {render.children}\n        </SelectionIndicatorContext>\n      </Element>","dom.div","<dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true, labelable: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={props.ref}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TabPanels\"}\n      style={props.style}\n    >\n      <Collection {...props} />\n    </dom.div>","<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabPanelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          input.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      inert={!selected() || input.props.inert}\n      data-entering={values.isEntering || undefined}\n      data-exiting={values.isExiting || undefined}\n      data-inert={!selected() || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <TabsContext value={null}>\n        <TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>","<TabCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />","ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","<dom.div\n      {...mergeProps(\n        filterDOMProps(input.props, { global: true }),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={input.tabsRef}\n      slot={input.props.slot ?? undefined}\n      data-orientation={values.orientation}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <TabsContext value={tabProps}>\n        <TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>","<dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabListProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          setRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      data-orientation={values.orientation}\n    >\n      <Root collection={input.state.collection} />\n    </dom.div>","_$applyRef","_$mergeProps"],"sources":["../../src/tabs.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/Tabs.tsx.\n * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport {\n  ItemNode,\n  BaseCollection,\n} from \"@solid2-aria/core/collections/base-collection\";\nimport {\n  Collection,\n  CollectionBuilder,\n  createLeafComponent,\n} from \"@solid2-aria/core/collections/collection-builder\";\nimport { createIsHidden } from \"@solid2-aria/core/collections/hidden\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createTab } from \"@solid2-aria/core/tabs/create-tab\";\nimport { createTabList } from \"@solid2-aria/core/tabs/create-tab-list\";\nimport type { AriaTabListProps } from \"@solid2-aria/core/tabs/create-tab-list\";\nimport { createTabPanel } from \"@solid2-aria/core/tabs/create-tab-panel\";\nimport type { AriaTabPanelProps } from \"@solid2-aria/core/tabs/create-tab-panel\";\nimport {\n  createEnterAnimation,\n  createExitAnimation,\n} from \"@solid2-aria/core/utils/animation\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport { createTabListState } from \"@solid2-aria/stately/tabs/create-tab-list-state\";\nimport type { TabListState } from \"@solid2-aria/stately/tabs/create-tab-list-state\";\nimport type {\n  AriaLabelingProps,\n  FocusEvents,\n  HoverEvents,\n  Key,\n  LinkDOMProps,\n  PressEvents,\n  Orientation,\n  Node,\n} from \"@solid2-aria/types-shared\";\nimport type { GlobalDOMAttributes } from \"@solid2-aria/types-shared-web\";\nimport { dynamic } from \"@solidjs/web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  createSignal,\n  createContext,\n  useContext,\n  omit,\n  Show,\n  untrack,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\n\nimport {\n  CollectionRendererContext,\n  DefaultCollectionRenderer,\n} from \"./collection\";\nimport type { CollectionProps } from \"./collection\";\nimport { SelectionIndicatorContext } from \"./selection-indicator\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlottedContext,\n  assignRef,\n} from \"./utils\";\nimport type {\n  Ref,\n  ClassOrFunction,\n  DOMRenderProps,\n  PossibleLinkDOMRenderProps,\n  RenderProps,\n  SlotProps,\n  StyleProps,\n  StyleRenderProps,\n  ContextValue,\n} from \"./utils\";\n\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\nexport const TabListStateContext = createContext<TabListState<unknown> | null>(\n  null\n);\n\nexport interface TabsProps\n  // oxlint-disable-next-line typescript/no-explicit-any -- Collection contexts erase item types; each typed factory restores its owner's item contract.\n  extends\n    Omit<AriaTabListProps<unknown>, \"items\" | \"children\">,\n    RenderProps<TabsRenderProps>,\n    SlotProps,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-Tabs'\n   */\n  class?: ClassOrFunction<TabsRenderProps>;\n}\n\nexport interface TabsRenderProps {\n  /**\n   * The orientation of the tabs.\n   *\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation;\n}\n\nexport interface TabListProps<T>\n  extends\n    StyleRenderProps<TabListRenderProps>,\n    AriaLabelingProps,\n    Omit<CollectionProps<T>, \"disabledKeys\">,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-TabList'\n   */\n  class?: ClassOrFunction<TabListRenderProps>;\n}\n\nexport interface TabListRenderProps {\n  /**\n   * The orientation of the tab list.\n   *\n   * @selector [data-orientation=\"horizontal | vertical\"]\n   */\n  orientation: Orientation;\n  /**\n   * State of the tab list.\n   */\n  state: TabListState<unknown>;\n}\n\nexport interface TabProps\n  extends\n    Omit<RenderProps<TabRenderProps>, \"render\">,\n    PossibleLinkDOMRenderProps<\"div\", TabRenderProps>,\n    AriaLabelingProps,\n    LinkDOMProps,\n    HoverEvents,\n    FocusEvents,\n    PressEvents,\n    Omit<GlobalDOMAttributes<HTMLDivElement>, \"onClick\"> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-Tab'\n   */\n  class?: ClassOrFunction<TabRenderProps>;\n  /** The unique id of the tab. */\n  id?: Key;\n  /** Whether the tab is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TabRenderProps {\n  /**\n   * Whether the tab is currently hovered with a mouse.\n   *\n   * @selector [data-hovered]\n   */\n  isHovered: boolean;\n  /**\n   * Whether the tab is currently in a pressed state.\n   *\n   * @selector [data-pressed]\n   */\n  isPressed: boolean;\n  /**\n   * Whether the tab is currently selected.\n   *\n   * @selector [data-selected]\n   */\n  isSelected: boolean;\n  /**\n   * Whether the tab is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tab is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the tab is disabled.\n   *\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean;\n}\n\nexport interface TabPanelProps\n  extends\n    AriaTabPanelProps,\n    RenderProps<TabPanelRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-TabPanel'\n   */\n  class?: ClassOrFunction<TabPanelRenderProps>;\n  /**\n   * Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab\n   * panels are inert and cannot be interacted with. They must be styled appropriately so this is\n   * clear to the user visually.\n   *\n   * @default false\n   */\n  shouldForceMount?: boolean;\n}\n\nexport interface TabPanelRenderProps {\n  /**\n   * Whether the tab panel is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tab panel is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * Whether the tab panel is currently non-interactive. This occurs when the\n   * `shouldForceMount` prop is true, and the corresponding tab is not selected.\n   *\n   * @selector [data-inert]\n   */\n  isInert: boolean;\n  /**\n   * Whether the tab panel is currently entering. Use this to apply animations.\n   *\n   * @selector [data-entering]\n   */\n  isEntering: boolean;\n  /**\n   * Whether the tab panel is currently exiting. Use this to apply animations.\n   *\n   * @selector [data-exiting]\n   */\n  isExiting: boolean;\n  /**\n   * State of the tab list.\n   */\n  state: TabListState<unknown>;\n}\n\nexport interface TabPanelsProps<T>\n  extends\n    Omit<CollectionProps<T>, \"disabledKeys\">,\n    StyleProps,\n    DOMRenderProps<\"div\", undefined>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element.\n   *\n   * @default 'react-aria-TabPanels'\n   */\n  class?: JSX.ClassValue;\n}\n\nconst TabCollection = createLeafComponent(\n  ItemNode,\n  (\n    props: TabProps,\n    forwardedRef: Ref<HTMLDivElement>,\n    node: Node<unknown>\n  ): JSX.Element => {\n    const state = useContext(TabListStateContext);\n\n    if (!state) {\n      throw new Error(\"Tab must be rendered in Tabs.\");\n    }\n\n    const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n      ownedWrite: true,\n    });\n\n    const aria = createTab(\n      mergeProps(props, {\n        get key() {\n          return node.key;\n        },\n      }),\n      state,\n      ref\n    );\n\n    const focus = createFocusRing();\n\n    const hover = createHover(\n      mergeProps(props, {\n        get isDisabled() {\n          return aria.isDisabled;\n        },\n      })\n    );\n\n    const values: TabRenderProps = {\n      get isDisabled() {\n        return aria.isDisabled;\n      },\n      get isFocusVisible() {\n        return focus.isFocusVisible;\n      },\n      get isFocused() {\n        return focus.isFocused;\n      },\n      get isHovered() {\n        return hover.isHovered;\n      },\n      get isPressed() {\n        return aria.isPressed;\n      },\n      get isSelected() {\n        return aria.isSelected;\n      },\n    };\n\n    const render = createRenderProps(\n      mergeProps(props, { defaultClass: \"solid2-aria-Tab\", values })\n    );\n\n    const Element = dynamic(() => (isTruthy(props.href) ? dom.a : dom.div));\n\n    return (\n      <Element\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          merge(() => aria.tabProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {}),\n          render\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-focused={focus.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n      >\n        <SelectionIndicatorContext\n          value={{\n            get isSelected() {\n              return aria.isSelected;\n            },\n          }}\n        >\n          {render.children}\n        </SelectionIndicatorContext>\n      </Element>\n    );\n  }\n);\n\nexport function TabPanels<T>(\n  props: TabPanelsProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\n  }\n\n  return (\n    <dom.div\n      {\n        // oxlint-disable solid/reactivity -- Keep prop filtering in the renderer's lazy evaluation.\n        ...omit(filterDOMProps(props, { global: true, labelable: true }), \"id\")\n        // oxlint-enable solid/reactivity\n      }\n      ref={props.ref}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TabPanels\"}\n      style={props.style}\n    >\n      <Collection {...props} />\n    </dom.div>\n  );\n}\n\nexport function TabPanel(\n  props: TabPanelProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  if (createIsHidden()) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return null;\n  }\n\n  const state = useContext(TabListStateContext);\n\n  if (!state) {\n    throw new Error(\"TabPanel must be rendered in Tabs.\");\n  }\n\n  const [panelRef, setPanelRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const initiallySelected = untrack(() => state.selectedKey === props.id);\n\n  const exiting = createExitAnimation(\n    panelRef,\n    () => state.selectedKey === props.id\n  );\n\n  return (\n    <Show\n      when={\n        (state.selectedKey === props.id || props.shouldForceMount) ?? exiting()\n      }\n    >\n      <TabPanelInner\n        props={props}\n        state={state}\n        panelRef={panelRef}\n        setPanelRef={(element: HTMLDivElement) => {\n          setPanelRef(element);\n        }}\n        initiallySelected={initiallySelected}\n        exiting={exiting}\n      />\n    </Show>\n  );\n}\n\nfunction TabPanelInner(input: {\n  props: TabPanelProps & { ref?: Ref<HTMLDivElement> };\n  state: TabListState<unknown>;\n  panelRef: Accessor<HTMLDivElement | null>;\n  setPanelRef: (element: HTMLDivElement) => void;\n  initiallySelected: boolean;\n  exiting: () => boolean;\n}): JSX.Element {\n  const ref = untrack(() => input.panelRef);\n\n  const aria = createTabPanel(\n    untrack(() => input.props),\n    untrack(() => input.state),\n    ref\n  );\n\n  const focus = createFocusRing();\n  const selected = () => input.state.selectedKey === input.props.id;\n  const entering = createEnterAnimation(ref);\n\n  const values: TabPanelRenderProps = {\n    get isEntering() {\n      return !input.initiallySelected && entering();\n    },\n    get isExiting() {\n      return input.exiting();\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    get isInert() {\n      return !selected();\n    },\n    get state() {\n      return input.state;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      { defaultClass: \"solid2-aria-TabPanel\", values }\n    )\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabPanelProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          input.setPanelRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      inert={!selected() || input.props.inert}\n      data-entering={values.isEntering || undefined}\n      data-exiting={values.isExiting || undefined}\n      data-inert={!selected() || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <TabsContext value={null}>\n        <TabListStateContext value={null}>\n          <CollectionRendererContext value={DefaultCollectionRenderer}>\n            {render.children}\n          </CollectionRendererContext>\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>\n  );\n}\n\nexport function Tab(\n  props: TabProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  return (\n    <TabCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />\n  );\n}\n\nexport function Tabs(\n  input: TabsProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TabsContext\n  );\n\n  const values: TabsRenderProps = {\n    get orientation() {\n      return props.orientation ?? \"horizontal\";\n    },\n  };\n\n  const content = () => {\n    const child = props.children;\n\n    return typeof child === \"function\"\n      ? child({ ...values, defaultChildren: undefined })\n      : child;\n  };\n\n  return (\n    <TabListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={content()}\n      >\n        {(collection) => (\n          <TabsInner props={props} collection={collection} tabsRef={setRef} />\n        )}\n      </CollectionBuilder>\n    </TabListStateContext>\n  );\n}\n\nfunction TabsInner(input: {\n  props: TabsProps;\n  collection: BaseCollection<object>;\n  tabsRef: (element: HTMLDivElement) => void;\n}): JSX.Element {\n  const state = createTabListState(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        children: undefined,\n        get collection() {\n          return input.collection;\n        },\n      }\n    )\n  );\n\n  const focus = createFocusRing({ within: true });\n\n  const values: TabsRenderProps = {\n    get orientation() {\n      return input.props.orientation ?? \"horizontal\";\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      { defaultClass: \"solid2-aria-Tabs\", values }\n    )\n  );\n\n  const tabProps = merge(() => input.props);\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(input.props, { global: true }),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={input.tabsRef}\n      slot={input.props.slot ?? undefined}\n      data-orientation={values.orientation}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n      data-disabled={state.isDisabled || undefined}\n    >\n      <TabsContext value={tabProps}>\n        <TabListStateContext value={state}>\n          {render.children}\n        </TabListStateContext>\n      </TabsContext>\n    </dom.div>\n  );\n}\n\nexport function TabList<T>(\n  props: TabListProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const state = useContext(TabListStateContext);\n\n  if (!state) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return <Collection {...props} />;\n  }\n\n  return <TabListInner props={props} state={state} />;\n}\n\nfunction TabListInner<T>(input: {\n  props: TabListProps<T> & { ref?: Ref<HTMLDivElement> };\n  state: TabListState<unknown>;\n}): JSX.Element {\n  const context = createSlottedContext(TabsContext);\n\n  const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n    ownedWrite: true,\n  });\n\n  const renderer = useContext(CollectionRendererContext);\n  const Root = renderer.CollectionRoot;\n\n  const aria = createTabList(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        get keyboardActivation() {\n          return context?.keyboardActivation;\n        },\n        get orientation() {\n          return context?.orientation;\n        },\n      }\n    ),\n    untrack(() => input.state),\n    ref\n  );\n\n  const values: TabListRenderProps = {\n    get orientation() {\n      return context?.orientation ?? \"horizontal\";\n    },\n    get state() {\n      return input.state;\n    },\n  };\n\n  const render = createRenderProps(\n    mergeProps(\n      merge(() => input.props ?? {}),\n      {\n        children: undefined,\n        defaultClass: \"solid2-aria-TabList\",\n        values,\n      }\n    )\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        omit(filterDOMProps(input.props, { global: true }), \"id\"),\n        merge(() => aria.tabListProps ?? {}),\n        render\n      )}\n      ref={[\n        (element: HTMLDivElement) => {\n          setRef(element);\n        },\n        (element: HTMLDivElement) => {\n          assignRef(\n            untrack(() => input.props.ref),\n            element\n          );\n        },\n      ]}\n      data-orientation={values.orientation}\n    >\n      <Root collection={input.state.collection} />\n    </dom.div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgYU,O,SAAC,CAAO;;;;;;;;;;;;;EAdV,O,SAAe,CAAK,cAAc,KAAA;;;;;;;EAClC,O,SAAe,CAAK,cAAc,KAAA;;;;;;;EAClC,O,UAAc,CAAM,aAAa,KAAA;;;;;;;EACjC,O,SAAc,CAAK,aAAa,KAAA;;;;;;;EAChC,O,UAAc,CAAM,aAAa,KAAA;;;;;;;EACjC,O,UAAoB,CAAM,kBAAkB,KAAA;;;;;;;;;EAE5C,OAAA,0BAAA,IAAA,IAOG,QANM,EACL,IAAI,aAAa;GACf,OAAO,KAAK;EACd,EACF,CAGyB,CAAA;;;;;;;;;;;;;;;;;;;;;;EAsB7B,O,SAAQ,CAAM;;;;;;;EACd,O,SAAO,CAAM,SAAS;;;;;;;EACtB,O,SAAO,CAAM;;;;;;;;EAEb,OAAA,WAAgB,KAAQ;;;;;;;CALxB,KAAA,OAAA,OAAA;;EAAK,IAAA,QAAA,MAAM;EAAX,OAAA,UAAA,cAAA,MAAA,QAAA,KAAc,IAAdA,SAAAA,OAAAA,EAAc,IAAd,MAAW,MAAXA;;;;;;;;;;;;;EAqCA,QACG,MAAM,gBAAgB,MAAM,MAAM,MAAM,qBAAqB,QAAQ;;;;;;;;;;;;;EAGxE,OAAA,cAAA;GACS;GACA;GACG;GACVC,cAAc,YAA4B;IACxC,YAAY,OAAO;GACrB;GACmB;GACV;EACV,CAAA;;;;;;;;;;;;;;;;;;EAkFK,O,SAAC,CAAO;;;;;;;;;;;;;;EADV,OAAA,0BAAA,IAAA,KACG,QAD+B,yBAEP,CAAA;;;;;;;;;;;;;;EAH7B,OAAA,oBAAA,IAAA,KAEK,QAFuB,IAIP,CAAA;;;;;;;;;;;;;;;EAZvB,OAAO,CAAC,SAAS,KAAK,MAAM,MAAM;;;;;;;EAClC,O,UAAe,CAAO,cAAc,KAAA;;;;;;;EACpC,O,UAAc,CAAO,aAAa,KAAA;;;;;;;;EAClC,OAAY,CAAC,SAAS,KAAK,KAAA;;;;;;;EAC3B,O,UAAc,CAAM,aAAa,KAAA;;;;;;;EACjC,O,UAAoB,CAAM,kBAAkB,KAAA;;;;;;;;EAE5C,OAAA,YAAA,IAAA,KAGO,QAHa,IAMP,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAgDX,OAAS,QAAQ;;;;;;;;;;;;;;;;;EAFnB,OAAA,kBAAA,IAAA,KAEW,eADe,IAAI,eAAuB,IAGjD,eAAA,UACA;GAAkB;GAAmB;GAAYC,SAAS;EAAS,CAAA,CAEpD,CAAA;;;;;;;;;;;;;;;EAuDf,O,SAAC,CAAO;;;;;;;;;;;;;;;EADV,OAAA,oBAAA,IAAA,MACG,QADyB,KAEP,CAAA;;;;;;;;;;;;;;EATvB,O,SAAM,CAAM,MAAM,QAAQ,KAAA;;;;;;;EAC1B,O,UAAkB,CAAO;;;;;;;EACzB,O,UAAc,CAAM,aAAa,KAAA;;;;;;;EACjC,O,UAAoB,CAAM,kBAAkB,KAAA;;;;;;;EAC5C,O,UAAe,CAAM,cAAc,KAAA;;;;;;;;;;EAEnC,OAAA,YAAA,IAAA,MAEK,QADyB,OADV,QAIP,CAAA;;;;;;;;;;;;CAXb,KAAA,OAAA,OAAA;;EAAK,IAAA,SAAA,MAAM;EAAX,OAAA,WAAA,cAAA,MAAA,QAAA,MAAkB,IAAlBC,SAAAA,QAAAA,EAAkB,IAAlB,MAAW,UAAXA;;;;;;;;;;;;EAkGM,O,SAAY,CAAM,MAAM;;;;;;;;;;;;EAF9B,O,SAAkB,CAAO;;;;;;;;;EAEzB,OAAA,KAAA,IAAA,MAAkB,KAAyB,CAAA;;;;;;;;;;;;;;AAtoBjD,MAAa,cACX,cAAuD,IAAI;AAE7D,MAAa,sBAAsB,cACjC,IACF;AAgMA,MAAM,gBAAgB,oBACpB,WAEE,OACA,cACA,SACgB;CAChB,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,+BAA+B;CAGjD,MAAM,CAAC,KAAK,UAAU,aAAoC,MAAM,EAC9D,YAAY,KACd,CAAC;CAED,MAAM,OAAO,UACX,WAAW,OAAO,EAChB,IAAI,MAAM;EACR,OAAO,KAAK;CACd,EACF,CAAC,GACD,OACA,GACF;CAEA,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,QAAQ,YACZ,WAAW,OAAO,EAChB,IAAI,aAAa;EACf,OAAO,KAAK;CACd,EACF,CAAC,CACH;CAuBA,MAAM,SAAS,kBACb,WAAW,OAAO;EAAE,cAAc;EAAmB,QAAA;GArBrD,IAAI,aAAa;IACf,OAAO,KAAK;GACd;GACA,IAAI,iBAAiB;IACnB,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,MAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,KAAK;GACd;GACA,IAAI,aAAa;IACf,OAAO,KAAK;GACd;EAIqD;CAAO,CAAC,CAC/D;CAIA,OAFgB,cAAe,SAAS,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,GAElE,CAAA,CACEC,mBACE;EAAI,OAAA,WACF,KAAK,eAAe,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,MAAM,SAAS,GAC7D,YAAY,KAAK,YAAY,CAAC,CAAC,GAC/B,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GAPH,IAAA,KAgBiB,MAED,OAEA,OAUX,QAtBE,EACF,YAA4B;EAC3B,OAAO,OAAO;CAChB,IACC,YAA4B;EAC3B,UAAU,cAAc,OAAO;CACjC,CACF,CAiBO,CAAA,CAAA;AAEb,CACF;AAEA,SAAgB,UACd,OACa;CACb,IAAI,eAAe,GAEjB,OAAO;CAGT,OAAA,IACGC,IAADC,mBACE;EAEK,OAAA,KAAK,eAAe,OAAO;GAAE,QAAQ;GAAM,WAAW;EAAK,CAAC,GAAG,IAAI;CAExE,GALF,IAAA,KAMO,KAME,CAAA,CAAA;AAEb;AAEA,SAAgB,SACd,OACa;CACb,IAAI,eAAe,GAEjB,OAAO;CAGT,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,oCAAoC;CAGtD,MAAM,CAAC,UAAU,eAAe,aAAoC,MAAM,EACxE,YAAY,KACd,CAAC;CAED,MAAM,oBAAoB,cAAc,MAAM,gBAAgB,MAAM,EAAE;CAEtE,MAAM,UAAU,oBACd,gBACM,MAAM,gBAAgB,MAAM,EACpC;CAEA,OAAA,KACE,IAAA,KAEK,OAAsB,OAAuC,SAMpD,UAER,aAEiB,iBAGjB,CAAA;AAEV;AAEA,SAAS,cAAc,OAOP;CACd,MAAM,MAAM,cAAc,MAAM,QAAQ;CAExC,MAAM,OAAO,eACX,cAAc,MAAM,KAAK,GACzB,cAAc,MAAM,KAAK,GACzB,GACF;CAEA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,MAAM;CAC/D,MAAM,WAAW,qBAAqB,GAAG;CAEzC,MAAM,SAA8B;EAClC,IAAI,aAAa;GACf,OAAO,CAAC,MAAM,qBAAqB,SAAS;EAC9C;EACA,IAAI,YAAY;GACd,OAAO,MAAM,QAAQ;EACvB;EACA,IAAI,iBAAiB;GACnB,OAAO,MAAM;EACf;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;EACA,IAAI,UAAU;GACZ,OAAO,CAAC,SAAS;EACnB;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;CACF;CAEA,MAAM,SAAS,kBACb,WACE,YAAY,MAAM,SAAS,CAAC,CAAC,GAC7B;EAAE,cAAc;EAAwB;CAAO,CACjD,CACF;CAEA,OAAA,IACGD,IAADE,mBACE;EAAI,OAAA,WACF,KAAK,eAAe,MAAM,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI,GACxD,YAAY,KAAK,iBAAiB,CAAC,CAAC,GACpC,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GANH,IAAA,KAkBU,UAAc,OACP,QAGD,OAMP,QArBF,EACF,YAA4B;EAC3B,MAAM,YAAY,OAAO;CAC3B,IACC,YAA4B;EAC3B,UACE,cAAc,MAAM,MAAM,GAAG,GAC7B,OACF;CACF,CACF,CAeO,CAAA,CAAA;AAEb;AAEA,SAAgB,IACd,OACa;CACb,OAAA,cACEC,aACM,OADN,EAEEC,MAAM,YAA4B;EAChC,UACE,cAAc,MAAM,GAAG,GACvB,OACF;CACF,EACD,CAAA,CAAA;AAEL;AAEA,SAAgB,KACd,OACa;CACb,MAAM,CAAC,SAAS,UAAU,mBACxB,OACA,cAAc,MAAM,GAAG,GACvB,WACF;CAEA,MAAM,SAA0B,EAC9B,IAAI,cAAc;EAChB,OAAO,MAAM,eAAe;CAC9B,EACF;CAEA,MAAM,gBAAgB;EACpB,MAAM,QAAQ,MAAM;EAEpB,OAAO,OAAO,UAAU,aACpB,MAAM;GAAE,GAAG;GAAQ,iBAAiB,KAAA;EAAU,CAAC,IAC/C;CACN;CAEA,OAAA,oBACE,IAAA,MAGa,SAGW,OAAwC,QANpC,IASP,CAAA;AAEzB;AAEA,SAAS,UAAU,OAIH;CACd,MAAM,QAAQ,mBACZ,WACE,YAAY,MAAM,SAAS,CAAC,CAAC,GAC7B;EACE,UAAU,KAAA;EACV,IAAI,aAAa;GACf,OAAO,MAAM;EACf;CACF,CACF,CACF;CAEA,MAAM,QAAQ,gBAAgB,EAAE,QAAQ,KAAK,CAAC;CAE9C,MAAM,SAA0B,EAC9B,IAAI,cAAc;EAChB,OAAO,MAAM,MAAM,eAAe;CACpC,EACF;CAEA,MAAM,SAAS,kBACb,WACE,YAAY,MAAM,SAAS,CAAC,CAAC,GAC7B;EAAE,cAAc;EAAoB;CAAO,CAC7C,CACF;CAEA,MAAM,WAAW,YAAY,MAAM,KAAK;CAExC,OAAA,IACGJ,IAADK,mBACE;EAAI,OAAA,WACF,eAAe,MAAM,OAAO,EAAE,QAAQ,KAAK,CAAC,GAC5C,YAAY,MAAM,cAAc,CAAC,CAAC,GAClC,MACF;CAAC,GALH,IAAA,MAMO,OAEa,QACJ,OAEC,OAIV,QAFe,QAKb,CAAA,CAAA;AAEb;AAEA,SAAgB,QACd,OACa;CACb,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,IAAI,CAAC,OAEH,OAAA,WAAuB,KAAQ;CAGjC,OAAA,aAAO;EAAqB;EAAc;CAAQ,CAAA;AACpD;AAEA,SAAS,aAAgB,OAGT;CACd,MAAM,UAAU,qBAAqB,WAAW;CAEhD,MAAM,CAAC,KAAK,UAAU,aAAoC,MAAM,EAC9D,YAAY,KACd,CAAC;CAGD,MAAM,OADW,WAAW,yBACf,CAAA,CAAS;CAEtB,MAAM,OAAO,cACX,WACE,YAAY,MAAM,SAAS,CAAC,CAAC,GAC7B;EACE,IAAI,qBAAqB;GACvB,OAAO,SAAS;EAClB;EACA,IAAI,cAAc;GAChB,OAAO,SAAS;EAClB;CACF,CACF,GACA,cAAc,MAAM,KAAK,GACzB,GACF;CAEA,MAAM,SAA6B;EACjC,IAAI,cAAc;GAChB,OAAO,SAAS,eAAe;EACjC;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;CACF;CAEA,MAAM,SAAS,kBACb,WACE,YAAY,MAAM,SAAS,CAAC,CAAC,GAC7B;EACE,UAAU,KAAA;EACV,cAAc;EACd;CACF,CACF,CACF;CAEA,OAAA,IACGL,IAADM,mBACE;EAAI,OAAA,WACF,KAAK,eAAe,MAAM,OAAO,EAAE,QAAQ,KAAK,CAAC,GAAG,IAAI,GACxD,YAAY,KAAK,gBAAgB,CAAC,CAAC,GACnC,MACF;CAAC,GALH,IAAA,MAiBoB,QAAA,MAEA,OAbb,EACF,YAA4B;EAC3B,OAAO,OAAO;CAChB,IACC,YAA4B;EAC3B,UACE,cAAc,MAAM,MAAM,GAAG,GAC7B,OACF;CACF,CACF,CAIO,CAAA,CAAA;AAEb"}

package/dist/server/tag-group.js

@@ -0,0 +1,538 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/TagGroup.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { assignRef, createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { SelectableCollectionContext } from "./autocomplete.js";
+import { CollectionRendererContext } from "./collection.js";
+import { LabelContext } from "./label.js";
+import { ButtonContext } from "./button.js";
+import { TextContext } from "./text.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { ListStateContext } from "./list-box.js";
+import { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { applyRef, memo, mergeProps as mergeProps$1 } from "@solidjs/web";
+import { BaseCollection, ItemNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createListState } from "@solid2-aria/stately/list/create-list-state";
+import { createTag } from "@solid2-aria/core/tag/create-tag";
+import { createTagGroup } from "@solid2-aria/core/tag/create-tag-group";
+// src/tag-group.tsx
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _m$5 = Symbol();
+var _m$6 = Symbol();
+var _d$ = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2) {
+	this[_m$] = _p;
+	this.value = _p2;
+	Object.defineProperty(this, "children", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		const render = this[_m$];
+		const aria = this[_m$2];
+		return SelectionIndicatorContext(new _P$(render, { get isSelected() {
+			return aria.isSelected;
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p3, _p4, _p5) {
+	this[_m$] = _p3;
+	this[_m$2] = _p4;
+	this.value = _p5;
+	Object.defineProperty(this, "children", _d$2);
+}
+_P$2.prototype = Object.prototype;
+var _d$3 = {
+	get() {
+		const render = this[_m$];
+		const aria = this[_m$2];
+		return ButtonContext(new _P$2(render, aria, { slots: { get remove() {
+			return aria.removeButtonProps;
+		} } }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p6, _p7) {
+	this[_m$] = _p6;
+	this[_m$2] = _p7;
+	Object.defineProperty(this, "children", _d$3);
+}
+_P$3.prototype = Object.prototype;
+var _d$4 = {
+	get() {
+		return this[_m$].isSelected || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		return this[_m$].isDisabled || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$6 = {
+	get() {
+		return this[_m$2].isHovered || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$7 = {
+	get() {
+		return this[_m$].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$8 = {
+	get() {
+		return this[_m$3].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$9 = {
+	get() {
+		return this[_m$].isPressed || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$10 = {
+	get() {
+		return this[_m$].allowsRemoving || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$11 = {
+	get() {
+		const state = this[_m$4];
+		return memo(() => {
+			return state.selectionManager.selectionMode === "none";
+		})() ? void 0 : state.selectionManager.selectionMode;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$12 = {
+	get() {
+		const aria = this[_m$];
+		const render = this[_m$5];
+		return dom.div(mergeProps$1(() => {
+			return aria.gridCellProps;
+		}, new _P$3(render, aria)));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p8, _p9, _p0, _p1, _p10, _p11) {
+	this[_m$] = _p8;
+	this[_m$2] = _p9;
+	this[_m$3] = _p0;
+	this[_m$4] = _p1;
+	this[_m$5] = _p10;
+	this.ref = _p11;
+	Object.defineProperty(this, "data-selected", _d$4);
+	Object.defineProperty(this, "data-disabled", _d$5);
+	Object.defineProperty(this, "data-hovered", _d$6);
+	Object.defineProperty(this, "data-focused", _d$7);
+	Object.defineProperty(this, "data-focus-visible", _d$8);
+	Object.defineProperty(this, "data-pressed", _d$9);
+	Object.defineProperty(this, "data-allows-removing", _d$10);
+	Object.defineProperty(this, "data-selection-mode", _d$11);
+	Object.defineProperty(this, "children", _d$12);
+}
+_P$4.prototype = Object.prototype;
+var _d$13 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p12, _p13, _p14) {
+	this[_m$] = _p12;
+	this.createCollection = _p13;
+	Object.defineProperty(this, "content", _d$13);
+	this.children = _p14;
+}
+_P$5.prototype = Object.prototype;
+var _d$14 = {
+	get() {
+		const props = this[_m$];
+		const setRef = this[_m$2];
+		return CollectionBuilder(new _P$5(props, () => new BaseCollection(), (collection) => TagGroupInner({
+			props,
+			collection,
+			groupRef: setRef
+		})));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p15, _p16, _p17) {
+	this[_m$] = _p15;
+	this[_m$2] = _p16;
+	this.value = _p17;
+	Object.defineProperty(this, "children", _d$14);
+}
+_P$6.prototype = Object.prototype;
+var _d$15 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p18, _p19) {
+	this[_m$] = _p18;
+	this.value = _p19;
+	Object.defineProperty(this, "children", _d$15);
+}
+_P$7.prototype = Object.prototype;
+var _d$16 = {
+	get() {
+		const props = this[_m$];
+		const aria = this[_m$2];
+		return TextContext(new _P$7(props, { slots: {
+			get description() {
+				return aria.descriptionProps;
+			},
+			get errorMessage() {
+				return aria.errorMessageProps;
+			}
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p20, _p21, _p22) {
+	this[_m$] = _p20;
+	this[_m$2] = _p21;
+	this.value = _p22;
+	Object.defineProperty(this, "children", _d$16);
+}
+_P$8.prototype = Object.prototype;
+var _d$17 = {
+	get() {
+		const props = this[_m$];
+		const aria = this[_m$2];
+		const state = this[_m$3];
+		return ListStateContext(new _P$8(props, aria, state));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p23, _p24, _p25, _p26) {
+	this[_m$] = _p23;
+	this[_m$2] = _p24;
+	this[_m$3] = _p25;
+	this.value = _p26;
+	Object.defineProperty(this, "children", _d$17);
+}
+_P$9.prototype = Object.prototype;
+var _d$18 = {
+	get() {
+		const aria = this[_m$];
+		const registerLabel = this[_m$2];
+		return mergeProps(merge(() => aria.labelProps ?? {}), {
+			get elementType() {
+				return "span";
+			},
+			registerSlot: registerLabel
+		});
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$19 = {
+	get() {
+		const props = this[_m$3];
+		const aria = this[_m$];
+		const state = this[_m$4];
+		const setListRef = this[_m$5];
+		return TagListContext(new _P$9(props, aria, state, {
+			get gridProps() {
+				return aria.gridProps;
+			},
+			ref: (element) => {
+				setListRef(element);
+			}
+		}));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$10(_p27, _p28, _p29, _p30, _p31) {
+	this[_m$] = _p27;
+	this[_m$2] = _p28;
+	this[_m$3] = _p29;
+	this[_m$4] = _p30;
+	this[_m$5] = _p31;
+	Object.defineProperty(this, "value", _d$18);
+	Object.defineProperty(this, "children", _d$19);
+}
+_P$10.prototype = Object.prototype;
+var _d$20 = {
+	get() {
+		return this[_m$2].render;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$21 = {
+	get() {
+		return this[_m$2].class ?? "solid2-aria-TagGroup";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$22 = {
+	get() {
+		return this[_m$2].style;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$23 = {
+	get() {
+		return this[_m$2].slot ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$24 = {
+	get() {
+		const aria = this[_m$3];
+		const registerLabel = this[_m$4];
+		const props = this[_m$2];
+		const state = this[_m$5];
+		const setListRef = this[_m$6];
+		return LabelContext(new _P$10(aria, registerLabel, props, state, setListRef));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$11(_p32, _p33, _p34, _p35, _p36, _p37) {
+	this[_m$] = _p32;
+	this[_m$2] = _p33;
+	this[_m$3] = _p34;
+	this[_m$4] = _p35;
+	this[_m$5] = _p36;
+	this[_m$6] = _p37;
+	this.ref = (r$) => {
+		const input = this[_m$];
+		var _ref$ = input.groupRef;
+		typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : input.groupRef = r$;
+	};
+	Object.defineProperty(this, "render", _d$20);
+	Object.defineProperty(this, "class", _d$21);
+	Object.defineProperty(this, "style", _d$22);
+	Object.defineProperty(this, "slot", _d$23);
+	Object.defineProperty(this, "children", _d$24);
+}
+_P$11.prototype = Object.prototype;
+var _d$25 = {
+	get() {
+		return this[_m$].collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$12(_p38) {
+	this[_m$] = _p38;
+	Object.defineProperty(this, "collection", _d$25);
+}
+_P$12.prototype = Object.prototype;
+var _d$26 = {
+	get() {
+		return this[_m$].isEmpty || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$27 = {
+	get() {
+		return this[_m$2].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$28 = {
+	get() {
+		return this[_m$2].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$29 = {
+	get() {
+		const Root = this[_m$3];
+		const state = this[_m$4];
+		const values = this[_m$];
+		const props = this[_m$5];
+		return [Root(new _P$12(state)), memo(() => {
+			return memo(() => {
+				return !!(values.isEmpty && props.renderEmptyState);
+			})() ? props.renderEmptyState(values) : null;
+		})];
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$13(_p39, _p40, _p41, _p42, _p43, _p44) {
+	this[_m$] = _p39;
+	this[_m$2] = _p40;
+	this[_m$3] = _p41;
+	this[_m$4] = _p42;
+	this[_m$5] = _p43;
+	this.ref = _p44;
+	Object.defineProperty(this, "data-empty", _d$26);
+	Object.defineProperty(this, "data-focused", _d$27);
+	Object.defineProperty(this, "data-focus-visible", _d$28);
+	Object.defineProperty(this, "children", _d$29);
+}
+_P$13.prototype = Object.prototype;
+const TagGroupContext = createContext(null);
+const TagListContext = createContext(null);
+const TagCollection = createLeafComponent(ItemNode, (props, forwardedRef, item) => {
+	const state = useContext(ListStateContext);
+	if (!state) throw new Error("Tag must be rendered in a TagGroup.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createTag({ item }, state, ref);
+	const focus = createFocusRing();
+	const hover = createHover(mergeProps(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-Tag",
+		values: {
+			get allowsRemoving() {
+				return aria.allowsRemoving;
+			},
+			get isDisabled() {
+				return aria.isDisabled;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return aria.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			},
+			get isPressed() {
+				return aria.isPressed;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			},
+			get selectionBehavior() {
+				return state.selectionManager.selectionBehavior;
+			},
+			get selectionMode() {
+				return state.selectionManager.selectionMode;
+			}
+		}
+	}));
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.rowProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}));
+	}, new _P$4(aria, hover, focus, state, render, [(element) => {
+		setRef(element);
+	}, (element) => {
+		assignRef(forwardedRef, element);
+	}])));
+});
+function Tag(props) {
+	return TagCollection(mergeProps$1(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function TagGroup(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TagGroupContext);
+	return ListStateContext(new _P$6(props, setRef, null));
+}
+function TagGroupInner(input) {
+	const [props, listRef, setListRef] = createContextProps(untrack(() => input.props), void 0, SelectableCollectionContext);
+	const [registerLabel, label] = createSlot(() => !isTruthy(props["aria-label"]) && !isTruthy(props["aria-labelledby"]));
+	const state = createListState(mergeProps(omit(props, "filter"), {
+		children: void 0,
+		get collection() {
+			return props.filter ? input.collection.filter(props.filter) : input.collection;
+		}
+	}));
+	const aria = createTagGroup(mergeProps(props, { get label() {
+		return label();
+	} }), state, listRef);
+	return dom.div(mergeProps$1(() => {
+		return filterDOMProps(input.props, { global: true });
+	}, new _P$11(input, props, aria, registerLabel, state, setListRef)));
+}
+function TagList(input) {
+	const state = useContext(ListStateContext);
+	if (!state) return Collection(input);
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TagListContext);
+	const context = createSlottedContext(TagListContext);
+	const Root = useContext(CollectionRendererContext).CollectionRoot;
+	const focus = createFocusRing();
+	const values = {
+		get isEmpty() {
+			return state.collection.size === 0;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-TagList",
+		values
+	}));
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(filterDOMProps(props, { global: true }), merge(() => context?.gridProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, new _P$13(values, focus, Root, state, props, (element) => {
+		setRef(element);
+	})));
+}
+export { Tag, TagGroup, TagGroupContext, TagList, TagListContext };
+
+//# sourceMappingURL=tag-group.js.map

package/dist/server/tag-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.js","names":["state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode","dom.div","<dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>","groupRef={setRef}","ref={input.groupRef}","{values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}","<dom.div\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          render,\n          merge(() => aria.rowProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={aria.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-allows-removing={aria.allowsRemoving || undefined}\n        data-selection-mode={\n          state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode\n        }\n      >\n        <dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>\n      </dom.div>","<TagCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />","ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}","<dom.div\n      {...filterDOMProps(input.props, { global: true })}\n      ref={input.groupRef}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TagGroup\"}\n      style={props.style}\n      slot={props.slot ?? undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>\n      </LabelContext>\n    </dom.div>","<dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context?.gridProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-empty={values.isEmpty || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <Root collection={state.collection} />\n      {values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}\n    </dom.div>","_$memo","_$mergeProps","_$applyRef"],"sources":["../../src/tag-group.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-aria-components/src/TagGroup.tsx.\n * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport {\n  BaseCollection,\n  ItemNode,\n} from \"@solid2-aria/core/collections/base-collection\";\nimport {\n  Collection,\n  CollectionBuilder,\n  createLeafComponent,\n} from \"@solid2-aria/core/collections/collection-builder\";\nimport { createFocusRing } from \"@solid2-aria/core/focus/create-focus-ring\";\nimport { createHover } from \"@solid2-aria/core/interactions/create-hover\";\nimport { createTag } from \"@solid2-aria/core/tag/create-tag\";\nimport { createTagGroup } from \"@solid2-aria/core/tag/create-tag-group\";\nimport type { AriaTagGroupProps } from \"@solid2-aria/core/tag/create-tag-group\";\nimport { filterDOMProps } from \"@solid2-aria/core/utils/filter-dom-props\";\nimport { mergeProps } from \"@solid2-aria/core/utils/merge-props\";\nimport { isTruthy } from \"@solid2-aria/core/utils/truthy\";\nimport { createListState } from \"@solid2-aria/stately/list/create-list-state\";\nimport type { ListState } from \"@solid2-aria/stately/list/create-list-state\";\nimport type {\n  FocusEvents,\n  HoverEvents,\n  Key,\n  LinkDOMProps,\n  PressEvents,\n  Node,\n} from \"@solid2-aria/types-shared\";\nimport type {\n  DOMAttributes,\n  GlobalDOMAttributes,\n} from \"@solid2-aria/types-shared-web\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  merge,\n  untrack,\n  createSignal,\n  createContext,\n  useContext,\n  omit,\n} from \"solid-js\";\n\nimport { SelectableCollectionContext } from \"./autocomplete\";\nimport type { SelectableCollectionContextValue } from \"./autocomplete\";\nimport { ButtonContext } from \"./button\";\nimport { CollectionRendererContext } from \"./collection\";\nimport type { CollectionProps, ItemRenderProps } from \"./collection\";\nimport { LabelContext } from \"./label\";\nimport { ListStateContext } from \"./list-box\";\nimport { SelectionIndicatorContext } from \"./selection-indicator\";\nimport { TextContext } from \"./text\";\nimport {\n  dom,\n  createContextProps,\n  createRenderProps,\n  createSlot,\n  createSlottedContext,\n  assignRef,\n} from \"./utils\";\nimport type {\n  Ref,\n  ClassOrFunction,\n  DOMProps,\n  DOMRenderProps,\n  RenderProps,\n  SlotProps,\n  StyleRenderProps,\n  ContextValue,\n} from \"./utils\";\n\nexport const TagGroupContext =\n  createContext<ContextValue<TagGroupProps, HTMLElement>>(null);\n\nexport const TagListContext = createContext<\n  ContextValue<\n    TagListProps<unknown> & {\n      gridProps?: DOMAttributes;\n    },\n    HTMLElement\n  >\n>(null);\n\nexport interface TagGroupProps\n  extends\n    Omit<\n      AriaTagGroupProps<unknown>,\n      | \"children\"\n      | \"items\"\n      | \"label\"\n      | \"description\"\n      | \"errorMessage\"\n      | \"keyboardDelegate\"\n    >,\n    DOMProps,\n    SlotProps,\n    DOMRenderProps<\"div\", undefined>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element.\n   *\n   * @default 'react-aria-TagGroup'\n   */\n  class?: JSX.ClassValue;\n}\n\nexport interface TagListRenderProps {\n  /**\n   * Whether the tag list has no items and should display its empty state.\n   *\n   * @selector [data-empty]\n   */\n  isEmpty: boolean;\n  /**\n   * Whether the tag list is currently focused.\n   *\n   * @selector [data-focused]\n   */\n  isFocused: boolean;\n  /**\n   * Whether the tag list is currently keyboard focused.\n   *\n   * @selector [data-focus-visible]\n   */\n  isFocusVisible: boolean;\n  /**\n   * State of the TagGroup.\n   */\n  state: ListState<unknown>;\n}\n\nexport interface TagListProps<T>\n  extends\n    Omit<CollectionProps<T>, \"disabledKeys\">,\n    StyleRenderProps<TagListRenderProps>,\n    GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-TagList'\n   */\n  class?: ClassOrFunction<TagListRenderProps>;\n  /** Provides content to display when there are no items in the tag list. */\n  renderEmptyState?: (props: TagListRenderProps) => JSX.Element;\n}\n\nexport interface TagRenderProps extends Omit<\n  ItemRenderProps,\n  \"allowsDragging\" | \"isDragging\" | \"isDropTarget\"\n> {\n  /**\n   * Whether the tag group allows items to be removed.\n   *\n   * @selector [data-allows-removing]\n   */\n  allowsRemoving: boolean;\n}\n\nexport interface TagProps\n  extends\n    RenderProps<TagRenderProps>,\n    LinkDOMProps,\n    HoverEvents,\n    FocusEvents,\n    PressEvents,\n    Omit<GlobalDOMAttributes<HTMLDivElement>, \"onClick\"> {\n  /**\n   * The CSS [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) for the\n   * element. A function may be provided to compute the class based on component state.\n   *\n   * @default 'react-aria-Tag'\n   */\n  class?: ClassOrFunction<TagRenderProps>;\n  /** A unique id for the tag. */\n  id?: Key;\n  /**\n   * A string representation of the tags's contents, used for accessibility.\n   * Required if children is not a plain text string.\n   */\n  textValue?: string;\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Handler that is called when a user performs an action on the item. The exact user event depends\n   * on the collection's `selectionBehavior` prop and the interaction modality.\n   */\n  onAction?: () => void;\n}\n\nconst TagCollection = createLeafComponent(\n  ItemNode,\n  (\n    props: TagProps,\n    forwardedRef: Ref<HTMLDivElement>,\n    item: Node<unknown>\n  ): JSX.Element => {\n    const state = useContext(ListStateContext);\n\n    if (!state) {\n      throw new Error(\"Tag must be rendered in a TagGroup.\");\n    }\n\n    const [ref, setRef] = createSignal<HTMLDivElement | null>(null, {\n      ownedWrite: true,\n    });\n\n    const aria = createTag({ item }, state, ref);\n    const focus = createFocusRing();\n\n    const hover = createHover(\n      mergeProps(props, {\n        get isDisabled() {\n          return aria.isDisabled;\n        },\n      })\n    );\n\n    const values: TagRenderProps = {\n      get allowsRemoving() {\n        return aria.allowsRemoving;\n      },\n      get isDisabled() {\n        return aria.isDisabled;\n      },\n      get isFocusVisible() {\n        return focus.isFocusVisible;\n      },\n      get isFocused() {\n        return aria.isFocused;\n      },\n      get isHovered() {\n        return hover.isHovered;\n      },\n      get isPressed() {\n        return aria.isPressed;\n      },\n      get isSelected() {\n        return aria.isSelected;\n      },\n      get selectionBehavior() {\n        return state.selectionManager.selectionBehavior;\n      },\n      get selectionMode() {\n        return state.selectionManager.selectionMode;\n      },\n    };\n\n    const render = createRenderProps(\n      mergeProps(props, { defaultClass: \"solid2-aria-Tag\", values })\n    );\n\n    return (\n      <dom.div\n        {...mergeProps(\n          omit(filterDOMProps(props, { global: true }), \"id\", \"onClick\"),\n          render,\n          merge(() => aria.rowProps ?? {}),\n          merge(() => focus.focusProps ?? {}),\n          merge(() => hover.hoverProps ?? {})\n        )}\n        ref={[\n          (element: HTMLDivElement) => {\n            setRef(element);\n          },\n          (element: HTMLDivElement) => {\n            assignRef(forwardedRef, element);\n          },\n        ]}\n        data-selected={aria.isSelected || undefined}\n        data-disabled={aria.isDisabled || undefined}\n        data-hovered={hover.isHovered || undefined}\n        data-focused={aria.isFocused || undefined}\n        data-focus-visible={focus.isFocusVisible || undefined}\n        data-pressed={aria.isPressed || undefined}\n        data-allows-removing={aria.allowsRemoving || undefined}\n        data-selection-mode={\n          state.selectionManager.selectionMode === \"none\"\n            ? undefined\n            : state.selectionManager.selectionMode\n        }\n      >\n        <dom.div {...aria.gridCellProps}>\n          <ButtonContext\n            value={{\n              slots: {\n                get remove() {\n                  return aria.removeButtonProps;\n                },\n              },\n            }}\n          >\n            <SelectionIndicatorContext\n              value={{\n                get isSelected() {\n                  return aria.isSelected;\n                },\n              }}\n            >\n              {render.children}\n            </SelectionIndicatorContext>\n          </ButtonContext>\n        </dom.div>\n      </dom.div>\n    );\n  }\n);\n\nexport function Tag(\n  props: TagProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  return (\n    <TagCollection\n      {...props}\n      ref={(element: HTMLDivElement) => {\n        assignRef(\n          untrack(() => props.ref),\n          element\n        );\n      }}\n    />\n  );\n}\n\nexport function TagGroup(\n  input: TagGroupProps & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TagGroupContext\n  );\n\n  return (\n    <ListStateContext value={null}>\n      <CollectionBuilder\n        createCollection={() => new BaseCollection<object>()}\n        content={props.children}\n      >\n        {(collection) => (\n          <TagGroupInner\n            props={props}\n            collection={collection}\n            groupRef={setRef}\n          />\n        )}\n      </CollectionBuilder>\n    </ListStateContext>\n  );\n}\n\nfunction TagGroupInner(input: {\n  props: TagGroupProps & SelectableCollectionContextValue<object>;\n  collection: BaseCollection<object>;\n  groupRef: (element: HTMLDivElement) => void;\n}): JSX.Element {\n  const [props, listRef, setListRef] = createContextProps(\n    untrack(() => input.props),\n    undefined,\n    SelectableCollectionContext\n  );\n\n  const [registerLabel, label] = createSlot(\n    () => !isTruthy(props[\"aria-label\"]) && !isTruthy(props[\"aria-labelledby\"])\n  );\n\n  const state = createListState(\n    mergeProps(omit(props, \"filter\"), {\n      children: undefined,\n      get collection() {\n        return props.filter\n          ? input.collection.filter(props.filter)\n          : input.collection;\n      },\n    })\n  );\n\n  const aria = createTagGroup(\n    mergeProps(props, {\n      get label() {\n        return label();\n      },\n    }),\n    state,\n    listRef\n  );\n\n  return (\n    <dom.div\n      {...filterDOMProps(input.props, { global: true })}\n      ref={input.groupRef}\n      render={props.render}\n      class={props.class ?? \"solid2-aria-TagGroup\"}\n      style={props.style}\n      slot={props.slot ?? undefined}\n    >\n      <LabelContext\n        value={mergeProps(\n          merge(() => aria.labelProps ?? {}),\n          {\n            get elementType(): \"span\" {\n              return \"span\";\n            },\n            registerSlot: registerLabel,\n          }\n        )}\n      >\n        <TagListContext\n          value={{\n            get gridProps() {\n              return aria.gridProps;\n            },\n            ref: (element: HTMLElement) => {\n              setListRef(element);\n            },\n          }}\n        >\n          <ListStateContext value={state}>\n            <TextContext\n              value={{\n                slots: {\n                  get description() {\n                    return aria.descriptionProps;\n                  },\n                  get errorMessage() {\n                    return aria.errorMessageProps;\n                  },\n                },\n              }}\n            >\n              {props.children}\n            </TextContext>\n          </ListStateContext>\n        </TagListContext>\n      </LabelContext>\n    </dom.div>\n  );\n}\n\nexport function TagList<T>(\n  input: TagListProps<T> & { ref?: Ref<HTMLDivElement> }\n): JSX.Element {\n  const state = useContext(ListStateContext);\n\n  if (!state) {\n    // oxlint-disable-next-line solid/components-return-once -- Static collection traversal and context registration are fixed when the owner is created.\n    return <Collection {...input} />;\n  }\n\n  const [props, , setRef] = createContextProps(\n    input,\n    untrack(() => input.ref),\n    TagListContext\n  );\n\n  const context = createSlottedContext(TagListContext);\n  const renderer = useContext(CollectionRendererContext);\n  const Root = renderer.CollectionRoot;\n  const focus = createFocusRing();\n\n  const values: TagListRenderProps = {\n    get isEmpty() {\n      return state.collection.size === 0;\n    },\n    get isFocusVisible() {\n      return focus.isFocusVisible;\n    },\n    get isFocused() {\n      return focus.isFocused;\n    },\n    state,\n  };\n\n  const render = createRenderProps(\n    mergeProps(props, {\n      children: undefined,\n      defaultClass: \"solid2-aria-TagList\",\n      values,\n    })\n  );\n\n  return (\n    <dom.div\n      {...mergeProps(\n        filterDOMProps(props, { global: true }),\n        merge(() => context?.gridProps ?? {}),\n        merge(() => focus.focusProps ?? {}),\n        render\n      )}\n      ref={(element: HTMLDivElement) => {\n        setRef(element);\n      }}\n      data-empty={values.isEmpty || undefined}\n      data-focused={focus.isFocused || undefined}\n      data-focus-visible={focus.isFocusVisible || undefined}\n    >\n      <Root collection={state.collection} />\n      {values.isEmpty && props.renderEmptyState\n        ? props.renderEmptyState(values)\n        : null}\n    </dom.div>\n  );\n}\n"],"mappings":"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"}