@bitrise/bitkit-v2 0.3.409-beta.2642 → 0.3.409
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/BitkitList/BitkitList.js +13 -11
- package/dist/components/BitkitList/BitkitList.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.sample.d.ts +1 -1
- package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js +17 -6
- package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map +1 -1
- package/dist/theme/slot-recipes/NativeSelect.recipe.js +2 -3
- package/dist/theme/slot-recipes/NativeSelect.recipe.js.map +1 -1
- package/package.json +1 -1
|
@@ -50,19 +50,10 @@ var UNORDERED_ICON_SIZE = {
|
|
|
50
50
|
var BitkitListItem = forwardRef((props, ref) => {
|
|
51
51
|
const { children, helperText, icon: Icon, iconColor } = props;
|
|
52
52
|
const { colorVariant, size, textColor, variant } = useBitkitListContext();
|
|
53
|
-
const content = /* @__PURE__ */ jsxs(Box, {
|
|
54
|
-
flex: "1",
|
|
55
|
-
minWidth: "0",
|
|
56
|
-
children: [children, helperText && /* @__PURE__ */ jsx(Text, {
|
|
57
|
-
color: "text/secondary",
|
|
58
|
-
textStyle: "body/md/regular",
|
|
59
|
-
children: helperText
|
|
60
|
-
})]
|
|
61
|
-
});
|
|
62
53
|
if (variant === "unstyled") return /* @__PURE__ */ jsx(List.Item, {
|
|
63
54
|
ref,
|
|
64
55
|
color: textColor === "secondary" ? "text/secondary" : "text/body",
|
|
65
|
-
children
|
|
56
|
+
children
|
|
66
57
|
});
|
|
67
58
|
if (variant === "inline") return /* @__PURE__ */ jsx(List.Item, {
|
|
68
59
|
ref,
|
|
@@ -73,8 +64,19 @@ var BitkitListItem = forwardRef((props, ref) => {
|
|
|
73
64
|
color: "text/tertiary",
|
|
74
65
|
marginInline: "8"
|
|
75
66
|
} },
|
|
76
|
-
children
|
|
67
|
+
children
|
|
77
68
|
});
|
|
69
|
+
const content = helperText ? /* @__PURE__ */ jsxs(Box, {
|
|
70
|
+
display: "flex",
|
|
71
|
+
flex: "1",
|
|
72
|
+
flexDirection: "column",
|
|
73
|
+
minWidth: "0",
|
|
74
|
+
children: [children, /* @__PURE__ */ jsx(Text, {
|
|
75
|
+
color: "text/secondary",
|
|
76
|
+
textStyle: "body/md/regular",
|
|
77
|
+
children: helperText
|
|
78
|
+
})]
|
|
79
|
+
}) : children;
|
|
78
80
|
if (variant === "ordered") return /* @__PURE__ */ jsxs(List.Item, {
|
|
79
81
|
ref,
|
|
80
82
|
counterIncrement: "bitkit-list",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n
|
|
1
|
+
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {children}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {children}\n </List.Item>\n );\n }\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n height={helperText ? '24' : '20'}\n // The 20px circle keeps the marker's 24px vertical slot through a block-end margin\n // alone: centering it in that slot would put it half a line below the first line of\n // text, whose line box is 20px.\n marginBlockEnd={helperText ? undefined : '4'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SAMPLE_MARKDOWN = "Body text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n# Heading level 1\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n## Heading level 2\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n### Heading level 3\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n#### Heading level 4\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n##### Heading level 5\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n###### Heading level 6\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n---\n\n- List item A\n- List item B\n- List item C\n\n1. List item A
|
|
1
|
+
declare const SAMPLE_MARKDOWN = "Body text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n# Heading level 1\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n## Heading level 2\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n### Heading level 3\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n#### Heading level 4\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n##### Heading level 5\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n###### Heading level 6\n\nBody text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n---\n\n- List item A\n- List item B\n- List item C\n\n1. List item A\n2. List item B\n3. List item C\n\n```\nconst greet = (name: string): string => {\n return `Hello, ${name}!`;\n};\n```\n\nHere is some `inline code` in a sentence.\n\n> Block quote\n\nHere is a [link example](https://bitrise.io) for demonstration purposes.\n";
|
|
2
2
|
export default SAMPLE_MARKDOWN;
|
|
@@ -3,7 +3,7 @@ import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
|
|
|
3
3
|
import IconWarningYellow from "../../icons/IconWarningYellow.js";
|
|
4
4
|
import BitkitField from "../BitkitField/BitkitField.js";
|
|
5
5
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { forwardRef } from "react";
|
|
6
|
+
import { forwardRef, useState } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { NativeSelect } from "@chakra-ui/react/native-select";
|
|
9
9
|
import { splitProps } from "@zag-js/utils";
|
|
@@ -52,11 +52,16 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
|
|
|
52
52
|
size: size === "lg" ? "24" : "16",
|
|
53
53
|
css: styles.statusIcon
|
|
54
54
|
});
|
|
55
|
-
const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;
|
|
56
|
-
const
|
|
55
|
+
const { onChange: fieldOnChange, placeholder, ...restFieldProps } = nativeFieldProps;
|
|
56
|
+
const isControlled = "value" in nativeFieldProps;
|
|
57
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(restFieldProps.defaultValue ?? "");
|
|
58
|
+
const selectedValue = isControlled ? restFieldProps.value ?? "" : uncontrolledValue;
|
|
59
|
+
const handleChange = (event) => {
|
|
60
|
+
if (!isControlled) setUncontrolledValue(event.target.value);
|
|
57
61
|
onValueChange?.(event.target.value);
|
|
58
62
|
fieldOnChange?.(event);
|
|
59
|
-
}
|
|
63
|
+
};
|
|
64
|
+
const placeholderSelection = placeholder ? isControlled ? { value: restFieldProps.value ?? "" } : { defaultValue: restFieldProps.defaultValue ?? "" } : void 0;
|
|
60
65
|
return /* @__PURE__ */ jsx(BitkitField, {
|
|
61
66
|
state,
|
|
62
67
|
...bitkitFieldProps,
|
|
@@ -65,12 +70,18 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
|
|
|
65
70
|
...selectProps,
|
|
66
71
|
className: "group",
|
|
67
72
|
children: [
|
|
68
|
-
/* @__PURE__ */
|
|
73
|
+
/* @__PURE__ */ jsxs(NativeSelect.Field, {
|
|
69
74
|
ref,
|
|
70
75
|
onChange: handleChange,
|
|
71
76
|
...restFieldProps,
|
|
77
|
+
...placeholderSelection,
|
|
72
78
|
...isReadOnly && READ_ONLY_PROPS,
|
|
73
|
-
|
|
79
|
+
"data-placeholder-shown": !!placeholder && selectedValue === "" || void 0,
|
|
80
|
+
children: [!!placeholder && /* @__PURE__ */ jsx("option", {
|
|
81
|
+
disabled: true,
|
|
82
|
+
value: "",
|
|
83
|
+
children: placeholder
|
|
84
|
+
}), children]
|
|
74
85
|
}),
|
|
75
86
|
statusIcon,
|
|
76
87
|
/* @__PURE__ */ jsx(NativeSelect.Indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n 'aria-readonly': true,\n onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n // list: Alt+Arrow opens the dropdown.\n if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n return;\n }\n\n event.preventDefault();\n },\n // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n event.preventDefault();\n },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n children: ReactNode;\n /** Initially selected option value, for uncontrolled usage. */\n defaultValue?: string;\n /** Form field name submitted with the enclosing form. */\n name?: string;\n /**\n * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n * the selected value.\n */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder option shown while no value is selected. */\n placeholder?: string;\n /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */\n selectProps?: Omit<NativeSelectRootProps, 'size'>;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n * selected value.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, onValueChange, selectProps, size = 'lg', state, ...rest } = props;\n const isReadOnly = state === 'readOnly';\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe({ size });\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n // `onValueChange` fires alongside the native `onChange`, with the selected value.\n const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;\n const handleChange: ChangeEventHandler<HTMLSelectElement> | undefined =\n onValueChange || fieldOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n fieldOnChange?.(event);\n }\n : undefined;\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field\n ref={ref}\n onChange={handleChange}\n {...restFieldProps}\n {...(isReadOnly && READ_ONLY_PROPS)}\n >\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n {/*\n A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n `indicator` slot cannot see the read-only state and this has to live here.\n */}\n <AssetSelectChevron\n pointerEvents=\"none\"\n {...(isReadOnly && {\n _groupFocusWithin: { color: 'icon/on-disabled' },\n _groupHover: { color: 'icon/on-disabled' },\n color: 'icon/on-disabled',\n })}\n />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAyCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAI9F,MAAM,EAAE,UAAU,eAAe,GAAG,mBAAmB;CACvD,MAAM,eACJ,iBAAiB,iBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,oBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAK,cAAc;KAElB;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
|
|
1
|
+
{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport {\n type ChangeEventHandler,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n useState,\n} from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n 'aria-readonly': true,\n onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n // list: Alt+Arrow opens the dropdown.\n if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n return;\n }\n\n event.preventDefault();\n },\n // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n event.preventDefault();\n },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n children: ReactNode;\n /** Initially selected option value, for uncontrolled usage. */\n defaultValue?: string;\n /** Form field name submitted with the enclosing form. */\n name?: string;\n /**\n * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n * the selected value.\n */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder option shown while no value is selected. */\n placeholder?: string;\n /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */\n selectProps?: Omit<NativeSelectRootProps, 'size'>;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n * selected value.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, onValueChange, selectProps, size = 'lg', state, ...rest } = props;\n const isReadOnly = state === 'readOnly';\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe({ size });\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n const { onChange: fieldOnChange, placeholder, ...restFieldProps } = nativeFieldProps;\n const isControlled = 'value' in nativeFieldProps;\n\n // The placeholder colour cannot be expressed in CSS alone. `:placeholder-shown` is not defined\n // for a `<select>`, and `:has(option:checked)` does apply but Chromium never re-evaluates it when\n // the selection changes, so the field stays greyed after a value is picked. Tracking the value\n // here and handing the recipe a `data-placeholder-shown` marker is what BitkitSelect gets from\n // Zag, and it survives both controlled and uncontrolled usage.\n const [uncontrolledValue, setUncontrolledValue] = useState(restFieldProps.defaultValue ?? '');\n const selectedValue = isControlled ? (restFieldProps.value ?? '') : uncontrolledValue;\n\n // `onValueChange` fires alongside the native `onChange`, with the selected value.\n const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {\n if (!isControlled) {\n setUncontrolledValue(event.target.value);\n }\n onValueChange?.(event.target.value);\n fieldOnChange?.(event);\n };\n\n // The placeholder option is disabled so it cannot be picked again once a real value is set, and\n // a `<select>` skips disabled options when it picks its own initial selection. Without pinning\n // the empty value the field would come up on the first real option instead of the placeholder.\n const placeholderSelection = placeholder\n ? isControlled\n ? { value: restFieldProps.value ?? '' }\n : { defaultValue: restFieldProps.defaultValue ?? '' }\n : undefined;\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field\n ref={ref}\n onChange={handleChange}\n {...restFieldProps}\n {...placeholderSelection}\n {...(isReadOnly && READ_ONLY_PROPS)}\n data-placeholder-shown={(!!placeholder && selectedValue === '') || undefined}\n >\n {!!placeholder && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n {/*\n A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n `indicator` slot cannot see the read-only state and this has to live here.\n */}\n <AssetSelectChevron\n pointerEvents=\"none\"\n {...(isReadOnly && {\n _groupFocusWithin: { color: 'icon/on-disabled' },\n _groupHover: { color: 'icon/on-disabled' },\n color: 'icon/on-disabled',\n })}\n />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAyCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAG9F,MAAM,EAAE,UAAU,eAAe,aAAa,GAAG,mBAAmB;CACpE,MAAM,eAAe,WAAW;CAOhC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,eAAe,gBAAgB,EAAE;CAC5F,MAAM,gBAAgB,eAAgB,eAAe,SAAS,KAAM;CAGpE,MAAM,gBAAuD,UAAU;EACrE,IAAI,CAAC,cACH,qBAAqB,MAAM,OAAO,KAAK;EAEzC,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB;CAKA,MAAM,uBAAuB,cACzB,eACE,EAAE,OAAO,eAAe,SAAS,GAAG,IACpC,EAAE,cAAc,eAAe,gBAAgB,GAAG,IACpD,KAAA;CAEJ,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,qBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAI;KACJ,GAAK,cAAc;KACnB,0BAAyB,CAAC,CAAC,eAAe,kBAAkB,MAAO,KAAA;KANrE,UAAA,CAQG,CAAC,CAAC,eACD,oBAAC,UAAD;MAAQ,UAAA;MAAS,OAAM;MACpB,UAAA;KACK,CAAA,GAET,QACiB;;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
|
|
@@ -22,9 +22,9 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
|
|
|
22
22
|
_invalid: { borderColor: "border/error" }
|
|
23
23
|
},
|
|
24
24
|
_invalid: { borderColor: "border/error" },
|
|
25
|
+
_placeholderShown: { color: "input/text/placeholder" },
|
|
25
26
|
_disabled: {
|
|
26
27
|
_hover: { borderColor: "border/disabled" },
|
|
27
|
-
_placeholder: { color: "text/disabled" },
|
|
28
28
|
color: "text/disabled",
|
|
29
29
|
background: "background/disabled",
|
|
30
30
|
cursor: "not-allowed"
|
|
@@ -33,8 +33,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe({
|
|
|
33
33
|
_hover: { borderColor: "border/strong" },
|
|
34
34
|
background: "background/disabled",
|
|
35
35
|
cursor: "default"
|
|
36
|
-
}
|
|
37
|
-
_placeholderShown: { color: "input/text/placeholder" }
|
|
36
|
+
}
|
|
38
37
|
},
|
|
39
38
|
statusIcon: {
|
|
40
39
|
position: "absolute",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n className: 'native-select',\n slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n base: {\n root: {\n position: 'relative',\n },\n field: {\n width: '100%',\n minWidth: 0,\n appearance: 'none',\n borderRadius: '4',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'background/primary',\n transition: '200ms',\n color: 'input/text/inputValue',\n _hover: {\n borderColor: 'border/hover',\n _invalid: {\n borderColor: 'border/error',\n },\n },\n _invalid: {\n borderColor: 'border/error',\n },\n
|
|
1
|
+
{"version":3,"file":"NativeSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NativeSelect.recipe.ts"],"sourcesContent":["import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst nativeSelectSlotRecipe = defineSlotRecipe({\n className: 'native-select',\n slots: [...nativeSelectAnatomy.keys(), 'statusIcon'],\n base: {\n root: {\n position: 'relative',\n },\n field: {\n width: '100%',\n minWidth: 0,\n appearance: 'none',\n borderRadius: '4',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'background/primary',\n transition: '200ms',\n color: 'input/text/inputValue',\n _hover: {\n borderColor: 'border/hover',\n _invalid: {\n borderColor: 'border/error',\n },\n },\n _invalid: {\n borderColor: 'border/error',\n },\n _placeholderShown: {\n color: 'input/text/placeholder',\n },\n _disabled: {\n _hover: {\n borderColor: 'border/disabled',\n },\n color: 'text/disabled',\n background: 'background/disabled',\n cursor: 'not-allowed',\n },\n _readOnly: {\n _hover: {\n borderColor: 'border/strong',\n },\n background: 'background/disabled',\n cursor: 'default',\n },\n },\n statusIcon: {\n position: 'absolute',\n top: '50%',\n right: '48',\n transform: 'translateY(-50%)',\n pointerEvents: 'none',\n },\n indicator: {\n position: 'absolute',\n top: '50%',\n right: rem(15),\n transform: 'translateY(-50%)',\n },\n },\n variants: {\n size: {\n md: {\n field: { paddingInline: rem(11), paddingBlock: rem(9), textStyle: 'body/md/regular' },\n },\n lg: {\n field: { paddingInline: rem(15), paddingBlock: rem(11), textStyle: 'body/lg/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default nativeSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO,CAAC,GAAG,oBAAoB,KAAK,GAAG,YAAY;CACnD,MAAM;EACJ,MAAM,EACJ,UAAU,WACZ;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,YAAY;GACZ,cAAc;GACd,aAAa;GACb,aAAa;GACb,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;IACN,aAAa;IACb,UAAU,EACR,aAAa,eACf;GACF;GACA,UAAU,EACR,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,yBACT;GACA,WAAW;IACT,QAAQ,EACN,aAAa,kBACf;IACA,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,WAAW;IACT,QAAQ,EACN,aAAa,gBACf;IACA,YAAY;IACZ,QAAQ;GACV;EACF;EACA,YAAY;GACV,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,eAAe;EACjB;EACA,WAAW;GACT,UAAU;GACV,KAAK;GACL,OAAO,IAAI,EAAE;GACb,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,CAAC;GAAG,WAAW;EAAkB,EACtF;EACA,IAAI,EACF,OAAO;GAAE,eAAe,IAAI,EAAE;GAAG,cAAc,IAAI,EAAE;GAAG,WAAW;EAAkB,EACvF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|