@economic/taco 10.0.0-hanger-base-ui-migration.0 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Actions/Link/Link.cjs +1 -1
- package/dist/components/Actions/Link/Link.cjs.map +1 -1
- package/dist/components/Actions/Link/Link.js +1 -1
- package/dist/components/Actions/Link/Link.js.map +1 -1
- package/dist/components/Hanger/Hanger.cjs +1 -9
- package/dist/components/Hanger/Hanger.cjs.map +1 -1
- package/dist/components/Hanger/Hanger.d.ts +2 -2
- package/dist/components/Hanger/Hanger.js +1 -9
- package/dist/components/Hanger/Hanger.js.map +1 -1
- package/package.json +2 -2
|
@@ -35,7 +35,7 @@ function LinkInner(props, ref) {
|
|
|
35
35
|
size ? [typography.TYPOGRAPHY_TEXT_SIZE_CLASSES[size], typography.TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
|
|
36
36
|
/** set underline thickness depending on size of Link */
|
|
37
37
|
size === "sm" ? "decoration-1" : "decoration-2",
|
|
38
|
-
"underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ",
|
|
38
|
+
"underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ",
|
|
39
39
|
{
|
|
40
40
|
"font-bold": bold
|
|
41
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n as?: T;\n /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n size?: 'sm' | 'md' | 'lg';\n /** If true, the Link will be rendered in bold */\n bold?: boolean;\n /** The content of the Link */\n children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> },\n ref: React.Ref<unknown>\n) {\n // Destructure and discard className/style to prevent them from being applied at runtime\n const {\n as,\n size,\n bold,\n children,\n className: _,\n style: __,\n ...otherProps\n } = props as LinkProps<T> & {\n className?: string;\n style?: React.CSSProperties;\n };\n\n const Component: React.ElementType = as || 'a';\n\n const className = cn(\n size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n /** set underline thickness depending on size of Link */\n size === 'sm' ? 'decoration-1' : 'decoration-2',\n 'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ',\n {\n 'font-bold': bold,\n }\n );\n\n return (\n <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n {children}\n </Component>\n );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAACA,WAAAA,6BAA6B,IAAI,GAAGC,WAAAA,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAC,iCAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAOA,iBAAM,WAAW,SAAS;;"}
|
|
1
|
+
{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n as?: T;\n /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n size?: 'sm' | 'md' | 'lg';\n /** If true, the Link will be rendered in bold */\n bold?: boolean;\n /** The content of the Link */\n children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> },\n ref: React.Ref<unknown>\n) {\n // Destructure and discard className/style to prevent them from being applied at runtime\n const {\n as,\n size,\n bold,\n children,\n className: _,\n style: __,\n ...otherProps\n } = props as LinkProps<T> & {\n className?: string;\n style?: React.CSSProperties;\n };\n\n const Component: React.ElementType = as || 'a';\n\n const className = cn(\n size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n /** set underline thickness depending on size of Link */\n size === 'sm' ? 'decoration-1' : 'decoration-2',\n 'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ',\n {\n 'font-bold': bold,\n }\n );\n\n return (\n <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n {children}\n </Component>\n );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAACA,WAAAA,6BAA6B,IAAI,GAAGC,WAAAA,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAC,iCAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAOA,iBAAM,WAAW,SAAS;;"}
|
|
@@ -16,7 +16,7 @@ function LinkInner(props, ref) {
|
|
|
16
16
|
size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
|
|
17
17
|
/** set underline thickness depending on size of Link */
|
|
18
18
|
size === "sm" ? "decoration-1" : "decoration-2",
|
|
19
|
-
"underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ",
|
|
19
|
+
"underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ",
|
|
20
20
|
{
|
|
21
21
|
"font-bold": bold
|
|
22
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n as?: T;\n /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n size?: 'sm' | 'md' | 'lg';\n /** If true, the Link will be rendered in bold */\n bold?: boolean;\n /** The content of the Link */\n children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> },\n ref: React.Ref<unknown>\n) {\n // Destructure and discard className/style to prevent them from being applied at runtime\n const {\n as,\n size,\n bold,\n children,\n className: _,\n style: __,\n ...otherProps\n } = props as LinkProps<T> & {\n className?: string;\n style?: React.CSSProperties;\n };\n\n const Component: React.ElementType = as || 'a';\n\n const className = cn(\n size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n /** set underline thickness depending on size of Link */\n size === 'sm' ? 'decoration-1' : 'decoration-2',\n 'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 hover:text-blue-900 active:text-blue-900 visited:text-blue-700 underline-offset-2 ',\n {\n 'font-bold': bold,\n }\n );\n\n return (\n <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n {children}\n </Component>\n );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAAC,6BAA6B,IAAI,GAAG,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAO,MAAM,WAAW,SAAS;"}
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n as?: T;\n /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n size?: 'sm' | 'md' | 'lg';\n /** If true, the Link will be rendered in bold */\n bold?: boolean;\n /** The content of the Link */\n children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> },\n ref: React.Ref<unknown>\n) {\n // Destructure and discard className/style to prevent them from being applied at runtime\n const {\n as,\n size,\n bold,\n children,\n className: _,\n style: __,\n ...otherProps\n } = props as LinkProps<T> & {\n className?: string;\n style?: React.CSSProperties;\n };\n\n const Component: React.ElementType = as || 'a';\n\n const className = cn(\n size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n /** set underline thickness depending on size of Link */\n size === 'sm' ? 'decoration-1' : 'decoration-2',\n 'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ',\n {\n 'font-bold': bold,\n }\n );\n\n return (\n <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n {children}\n </Component>\n );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAAC,6BAA6B,IAAI,GAAG,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAO,MAAM,WAAW,SAAS;"}
|
|
@@ -29,15 +29,7 @@ const HangerContext = React__namespace.createContext({
|
|
|
29
29
|
anchorRef: { current: null },
|
|
30
30
|
onClose: void 0
|
|
31
31
|
});
|
|
32
|
-
const Anchor = React__namespace.
|
|
33
|
-
if (!React__namespace.isValidElement(props.children)) {
|
|
34
|
-
return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, props.children);
|
|
35
|
-
}
|
|
36
|
-
const child = props.children;
|
|
37
|
-
return React__namespace.cloneElement(child, {
|
|
38
|
-
ref: child.ref ? mergeRefs.mergeRefs([ref, child.ref]) : ref
|
|
39
|
-
});
|
|
40
|
-
});
|
|
32
|
+
const Anchor = ({ children }) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, children);
|
|
41
33
|
const Title = React__namespace.forwardRef(function DialogTitle(props, ref) {
|
|
42
34
|
const className = cn("mb-1 text-base font-bold flex w-full", props.className);
|
|
43
35
|
return /* @__PURE__ */ React__namespace.createElement("span", { ...props, className, ref });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n /** Handler called when hanger closes by user interaction */\n onClose?: () => void;\n anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n anchorRef: { current: null },\n onClose: undefined,\n});\n\nexport type HangerTexts = {\n /** Aria-label for the close icon button of hanger */\n close: string;\n};\n\nexport type HangerAnchorProps = React.
|
|
1
|
+
{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n /** Handler called when hanger closes by user interaction */\n onClose?: () => void;\n anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n anchorRef: { current: null },\n onClose: undefined,\n});\n\nexport type HangerTexts = {\n /** Aria-label for the close icon button of hanger */\n close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n placement?: Placement;\n hideWhenDetached?: boolean;\n container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n const context = React.useContext(HangerContext);\n const { texts } = useLocalization();\n const className = cn(\n 'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n props.className\n );\n\n return (\n <PopoverPrimitive.Portal container={container}>\n <PopoverPrimitive.Positioner\n anchor={context.anchorRef}\n className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n side={side}\n sideOffset={11}>\n <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n {props.children}\n <UnstyledArrow className=\"text-blue-500\" />\n <PopoverPrimitive.Close\n render={\n <LegacyIconButton\n appearance=\"primary\"\n aria-label={texts.hanger.close}\n className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n icon=\"close\"\n onClick={context.onClose}\n />\n }\n />\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n anchor?: JSX.Element;\n /**\n * Shows or hides hanger depending on the value\n * @defaultValue true\n */\n defaultOpen?: boolean;\n /** Handler called when user closes the hanger */\n onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n Anchor: React.FC<HangerAnchorProps>;\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n const anchorRef = React.useRef<HTMLElement>(null);\n const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n const [open, setOpen] = React.useState(false);\n React.useEffect(() => {\n if (defaultOpen) {\n setOpen(defaultOpen);\n }\n }, []);\n\n // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n eventDetails.cancel();\n return;\n }\n\n setOpen(nextOpen);\n };\n\n // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n return (\n <HangerContext.Provider value={context}>\n <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n {/* Anchor via the `anchor` prop. */}\n {anchor}\n {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n {children}\n </PopoverPrimitive.Root>\n </span>\n </HangerContext.Provider>\n );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","LegacyIconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAS,sFAAS,QAAS;AAGnE,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQA,iCAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAUA,iBAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACKD,iCAAA,cAAAE,QAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAAF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAiB,QAAA,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAc,eAAA,EAAA,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAA;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAAA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAAA,iCAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtBA,iCAAA,cAAAE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}
|
|
@@ -4,7 +4,7 @@ export type HangerTexts = {
|
|
|
4
4
|
/** Aria-label for the close icon button of hanger */
|
|
5
5
|
close: string;
|
|
6
6
|
};
|
|
7
|
-
export type HangerAnchorProps = React.
|
|
7
|
+
export type HangerAnchorProps = React.PropsWithChildren;
|
|
8
8
|
export type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
|
|
9
9
|
export declare const Title: React.ForwardRefExoticComponent<HangerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
10
10
|
export type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -25,7 +25,7 @@ export type HangerProps = React.PropsWithChildren<{
|
|
|
25
25
|
onClose?: () => void;
|
|
26
26
|
}>;
|
|
27
27
|
export type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {
|
|
28
|
-
Anchor: React.
|
|
28
|
+
Anchor: React.FC<HangerAnchorProps>;
|
|
29
29
|
Content: React.ForwardRefExoticComponent<HangerContentProps>;
|
|
30
30
|
Title: React.ForwardRefExoticComponent<HangerTitleProps>;
|
|
31
31
|
};
|
|
@@ -10,15 +10,7 @@ const HangerContext = React.createContext({
|
|
|
10
10
|
anchorRef: { current: null },
|
|
11
11
|
onClose: void 0
|
|
12
12
|
});
|
|
13
|
-
const Anchor = React.
|
|
14
|
-
if (!React.isValidElement(props.children)) {
|
|
15
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
|
|
16
|
-
}
|
|
17
|
-
const child = props.children;
|
|
18
|
-
return React.cloneElement(child, {
|
|
19
|
-
ref: child.ref ? mergeRefs([ref, child.ref]) : ref
|
|
20
|
-
});
|
|
21
|
-
});
|
|
13
|
+
const Anchor = ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children);
|
|
22
14
|
const Title = React.forwardRef(function DialogTitle(props, ref) {
|
|
23
15
|
const className = cn("mb-1 text-base font-bold flex w-full", props.className);
|
|
24
16
|
return /* @__PURE__ */ React.createElement("span", { ...props, className, ref });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n /** Handler called when hanger closes by user interaction */\n onClose?: () => void;\n anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n anchorRef: { current: null },\n onClose: undefined,\n});\n\nexport type HangerTexts = {\n /** Aria-label for the close icon button of hanger */\n close: string;\n};\n\nexport type HangerAnchorProps = React.
|
|
1
|
+
{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n /** Handler called when hanger closes by user interaction */\n onClose?: () => void;\n anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n anchorRef: { current: null },\n onClose: undefined,\n});\n\nexport type HangerTexts = {\n /** Aria-label for the close icon button of hanger */\n close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n placement?: Placement;\n hideWhenDetached?: boolean;\n container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n const context = React.useContext(HangerContext);\n const { texts } = useLocalization();\n const className = cn(\n 'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n props.className\n );\n\n return (\n <PopoverPrimitive.Portal container={container}>\n <PopoverPrimitive.Positioner\n anchor={context.anchorRef}\n className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n side={side}\n sideOffset={11}>\n <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n {props.children}\n <UnstyledArrow className=\"text-blue-500\" />\n <PopoverPrimitive.Close\n render={\n <LegacyIconButton\n appearance=\"primary\"\n aria-label={texts.hanger.close}\n className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n icon=\"close\"\n onClick={context.onClose}\n />\n }\n />\n </PopoverPrimitive.Popup>\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n anchor?: JSX.Element;\n /**\n * Shows or hides hanger depending on the value\n * @defaultValue true\n */\n defaultOpen?: boolean;\n /** Handler called when user closes the hanger */\n onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n Anchor: React.FC<HangerAnchorProps>;\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n const anchorRef = React.useRef<HTMLElement>(null);\n const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n const [open, setOpen] = React.useState(false);\n React.useEffect(() => {\n if (defaultOpen) {\n setOpen(defaultOpen);\n }\n }, []);\n\n // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n eventDetails.cancel();\n return;\n }\n\n setOpen(nextOpen);\n };\n\n // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n return (\n <HangerContext.Provider value={context}>\n <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n {/* Anchor via the `anchor` prop. */}\n {anchor}\n {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n {children}\n </PopoverPrimitive.Root>\n </span>\n </HangerContext.Provider>\n );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":";;;;;;;;AAgBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAS,gEAAS,QAAS;AAGnE,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQ,sBAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAU,MAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACK,sBAAA,cAAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAA,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAc,EAAA,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAA,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAA,sBAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtB,sBAAA,cAAAD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@economic/taco",
|
|
3
|
-
"version": "10.0.0
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"optionalDependencies": {
|
|
102
102
|
"@rollup/rollup-linux-x64-gnu": "^4.62.2"
|
|
103
103
|
},
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "8aa4a016f5ffaf5a210f49cbc675bef2868808ec"
|
|
105
105
|
}
|