@atom-learning/components 11.0.0 → 11.1.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/select-menu/SelectMenu.d.ts +2 -1
- package/dist/components/select-menu/SelectMenuContent.d.ts +3 -1
- package/dist/components/select-menu/SelectMenuContent.js +16 -11
- package/dist/components/select-menu/SelectMenuContent.js.map +1 -1
- package/dist/components/select-menu/SelectMenuItem.js +4 -3
- package/dist/components/select-menu/SelectMenuItem.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +20 -14
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,8 +12,9 @@ export declare const SelectMenu: (({ size, theme, state, className, children, ..
|
|
|
12
12
|
placeholder?: string;
|
|
13
13
|
children?: React.ReactNode;
|
|
14
14
|
}) => React.JSX.Element;
|
|
15
|
-
Content: ({ ref, children, offset, ...rest }: Omit<AriaComponents.PopoverProps & React.RefAttributes<HTMLElement>, "children"> & {
|
|
15
|
+
Content: ({ ref, children, offset, matchTriggerWidth, ...rest }: Omit<AriaComponents.PopoverProps & React.RefAttributes<HTMLElement>, "children"> & {
|
|
16
16
|
children?: React.ReactNode;
|
|
17
|
+
matchTriggerWidth?: boolean;
|
|
17
18
|
}) => React.JSX.Element;
|
|
18
19
|
Item: ({ children, textValue, ...rest }: Omit<AriaComponents.ListBoxItemProps<object>, "children"> & {
|
|
19
20
|
children?: React.ReactNode;
|
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import * as AriaComponents from 'react-aria-components';
|
|
3
3
|
type SelectMenuContentProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Popover>, 'children'> & {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
|
+
/** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */
|
|
6
|
+
matchTriggerWidth?: boolean;
|
|
5
7
|
};
|
|
6
|
-
export declare const SelectMenuContent: ({ ref, children, offset, ...rest }: SelectMenuContentProps) => React.JSX.Element;
|
|
8
|
+
export declare const SelectMenuContent: ({ ref, children, offset, matchTriggerWidth, ...rest }: SelectMenuContentProps) => React.JSX.Element;
|
|
7
9
|
export {};
|
|
@@ -3,16 +3,20 @@ import "react";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import * as AriaComponents from "react-aria-components";
|
|
5
5
|
//#region src/components/select-menu/SelectMenuContent.tsx
|
|
6
|
-
var Content = styled(AriaComponents.Popover, {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
var Content = styled(AriaComponents.Popover, {
|
|
7
|
+
base: [
|
|
8
|
+
"bg-white",
|
|
9
|
+
"rounded-md",
|
|
10
|
+
"shadow-lg",
|
|
11
|
+
"z-10",
|
|
12
|
+
"overflow-hidden",
|
|
13
|
+
"will-change-transform"
|
|
14
|
+
],
|
|
15
|
+
variants: { matchTriggerWidth: {
|
|
16
|
+
true: ["w-(--trigger-width)"],
|
|
17
|
+
false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
|
|
18
|
+
} }
|
|
19
|
+
}, { enablePolymorphism: false });
|
|
16
20
|
var Viewport = styled(AriaComponents.ListBox, { base: [
|
|
17
21
|
"max-h-[inherit]",
|
|
18
22
|
"w-full",
|
|
@@ -20,10 +24,11 @@ var Viewport = styled(AriaComponents.ListBox, { base: [
|
|
|
20
24
|
"p-1",
|
|
21
25
|
"outline-none"
|
|
22
26
|
] }, { enablePolymorphism: false });
|
|
23
|
-
var SelectMenuContent = ({ ref, children, offset = 4, ...rest }) => /* @__PURE__ */ jsx(Content, {
|
|
27
|
+
var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => /* @__PURE__ */ jsx(Content, {
|
|
24
28
|
ref,
|
|
25
29
|
offset,
|
|
26
30
|
containerPadding: 8,
|
|
31
|
+
matchTriggerWidth,
|
|
27
32
|
...rest,
|
|
28
33
|
children: /* @__PURE__ */ jsx(Viewport, { children })
|
|
29
34
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n AriaComponents.Popover,\n {\n base: [\n 'bg-white',\n 'rounded-md',\n 'shadow-lg',\n 'z-10',\n 'overflow-hidden',\n 'will-change-transform',\n // Floors at the trigger width; caps at min(viewport − 8px per edge
|
|
1
|
+
{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n AriaComponents.Popover,\n {\n base: [\n 'bg-white',\n 'rounded-md',\n 'shadow-lg',\n 'z-10',\n 'overflow-hidden',\n 'will-change-transform'\n ],\n variants: {\n matchTriggerWidth: {\n // Pinned to exactly the trigger width — the dropdown never grows or\n // shrinks to its content. The trigger is on-screen, so no viewport cap\n // is needed.\n true: ['w-(--trigger-width)'],\n // Floors at the trigger width; caps at min(viewport − 8px per edge,\n // 400px) on the --spacing() scale: --spacing(4)=16px (2×8px),\n // --spacing(100)=400px.\n false: [\n 'min-w-(--trigger-width)',\n 'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n ]\n }\n }\n },\n { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n AriaComponents.ListBox,\n {\n base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n 'children'\n> & {\n children?: React.ReactNode\n /** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */\n matchTriggerWidth?: boolean\n}\n\nexport const SelectMenuContent = ({\n ref,\n children,\n offset = 4,\n matchTriggerWidth = false,\n ...rest\n}: SelectMenuContentProps) => (\n // offset/containerPadding are react-aria positioner props in px (JS numbers,\n // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n <Content\n ref={ref}\n offset={offset}\n containerPadding={8}\n matchTriggerWidth={matchTriggerWidth}\n {...rest}\n >\n <Viewport>{children}</Viewport>\n </Content>\n)\n"],"mappings":";;;;;AAKA,IAAM,UAAU,OACd,eAAe,SACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,mBAAmB;EAIjB,MAAM,CAAC,qBAAqB;EAI5B,OAAO,CACL,2BACA,wDACF;CACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EACE,MAAM;CAAC;CAAmB;CAAU;CAAiB;CAAO;AAAc,EAC5E,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAWA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,oBAAoB,OACpB,GAAG,WAKH,oBAAC,SAAD;CACO;CACG;CACR,kBAAkB;CACC;CACnB,GAAI;WAEJ,oBAAC,UAAD,EAAW,SAAmB,CAAA;AACvB,CAAA"}
|
|
@@ -14,6 +14,7 @@ var Item = styled(AriaComponents.ListBoxItem, {
|
|
|
14
14
|
"text-grey-1000",
|
|
15
15
|
"font-body",
|
|
16
16
|
"font-normal",
|
|
17
|
+
"leading-normal",
|
|
17
18
|
"cursor-pointer",
|
|
18
19
|
"rounded-sm",
|
|
19
20
|
"outline-none",
|
|
@@ -25,18 +26,18 @@ var Item = styled(AriaComponents.ListBoxItem, {
|
|
|
25
26
|
],
|
|
26
27
|
variants: { size: {
|
|
27
28
|
sm: [
|
|
28
|
-
"py-
|
|
29
|
+
"py-2",
|
|
29
30
|
"pl-7",
|
|
30
31
|
"pr-4",
|
|
31
32
|
"text-sm"
|
|
32
33
|
],
|
|
33
34
|
md: [
|
|
34
|
-
"py-2",
|
|
35
|
+
"py-2.5",
|
|
35
36
|
"pl-8",
|
|
36
37
|
"pr-6"
|
|
37
38
|
],
|
|
38
39
|
lg: [
|
|
39
|
-
"py-2",
|
|
40
|
+
"py-2.5",
|
|
40
41
|
"pl-8",
|
|
41
42
|
"pr-6"
|
|
42
43
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n AriaComponents.ListBoxItem,\n {\n base: [\n 'relative',\n 'flex',\n 'items-center',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n 'cursor-pointer',\n 'rounded-sm',\n 'outline-none',\n 'data-[disabled]:cursor-not-allowed',\n 'data-[disabled]:opacity-30',\n // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n // whose :hover sticks after a tap on touchscreens (this menu targets\n // webviews). data-focused covers keyboard navigation; together they\n // replicate the old Radix data-highlighted.\n 'data-[hovered]:bg-grey-100',\n 'data-[focused]:bg-grey-100',\n 'data-[focus-visible]:outline-none'\n ],\n variants: {\n size: {\n sm: ['py-
|
|
1
|
+
{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n AriaComponents.ListBoxItem,\n {\n base: [\n 'relative',\n 'flex',\n 'items-center',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n // 1.25 ratio; keeps rows comfortable rather than cramped.\n 'leading-normal',\n 'cursor-pointer',\n 'rounded-sm',\n 'outline-none',\n 'data-[disabled]:cursor-not-allowed',\n 'data-[disabled]:opacity-30',\n // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n // whose :hover sticks after a tap on touchscreens (this menu targets\n // webviews). data-focused covers keyboard navigation; together they\n // replicate the old Radix data-highlighted.\n 'data-[hovered]:bg-grey-100',\n 'data-[focused]:bg-grey-100',\n 'data-[focus-visible]:outline-none'\n ],\n variants: {\n size: {\n sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n md: ['py-2.5', 'pl-8', 'pr-6'],\n lg: ['py-2.5', 'pl-8', 'pr-6']\n }\n }\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n children,\n textValue,\n ...rest\n}: SelectMenuItemProps) => {\n const { size } = useSelectMenuContext()\n const resolvedTextValue =\n textValue ?? (typeof children === 'string' ? children : undefined)\n\n return (\n <Item size={size} textValue={resolvedTextValue} {...rest}>\n {({ isSelected }) => (\n <>\n <span className=\"absolute left-2 inline-flex items-center\">\n {isSelected && (\n <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n )}\n </span>\n {children}\n </>\n )}\n </Item>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAQ;GAAQ;GAAQ;EAAS;EACtC,IAAI;GAAC;GAAU;GAAQ;EAAM;EAC7B,IAAI;GAAC;GAAU;GAAQ;EAAM;CAC/B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAItC,OACE,oBAAC,MAAD;EAAY;EAAM,WAHlB,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EAGR,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}
|