@accelint/design-system 0.12.0 → 0.12.2
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/README.md +2 -2
- package/dist/components/aria/index.d.ts +4 -4
- package/dist/components/aria/index.js +14 -7
- package/dist/components/aria/index.js.map +1 -1
- package/dist/components/button/index.js +13 -5
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/checkbox/index.js +16 -8
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/chip/index.js +20 -10
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/menu/index.js +12 -12
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/options/index.js +24 -12
- package/dist/components/options/index.js.map +1 -1
- package/dist/components/picker/index.js +15 -7
- package/dist/components/picker/index.js.map +1 -1
- package/dist/components/query-builder/dataset-sample.d.ts +28 -4
- package/dist/components/query-builder/group.js +1 -0
- package/dist/components/query-builder/group.js.map +1 -1
- package/dist/ladle/actions.js.map +1 -1
- package/dist/test/setup.js +9 -9
- package/dist/test/setup.js.map +1 -1
- package/package.json +10 -9
package/README.md
CHANGED
|
@@ -51,13 +51,13 @@ From the root of the project, run:
|
|
|
51
51
|
```bash
|
|
52
52
|
pnpm i
|
|
53
53
|
|
|
54
|
-
pnpm run preview:design-system
|
|
54
|
+
pnpm run preview:design-system
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
If you run into errors, install the dependencies, then try running:
|
|
58
58
|
|
|
59
59
|
```shell
|
|
60
|
-
pnpm
|
|
60
|
+
pnpm run build:design-system:core
|
|
61
61
|
```
|
|
62
62
|
|
|
63
63
|
Then run the preview command again.
|
|
@@ -7,16 +7,16 @@ declare const AriaFieldError: (props: react_aria_components.FieldErrorProps & Re
|
|
|
7
7
|
declare const AriaFieldErrorContext: react.Context<ContextValue<react_aria_components.FieldErrorProps & RefAttributes<HTMLElement>, HTMLElement>>;
|
|
8
8
|
declare const AriaGroup: (props: react_aria_components.GroupProps & RefAttributes<HTMLDivElement>) => react.ReactElement | null;
|
|
9
9
|
declare const AriaGroupContext: react.Context<ContextValue<react_aria_components.GroupProps & RefAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
10
|
-
declare const AriaHeader: (props: react.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
11
|
-
declare const AriaHeaderContext: react.Context<ContextValue<react.HTMLAttributes<HTMLElement> & RefAttributes<
|
|
10
|
+
declare const AriaHeader: (props: react.HTMLAttributes<HTMLElement> & RefAttributes<object> & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
11
|
+
declare const AriaHeaderContext: react.Context<ContextValue<react.HTMLAttributes<HTMLElement> & RefAttributes<object>, HTMLElement>>;
|
|
12
12
|
declare const AriaHeading: (props: react_aria_components.HeadingProps & RefAttributes<HTMLHeadingElement>) => react.ReactElement | null;
|
|
13
13
|
declare const AriaHeadingContext: react.Context<ContextValue<react_aria_components.HeadingProps & RefAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
|
|
14
14
|
declare const AriaKeyboard: (props: react.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
15
15
|
declare const AriaKeyboardContext: react.Context<ContextValue<react.HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>, HTMLElement>>;
|
|
16
16
|
declare const AriaLabel: (props: react_aria_components.LabelProps & RefAttributes<HTMLLabelElement>) => react.ReactElement | null;
|
|
17
17
|
declare const AriaLabelContext: react.Context<ContextValue<react_aria_components.LabelProps & RefAttributes<HTMLLabelElement>, HTMLLabelElement>>;
|
|
18
|
-
declare const AriaSeparator: (props: react_aria_components.SeparatorProps & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
19
|
-
declare const AriaSeparatorContext: react.Context<ContextValue<react_aria_components.SeparatorProps & RefAttributes<
|
|
18
|
+
declare const AriaSeparator: (props: react_aria_components.SeparatorProps & RefAttributes<object> & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
19
|
+
declare const AriaSeparatorContext: react.Context<ContextValue<react_aria_components.SeparatorProps & RefAttributes<object>, HTMLElement>>;
|
|
20
20
|
declare const AriaText: (props: react_aria_components.TextProps & RefAttributes<HTMLElement>) => react.ReactElement | null;
|
|
21
21
|
declare const AriaTextContext: react.Context<ContextValue<react_aria_components.TextProps & RefAttributes<HTMLElement>, HTMLElement>>;
|
|
22
22
|
/**
|
|
@@ -7,10 +7,9 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
7
7
|
function wrap(Component) {
|
|
8
8
|
const Context = createContext(null);
|
|
9
9
|
return {
|
|
10
|
-
// biome-ignore lint/style/useNamingConvention: intentional
|
|
11
10
|
Component: forwardRef(function WrappedComponent(props, ref) {
|
|
12
|
-
[
|
|
13
|
-
return /* @__PURE__ */ jsx(Component, { ...
|
|
11
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, Context);
|
|
12
|
+
return /* @__PURE__ */ jsx(Component, { ...mergedProps, ref: mergedRef });
|
|
14
13
|
}),
|
|
15
14
|
Context
|
|
16
15
|
};
|
|
@@ -25,13 +24,21 @@ var { Component: AriaSeparator, Context: AriaSeparatorContext } = wrap(Separator
|
|
|
25
24
|
var { Component: AriaText, Context: AriaTextContext } = wrap(Text);
|
|
26
25
|
var AriaSectionContext = createContext(null);
|
|
27
26
|
var AriaSection = forwardRef(function AriaSection2(props, ref) {
|
|
28
|
-
[
|
|
29
|
-
|
|
27
|
+
const [mergedProps, mergedRef] = useContextProps(
|
|
28
|
+
props,
|
|
29
|
+
ref,
|
|
30
|
+
AriaSectionContext
|
|
31
|
+
);
|
|
32
|
+
return /* @__PURE__ */ jsx(Section, { ...mergedProps, ref: mergedRef });
|
|
30
33
|
});
|
|
31
34
|
var AriaSelectValueContext = createContext(null);
|
|
32
35
|
var AriaSelectValue = forwardRef(function AriaSelectValue2(props, ref) {
|
|
33
|
-
[
|
|
34
|
-
|
|
36
|
+
const [mergedProps, mergedRef] = useContextProps(
|
|
37
|
+
props,
|
|
38
|
+
ref,
|
|
39
|
+
AriaSelectValueContext
|
|
40
|
+
);
|
|
41
|
+
return /* @__PURE__ */ jsx(SelectValue, { ...mergedProps, ref: mergedRef });
|
|
35
42
|
});
|
|
36
43
|
|
|
37
44
|
export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/aria/index.tsx"],"names":["AriaSection","AriaSelectValue"],"mappings":";;;;;;AA0CA,SAAS,KACP,SAAA,EACA;AACA,EAAA,MAAM,OAAA,GAAU,cAAkC,IAAI,CAAA;AAEtD,EAAA,OAAO;AAAA
|
|
1
|
+
{"version":3,"sources":["../../../src/components/aria/index.tsx"],"names":["AriaSection","AriaSelectValue"],"mappings":";;;;;;AA0CA,SAAS,KACP,SAAA,EACA;AACA,EAAA,MAAM,OAAA,GAAU,cAAkC,IAAI,CAAA;AAEtD,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,UAAA,CAAiB,SAAS,gBAAA,CAAiB,OAAO,GAAA,EAAK;AAChE,MAAA,MAAM,CAAC,WAAA,EAAa,SAAS,IAAI,eAAA,CAAgB,KAAA,EAAO,KAAK,OAAO,CAAA;AAEpE,MAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAW,GAAG,WAAA,EAAa,KAAK,SAAA,EAAW,CAAA;AAAA,IACrD,CAAC,CAAA;AAAA,IACD;AAAA,GACF;AACF;AAEO,IAAM,EAAE,SAAA,EAAW,cAAA,EAAgB,SAAS,qBAAA,EAAsB,GACvE,KAAK,UAAU;AAEV,IAAM,EAAE,SAAA,EAAW,SAAA,EAAW,SAAS,gBAAA,EAAiB,GAAI,KAAK,KAAK;AAEtE,IAAM,EAAE,SAAA,EAAW,UAAA,EAAY,SAAS,iBAAA,EAAkB,GAC/D,KAAK,MAAM;AAEN,IAAM,EAAE,SAAA,EAAW,WAAA,EAAa,SAAS,kBAAA,EAAmB,GACjE,KAAK,OAAO;AAEP,IAAM,EAAE,SAAA,EAAW,YAAA,EAAc,SAAS,mBAAA,EAAoB,GACnE,KAAK,QAAQ;AAER,IAAM,EAAE,SAAA,EAAW,SAAA,EAAW,SAAS,gBAAA,EAAiB,GAAI,KAAK,KAAK;AAEtE,IAAM,EAAE,SAAA,EAAW,aAAA,EAAe,SAAS,oBAAA,EAAqB,GACrE,KAAK,SAAS;AAET,IAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,eAAA,EAAgB,GAAI,KAAK,IAAI;AAQnE,IAAM,kBAAA,GACX,cAA+D,IAAI;AAE9D,IAAM,WAAA,GAAc,UAAA,CAAW,SAASA,YAAAA,CAC7C,OACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,WAAA,EAAa,SAAS,CAAA,GAAI,eAAA;AAAA,IAC/B,KAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAS,GAAG,WAAA,EAAa,KAAK,SAAA,EAAW,CAAA;AACnD,CAAC;AAEM,IAAM,sBAAA,GACX,cAAuE,IAAI;AAEtE,IAAM,eAAA,GAAkB,UAAA,CAAW,SAASC,gBAAAA,CAEjD,OAA4B,GAAA,EAAoC;AAChE,EAAA,MAAM,CAAC,WAAA,EAAa,SAAS,CAAA,GAAI,eAAA;AAAA,IAC/B,KAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAa,GAAG,WAAA,EAAa,KAAK,SAAA,EAAW,CAAA;AACvD,CAAC","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. 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 https://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\nimport {\n type ForwardedRef,\n type ReactNode,\n type RefAttributes,\n createContext,\n forwardRef,\n} from 'react';\nimport {\n type ContextValue,\n FieldError,\n Group,\n Header,\n Heading,\n Keyboard,\n Label,\n Section,\n type SectionProps,\n SelectValue,\n type SelectValueProps,\n Separator,\n Text,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\n\n/**\n * To better align with the guidance from RAC about establishing a unique\n * context for components to avoid conflict of props being provided by RAC\n * and design system components, this wrapping utility accepts an RAC and returns\n * a wrapped version along with the new context for the design system to use\n */\nfunction wrap<P extends object, E extends HTMLElement>(\n Component: (props: P & RefAttributes<E>) => ReactNode,\n) {\n const Context = createContext<ContextValue<P, E>>(null);\n\n return {\n Component: forwardRef<E, P>(function WrappedComponent(props, ref) {\n const [mergedProps, mergedRef] = useContextProps(props, ref, Context);\n\n return <Component {...mergedProps} ref={mergedRef} />;\n }),\n Context,\n };\n}\n\nexport const { Component: AriaFieldError, Context: AriaFieldErrorContext } =\n wrap(FieldError);\n\nexport const { Component: AriaGroup, Context: AriaGroupContext } = wrap(Group);\n\nexport const { Component: AriaHeader, Context: AriaHeaderContext } =\n wrap(Header);\n\nexport const { Component: AriaHeading, Context: AriaHeadingContext } =\n wrap(Heading);\n\nexport const { Component: AriaKeyboard, Context: AriaKeyboardContext } =\n wrap(Keyboard);\n\nexport const { Component: AriaLabel, Context: AriaLabelContext } = wrap(Label);\n\nexport const { Component: AriaSeparator, Context: AriaSeparatorContext } =\n wrap(Separator);\n\nexport const { Component: AriaText, Context: AriaTextContext } = wrap(Text);\n\n/**\n * Due to the complexity of types and technical constraints of TS, it's not\n * possible for the above wrapping utility to support components that accept\n * generic parameters. This means that these components must be manually wrapped\n */\n\nexport const AriaSectionContext =\n createContext<ContextValue<SectionProps<object>, HTMLElement>>(null);\n\nexport const AriaSection = forwardRef(function AriaSection<T extends object>(\n props: SectionProps<T>,\n ref: ForwardedRef<HTMLElement>,\n) {\n const [mergedProps, mergedRef] = useContextProps(\n props,\n ref,\n AriaSectionContext,\n );\n\n return <Section {...mergedProps} ref={mergedRef} />;\n});\n\nexport const AriaSelectValueContext =\n createContext<ContextValue<SelectValueProps<object>, HTMLSpanElement>>(null);\n\nexport const AriaSelectValue = forwardRef(function AriaSelectValue<\n T extends object,\n>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {\n const [mergedProps, mergedRef] = useContextProps(\n props,\n ref,\n AriaSelectValueContext,\n );\n\n return <SelectValue {...mergedProps} ref={mergedRef} />;\n});\n"]}
|
|
@@ -32,8 +32,8 @@ var defaultMapping = {
|
|
|
32
32
|
)
|
|
33
33
|
};
|
|
34
34
|
function useButton(props, ref, context, key) {
|
|
35
|
-
[
|
|
36
|
-
|
|
35
|
+
const [contextProps, contextRef] = useContextProps(props, ref, context);
|
|
36
|
+
const defaultedProps = useDefaultProps(contextProps, key);
|
|
37
37
|
const {
|
|
38
38
|
children: childrenProp,
|
|
39
39
|
classNames: classNamesProp,
|
|
@@ -42,7 +42,7 @@ function useButton(props, ref, context, key) {
|
|
|
42
42
|
size = "md",
|
|
43
43
|
variant = "solid",
|
|
44
44
|
...rest
|
|
45
|
-
} =
|
|
45
|
+
} = defaultedProps;
|
|
46
46
|
const theme = useTheme();
|
|
47
47
|
const mapping = useMemo(
|
|
48
48
|
() => ({
|
|
@@ -83,8 +83,16 @@ function useButton(props, ref, context, key) {
|
|
|
83
83
|
[values, classNames?.button, childrenProp]
|
|
84
84
|
);
|
|
85
85
|
return useMemo(
|
|
86
|
-
() => ({
|
|
87
|
-
|
|
86
|
+
() => ({
|
|
87
|
+
...rest,
|
|
88
|
+
ref: contextRef,
|
|
89
|
+
children,
|
|
90
|
+
className: classNames?.container,
|
|
91
|
+
style
|
|
92
|
+
}),
|
|
93
|
+
// TODO(isaac): This should be checked. "rest changes on every re-render and should not be used as a hook dependency."
|
|
94
|
+
// biomelint/correctness/useExhaustiveDependencies
|
|
95
|
+
[rest, contextRef, children, classNames?.container, style]
|
|
88
96
|
);
|
|
89
97
|
}
|
|
90
98
|
var ButtonContext = createContext(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/button/index.tsx"],"names":["Button","RACButton","LinkButton","ToggleButton","RACToggleButton"],"mappings":";;;;;;;;;;;;;;;;AAmDA,IAAM,eAAA,GAAkB;AAAA,EACtB,eAAA,EAAiB,KAAA;AAAA,EACjB,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,IAAA;AAAA,EACb,MAAA,EAAQ;AACV,CAAA;AACA,IAAM,cAA6B,CAAC,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI,CAAA;AAEhE,IAAM,cAAA,GAAgC;AAAA,EACpC,IAAA,EAAM,MAAA;AAAA,EACN,MAAM,WAAA,CAAY,MAAA;AAAA,IAChB,CAAC,KAAK,IAAA,KAAS;AACb,MAAA,GAAA,CAAI,IAAI,CAAA,GAAI,EAAE,IAAA,EAAK;AAEnB,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA,IACA;AAAC;AAEL,CAAA;AAEA,SAAS,SAAA,CAIP,KAAA,EACA,GAAA,EACA,OAAA,EACA,GAAA,EACA;AACA,EAAA,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/button/index.tsx"],"names":["Button","RACButton","LinkButton","ToggleButton","RACToggleButton"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. 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 https://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\nimport { noop } from '@accelint/core';\nimport { clsx } from 'clsx';\nimport {\n type Context,\n type ForwardedRef,\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n} from 'react';\nimport {\n type ButtonRenderProps,\n type ContextValue,\n Link,\n type LinkRenderProps,\n Provider,\n Button as RACButton,\n ToggleButton as RACToggleButton,\n type ToggleButtonRenderProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { surfaces } from '../../styles/surfaces.css';\nimport { bodies } from '../../styles/typography.css';\nimport type { OmitProtectedProps } from '../../types/props';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport { IconContext } from '../icon';\nimport type { IconProps } from '../icon/types';\nimport { buttonClassNames, buttonStateVars } from './button.css';\nimport type {\n ButtonMapping,\n ButtonProps,\n ButtonSizes,\n LinkButtonProps,\n ToggleButtonProps,\n} from './types';\n\nconst noopToggleState = {\n defaultSelected: false,\n isSelected: false,\n setSelected: noop,\n toggle: noop,\n};\nconst buttonSizes: ButtonSizes[] = ['xs', 'sm', 'md', 'lg', 'xl'];\n\nconst defaultMapping: ButtonMapping = {\n font: bodies,\n icon: buttonSizes.reduce(\n (acc, size) => {\n acc[size] = { size };\n\n return acc;\n },\n {} as Record<ButtonSizes, OmitProtectedProps<IconProps>>,\n ),\n};\n\nfunction useButton<\n P extends ButtonProps | LinkButtonProps | ToggleButtonProps,\n E extends HTMLElement,\n>(\n props: P,\n ref: ForwardedRef<E>,\n context: Context<ContextValue<P, E>>,\n key: 'Button' | 'LinkButton' | 'ToggleButton',\n) {\n const [contextProps, contextRef] = useContextProps(props, ref, context);\n\n const defaultedProps = useDefaultProps(contextProps, key);\n\n const {\n children: childrenProp,\n classNames: classNamesProp,\n color = 'primary',\n mapping: mappingProp,\n size = 'md',\n variant = 'solid',\n ...rest\n } = defaultedProps;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(buttonClassNames, theme.Button, classNamesProp, {\n button: clsx(\n mapping.font[size],\n variant === 'floating' && surfaces.default.proud,\n ),\n }),\n [theme.Button, classNamesProp, mapping.font, size, variant],\n );\n\n const style = useCallback(\n (\n renderProps:\n | ButtonRenderProps\n | LinkRenderProps\n | ToggleButtonRenderProps,\n ) =>\n inlineVars(buttonStateVars, {\n isCurrent: false,\n isSelected: false,\n ...renderProps,\n color,\n size,\n variant,\n }),\n [color, size, variant],\n );\n\n const values = useMemo<\n [[typeof IconContext, ContextValue<IconProps, HTMLDivElement>]]\n >(() => [[IconContext, mapping.icon[size]]], [mapping.icon, size]);\n\n const children = useCallback(\n (\n renderProps:\n | ButtonRenderProps\n | LinkRenderProps\n | ToggleButtonRenderProps,\n ) => (\n <Provider values={values}>\n <span className={classNames?.button}>\n {callRenderProps(childrenProp, {\n state: noopToggleState,\n isCurrent: false,\n isPending: false,\n isSelected: false,\n ...renderProps,\n })}\n </span>\n </Provider>\n ),\n [values, classNames?.button, childrenProp],\n );\n\n return useMemo(\n () => ({\n ...rest,\n ref: contextRef,\n children,\n className: classNames?.container,\n style,\n }),\n // TODO(isaac): This should be checked. \"rest changes on every re-render and should not be used as a hook dependency.\"\n // biomelint/correctness/useExhaustiveDependencies\n [rest, contextRef, children, classNames?.container, style],\n );\n}\n\nexport const ButtonContext =\n createContext<ContextValue<ButtonProps, HTMLButtonElement>>(null);\n\nexport const Button = forwardRef(function Button(\n props: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const buttonProps = useButton(props, ref, ButtonContext, 'Button');\n\n return <RACButton {...buttonProps} />;\n});\n\nexport const LinkButtonContext =\n createContext<ContextValue<LinkButtonProps, HTMLAnchorElement>>(null);\n\nexport const LinkButton = forwardRef(function LinkButton(\n props: LinkButtonProps,\n ref: ForwardedRef<HTMLAnchorElement>,\n) {\n const buttonProps = useButton(props, ref, LinkButtonContext, 'LinkButton');\n\n return <Link {...buttonProps} />;\n});\n\nexport const ToggleButtonContext =\n createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>(null);\n\nexport const ToggleButton = forwardRef(function ToggleButton(\n props: ToggleButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const buttonProps = useButton(\n props,\n ref,\n ToggleButtonContext,\n 'ToggleButton',\n );\n\n return <RACToggleButton {...buttonProps} />;\n});\n"]}
|
|
@@ -14,14 +14,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
14
14
|
|
|
15
15
|
var CheckboxContext = createContext(null);
|
|
16
16
|
var Checkbox = forwardRef(function Checkbox2(props, ref) {
|
|
17
|
-
[
|
|
18
|
-
|
|
17
|
+
const [resolvedProps, resolvedRef] = useContextProps(
|
|
18
|
+
props,
|
|
19
|
+
ref,
|
|
20
|
+
CheckboxContext
|
|
21
|
+
);
|
|
22
|
+
const finalProps = useDefaultProps(resolvedProps, "Checkbox");
|
|
19
23
|
const {
|
|
20
24
|
children: childrenProp,
|
|
21
25
|
classNames: classNamesProp,
|
|
22
26
|
alignInput = "end",
|
|
23
27
|
...rest
|
|
24
|
-
} =
|
|
28
|
+
} = finalProps;
|
|
25
29
|
const [iconRef, hasIcon] = useSlot();
|
|
26
30
|
const theme = useTheme();
|
|
27
31
|
const classNames = useMemo(
|
|
@@ -60,7 +64,7 @@ var Checkbox = forwardRef(function Checkbox2(props, ref) {
|
|
|
60
64
|
Checkbox$1,
|
|
61
65
|
{
|
|
62
66
|
...rest,
|
|
63
|
-
ref,
|
|
67
|
+
ref: resolvedRef,
|
|
64
68
|
className: classNames?.checkbox?.container,
|
|
65
69
|
style,
|
|
66
70
|
children
|
|
@@ -69,15 +73,19 @@ var Checkbox = forwardRef(function Checkbox2(props, ref) {
|
|
|
69
73
|
});
|
|
70
74
|
var CheckboxGroupContext = createContext(null);
|
|
71
75
|
var CheckboxGroup = forwardRef(function CheckboxGroup2(props, ref) {
|
|
72
|
-
[
|
|
73
|
-
|
|
76
|
+
const [resolvedContextProps, resolvedRef] = useContextProps(
|
|
77
|
+
props,
|
|
78
|
+
ref,
|
|
79
|
+
CheckboxGroupContext
|
|
80
|
+
);
|
|
81
|
+
const resolvedProps = useDefaultProps(resolvedContextProps, "CheckboxGroup");
|
|
74
82
|
const {
|
|
75
83
|
children: childrenProp,
|
|
76
84
|
classNames: classNamesProp,
|
|
77
85
|
alignInput = "end",
|
|
78
86
|
orientation = "vertical",
|
|
79
87
|
...rest
|
|
80
|
-
} =
|
|
88
|
+
} = resolvedProps;
|
|
81
89
|
const theme = useTheme();
|
|
82
90
|
const classNames = useMemo(
|
|
83
91
|
() => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),
|
|
@@ -114,7 +122,7 @@ var CheckboxGroup = forwardRef(function CheckboxGroup2(props, ref) {
|
|
|
114
122
|
CheckboxGroup$1,
|
|
115
123
|
{
|
|
116
124
|
...rest,
|
|
117
|
-
ref,
|
|
125
|
+
ref: resolvedRef,
|
|
118
126
|
className: classNames?.group?.container,
|
|
119
127
|
style,
|
|
120
128
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/checkbox/index.tsx"],"names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"mappings":";;;;;;;;;;;;;;AAiDO,IAAM,eAAA,GACX,cAA6D,IAAI;AAE5D,IAAM,QAAA,GAAW,UAAA,CAAW,SAASA,SAAAA,CAC1C,OACA,GAAA,EACA;AACA,EAAA,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/checkbox/index.tsx"],"names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. 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 https://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\nimport {\n type ForwardedRef,\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n} from 'react';\nimport {\n type ContextValue,\n type LabelProps,\n Provider,\n Checkbox as RACCheckbox,\n CheckboxGroup as RACCheckboxGroup,\n TextContext,\n type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useSlot } from '../../hooks/use-slot';\nimport { useTheme } from '../../hooks/use-theme';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport { AriaLabelContext, AriaTextContext } from '../aria';\nimport { IconContext } from '../icon';\nimport type { IconProps } from '../icon/types';\nimport {\n checkboxClassNames,\n checkboxGroupStateVars,\n checkboxStateVars,\n} from './checkbox.css';\nimport type {\n CheckboxGroupProps,\n CheckboxGroupRenderProps,\n CheckboxProps,\n CheckboxRenderProps,\n} from './types';\n\nexport const CheckboxContext =\n createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);\n\nexport const Checkbox = forwardRef(function Checkbox(\n props: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const [resolvedProps, resolvedRef] = useContextProps(\n props,\n ref,\n CheckboxContext,\n );\n\n const finalProps = useDefaultProps(resolvedProps, 'Checkbox');\n\n const {\n children: childrenProp,\n classNames: classNamesProp,\n alignInput = 'end',\n ...rest\n } = finalProps;\n\n const [iconRef, hasIcon] = useSlot();\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n [theme.Checkbox, classNamesProp],\n );\n\n const style = useCallback(\n (renderProps: CheckboxRenderProps) =>\n inlineVars(checkboxStateVars, {\n ...renderProps,\n alignInput,\n }),\n [alignInput],\n );\n\n const values = useMemo<\n [\n [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n [typeof TextContext, ContextValue<TextProps, HTMLElement>],\n ]\n >(\n () => [\n [AriaTextContext, { className: classNames?.checkbox?.label }],\n [\n IconContext,\n {\n ref: iconRef,\n classNames: classNames?.checkbox?.icon,\n },\n ],\n [TextContext, null],\n ],\n [classNames?.checkbox?.label, classNames?.checkbox?.icon, iconRef],\n );\n\n const children = useCallback(\n (renderProps: CheckboxRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.checkbox?.checkbox}>\n {!hasIcon && (\n <span className={classNames?.checkbox?.icon?.container} />\n )}\n {callRenderProps(childrenProp, renderProps)}\n </div>\n </Provider>\n ),\n [childrenProp, classNames?.checkbox, hasIcon, values],\n );\n\n return (\n <RACCheckbox\n {...rest}\n ref={resolvedRef}\n className={classNames?.checkbox?.container}\n style={style}\n >\n {children}\n </RACCheckbox>\n );\n});\n\nexport const CheckboxGroupContext =\n createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);\n\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(\n props: CheckboxGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const [resolvedContextProps, resolvedRef] = useContextProps(\n props,\n ref,\n CheckboxGroupContext,\n );\n\n const resolvedProps = useDefaultProps(resolvedContextProps, 'CheckboxGroup');\n\n const {\n children: childrenProp,\n classNames: classNamesProp,\n alignInput = 'end',\n orientation = 'vertical',\n ...rest\n } = resolvedProps;\n\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n [classNamesProp, theme.Checkbox],\n );\n\n const style = useCallback(\n (renderProps: CheckboxGroupRenderProps) =>\n inlineVars(checkboxGroupStateVars, {\n ...renderProps,\n orientation,\n }),\n [orientation],\n );\n\n const values = useMemo<\n [\n [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n [typeof CheckboxContext, ContextValue<CheckboxProps, HTMLLabelElement>],\n ]\n >(\n () => [\n [AriaLabelContext, { className: classNames?.group?.label }],\n [\n CheckboxContext,\n {\n classNames,\n alignInput,\n },\n ],\n ],\n [alignInput, classNames],\n );\n\n const children = useCallback(\n (renderProps: CheckboxGroupRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.group?.group}>\n {callRenderProps(childrenProp, {\n ...renderProps,\n defaultChildren: null,\n })}\n </div>\n </Provider>\n ),\n [childrenProp, classNames?.group, values],\n );\n\n return (\n <RACCheckboxGroup\n {...rest}\n ref={resolvedRef}\n className={classNames?.group?.container}\n style={style}\n >\n {children}\n </RACCheckboxGroup>\n );\n});\n"]}
|
|
@@ -27,14 +27,14 @@ var defaultMapping = {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
function Chip(props) {
|
|
30
|
-
|
|
30
|
+
const chipProps = useDefaultProps(props, "Chip");
|
|
31
31
|
const {
|
|
32
32
|
children,
|
|
33
33
|
classNames: classNamesProp,
|
|
34
34
|
color = defaults.color,
|
|
35
35
|
mapping: mappingProp,
|
|
36
36
|
size = defaults.size
|
|
37
|
-
} =
|
|
37
|
+
} = chipProps;
|
|
38
38
|
const theme = useTheme();
|
|
39
39
|
const mapping = useMemo(
|
|
40
40
|
() => ({
|
|
@@ -73,8 +73,8 @@ function Chip(props) {
|
|
|
73
73
|
}
|
|
74
74
|
var ChipContext = createContext(null);
|
|
75
75
|
var ChipItem = forwardRef(function ChipItem2(props, ref) {
|
|
76
|
-
[
|
|
77
|
-
|
|
76
|
+
const [contextProps, contextRef] = useContextProps(props, ref, ChipContext);
|
|
77
|
+
const finalProps = useDefaultProps(contextProps, "Chip");
|
|
78
78
|
const {
|
|
79
79
|
children: childrenProp,
|
|
80
80
|
id,
|
|
@@ -84,7 +84,7 @@ var ChipItem = forwardRef(function ChipItem2(props, ref) {
|
|
|
84
84
|
textValue,
|
|
85
85
|
mapping: mappingProp,
|
|
86
86
|
...rest
|
|
87
|
-
} =
|
|
87
|
+
} = finalProps;
|
|
88
88
|
const theme = useTheme();
|
|
89
89
|
const mapping = useMemo(
|
|
90
90
|
() => ({
|
|
@@ -132,7 +132,7 @@ var ChipItem = forwardRef(function ChipItem2(props, ref) {
|
|
|
132
132
|
Tag,
|
|
133
133
|
{
|
|
134
134
|
...rest,
|
|
135
|
-
ref,
|
|
135
|
+
ref: contextRef,
|
|
136
136
|
id: id ?? textValue,
|
|
137
137
|
className: classNames?.container,
|
|
138
138
|
style,
|
|
@@ -154,9 +154,19 @@ function ChipList({
|
|
|
154
154
|
}
|
|
155
155
|
var ChipGroupContext = createContext(null);
|
|
156
156
|
var ChipGroup = forwardRef(function ChipGroup2(props, ref) {
|
|
157
|
-
[
|
|
158
|
-
|
|
159
|
-
|
|
157
|
+
const [contextProps, contextRef] = useContextProps(
|
|
158
|
+
props,
|
|
159
|
+
ref,
|
|
160
|
+
ChipGroupContext
|
|
161
|
+
);
|
|
162
|
+
const finalProps = useDefaultProps(contextProps, "ChipGroup");
|
|
163
|
+
const {
|
|
164
|
+
children,
|
|
165
|
+
classNames: classNamesProp,
|
|
166
|
+
color,
|
|
167
|
+
size,
|
|
168
|
+
...rest
|
|
169
|
+
} = finalProps;
|
|
160
170
|
const theme = useTheme();
|
|
161
171
|
const classNames = useMemo(
|
|
162
172
|
() => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),
|
|
@@ -166,7 +176,7 @@ var ChipGroup = forwardRef(function ChipGroup2(props, ref) {
|
|
|
166
176
|
() => [[ChipContext, { classNames, color, size }]],
|
|
167
177
|
[classNames, color, size]
|
|
168
178
|
);
|
|
169
|
-
return /* @__PURE__ */ jsx(TagGroup, { ...rest, ref, className: classNames?.group, children: /* @__PURE__ */ jsx(Provider, { values, children }) });
|
|
179
|
+
return /* @__PURE__ */ jsx(TagGroup, { ...rest, ref: contextRef, className: classNames?.group, children: /* @__PURE__ */ jsx(Provider, { values, children }) });
|
|
170
180
|
});
|
|
171
181
|
|
|
172
182
|
export { Chip, ChipContext, ChipGroup, ChipGroupContext, ChipItem, ChipList };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/chip/index.tsx"],"names":["ChipItem","RACTextContext","ChipGroup"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. 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 https://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\nimport {\n type ForwardedRef,\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n} from 'react';\nimport {\n type ContextValue,\n Provider,\n TextContext as RACTextContext,\n Tag,\n TagGroup,\n TagList,\n type TagRenderProps,\n type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport { AriaTextContext } from '../aria';\nimport { ButtonContext } from '../button';\nimport type { ButtonProps } from '../button/types';\nimport { chipClassNames, chipStateVars } from './chip.css';\nimport type {\n ChipGroupProps,\n ChipItemProps,\n ChipListProps,\n ChipMapping,\n ChipProps,\n} from './types';\n\nconst defaults: Required<Pick<ChipProps, 'color' | 'size'>> = {\n color: 'info',\n size: 'sm',\n};\n\nconst defaultMapping: ChipMapping = {\n font: {\n sm: bodies.sm,\n lg: bodies.sm,\n },\n remove: {\n sm: { size: 'sm', variant: 'icon' },\n lg: { size: 'sm', variant: 'icon' },\n },\n};\n\nexport function Chip(props: ChipProps) {\n props = useDefaultProps(props, 'Chip');\n\n const {\n children,\n classNames: classNamesProp,\n color = defaults.color,\n mapping: mappingProp,\n size = defaults.size,\n } = props;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [[typeof AriaTextContext, ContextValue<TextProps, HTMLElement>]]\n >(\n () => [[AriaTextContext, { className: classNames?.label }]],\n [classNames?.label],\n );\n\n const style = useMemo(\n () =>\n inlineVars(chipStateVars, {\n allowsRemoving: false,\n color,\n selectionBehavior: 'toggle',\n selectionMode: 'none',\n size,\n isDisabled: false,\n isFocused: false,\n isFocusVisible: false,\n isHovered: false,\n isPressed: false,\n isSelected: false,\n }),\n [color, size],\n );\n\n return (\n <Provider values={values}>\n <div className={classNames?.container} style={style}>\n <div className={classNames?.chip}>{children}</div>\n </div>\n </Provider>\n );\n}\n\nexport const ChipContext =\n createContext<ContextValue<ChipItemProps, HTMLDivElement>>(null);\n\n/**\n * Must be used in conjunction with ChipList & ChipGroup and\n * cannot be used outside of ChipList, else will throw error\n *\n * Color & Size props can be passed in from ChipGroup and overriden\n * on each instance of this components\n *\n * Order of precedence (from lowest to highest):\n * Design System Defaults of Chip\n * Global Defaults of ChipGroup\n * Instance of ChipGroup\n * Global Defaults of ChipItem\n * Instance of ChipItem\n */\nexport const ChipItem = forwardRef(function ChipItem(\n props: ChipItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n [props, ref] = useContextProps(props, ref, ChipContext);\n props = useDefaultProps(props, 'Chip');\n\n const {\n children: childrenProp,\n id,\n classNames: classNamesProp,\n color = defaults.color,\n size = defaults.size,\n textValue,\n mapping: mappingProp,\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [\n [typeof RACTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof ButtonContext, ContextValue<ButtonProps, HTMLButtonElement>],\n ]\n >(\n () => [\n // Because ChipGroup (TagGroup) implements a TextContext, we need to block it inside of the Chip\n // so that there isn't a conflict of with our AriaTextContext. Otherwise there are slot errors\n [RACTextContext, null],\n [AriaTextContext, { className: classNames?.label }],\n [\n ButtonContext,\n {\n ...mapping.remove[size],\n classNames: { button: classNames?.remove },\n slot: 'remove',\n },\n ],\n ],\n [classNames?.label, classNames?.remove, mapping, size],\n );\n\n const style = useCallback(\n (renderProps: TagRenderProps) =>\n inlineVars(chipStateVars, {\n ...renderProps,\n color,\n size,\n }),\n [color, size],\n );\n\n const children = useCallback(\n (renderProps: TagRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.chip}>\n {callRenderProps(childrenProp, renderProps)}\n </div>\n </Provider>\n ),\n [values, classNames?.chip, childrenProp],\n );\n\n return (\n <Tag\n {...rest}\n ref={ref}\n id={id ?? textValue}\n className={classNames?.container}\n style={style}\n textValue={textValue}\n >\n {children}\n </Tag>\n );\n});\n\n/**\n * Must be used in conjunction with ChipItem & ChipGroup and\n * cannot be used outside of ChipGroup, else will throw error\n */\nexport function ChipList<T extends object>({\n classNames: classNamesProp,\n ...rest\n}: ChipListProps<T>) {\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n return <TagList<T> {...rest} className={classNames?.list} />;\n}\n\nexport const ChipGroupContext =\n createContext<ContextValue<ChipGroupProps, HTMLDivElement>>(null);\n\n/**\n * Color & Size props are passed down to ChipItem but can be overridden\n * on each component if desired\n */\nexport const ChipGroup = forwardRef(function ChipGroup(\n props: ChipGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n [props, ref] = useContextProps(props, ref, ChipGroupContext);\n props = useDefaultProps(props, 'ChipGroup');\n\n const { children, classNames: classNamesProp, color, size, ...rest } = props;\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n const values = useMemo<\n [[typeof ChipContext, ContextValue<ChipItemProps, HTMLDivElement>]]\n >(\n () => [[ChipContext, { classNames, color, size }]],\n [classNames, color, size],\n );\n\n return (\n <TagGroup {...rest} ref={ref} className={classNames?.group}>\n <Provider values={values}>{children}</Provider>\n </TagGroup>\n );\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chip/index.tsx"],"names":["ChipItem","RACTextContext","ChipGroup"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. 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 https://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\nimport {\n type ForwardedRef,\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n} from 'react';\nimport {\n type ContextValue,\n Provider,\n TextContext as RACTextContext,\n Tag,\n TagGroup,\n TagList,\n type TagRenderProps,\n type TextProps,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport { AriaTextContext } from '../aria';\nimport { ButtonContext } from '../button';\nimport type { ButtonProps } from '../button/types';\nimport { chipClassNames, chipStateVars } from './chip.css';\nimport type {\n ChipGroupProps,\n ChipItemProps,\n ChipListProps,\n ChipMapping,\n ChipProps,\n} from './types';\n\nconst defaults: Required<Pick<ChipProps, 'color' | 'size'>> = {\n color: 'info',\n size: 'sm',\n};\n\nconst defaultMapping: ChipMapping = {\n font: {\n sm: bodies.sm,\n lg: bodies.sm,\n },\n remove: {\n sm: { size: 'sm', variant: 'icon' },\n lg: { size: 'sm', variant: 'icon' },\n },\n};\n\nexport function Chip(props: ChipProps) {\n const chipProps = useDefaultProps(props, 'Chip');\n\n const {\n children,\n classNames: classNamesProp,\n color = defaults.color,\n mapping: mappingProp,\n size = defaults.size,\n } = chipProps;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [[typeof AriaTextContext, ContextValue<TextProps, HTMLElement>]]\n >(\n () => [[AriaTextContext, { className: classNames?.label }]],\n [classNames?.label],\n );\n\n const style = useMemo(\n () =>\n inlineVars(chipStateVars, {\n allowsRemoving: false,\n color,\n selectionBehavior: 'toggle',\n selectionMode: 'none',\n size,\n isDisabled: false,\n isFocused: false,\n isFocusVisible: false,\n isHovered: false,\n isPressed: false,\n isSelected: false,\n }),\n [color, size],\n );\n\n return (\n <Provider values={values}>\n <div className={classNames?.container} style={style}>\n <div className={classNames?.chip}>{children}</div>\n </div>\n </Provider>\n );\n}\n\nexport const ChipContext =\n createContext<ContextValue<ChipItemProps, HTMLDivElement>>(null);\n\n/**\n * Must be used in conjunction with ChipList & ChipGroup and\n * cannot be used outside of ChipList, else will throw error\n *\n * Color & Size props can be passed in from ChipGroup and overriden\n * on each instance of this components\n *\n * Order of precedence (from lowest to highest):\n * Design System Defaults of Chip\n * Global Defaults of ChipGroup\n * Instance of ChipGroup\n * Global Defaults of ChipItem\n * Instance of ChipItem\n */\nexport const ChipItem = forwardRef(function ChipItem(\n props: ChipItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const [contextProps, contextRef] = useContextProps(props, ref, ChipContext);\n const finalProps = useDefaultProps(contextProps, 'Chip');\n\n const {\n children: childrenProp,\n id,\n classNames: classNamesProp,\n color = defaults.color,\n size = defaults.size,\n textValue,\n mapping: mappingProp,\n ...rest\n } = finalProps;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [\n [typeof RACTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof ButtonContext, ContextValue<ButtonProps, HTMLButtonElement>],\n ]\n >(\n () => [\n // Because ChipGroup (TagGroup) implements a TextContext, we need to block it inside of the Chip\n // so that there isn't a conflict of with our AriaTextContext. Otherwise there are slot errors\n [RACTextContext, null],\n [AriaTextContext, { className: classNames?.label }],\n [\n ButtonContext,\n {\n ...mapping.remove[size],\n classNames: { button: classNames?.remove },\n slot: 'remove',\n },\n ],\n ],\n [classNames?.label, classNames?.remove, mapping, size],\n );\n\n const style = useCallback(\n (renderProps: TagRenderProps) =>\n inlineVars(chipStateVars, {\n ...renderProps,\n color,\n size,\n }),\n [color, size],\n );\n\n const children = useCallback(\n (renderProps: TagRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.chip}>\n {callRenderProps(childrenProp, renderProps)}\n </div>\n </Provider>\n ),\n [values, classNames?.chip, childrenProp],\n );\n\n return (\n <Tag\n {...rest}\n ref={contextRef}\n id={id ?? textValue}\n className={classNames?.container}\n style={style}\n textValue={textValue}\n >\n {children}\n </Tag>\n );\n});\n\n/**\n * Must be used in conjunction with ChipItem & ChipGroup and\n * cannot be used outside of ChipGroup, else will throw error\n */\nexport function ChipList<T extends object>({\n classNames: classNamesProp,\n ...rest\n}: ChipListProps<T>) {\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n return <TagList<T> {...rest} className={classNames?.list} />;\n}\n\nexport const ChipGroupContext =\n createContext<ContextValue<ChipGroupProps, HTMLDivElement>>(null);\n\n/**\n * Color & Size props are passed down to ChipItem but can be overridden\n * on each component if desired\n */\nexport const ChipGroup = forwardRef(function ChipGroup(\n props: ChipGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const [contextProps, contextRef] = useContextProps(\n props,\n ref,\n ChipGroupContext,\n );\n const finalProps = useDefaultProps(contextProps, 'ChipGroup');\n\n const {\n children,\n classNames: classNamesProp,\n color,\n size,\n ...rest\n } = finalProps;\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n const values = useMemo<\n [[typeof ChipContext, ContextValue<ChipItemProps, HTMLDivElement>]]\n >(\n () => [[ChipContext, { classNames, color, size }]],\n [classNames, color, size],\n );\n\n return (\n <TagGroup {...rest} ref={contextRef} className={classNames?.group}>\n <Provider values={values}>{children}</Provider>\n </TagGroup>\n );\n});\n"]}
|
|
@@ -35,15 +35,15 @@ var defaultMapping = {
|
|
|
35
35
|
var defaultSize = "lg";
|
|
36
36
|
var MenuContext = createContext(null);
|
|
37
37
|
var Menu = forwardRef(function Menu2(props, ref) {
|
|
38
|
-
[
|
|
39
|
-
|
|
38
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, MenuContext);
|
|
39
|
+
const finalProps = useDefaultProps(mergedProps, "Menu");
|
|
40
40
|
const {
|
|
41
41
|
children: childrenProp,
|
|
42
42
|
classNames: classNamesProp,
|
|
43
43
|
mapping: mappingProp,
|
|
44
44
|
size = defaultSize,
|
|
45
45
|
...rest
|
|
46
|
-
} =
|
|
46
|
+
} = finalProps;
|
|
47
47
|
const theme = useTheme();
|
|
48
48
|
const classNames = useMemo(
|
|
49
49
|
() => mergeClassNames(menuClassNames, classNamesProp, theme.Menu, {
|
|
@@ -86,7 +86,7 @@ var Menu = forwardRef(function Menu2(props, ref) {
|
|
|
86
86
|
Popover,
|
|
87
87
|
{
|
|
88
88
|
...rest,
|
|
89
|
-
ref,
|
|
89
|
+
ref: mergedRef,
|
|
90
90
|
className: classNames?.menu?.container,
|
|
91
91
|
style,
|
|
92
92
|
children
|
|
@@ -95,8 +95,8 @@ var Menu = forwardRef(function Menu2(props, ref) {
|
|
|
95
95
|
});
|
|
96
96
|
var MenuListContext = createContext(null);
|
|
97
97
|
var MenuList = forwardRef(function MenuList2(props, ref) {
|
|
98
|
-
[
|
|
99
|
-
|
|
98
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, MenuListContext);
|
|
99
|
+
const finalProps = useDefaultProps(mergedProps, "Menu");
|
|
100
100
|
const {
|
|
101
101
|
children: childrenProp,
|
|
102
102
|
classNames: classNamesProp,
|
|
@@ -107,7 +107,7 @@ var MenuList = forwardRef(function MenuList2(props, ref) {
|
|
|
107
107
|
"aria-label": ariaLabel,
|
|
108
108
|
"aria-labelledby": ariaLabelledBy,
|
|
109
109
|
...rest
|
|
110
|
-
} =
|
|
110
|
+
} = finalProps;
|
|
111
111
|
const theme = useTheme();
|
|
112
112
|
const mapping = useMemo(
|
|
113
113
|
() => ({
|
|
@@ -146,7 +146,7 @@ var MenuList = forwardRef(function MenuList2(props, ref) {
|
|
|
146
146
|
Menu$1,
|
|
147
147
|
{
|
|
148
148
|
...rest,
|
|
149
|
-
ref,
|
|
149
|
+
ref: mergedRef,
|
|
150
150
|
className: classNames?.list?.container,
|
|
151
151
|
items,
|
|
152
152
|
selectionMode,
|
|
@@ -158,8 +158,8 @@ var MenuList = forwardRef(function MenuList2(props, ref) {
|
|
|
158
158
|
});
|
|
159
159
|
var MenuItemContext = createContext(null);
|
|
160
160
|
var MenuItem = forwardRef(function MenuItem2(props, ref) {
|
|
161
|
-
[
|
|
162
|
-
|
|
161
|
+
const [mergedProps, mergedRef] = useContextProps(props, ref, MenuItemContext);
|
|
162
|
+
const finalProps = useDefaultProps(mergedProps, "MenuItem");
|
|
163
163
|
const {
|
|
164
164
|
id,
|
|
165
165
|
children: childrenProp,
|
|
@@ -168,7 +168,7 @@ var MenuItem = forwardRef(function MenuItem2(props, ref) {
|
|
|
168
168
|
size = defaultSize,
|
|
169
169
|
textValue = typeof childrenProp === "string" ? childrenProp : void 0,
|
|
170
170
|
...rest
|
|
171
|
-
} =
|
|
171
|
+
} = finalProps;
|
|
172
172
|
const theme = useTheme();
|
|
173
173
|
const mapping = useMemo(
|
|
174
174
|
() => ({
|
|
@@ -243,7 +243,7 @@ var MenuItem = forwardRef(function MenuItem2(props, ref) {
|
|
|
243
243
|
{
|
|
244
244
|
...rest,
|
|
245
245
|
id: id ?? textValue,
|
|
246
|
-
ref,
|
|
246
|
+
ref: mergedRef,
|
|
247
247
|
className: classNames?.item?.container,
|
|
248
248
|
style,
|
|
249
249
|
textValue,
|