@allxsmith/bestax-bulma 5.45.1 → 5.47.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/esm/components/TreeView.js +5 -2
- package/dist/esm/components/TreeView.js.map +1 -1
- package/dist/esm/form/Checkbox.js.map +1 -1
- package/dist/esm/form/File.js.map +1 -1
- package/dist/esm/form/Numberinput.js.map +1 -1
- package/dist/esm/form/PinInput.js.map +1 -1
- package/dist/esm/form/Radio.js.map +1 -1
- package/dist/esm/form/SelectBase.js.map +1 -1
- package/dist/esm/form/Slider.js.map +1 -1
- package/dist/esm/form/Switch.js.map +1 -1
- package/dist/esm/helpers/Theme.js +191 -49
- package/dist/esm/helpers/Theme.js.map +1 -1
- package/dist/esm/helpers/useTreeView.js +64 -9
- package/dist/esm/helpers/useTreeView.js.map +1 -1
- package/dist/esm/helpers/useVisibilityClasses.js.map +1 -1
- package/dist/index.cjs +258 -59
- package/dist/index.cjs.map +1 -1
- package/dist/types/components/TreeView.d.ts +2 -0
- package/dist/types/form/Checkbox.d.ts +3 -0
- package/dist/types/form/File.d.ts +3 -0
- package/dist/types/form/Numberinput.d.ts +2 -0
- package/dist/types/form/PinInput.d.ts +3 -0
- package/dist/types/form/Radio.d.ts +3 -0
- package/dist/types/form/SelectBase.d.ts +3 -0
- package/dist/types/form/Slider.d.ts +3 -0
- package/dist/types/form/Switch.d.ts +2 -0
- package/dist/types/helpers/Theme.d.ts +37 -10
- package/dist/types/helpers/useTreeView.d.ts +19 -3
- package/dist/types/helpers/useVisibilityClasses.d.ts +5 -1
- package/dist/types-cjs/components/TreeView.d.ts +2 -0
- package/dist/types-cjs/form/Checkbox.d.ts +3 -0
- package/dist/types-cjs/form/File.d.ts +3 -0
- package/dist/types-cjs/form/Numberinput.d.ts +2 -0
- package/dist/types-cjs/form/PinInput.d.ts +3 -0
- package/dist/types-cjs/form/Radio.d.ts +3 -0
- package/dist/types-cjs/form/SelectBase.d.ts +3 -0
- package/dist/types-cjs/form/Slider.d.ts +3 -0
- package/dist/types-cjs/form/Switch.d.ts +2 -0
- package/dist/types-cjs/helpers/Theme.d.ts +37 -10
- package/dist/types-cjs/helpers/useTreeView.d.ts +19 -3
- package/dist/types-cjs/helpers/useVisibilityClasses.d.ts +5 -1
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.js","sources":["../../../src/form/PinInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`\n * keeps the letters A to Z, in either case, and digits. A digit from any\n * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII\n * digit, `3`.\n */\nexport type PinInputType = 'number' | 'alphanumeric';\n\n/**\n * Props for the PinInput component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * Every other prop goes to the `<input>` that holds the code, except\n * `className` and the helper props, which go to the row of boxes.\n * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.\n * @extraProp {string} [autoComplete=\"one-time-code\"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.\n * @extraProp {string} [inputMode] - The keyboard a phone shows: `\"numeric\"` with `type=\"number\"`, `\"text\"` with `type=\"alphanumeric\"`.\n * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.\n * @extraProp {string} [className] - Additional CSS classes for the row of boxes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.\n */\nexport interface PinInputProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'color'\n | 'size'\n | 'type'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'maxLength'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n FormFieldProps {\n /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Applied to the input that holds the code (the labellable control), not the row of boxes. */\n id?: string;\n /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */\n length?: number;\n /** The code (controlled). Only its first `length` characters are shown and submitted. */\n value?: string;\n /** The code to start with (uncontrolled). Only its first `length` characters are kept. */\n defaultValue?: string;\n /**\n * What the code takes. A digit from any script, such as an Arabic-Indic or\n * a Persian one, goes in as its ASCII digit, so the code reaches\n * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed\n * or pasted is dropped, and the caret stays where it was. The input stays a\n * text field either way, so a code keeps its leading zeros.\n */\n type?: PinInputType;\n /**\n * Shows a dot in each filled box in place of its character, and makes the\n * input a password field, so a screen reader doesn't read the code out\n * either.\n */\n isMasked?: boolean;\n /** Bulma color for the boxes, the colors an `Input` takes. */\n color?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'black'\n | 'dark'\n | 'light'\n | 'white';\n /** Size of the boxes. */\n size?: 'small' | 'medium' | 'large';\n /** Round boxes. */\n isRounded?: boolean;\n /** Whether the input is disabled. */\n disabled?: boolean;\n /**\n * Called with the code each time it changes. A paste replaces the whole\n * code with what was pasted, kept to what `type` takes and cut to `length`,\n * and a paste with nothing the code takes changes nothing.\n */\n onChange?: (value: string) => void;\n /**\n * Called with the code when a change makes it `length` characters long,\n * such as typing the last character, a paste or autofill. It fires once for\n * each change that fills the last box with a new code, and never on a\n * render. A `value` you set yourself doesn't call it.\n */\n onComplete?: (value: string) => void;\n}\n\ntype Selection = readonly [start: number, end: number];\n\n/** What a masked box shows for its character, a filled circle. */\nconst MASK = '\\u25CF';\n\n/**\n * `text` with each decimal digit, in any script, turned into its ASCII digit:\n * `١٢٣` and `۱۲۳` become `123`. Unicode assigns decimal digits in runs of ten,\n * from 0 to 9, so a digit's value is how far it is from the start of its run,\n * modulo ten for runs that sit next to each other.\n */\nconst toAsciiDigits = (text: string) =>\n text.replace(/\\p{Nd}/gu, digit => {\n const point = digit.codePointAt(0)!;\n let start = point;\n while (/\\p{Nd}/u.test(String.fromCodePoint(start - 1))) start--;\n return String((point - start) % 10);\n });\n\n/**\n * The `PinInput` component is a field for a short code, such as a one-time\n * code or a PIN, drawn as a row of boxes with one character in each.\n *\n * The code lives in one real `<input>` that lies over the boxes, so it is\n * one field to a screen reader, and paste, autofill from a text message and\n * password managers work on it as they do on any input. The boxes draw what\n * it holds, and the box at the caret, or every box in a selection, shows\n * Bulma's focus look.\n *\n * @function\n * @param {PinInputProps} props - Props for the PinInput component.\n * @returns {JSX.Element} The rendered code field.\n *\n * @example\n * <PinInput\n * label=\"Verification code\"\n * value={code}\n * onChange={setCode}\n * onComplete={verify}\n * />\n */\nexport const PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n length = 6,\n value: controlledValue,\n defaultValue = '',\n type = 'number',\n isMasked = false,\n color,\n size,\n isRounded = false,\n disabled = false,\n onChange,\n onComplete,\n onPaste,\n onFocus,\n onBlur,\n className,\n ...props\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('PinInput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const ownControl = rendersOwnControl('PinInput', { insideControl });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: props.id,\n labelProps,\n rendersLabel: ownField,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const classPrefix = useClassPrefix();\n\n const [internalValue, setInternalValue] = useState(defaultValue);\n // Cut to `length`, so the boxes, the input and the form all hold the same\n // code.\n const code = (\n controlledValue !== undefined ? controlledValue : internalValue\n ).slice(0, length);\n\n const allowed = type === 'alphanumeric' ? '[0-9A-Za-z]' : '[0-9]';\n /** The characters of `text` the code takes, digits in ASCII, cut to `length`. */\n const keep = (text: string) =>\n (toAsciiDigits(text).match(new RegExp(allowed, 'g')) ?? [])\n .join('')\n .slice(0, length);\n\n const commit = (next: string) => {\n if (next === code) return;\n if (controlledValue === undefined) setInternalValue(next);\n onChange?.(next);\n if (next.length === length) onComplete?.(next);\n };\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') return ref(node);\n if (ref) ref.current = node;\n },\n [ref]\n );\n\n // The input's selection while it has focus, which the boxes draw.\n const [selection, setSelection] = useState<Selection | null>(null);\n const follow = useCallback(() => {\n const input = inputRef.current!;\n const next: Selection | null =\n getActiveElementInTree(input) === input\n ? [input.selectionStart!, input.selectionEnd!]\n : null;\n setSelection(prev =>\n prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next\n );\n }, []);\n // A new code moves the caret, and so can a value set from outside.\n useClientLayoutEffect(follow, [code, follow]);\n // React's `onSelect` never fires inside a shadow root, so the boxes\n // follow the browser's own `selectionchange`. A caret that moves fires it\n // at the input, and it bubbles to the document, but in a shadow root some\n // browsers fire it at the document alone and others at the input alone,\n // so both are followed.\n useEffect(() => {\n const input = inputRef.current!;\n const doc = input.ownerDocument;\n input.addEventListener('selectionchange', follow);\n doc.addEventListener('selectionchange', follow);\n return () => {\n input.removeEventListener('selectionchange', follow);\n doc.removeEventListener('selectionchange', follow);\n };\n }, [follow]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const input = e.target;\n const typed = input.value;\n const next = keep(typed);\n if (next !== typed) {\n // Drop what the code doesn't take before React sees the value, so\n // the caret stays where it was rather than jumping to the end.\n const caret = keep(typed.slice(0, input.selectionStart!)).length;\n input.value = next;\n input.setSelectionRange(caret, caret);\n }\n commit(next);\n };\n\n // The browser cuts a paste to `maxLength` before anything else sees it,\n // so a code pasted as \"123 456\" would lose its last digit. What the code\n // takes is kept first, and it replaces the whole code, since what you\n // paste into a code field is the code.\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(e);\n if (e.defaultPrevented) return;\n e.preventDefault();\n const pasted = keep(e.clipboardData.getData('text'));\n if (pasted && !e.currentTarget.readOnly) commit(pasted);\n };\n\n const rootClass = classNames(\n usePrefixedClassNames('pin-input'),\n bulmaHelperClasses,\n className\n );\n const fieldClass = usePrefixedClassNames('pin-input-field');\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n\n // The boxes the selection covers: the one at a caret, or every selected\n // one. A caret after the last character marks the last box.\n const [start, end] = selection ?? [-1, -1];\n const first = Math.min(start, length - 1);\n const last = Math.max(first + 1, Math.min(end, length));\n const boxes = Array.from({ length }, (_, i) => {\n const char = code[i];\n const active = i >= first && i < last;\n return (\n <div\n key={i}\n aria-hidden=\"true\"\n className={prefixedClassNames(classPrefix, 'input', 'pin-input-box', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-focused': active,\n 'has-caret': active && start === end && !char,\n 'is-disabled': disabled,\n })}\n >\n {char && (isMasked ? MASK : char)}\n </div>\n );\n });\n\n // Left to right on a right-to-left page too: a code is written that way,\n // so its first character stays in the first box on the left, and the\n // arrow keys move the caret the way the boxes run.\n let content = (\n <div className={rootClass} dir=\"ltr\">\n <input\n ref={setRefs}\n className={fieldClass}\n type={isMasked ? 'password' : 'text'}\n inputMode={type === 'alphanumeric' ? 'text' : 'numeric'}\n autoComplete=\"one-time-code\"\n autoCorrect=\"off\"\n spellCheck={false}\n // A partial code fails constraint validation. `minLength` would\n // say so only after a keystroke, never after a paste or a filtered\n // character, which set the value from script.\n pattern={`${allowed}{${length}}`}\n {...rest}\n value={code}\n maxLength={length}\n disabled={disabled}\n onChange={handleChange}\n onPaste={handlePaste}\n onFocus={e => {\n follow();\n onFocus?.(e);\n }}\n onBlur={e => {\n setSelection(null);\n onBlur?.(e);\n }}\n // After the spread: an undefined `id` key in rest would wipe it.\n id={controlId}\n />\n {boxes}\n </div>\n );\n\n if (ownControl) {\n content = <Control>{content}</Control>;\n }\n\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n if (ownField) {\n return (\n <Field\n label={label}\n labelSize={labelSize}\n labelProps={fieldLabelProps}\n horizontal={horizontal}\n className={fieldClassName}\n >\n {content}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {content}\n {messageEl}\n </>\n );\n }\n);\n\nPinInput.displayName = 'PinInput';\n\nexport default PinInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PinInput.js","sources":["../../../src/form/PinInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getActiveElementInTree } from '../helpers/shadowDom';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * What a PinInput takes: `'number'` keeps digits only, and `'alphanumeric'`\n * keeps the letters A to Z, in either case, and digits. A digit from any\n * script, such as an Arabic-Indic `٣` or a Persian `۳`, is kept as its ASCII\n * digit, `3`.\n */\nexport type PinInputType = 'number' | 'alphanumeric';\n\n/**\n * Props for the PinInput component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * Every other prop goes to the `<input>` that holds the code, except\n * `className` and the helper props, which go to the row of boxes.\n * @helperProps Helper props go on the `.pin-input` `<div>`, the row of boxes,\n * with `className`. The other attributes go on the `<input>` that holds the\n * code.\n * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.\n * @extraProp {string} [autoComplete=\"one-time-code\"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.\n * @extraProp {string} [inputMode] - The keyboard a phone shows: `\"numeric\"` with `type=\"number\"`, `\"text\"` with `type=\"alphanumeric\"`.\n * @extraProp {string} [pattern] - Exactly `length` of what `type` takes, `[0-9]{6}` by default, so a form with `required` won't submit a partial code. Any non-empty partial code fails it, `required` or not.\n * @extraProp {string} [className] - Additional CSS classes for the row of boxes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input that holds the code.\n */\nexport interface PinInputProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'color'\n | 'size'\n | 'type'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'maxLength'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n FormFieldProps {\n /** Field label. Automatically associated with the input that holds the code via `htmlFor`, so a screen reader announces one field under this name. Uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Applied to the input that holds the code (the labellable control), not the row of boxes. */\n id?: string;\n /** How many characters the code has. Each gets a box, and it is the input's `maxLength`. */\n length?: number;\n /** The code (controlled). Only its first `length` characters are shown and submitted. */\n value?: string;\n /** The code to start with (uncontrolled). Only its first `length` characters are kept. */\n defaultValue?: string;\n /**\n * What the code takes. A digit from any script, such as an Arabic-Indic or\n * a Persian one, goes in as its ASCII digit, so the code reaches\n * `onChange`, `onComplete` and the form as `0` to `9`. Anything else typed\n * or pasted is dropped, and the caret stays where it was. The input stays a\n * text field either way, so a code keeps its leading zeros.\n */\n type?: PinInputType;\n /**\n * Shows a dot in each filled box in place of its character, and makes the\n * input a password field, so a screen reader doesn't read the code out\n * either.\n */\n isMasked?: boolean;\n /** Bulma color for the boxes, the colors an `Input` takes. */\n color?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'black'\n | 'dark'\n | 'light'\n | 'white';\n /** Size of the boxes. */\n size?: 'small' | 'medium' | 'large';\n /** Round boxes. */\n isRounded?: boolean;\n /** Whether the input is disabled. */\n disabled?: boolean;\n /**\n * Called with the code each time it changes. A paste replaces the whole\n * code with what was pasted, kept to what `type` takes and cut to `length`,\n * and a paste with nothing the code takes changes nothing.\n */\n onChange?: (value: string) => void;\n /**\n * Called with the code when a change makes it `length` characters long,\n * such as typing the last character, a paste or autofill. It fires once for\n * each change that fills the last box with a new code, and never on a\n * render. A `value` you set yourself doesn't call it.\n */\n onComplete?: (value: string) => void;\n}\n\ntype Selection = readonly [start: number, end: number];\n\n/** What a masked box shows for its character, a filled circle. */\nconst MASK = '\\u25CF';\n\n/**\n * `text` with each decimal digit, in any script, turned into its ASCII digit:\n * `١٢٣` and `۱۲۳` become `123`. Unicode assigns decimal digits in runs of ten,\n * from 0 to 9, so a digit's value is how far it is from the start of its run,\n * modulo ten for runs that sit next to each other.\n */\nconst toAsciiDigits = (text: string) =>\n text.replace(/\\p{Nd}/gu, digit => {\n const point = digit.codePointAt(0)!;\n let start = point;\n while (/\\p{Nd}/u.test(String.fromCodePoint(start - 1))) start--;\n return String((point - start) % 10);\n });\n\n/**\n * The `PinInput` component is a field for a short code, such as a one-time\n * code or a PIN, drawn as a row of boxes with one character in each.\n *\n * The code lives in one real `<input>` that lies over the boxes, so it is\n * one field to a screen reader, and paste, autofill from a text message and\n * password managers work on it as they do on any input. The boxes draw what\n * it holds, and the box at the caret, or every box in a selection, shows\n * Bulma's focus look.\n *\n * @function\n * @param {PinInputProps} props - Props for the PinInput component.\n * @returns {JSX.Element} The rendered code field.\n *\n * @example\n * <PinInput\n * label=\"Verification code\"\n * value={code}\n * onChange={setCode}\n * onComplete={verify}\n * />\n */\nexport const PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n // Field props\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n length = 6,\n value: controlledValue,\n defaultValue = '',\n type = 'number',\n isMasked = false,\n color,\n size,\n isRounded = false,\n disabled = false,\n onChange,\n onComplete,\n onPaste,\n onFocus,\n onBlur,\n className,\n ...props\n },\n ref\n ) => {\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('PinInput', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const ownControl = rendersOwnControl('PinInput', { insideControl });\n const { controlId, fieldLabelProps } = useAutoLabelId({\n label,\n id: props.id,\n labelProps,\n rendersLabel: ownField,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n const classPrefix = useClassPrefix();\n\n const [internalValue, setInternalValue] = useState(defaultValue);\n // Cut to `length`, so the boxes, the input and the form all hold the same\n // code.\n const code = (\n controlledValue !== undefined ? controlledValue : internalValue\n ).slice(0, length);\n\n const allowed = type === 'alphanumeric' ? '[0-9A-Za-z]' : '[0-9]';\n /** The characters of `text` the code takes, digits in ASCII, cut to `length`. */\n const keep = (text: string) =>\n (toAsciiDigits(text).match(new RegExp(allowed, 'g')) ?? [])\n .join('')\n .slice(0, length);\n\n const commit = (next: string) => {\n if (next === code) return;\n if (controlledValue === undefined) setInternalValue(next);\n onChange?.(next);\n if (next.length === length) onComplete?.(next);\n };\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') return ref(node);\n if (ref) ref.current = node;\n },\n [ref]\n );\n\n // The input's selection while it has focus, which the boxes draw.\n const [selection, setSelection] = useState<Selection | null>(null);\n const follow = useCallback(() => {\n const input = inputRef.current!;\n const next: Selection | null =\n getActiveElementInTree(input) === input\n ? [input.selectionStart!, input.selectionEnd!]\n : null;\n setSelection(prev =>\n prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next\n );\n }, []);\n // A new code moves the caret, and so can a value set from outside.\n useClientLayoutEffect(follow, [code, follow]);\n // React's `onSelect` never fires inside a shadow root, so the boxes\n // follow the browser's own `selectionchange`. A caret that moves fires it\n // at the input, and it bubbles to the document, but in a shadow root some\n // browsers fire it at the document alone and others at the input alone,\n // so both are followed.\n useEffect(() => {\n const input = inputRef.current!;\n const doc = input.ownerDocument;\n input.addEventListener('selectionchange', follow);\n doc.addEventListener('selectionchange', follow);\n return () => {\n input.removeEventListener('selectionchange', follow);\n doc.removeEventListener('selectionchange', follow);\n };\n }, [follow]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const input = e.target;\n const typed = input.value;\n const next = keep(typed);\n if (next !== typed) {\n // Drop what the code doesn't take before React sees the value, so\n // the caret stays where it was rather than jumping to the end.\n const caret = keep(typed.slice(0, input.selectionStart!)).length;\n input.value = next;\n input.setSelectionRange(caret, caret);\n }\n commit(next);\n };\n\n // The browser cuts a paste to `maxLength` before anything else sees it,\n // so a code pasted as \"123 456\" would lose its last digit. What the code\n // takes is kept first, and it replaces the whole code, since what you\n // paste into a code field is the code.\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(e);\n if (e.defaultPrevented) return;\n e.preventDefault();\n const pasted = keep(e.clipboardData.getData('text'));\n if (pasted && !e.currentTarget.readOnly) commit(pasted);\n };\n\n const rootClass = classNames(\n usePrefixedClassNames('pin-input'),\n bulmaHelperClasses,\n className\n );\n const fieldClass = usePrefixedClassNames('pin-input-field');\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n\n // The boxes the selection covers: the one at a caret, or every selected\n // one. A caret after the last character marks the last box.\n const [start, end] = selection ?? [-1, -1];\n const first = Math.min(start, length - 1);\n const last = Math.max(first + 1, Math.min(end, length));\n const boxes = Array.from({ length }, (_, i) => {\n const char = code[i];\n const active = i >= first && i < last;\n return (\n <div\n key={i}\n aria-hidden=\"true\"\n className={prefixedClassNames(classPrefix, 'input', 'pin-input-box', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-focused': active,\n 'has-caret': active && start === end && !char,\n 'is-disabled': disabled,\n })}\n >\n {char && (isMasked ? MASK : char)}\n </div>\n );\n });\n\n // Left to right on a right-to-left page too: a code is written that way,\n // so its first character stays in the first box on the left, and the\n // arrow keys move the caret the way the boxes run.\n let content = (\n <div className={rootClass} dir=\"ltr\">\n <input\n ref={setRefs}\n className={fieldClass}\n type={isMasked ? 'password' : 'text'}\n inputMode={type === 'alphanumeric' ? 'text' : 'numeric'}\n autoComplete=\"one-time-code\"\n autoCorrect=\"off\"\n spellCheck={false}\n // A partial code fails constraint validation. `minLength` would\n // say so only after a keystroke, never after a paste or a filtered\n // character, which set the value from script.\n pattern={`${allowed}{${length}}`}\n {...rest}\n value={code}\n maxLength={length}\n disabled={disabled}\n onChange={handleChange}\n onPaste={handlePaste}\n onFocus={e => {\n follow();\n onFocus?.(e);\n }}\n onBlur={e => {\n setSelection(null);\n onBlur?.(e);\n }}\n // After the spread: an undefined `id` key in rest would wipe it.\n id={controlId}\n />\n {boxes}\n </div>\n );\n\n if (ownControl) {\n content = <Control>{content}</Control>;\n }\n\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n if (ownField) {\n return (\n <Field\n label={label}\n labelSize={labelSize}\n labelProps={fieldLabelProps}\n horizontal={horizontal}\n className={fieldClassName}\n >\n {content}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {content}\n {messageEl}\n </>\n );\n }\n);\n\nPinInput.displayName = 'PinInput';\n\nexport default PinInput;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n * {radioColors.map(color => (\n * <Radio key={color} value={color} color={color}>\n * {color}\n * </Radio>\n * ))}\n * </Radios>;\n */\nexport const radioColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n */\nexport interface RadioProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color of the radio button. */\n color?: (typeof radioColors)[number];\n /** Size of the radio button. */\n size?: (typeof radioSizes)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Whether the radio is disabled. */\n disabled?: boolean;\n /**\n * Additional CSS classes, on the outer `<label>`. That's the element that\n * declares the `--bulma-radio-*` variables, so a class is how to set one:\n * `style` and the other input attributes go to the `<input>`. Name\n * `.styled-radio` beside your class in the selector, so it beats the\n * label's own declaration whatever order the stylesheets load in. A\n * `color` prop declares the active color again on\n * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n * unset when a class sets it.\n */\n className?: string;\n /** The label/content for the radio. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n * <Radio value=\"red\">Red</Radio>\n * <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n color,\n size,\n className,\n children,\n textColor,\n disabled,\n name,\n value,\n checked,\n defaultChecked,\n onChange,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // Inherit name + selection state from a surrounding <Radios> group.\n // Local props always win over the group (explicit > implicit).\n const group = useRadiosGroup();\n const effectiveName = name ?? group?.name;\n\n // Group-managed checked state — only when the group is in\n // controlled/uncontrolled mode (group.value is defined) AND this Radio\n // has a value to compare against. Local `checked` always wins.\n const groupManaged = group?.value !== undefined && value !== undefined;\n const effectiveChecked =\n checked !== undefined\n ? checked\n : groupManaged\n ? group!.value === value\n : undefined;\n // When the group manages checked, suppress local defaultChecked to avoid\n // the controlled/uncontrolled React warning.\n const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // Local onChange always fires.\n onChange?.(e);\n // Dispatch to the group additionally — keeps group state in sync.\n if (group?.onChange && value !== undefined) {\n group.onChange(String(value));\n }\n },\n [onChange, group, value]\n );\n\n const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n [`is-${color}`]: color && radioColors.includes(color),\n [`is-${size}`]: size && radioSizes.includes(size),\n });\n const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={radioClass}>\n <input\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n name={effectiveName}\n value={value}\n checked={effectiveChecked}\n defaultChecked={effectiveDefaultChecked}\n onChange={handleChange}\n {...rest}\n />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;;;;;;;;;;;;;;;;AAkBG;AACI,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;;AAGV;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\nimport { useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n * {radioColors.map(color => (\n * <Radio key={color} value={color} color={color}>\n * {color}\n * </Radio>\n * ))}\n * </Radios>;\n */\nexport const radioColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface RadioProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color of the radio button. */\n color?: (typeof radioColors)[number];\n /** Size of the radio button. */\n size?: (typeof radioSizes)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Whether the radio is disabled. */\n disabled?: boolean;\n /**\n * Additional CSS classes, on the outer `<label>`. That's the element that\n * declares the `--bulma-radio-*` variables, so a class is how to set one:\n * `style` and the other input attributes go to the `<input>`. Name\n * `.styled-radio` beside your class in the selector, so it beats the\n * label's own declaration whatever order the stylesheets load in. A\n * `color` prop declares the active color again on\n * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n * unset when a class sets it.\n */\n className?: string;\n /** The label/content for the radio. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n * <Radio value=\"red\">Red</Radio>\n * <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n color,\n size,\n className,\n children,\n textColor,\n disabled,\n name,\n value,\n checked,\n defaultChecked,\n onChange,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // Inherit name + selection state from a surrounding <Radios> group.\n // Local props always win over the group (explicit > implicit).\n const group = useRadiosGroup();\n const effectiveName = name ?? group?.name;\n\n // Group-managed checked state — only when the group is in\n // controlled/uncontrolled mode (group.value is defined) AND this Radio\n // has a value to compare against. Local `checked` always wins.\n const groupManaged = group?.value !== undefined && value !== undefined;\n const effectiveChecked =\n checked !== undefined\n ? checked\n : groupManaged\n ? group!.value === value\n : undefined;\n // When the group manages checked, suppress local defaultChecked to avoid\n // the controlled/uncontrolled React warning.\n const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n // Local onChange always fires.\n onChange?.(e);\n // Dispatch to the group additionally — keeps group state in sync.\n if (group?.onChange && value !== undefined) {\n group.onChange(String(value));\n }\n },\n [onChange, group, value]\n );\n\n const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n [`is-${color}`]: color && radioColors.includes(color),\n [`is-${size}`]: size && radioSizes.includes(size),\n });\n const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={radioClass}>\n <input\n ref={ref}\n type=\"radio\"\n disabled={disabled}\n name={effectiveName}\n value={value}\n checked={effectiveChecked}\n defaultChecked={effectiveDefaultChecked}\n onChange={handleChange}\n {...rest}\n />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;;;;;;;;;;;;;;;;AAkBG;AACI,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;;AAGV;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO;AAsC/D;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;AAIF,IAAA,MAAM,KAAK,GAAG,cAAc,EAAE;AAC9B,IAAA,MAAM,aAAa,GAAG,IAAI,IAAI,KAAK,EAAE,IAAI;;;;IAKzC,MAAM,YAAY,GAAG,KAAK,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;AACtE,IAAA,MAAM,gBAAgB,GACpB,OAAO,KAAK;AACV,UAAE;AACF,UAAE;AACA,cAAE,KAAM,CAAC,KAAK,KAAK;cACjB,SAAS;;;IAGjB,MAAM,uBAAuB,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc;AAEzE,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;;AAEzC,QAAA,QAAQ,GAAG,CAAC,CAAC;;QAEb,IAAI,KAAK,EAAE,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE;YAC1C,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B;IACF,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CACzB;AAED,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,cAAc,EAAE,OAAO,EAAE;AAC/D,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClD,KAAA,CAAC;IACF,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;AACvE,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;AACjD,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,eAAe,CAAC;IAEhE,QACEA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,UAAU,EAAA,QAAA,EAAA,CAC1BC,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,gBAAgB,EACzB,cAAc,EAAE,uBAAuB,EACvC,QAAQ,EAAE,YAAY,EAAA,GAClB,IAAI,EAAA,CACR,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,EAAA,CAAI,EAC9B,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC5D;AAEZ,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBase.js","sources":["../../../src/form/SelectBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget } from './FormContext';\n\n/**\n * Props for the Select component.\n */\nexport interface SelectBaseProps\n extends\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,\n Omit<BulmaClassesProps, 'color'> {\n /** Bulma color modifier for the select. */\n color?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'black'\n | 'dark'\n | 'light'\n | 'white';\n /** Size modifier for the select. */\n size?: 'small' | 'medium' | 'large';\n /** Rounded select corners. */\n isRounded?: boolean;\n /**\n * Replaces the chevron with a loading spinner.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /** Applies Bulma's is-active modifier. */\n isActive?: boolean;\n /** Forces hovered state on the inner select. */\n isHovered?: boolean;\n /** Forces focused state on the inner select. */\n isFocused?: boolean;\n /** Makes the select span the full width of parent. */\n isFullwidth?: boolean;\n /** Makes the select span the full width of parent. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n isFullWidth?: boolean;\n /** Additional CSS classes to apply. */\n className?: string;\n /** Disables the select. */\n disabled?: boolean;\n /** Allows multiple selections. */\n multiple?: boolean;\n /** Number of visible options in multiselect. */\n multipleSize?: number;\n /** `<option>` elements. */\n children?: React.ReactNode;\n}\n\n/**\n * Bulma Select component with full Bulma helper class support.\n *\n * @function\n * @param {SelectBaseProps} props - Props for the SelectBase component.\n * @returns {JSX.Element} The rendered select element.\n * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}\n */\nexport const SelectBase = forwardRef<HTMLSelectElement, SelectBaseProps>(\n (\n {\n color,\n size,\n isRounded,\n isLoading,\n isActive,\n isHovered,\n isFocused,\n isFullwidth,\n isFullWidth,\n className,\n disabled,\n children,\n multiple,\n multipleSize,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color,\n ...props,\n });\n // A labeled Field's generated id when no user id arrived (rest.id may be\n // an undefined own key), reported to that Field (#1004).\n const id = useFieldLabelTarget(rest.id);\n\n const mainClass = usePrefixedClassNames('select', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-loading': isLoading,\n 'is-active': isActive,\n 'is-multiple': !!multiple,\n 'is-fullwidth': isFullwidth ?? isFullWidth,\n });\n const selectClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // is-hovered / is-focused belong on the inner <select> element, not the wrapper.\n const innerSelectClass = usePrefixedClassNames('', {\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n });\n\n // Only set size attribute when multiple is true and multipleSize is specified\n const selectProps: React.SelectHTMLAttributes<HTMLSelectElement> = {\n disabled,\n multiple,\n ...rest,\n };\n\n if (multiple && typeof multipleSize === 'number') {\n selectProps.size = multipleSize;\n }\n\n return (\n <div className={selectClass}>\n <select\n ref={ref}\n className={innerSelectClass || undefined}\n {...selectProps}\n // After the spread, which may carry an undefined id key; the id\n // belongs on the inner <select>.\n id={id}\n >\n {children}\n </select>\n </div>\n );\n }\n);\n\nSelectBase.displayName = 'SelectBase';\n\nexport default SelectBase;\n"],"names":["_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectBase.js","sources":["../../../src/form/SelectBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget } from './FormContext';\n\n/**\n * Props for the Select component.\n *\n * @helperProps Helper props go on the `.select` wrapper `<div>`, with\n * `className`. The other attributes go on the `<select>`.\n */\nexport interface SelectBaseProps\n extends\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,\n Omit<BulmaClassesProps, 'color'> {\n /** Bulma color modifier for the select. */\n color?:\n | 'primary'\n | 'link'\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n | 'black'\n | 'dark'\n | 'light'\n | 'white';\n /** Size modifier for the select. */\n size?: 'small' | 'medium' | 'large';\n /** Rounded select corners. */\n isRounded?: boolean;\n /**\n * Replaces the chevron with a loading spinner.\n * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n * drawn (with bestax's CSS loaded).\n */\n isLoading?: boolean;\n /** Applies Bulma's is-active modifier. */\n isActive?: boolean;\n /** Forces hovered state on the inner select. */\n isHovered?: boolean;\n /** Forces focused state on the inner select. */\n isFocused?: boolean;\n /** Makes the select span the full width of parent. */\n isFullwidth?: boolean;\n /** Makes the select span the full width of parent. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n isFullWidth?: boolean;\n /** Additional CSS classes to apply. */\n className?: string;\n /** Disables the select. */\n disabled?: boolean;\n /** Allows multiple selections. */\n multiple?: boolean;\n /** Number of visible options in multiselect. */\n multipleSize?: number;\n /** `<option>` elements. */\n children?: React.ReactNode;\n}\n\n/**\n * Bulma Select component with full Bulma helper class support.\n *\n * @function\n * @param {SelectBaseProps} props - Props for the SelectBase component.\n * @returns {JSX.Element} The rendered select element.\n * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}\n */\nexport const SelectBase = forwardRef<HTMLSelectElement, SelectBaseProps>(\n (\n {\n color,\n size,\n isRounded,\n isLoading,\n isActive,\n isHovered,\n isFocused,\n isFullwidth,\n isFullWidth,\n className,\n disabled,\n children,\n multiple,\n multipleSize,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color,\n ...props,\n });\n // A labeled Field's generated id when no user id arrived (rest.id may be\n // an undefined own key), reported to that Field (#1004).\n const id = useFieldLabelTarget(rest.id);\n\n const mainClass = usePrefixedClassNames('select', {\n [`is-${color}`]: !!color,\n [`is-${size}`]: !!size,\n 'is-rounded': isRounded,\n 'is-loading': isLoading,\n 'is-active': isActive,\n 'is-multiple': !!multiple,\n 'is-fullwidth': isFullwidth ?? isFullWidth,\n });\n const selectClass = classNames(mainClass, bulmaHelperClasses, className);\n\n // is-hovered / is-focused belong on the inner <select> element, not the wrapper.\n const innerSelectClass = usePrefixedClassNames('', {\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n });\n\n // Only set size attribute when multiple is true and multipleSize is specified\n const selectProps: React.SelectHTMLAttributes<HTMLSelectElement> = {\n disabled,\n multiple,\n ...rest,\n };\n\n if (multiple && typeof multipleSize === 'number') {\n selectProps.size = multipleSize;\n }\n\n return (\n <div className={selectClass}>\n <select\n ref={ref}\n className={innerSelectClass || undefined}\n {...selectProps}\n // After the spread, which may carry an undefined id key; the id\n // belongs on the inner <select>.\n id={id}\n >\n {children}\n </select>\n </div>\n );\n }\n);\n\nSelectBase.displayName = 'SelectBase';\n\nexport default SelectBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AA2DA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;IAGF,MAAM,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvC,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AAChD,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;QACrB,aAAa,EAAE,CAAC,CAAC,QAAQ;QACzB,cAAc,EAAE,WAAW,IAAI,WAAW;AAC3C,KAAA,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;;AAGxE,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACjD,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;;AAGF,IAAA,MAAM,WAAW,GAAkD;QACjE,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,IAAI;KACR;AAED,IAAA,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;AAChD,QAAA,WAAW,CAAC,IAAI,GAAG,YAAY;IACjC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,YACzBA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,IAAI,SAAS,KACpC,WAAW;;;AAGf,YAAA,EAAE,EAAE,EAAE,EAAA,QAAA,EAEL,QAAQ,EAAA,CACF,EAAA,CACL;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/form/Slider.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useMemo,\n useId,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Slider component. */\nexport type SliderSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Slider component. */\nexport type SliderColor =\n 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Tooltip display mode for the Slider component. */\nexport type SliderTooltip = 'auto' | 'always' | 'hidden';\n\n/** Orientation of the Slider component. */\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\n/**\n * A tick mark displayed along the Slider track.\n */\nexport interface SliderMark {\n /** Controlled value. */\n value: number;\n /** Optional label rendered below the tick mark. */\n label?: React.ReactNode;\n}\n\n/**\n * Shared base props for single and range Slider modes.\n */\ninterface SliderBaseProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n FormFieldProps {\n /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the `htmlFor` targets the low (minimum) thumb, and the label also starts each thumb's name through `aria-labelledby`, as in \"Price Minimum value\" and \"Price Maximum value\", unless an `aria-label` or `aria-labelledby` on the Slider takes its place there. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here, naming a range Slider's thumbs the same way. A `Field` label you wire by hand to the low thumb with `labelProps.htmlFor` names the thumbs too when you also give it an `id` there, since the `Field` generates none for it. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). In range mode an `id` here is the one the thumbs' `aria-labelledby` points at, in place of a generated one. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Minimum value. */\n min?: number;\n /** Maximum value. */\n max?: number;\n /** Step increment (default: 1). */\n step?: number;\n /** Size variant. */\n size?: SliderSize;\n /** Color variant. */\n color?: SliderColor;\n /** Use rounded track ends. */\n isRounded?: boolean;\n /** Use circular thumb. */\n isCircle?: boolean;\n /** Show current value tooltip. */\n showOutput?: boolean;\n /** Controls tooltip visibility on the thumb. */\n tooltip?: SliderTooltip;\n /** Shows tick marks along the track. */\n ticks?: boolean;\n /** Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`. */\n marks?: SliderMark[];\n /** Orientation of the slider. */\n orientation?: SliderOrientation;\n /** Function to scale the displayed value. */\n scale?: (value: number) => number;\n /** Function to generate the `aria-valuetext` attribute. */\n getAriaValueText?: (value: number) => string;\n /** Format function for output display. */\n formatOutput?: (value: number) => string;\n}\n\n/**\n * Props for the Slider in single-value mode.\n */\nexport interface SliderSingleProps extends SliderBaseProps {\n /**\n * Enables range mode with two thumbs.\n * @defaultValue false\n */\n range?: false;\n /** Controlled value. */\n value?: number;\n /**\n * Default value for uncontrolled usage.\n * @defaultValue 0\n */\n defaultValue?: number;\n /** Callback when value changes. */\n onChange?: (value: number) => void;\n /**\n * Minimum distance between thumbs in range mode.\n * @defaultValue 0\n */\n minDistance?: never;\n /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named \"Minimum value\" or \"Maximum value\", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in \"Budget Minimum value\" and \"Budget Maximum value\". An `aria-labelledby` set to `undefined` keeps every label out of both names. */\n ariaLabel?: string;\n}\n\n/**\n * Props for the Slider in range (dual-thumb) mode.\n */\nexport interface SliderRangeProps extends SliderBaseProps {\n /**\n * Enables range mode with two thumbs.\n * @defaultValue false\n */\n range: true;\n /** Controlled value. */\n value?: [number, number];\n /**\n * Default value for uncontrolled usage.\n * @defaultValue 0\n */\n defaultValue?: [number, number];\n /** Callback when value changes. */\n onChange?: (value: [number, number]) => void;\n /**\n * Minimum distance between thumbs in range mode.\n * @defaultValue 0\n */\n minDistance?: number;\n /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named \"Minimum value\" or \"Maximum value\", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in \"Budget Minimum value\" and \"Budget Maximum value\". An `aria-labelledby` set to `undefined` keeps every label out of both names. */\n ariaLabel?: [string, string];\n /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */\n nameLow?: string;\n /** Form field name for the high thumb. */\n nameHigh?: string;\n}\n\n/**\n * Props for the Slider component — a discriminated union of single and range modes.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\n/**\n * Helper to compute tick positions.\n * If `marks` are provided, those positions are used.\n * If `ticks` is true, generates ticks at every step (capped at 100).\n */\nfunction getTickPositions(\n min: number,\n max: number,\n step: number,\n ticks?: boolean,\n marks?: SliderMark[]\n): SliderMark[] {\n if (marks && marks.length > 0) return marks;\n if (!ticks) return [];\n const positions: SliderMark[] = [];\n const count = Math.round((max - min) / step);\n if (count > 100) {\n // Cap at 100 ticks to prevent perf issues\n const tickStep = (max - min) / 100;\n // Skip first (i=0) and last (i=100) — no ticks at endpoints\n for (let i = 1; i < 100; i++) {\n positions.push({ value: min + i * tickStep });\n }\n } else {\n // Skip first (i=0) and last (i=count) — no ticks at endpoints\n for (let i = 1; i < count; i++) {\n positions.push({ value: min + i * step });\n }\n }\n return positions;\n}\n\n/**\n * The `Slider` component provides a range slider input for selecting values within a range.\n *\n * @function\n * @param {SliderProps} props - Props for the Slider component.\n * @returns {JSX.Element} The rendered slider element.\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={50} />\n *\n * @example\n * // Range slider\n * <Slider range defaultValue={[20, 80]} onChange={([low, high]) => {}} />\n */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(\n (props, ref) => {\n // Pull out fields that differ between the single and range branches\n // *first*, by narrowing on the `range` discriminator. We then destructure\n // the remaining base props from a `SliderBaseProps` view of `props`.\n //\n // Why not destructure everything via `props as SliderRangeProps & SliderSingleProps`?\n // Because intersecting the two halves of a discriminated union collapses\n // overlapping fields (e.g. `range: true & false`, `value: number & [number, number]`,\n // `onChange`, `ariaLabel`) to `never`, which breaks call sites and rest spreads.\n let range: boolean | undefined;\n let controlledValue: number | [number, number] | undefined;\n let defaultValue: number | [number, number] | undefined;\n let onChange:\n ((v: number) => void) | ((v: [number, number]) => void) | undefined;\n let ariaLabel: string | [string, string] | undefined;\n let minDistance = 0;\n let nameLow: string | undefined;\n let nameHigh: string | undefined;\n if (props.range === true) {\n range = true;\n controlledValue = props.value;\n defaultValue = props.defaultValue;\n onChange = props.onChange;\n ariaLabel = props.ariaLabel;\n minDistance = props.minDistance ?? 0;\n nameLow = props.nameLow;\n nameHigh = props.nameHigh;\n } else {\n range = props.range;\n controlledValue = props.value;\n defaultValue = props.defaultValue;\n onChange = props.onChange;\n ariaLabel = props.ariaLabel;\n }\n\n // Destructure base / shared props from a `SliderBaseProps` view. None of\n // these fields differ between the two branches, so this view is safe.\n const {\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n min = 0,\n max = 100,\n step = 1,\n size,\n color,\n isRounded = false,\n isCircle = false,\n disabled = false,\n showOutput = false,\n tooltip,\n ticks,\n marks,\n orientation = 'horizontal',\n scale,\n getAriaValueText,\n formatOutput,\n className,\n // Strip the discriminated/union fields from `restProps` so they don't\n // flow back into `useBulmaClasses` / spread onto inputs.\n range: _range,\n value: _value,\n defaultValue: _defaultValue,\n onChange: _onChange,\n ariaLabel: _ariaLabel,\n minDistance: _minDistance,\n nameLow: _nameLow,\n nameHigh: _nameHigh,\n ...restProps\n } = props as SliderBaseProps & {\n range?: boolean;\n value?: number | [number, number];\n defaultValue?: number | [number, number];\n onChange?: (v: never) => void;\n ariaLabel?: string | [string, string];\n minDistance?: number;\n nameLow?: string;\n nameHigh?: string;\n };\n void _range;\n void _value;\n void _defaultValue;\n void _onChange;\n void _ariaLabel;\n void _minDistance;\n void _nameLow;\n void _nameHigh;\n\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('Slider', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);\n // In range mode the low thumb carries `rest` (and any user id), so the\n // label's `for` targets it.\n const { controlId, fieldLabelProps, labelId } = useAutoLabelId({\n label,\n id: restProps.id,\n labelProps,\n rendersLabel: ownField,\n needsLabelId: !!range,\n });\n\n // A range thumb's default name is an `aria-label`, which outranks the\n // label's `for`, so a label naming the Slider reaches each thumb through\n // `aria-labelledby` instead: the label, then a hidden span holding the\n // thumb's own text, as in \"Price Minimum value\" (#981). An `ariaLabel`\n // entry is that thumb's whole name and wins.\n const thumbTextId = useId();\n const thumbLabels = range\n ? (ariaLabel as [string, string] | undefined)\n : undefined;\n // A caller's `aria-label` or `aria-labelledby` names the Slider in the\n // label's place, so both thumbs read it before their own text. They are\n // routed here rather than spread, since the spread reaches only the low\n // thumb and would leave the pair with two unrelated names. Presence for\n // aria-labelledby, as on a group (#974): the caller's key takes the naming\n // over whatever its value, so an undefined one keeps every label out and\n // leaves both thumbs their bare text. A non-empty one wins over an\n // aria-label, as it does in the browser's name computation.\n const {\n 'aria-label': callerLabel,\n 'aria-labelledby': callerLabelledBy,\n ...thumbRest\n } = rest;\n const callerNamed = !!callerLabel || 'aria-labelledby' in rest;\n const stemRef = callerLabelledBy || (callerNamed ? undefined : labelId);\n const stemText = stemRef ? undefined : callerLabel;\n const nameThumb = (\n own: string | undefined,\n text: string,\n textId: string\n ) => {\n const wired = !!stemRef && !own;\n return {\n text,\n textId,\n wired,\n aria: wired\n ? { 'aria-labelledby': `${stemRef} ${textId}` }\n : { 'aria-label': own || (stemText ? `${stemText} ${text}` : text) },\n };\n };\n const lowThumb = nameThumb(\n thumbLabels?.[0],\n 'Minimum value',\n `${thumbTextId}-min`\n );\n const highThumb = nameThumb(\n thumbLabels?.[1],\n 'Maximum value',\n `${thumbTextId}-max`\n );\n\n // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'\n const tooltipMode: SliderTooltip =\n tooltip ?? (showOutput ? 'auto' : 'hidden');\n\n // --- Range mode state ---\n const [internalRange, setInternalRange] = useState<[number, number]>(() =>\n range ? ((defaultValue as [number, number]) ?? [min, max]) : [min, min]\n );\n const [internalSingle, setInternalSingle] = useState<number>(() =>\n !range ? ((defaultValue as number) ?? 0) : 0\n );\n const [showTooltip, setShowTooltip] = useState(false);\n const [showTooltipHigh, setShowTooltipHigh] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputHighRef = useRef<HTMLInputElement>(null);\n const outputRef = useRef<HTMLOutputElement>(null);\n const outputHighRef = useRef<HTMLOutputElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [flipped, setFlipped] = useState(false);\n const [flippedHigh, setFlippedHigh] = useState(false);\n const [nudgeX, setNudgeX] = useState(0);\n const [nudgeXHigh, setNudgeXHigh] = useState(0);\n const [verticalFlippedLeft, setVerticalFlippedLeft] = useState(false);\n\n const isControlled = controlledValue !== undefined;\n\n // Current values\n const currentRange: [number, number] = range\n ? isControlled\n ? (controlledValue as [number, number])\n : internalRange\n : [0, 0];\n const currentSingle: number = !range\n ? isControlled\n ? (controlledValue as number)\n : internalSingle\n : 0;\n\n // Progress percentages\n const progressSingle = !range\n ? ((currentSingle - min) / (max - min)) * 100\n : 0;\n const progressLow = range\n ? ((currentRange[0] - min) / (max - min)) * 100\n : 0;\n const progressHigh = range\n ? ((currentRange[1] - min) / (max - min)) * 100\n : 0;\n\n // Scale helper\n const scaleValue = useCallback(\n (v: number) => (scale ? scale(v) : v),\n [scale]\n );\n\n // Format helper\n const formatValue = useCallback(\n (v: number) => {\n const scaled = scaleValue(v);\n return formatOutput ? formatOutput(scaled) : scaled.toString();\n },\n [formatOutput, scaleValue]\n );\n\n // --- Handlers ---\n const handleSingleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = parseFloat(e.target.value);\n if (!isControlled) setInternalSingle(newValue);\n (onChange as ((v: number) => void) | undefined)?.(newValue);\n },\n [isControlled, onChange]\n );\n\n const handleRangeLowChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = parseFloat(e.target.value);\n const clamped = Math.min(raw, currentRange[1] - minDistance);\n const newRange: [number, number] = [clamped, currentRange[1]];\n if (!isControlled) setInternalRange(newRange);\n (onChange as ((v: [number, number]) => void) | undefined)?.(newRange);\n },\n [isControlled, onChange, currentRange, minDistance]\n );\n\n const handleRangeHighChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = parseFloat(e.target.value);\n const clamped = Math.max(raw, currentRange[0] + minDistance);\n const newRange: [number, number] = [currentRange[0], clamped];\n if (!isControlled) setInternalRange(newRange);\n (onChange as ((v: [number, number]) => void) | undefined)?.(newRange);\n },\n [isControlled, onChange, currentRange, minDistance]\n );\n\n // Key handler for Home/End\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Home') {\n e.preventDefault();\n if (!range) {\n if (!isControlled) setInternalSingle(min);\n (onChange as ((v: number) => void) | undefined)?.(min);\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n if (!range) {\n if (!isControlled) setInternalSingle(max);\n (onChange as ((v: number) => void) | undefined)?.(max);\n }\n }\n },\n [range, isControlled, onChange, min, max]\n );\n\n // Tick positions\n const tickPositions = useMemo(\n () => getTickPositions(min, max, step, ticks, marks),\n [min, max, step, ticks, marks]\n );\n\n const hasLabels = tickPositions.some(t => t.label !== undefined);\n const isVertical = orientation === 'vertical';\n\n // Compute corrected thumb position CSS calc expression.\n // The browser insets the range input thumb by half its size from each edge,\n // so the tooltip left must account for this to align with the thumb center.\n const thumbVarName = size\n ? `slider-thumb-size-${size}`\n : 'slider-thumb-size';\n const thumbCssVar = `var(--bulma-${thumbVarName})`;\n const effectiveThumbExpr = isCircle\n ? `(${thumbCssVar} * 1.2)`\n : thumbCssVar;\n\n const getThumbLeft = (progressPct: number) => {\n const fraction = progressPct / 100;\n return `calc(${effectiveThumbExpr} / 2 + ${fraction} * (100% - ${effectiveThumbExpr}))`;\n };\n\n // Vertical tooltip offset: position to the right or left of the thumb\n const verticalTooltipOffset = `calc(50% + ${effectiveThumbExpr} / 2 + 0.5rem)`;\n\n // Get effective thumb size in px for nudge computation\n const getThumbSizePx = (): number => {\n const el = inputRef.current;\n if (!el) return 0;\n const style = getComputedStyle(el);\n const raw = style.getPropertyValue(`--bulma-${thumbVarName}`).trim();\n const value = parseFloat(raw);\n if (isNaN(value)) return 0;\n let px: number;\n if (raw.includes('rem')) {\n const rootFs =\n parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n px = value * rootFs;\n } else {\n px = value;\n }\n return isCircle ? px * 1.2 : px;\n };\n\n // Generate wrapper classes\n const classPrefix = useClassPrefix();\n const sliderClasses = usePrefixedClassNames('slider', {\n [`is-${size}`]: size,\n [`is-${color}`]: color,\n 'is-rounded': isRounded,\n 'is-circle': isCircle,\n 'is-disabled': disabled,\n 'has-output': tooltipMode !== 'hidden',\n 'has-output-always': tooltipMode === 'always',\n 'is-vertical': isVertical,\n 'is-range': range,\n 'has-ticks': tickPositions.length > 0,\n 'has-tick-labels': hasLabels,\n });\n\n const combinedClasses = classNames(\n sliderClasses,\n bulmaHelperClasses,\n className\n );\n\n // Combined ref for the first (or only) input\n const combinedRef = (node: HTMLInputElement | null) => {\n (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }\n };\n\n // Tooltip show/hide for auto mode\n const showTipLow =\n tooltipMode === 'always' || (tooltipMode === 'auto' && showTooltip);\n const showTipHigh =\n tooltipMode === 'always' || (tooltipMode === 'auto' && showTooltipHigh);\n\n // Aria value text\n const getAriaProps = (value: number) => {\n const ariaProps: Record<string, string> = {};\n if (getAriaValueText) {\n ariaProps['aria-valuetext'] = getAriaValueText(value);\n } else if (scale) {\n ariaProps['aria-valuetext'] = scaleValue(value).toString();\n }\n return ariaProps;\n };\n\n // Detect tooltip overflow: flip vertically if clipped at top,\n // nudge horizontally if clipped at left/right edge.\n // We compute the un-nudged tooltip position from the progress %\n // and wrapper rect to avoid feedback loops.\n const computeNudge = useCallback(\n (\n el: HTMLElement,\n wrapper: HTMLElement,\n progressPct: number,\n thumbSizePx: number\n ): number => {\n const wr = wrapper.getBoundingClientRect();\n const tooltipWidth = el.offsetWidth;\n // Corrected center: accounts for thumb inset from track edges\n const fraction = progressPct / 100;\n const centerX =\n wr.left + thumbSizePx / 2 + fraction * (wr.width - thumbSizePx);\n const tooltipLeft = centerX - tooltipWidth / 2;\n const tooltipRight = centerX + tooltipWidth / 2;\n if (tooltipLeft < wr.left) {\n return wr.left - tooltipLeft; // nudge right\n }\n if (tooltipRight > wr.right) {\n return wr.right - tooltipRight; // nudge left (negative)\n }\n return 0;\n },\n []\n );\n\n useClientLayoutEffect(() => {\n if (isVertical) return;\n const wrapper = wrapperRef.current;\n const el = outputRef.current;\n if (wrapper && el) {\n const wrapperTop = wrapper.getBoundingClientRect().top;\n const tooltipHeight = el.offsetHeight + 10;\n setFlipped(wrapperTop < tooltipHeight);\n const pct = range ? progressLow : progressSingle;\n const thumbPx = getThumbSizePx();\n setNudgeX(computeNudge(el, wrapper, pct, thumbPx));\n }\n });\n\n useClientLayoutEffect(() => {\n if (isVertical || !range) return;\n const wrapper = wrapperRef.current;\n const el = outputHighRef.current;\n if (wrapper && el) {\n const wrapperTop = wrapper.getBoundingClientRect().top;\n const tooltipHeight = el.offsetHeight + 10;\n setFlippedHigh(wrapperTop < tooltipHeight);\n const thumbPx = getThumbSizePx();\n setNudgeXHigh(computeNudge(el, wrapper, progressHigh, thumbPx));\n }\n });\n\n // Detect vertical tooltip overflow: flip to left if no space on right\n useClientLayoutEffect(() => {\n if (!isVertical) return;\n const wrapper = wrapperRef.current;\n const el = outputRef.current;\n if (!wrapper || !el) return;\n const wrapperRect = wrapper.getBoundingClientRect();\n const tooltipWidth = el.offsetWidth;\n const thumbPx = getThumbSizePx();\n const gap = 8; // 0.5rem\n // Tooltip right edge if placed to the right of the thumb\n const tooltipRightEdge =\n wrapperRect.left +\n wrapperRect.width / 2 +\n thumbPx / 2 +\n gap +\n tooltipWidth;\n setVerticalFlippedLeft(tooltipRightEdge > window.innerWidth);\n });\n\n // Vertical wrapper style\n const wrapperStyle = isVertical\n ? ({\n height: 'var(--bulma-slider-vertical-height, 200px)',\n } as React.CSSProperties)\n : undefined;\n\n // Render ticks\n const renderTicks = () => {\n if (tickPositions.length === 0) return null;\n return (\n <div className={prefixedClassNames(classPrefix, 'slider-ticks')}>\n {tickPositions.map((tick, i) => {\n const pct = ((tick.value - min) / (max - min)) * 100;\n const posStyle = isVertical\n ? { bottom: `${pct}%` }\n : { left: `${pct}%` };\n const isEndpoint = tick.value === min || tick.value === max;\n return (\n <span\n key={i}\n className={prefixedClassNames(classPrefix, 'slider-tick', {\n 'is-endpoint': isEndpoint,\n })}\n style={posStyle}\n >\n {tick.label !== undefined && (\n <span\n className={prefixedClassNames(\n classPrefix,\n 'slider-tick-label'\n )}\n >\n {tick.label}\n </span>\n )}\n </span>\n );\n })}\n </div>\n );\n };\n\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n // --- Single slider ---\n const sliderElement = !range ? (\n <div ref={wrapperRef} className={combinedClasses} style={wrapperStyle}>\n <input\n ref={combinedRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentSingle}\n disabled={disabled}\n onChange={handleSingleChange}\n onKeyDown={handleKeyDown}\n onMouseEnter={() => setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n className={prefixedClassNames(classPrefix, 'slider-input')}\n style={\n {\n '--slider-progress': `${progressSingle}%`,\n } as React.CSSProperties\n }\n aria-valuenow={currentSingle}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n aria-label={ariaLabel as string | undefined}\n {...getAriaProps(currentSingle)}\n {...rest}\n // After the spread: an undefined `id` key in rest would wipe it.\n id={controlId}\n />\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputRef}\n className={prefixedClassNames(classPrefix, 'slider-output', {\n 'is-visible': showTipLow,\n 'is-flipped': flipped,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n })}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressSingle),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressSingle),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressSingle),\n transform: `translateX(calc(-50% + ${nudgeX}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentSingle)}\n </output>\n )}\n {renderTicks()}\n </div>\n ) : (\n // --- Range slider ---\n <div ref={wrapperRef} className={combinedClasses} style={wrapperStyle}>\n {/* Visible track background */}\n <div\n className={prefixedClassNames(classPrefix, 'slider-track')}\n style={\n isVertical\n ? ({\n '--slider-progress-low': `${progressLow}%`,\n '--slider-progress-high': `${progressHigh}%`,\n } as React.CSSProperties)\n : ({\n '--slider-progress-low': `${progressLow}%`,\n '--slider-progress-high': `${progressHigh}%`,\n } as React.CSSProperties)\n }\n />\n {/* Low thumb. nameLow overrides any `name` from rest so each thumb has its own form field. */}\n <input\n ref={combinedRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentRange[0]}\n disabled={disabled}\n onChange={handleRangeLowChange}\n onKeyDown={handleKeyDown}\n onMouseEnter={() => setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n className={prefixedClassNames(\n classPrefix,\n 'slider-input',\n 'slider-input-low'\n )}\n aria-valuenow={currentRange[0]}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n {...lowThumb.aria}\n {...getAriaProps(currentRange[0])}\n {...thumbRest}\n id={controlId}\n {...(nameLow !== undefined ? { name: nameLow } : {})}\n />\n {/* High thumb */}\n <input\n ref={inputHighRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentRange[1]}\n disabled={disabled}\n onChange={handleRangeHighChange}\n onMouseEnter={() => setShowTooltipHigh(true)}\n onMouseLeave={() => setShowTooltipHigh(false)}\n onFocus={() => setShowTooltipHigh(true)}\n onBlur={() => setShowTooltipHigh(false)}\n className={prefixedClassNames(\n classPrefix,\n 'slider-input',\n 'slider-input-high'\n )}\n aria-valuenow={currentRange[1]}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n {...highThumb.aria}\n {...getAriaProps(currentRange[1])}\n name={nameHigh}\n />\n {/* Each wired thumb's own text, read after the label. A hidden element\n still names whatever points aria-labelledby at it. */}\n {[lowThumb, highThumb].map(\n thumb =>\n thumb.wired && (\n <span key={thumb.textId} id={thumb.textId} hidden>\n {thumb.text}\n </span>\n )\n )}\n {/* Low tooltip */}\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputRef}\n className={prefixedClassNames(\n classPrefix,\n 'slider-output',\n 'slider-output-low',\n {\n 'is-visible': showTipLow,\n 'is-flipped': flipped,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n }\n )}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressLow),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressLow),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressLow),\n transform: `translateX(calc(-50% + ${nudgeX}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentRange[0])}\n </output>\n )}\n {/* High tooltip */}\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputHighRef}\n className={prefixedClassNames(\n classPrefix,\n 'slider-output',\n 'slider-output-high',\n {\n 'is-visible': showTipHigh,\n 'is-flipped': flippedHigh,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n }\n )}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressHigh),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressHigh),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressHigh),\n transform: `translateX(calc(-50% + ${nudgeXHigh}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeXHigh}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentRange[1])}\n </output>\n )}\n {renderTicks()}\n </div>\n );\n\n let content = sliderElement;\n\n if (rendersOwnControl('Slider', { insideControl })) {\n content = <Control>{content}</Control>;\n }\n\n if (ownField) {\n return (\n <Field\n label={label}\n labelSize={labelSize}\n labelProps={fieldLabelProps}\n horizontal={horizontal}\n className={fieldClassName}\n >\n {content}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {content}\n {messageEl}\n </>\n );\n }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/form/Slider.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useState,\n useCallback,\n useRef,\n useMemo,\n useId,\n} from 'react';\nimport {\n classNames,\n prefixedClassNames,\n usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport {\n useInsideField,\n useInsideControl,\n rendersOwnField,\n rendersOwnControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/** Valid sizes for the Slider component. */\nexport type SliderSize = 'small' | 'medium' | 'large';\n\n/** Valid colors for the Slider component. */\nexport type SliderColor =\n 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Tooltip display mode for the Slider component. */\nexport type SliderTooltip = 'auto' | 'always' | 'hidden';\n\n/** Orientation of the Slider component. */\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\n/**\n * A tick mark displayed along the Slider track.\n */\nexport interface SliderMark {\n /** Controlled value. */\n value: number;\n /** Optional label rendered below the tick mark. */\n label?: React.ReactNode;\n}\n\n/**\n * Shared base props for single and range Slider modes.\n */\ninterface SliderBaseProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,\n FormFieldProps {\n /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the `htmlFor` targets the low (minimum) thumb, and the label also starts each thumb's name through `aria-labelledby`, as in \"Price Minimum value\" and \"Price Maximum value\", unless an `aria-label` or `aria-labelledby` on the Slider takes its place there. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here, naming a range Slider's thumbs the same way. A `Field` label you wire by hand to the low thumb with `labelProps.htmlFor` names the thumbs too when you also give it an `id` there, since the `Field` generates none for it. */\n label?: React.ReactNode;\n /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). In range mode an `id` here is the one the thumbs' `aria-labelledby` points at, in place of a generated one. */\n labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n [key: string]: unknown;\n };\n /** Minimum value. */\n min?: number;\n /** Maximum value. */\n max?: number;\n /** Step increment (default: 1). */\n step?: number;\n /** Size variant. */\n size?: SliderSize;\n /** Color variant. */\n color?: SliderColor;\n /** Use rounded track ends. */\n isRounded?: boolean;\n /** Use circular thumb. */\n isCircle?: boolean;\n /** Show current value tooltip. */\n showOutput?: boolean;\n /** Controls tooltip visibility on the thumb. */\n tooltip?: SliderTooltip;\n /** Shows tick marks along the track. */\n ticks?: boolean;\n /** Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`. */\n marks?: SliderMark[];\n /** Orientation of the slider. */\n orientation?: SliderOrientation;\n /** Function to scale the displayed value. */\n scale?: (value: number) => number;\n /** Function to generate the `aria-valuetext` attribute. */\n getAriaValueText?: (value: number) => string;\n /** Format function for output display. */\n formatOutput?: (value: number) => string;\n}\n\n/**\n * Props for the Slider in single-value mode.\n */\nexport interface SliderSingleProps extends SliderBaseProps {\n /**\n * Enables range mode with two thumbs.\n * @defaultValue false\n */\n range?: false;\n /** Controlled value. */\n value?: number;\n /**\n * Default value for uncontrolled usage.\n * @defaultValue 0\n */\n defaultValue?: number;\n /** Callback when value changes. */\n onChange?: (value: number) => void;\n /**\n * Minimum distance between thumbs in range mode.\n * @defaultValue 0\n */\n minDistance?: never;\n /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named \"Minimum value\" or \"Maximum value\", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in \"Budget Minimum value\" and \"Budget Maximum value\". An `aria-labelledby` set to `undefined` keeps every label out of both names. */\n ariaLabel?: string;\n}\n\n/**\n * Props for the Slider in range (dual-thumb) mode.\n */\nexport interface SliderRangeProps extends SliderBaseProps {\n /**\n * Enables range mode with two thumbs.\n * @defaultValue false\n */\n range: true;\n /** Controlled value. */\n value?: [number, number];\n /**\n * Default value for uncontrolled usage.\n * @defaultValue 0\n */\n defaultValue?: [number, number];\n /** Callback when value changes. */\n onChange?: (value: [number, number]) => void;\n /**\n * Minimum distance between thumbs in range mode.\n * @defaultValue 0\n */\n minDistance?: number;\n /** ARIA label(s) for the slider thumb(s), which win over a label, the Slider's own or a surrounding `Field`'s. In range mode each entry is that thumb's whole name, and a thumb without one is named \"Minimum value\" or \"Maximum value\", after whatever names the Slider: a label, or in its place an `aria-label` or `aria-labelledby` given to the Slider, as in \"Budget Minimum value\" and \"Budget Maximum value\". An `aria-labelledby` set to `undefined` keeps every label out of both names. */\n ariaLabel?: [string, string];\n /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */\n nameLow?: string;\n /** Form field name for the high thumb. */\n nameHigh?: string;\n}\n\n/**\n * Props for the Slider component — a discriminated union of single and range modes.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * @helperProps Helper props go on the `.slider` wrapper `<div>`, with\n * `className`. The other attributes go on the `<input>`, the low thumb's in\n * range mode.\n * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.\n */\nexport type SliderProps = SliderSingleProps | SliderRangeProps;\n\n/**\n * Helper to compute tick positions.\n * If `marks` are provided, those positions are used.\n * If `ticks` is true, generates ticks at every step (capped at 100).\n */\nfunction getTickPositions(\n min: number,\n max: number,\n step: number,\n ticks?: boolean,\n marks?: SliderMark[]\n): SliderMark[] {\n if (marks && marks.length > 0) return marks;\n if (!ticks) return [];\n const positions: SliderMark[] = [];\n const count = Math.round((max - min) / step);\n if (count > 100) {\n // Cap at 100 ticks to prevent perf issues\n const tickStep = (max - min) / 100;\n // Skip first (i=0) and last (i=100) — no ticks at endpoints\n for (let i = 1; i < 100; i++) {\n positions.push({ value: min + i * tickStep });\n }\n } else {\n // Skip first (i=0) and last (i=count) — no ticks at endpoints\n for (let i = 1; i < count; i++) {\n positions.push({ value: min + i * step });\n }\n }\n return positions;\n}\n\n/**\n * The `Slider` component provides a range slider input for selecting values within a range.\n *\n * @function\n * @param {SliderProps} props - Props for the Slider component.\n * @returns {JSX.Element} The rendered slider element.\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={50} />\n *\n * @example\n * // Range slider\n * <Slider range defaultValue={[20, 80]} onChange={([low, high]) => {}} />\n */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(\n (props, ref) => {\n // Pull out fields that differ between the single and range branches\n // *first*, by narrowing on the `range` discriminator. We then destructure\n // the remaining base props from a `SliderBaseProps` view of `props`.\n //\n // Why not destructure everything via `props as SliderRangeProps & SliderSingleProps`?\n // Because intersecting the two halves of a discriminated union collapses\n // overlapping fields (e.g. `range: true & false`, `value: number & [number, number]`,\n // `onChange`, `ariaLabel`) to `never`, which breaks call sites and rest spreads.\n let range: boolean | undefined;\n let controlledValue: number | [number, number] | undefined;\n let defaultValue: number | [number, number] | undefined;\n let onChange:\n ((v: number) => void) | ((v: [number, number]) => void) | undefined;\n let ariaLabel: string | [string, string] | undefined;\n let minDistance = 0;\n let nameLow: string | undefined;\n let nameHigh: string | undefined;\n if (props.range === true) {\n range = true;\n controlledValue = props.value;\n defaultValue = props.defaultValue;\n onChange = props.onChange;\n ariaLabel = props.ariaLabel;\n minDistance = props.minDistance ?? 0;\n nameLow = props.nameLow;\n nameHigh = props.nameHigh;\n } else {\n range = props.range;\n controlledValue = props.value;\n defaultValue = props.defaultValue;\n onChange = props.onChange;\n ariaLabel = props.ariaLabel;\n }\n\n // Destructure base / shared props from a `SliderBaseProps` view. None of\n // these fields differ between the two branches, so this view is safe.\n const {\n label,\n labelSize,\n labelProps,\n horizontal,\n message,\n messageColor,\n fieldClassName,\n min = 0,\n max = 100,\n step = 1,\n size,\n color,\n isRounded = false,\n isCircle = false,\n disabled = false,\n showOutput = false,\n tooltip,\n ticks,\n marks,\n orientation = 'horizontal',\n scale,\n getAriaValueText,\n formatOutput,\n className,\n // Strip the discriminated/union fields from `restProps` so they don't\n // flow back into `useBulmaClasses` / spread onto inputs.\n range: _range,\n value: _value,\n defaultValue: _defaultValue,\n onChange: _onChange,\n ariaLabel: _ariaLabel,\n minDistance: _minDistance,\n nameLow: _nameLow,\n nameHigh: _nameHigh,\n ...restProps\n } = props as SliderBaseProps & {\n range?: boolean;\n value?: number | [number, number];\n defaultValue?: number | [number, number];\n onChange?: (v: never) => void;\n ariaLabel?: string | [string, string];\n minDistance?: number;\n nameLow?: string;\n nameHigh?: string;\n };\n void _range;\n void _value;\n void _defaultValue;\n void _onChange;\n void _ariaLabel;\n void _minDistance;\n void _nameLow;\n void _nameHigh;\n\n const insideField = useInsideField();\n const insideControl = useInsideControl();\n const ownField = rendersOwnField('Slider', {\n insideField,\n insideControl,\n label,\n message,\n horizontal,\n fieldClassName,\n });\n const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);\n // In range mode the low thumb carries `rest` (and any user id), so the\n // label's `for` targets it.\n const { controlId, fieldLabelProps, labelId } = useAutoLabelId({\n label,\n id: restProps.id,\n labelProps,\n rendersLabel: ownField,\n needsLabelId: !!range,\n });\n\n // A range thumb's default name is an `aria-label`, which outranks the\n // label's `for`, so a label naming the Slider reaches each thumb through\n // `aria-labelledby` instead: the label, then a hidden span holding the\n // thumb's own text, as in \"Price Minimum value\" (#981). An `ariaLabel`\n // entry is that thumb's whole name and wins.\n const thumbTextId = useId();\n const thumbLabels = range\n ? (ariaLabel as [string, string] | undefined)\n : undefined;\n // A caller's `aria-label` or `aria-labelledby` names the Slider in the\n // label's place, so both thumbs read it before their own text. They are\n // routed here rather than spread, since the spread reaches only the low\n // thumb and would leave the pair with two unrelated names. Presence for\n // aria-labelledby, as on a group (#974): the caller's key takes the naming\n // over whatever its value, so an undefined one keeps every label out and\n // leaves both thumbs their bare text. A non-empty one wins over an\n // aria-label, as it does in the browser's name computation.\n const {\n 'aria-label': callerLabel,\n 'aria-labelledby': callerLabelledBy,\n ...thumbRest\n } = rest;\n const callerNamed = !!callerLabel || 'aria-labelledby' in rest;\n const stemRef = callerLabelledBy || (callerNamed ? undefined : labelId);\n const stemText = stemRef ? undefined : callerLabel;\n const nameThumb = (\n own: string | undefined,\n text: string,\n textId: string\n ) => {\n const wired = !!stemRef && !own;\n return {\n text,\n textId,\n wired,\n aria: wired\n ? { 'aria-labelledby': `${stemRef} ${textId}` }\n : { 'aria-label': own || (stemText ? `${stemText} ${text}` : text) },\n };\n };\n const lowThumb = nameThumb(\n thumbLabels?.[0],\n 'Minimum value',\n `${thumbTextId}-min`\n );\n const highThumb = nameThumb(\n thumbLabels?.[1],\n 'Maximum value',\n `${thumbTextId}-max`\n );\n\n // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'\n const tooltipMode: SliderTooltip =\n tooltip ?? (showOutput ? 'auto' : 'hidden');\n\n // --- Range mode state ---\n const [internalRange, setInternalRange] = useState<[number, number]>(() =>\n range ? ((defaultValue as [number, number]) ?? [min, max]) : [min, min]\n );\n const [internalSingle, setInternalSingle] = useState<number>(() =>\n !range ? ((defaultValue as number) ?? 0) : 0\n );\n const [showTooltip, setShowTooltip] = useState(false);\n const [showTooltipHigh, setShowTooltipHigh] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputHighRef = useRef<HTMLInputElement>(null);\n const outputRef = useRef<HTMLOutputElement>(null);\n const outputHighRef = useRef<HTMLOutputElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [flipped, setFlipped] = useState(false);\n const [flippedHigh, setFlippedHigh] = useState(false);\n const [nudgeX, setNudgeX] = useState(0);\n const [nudgeXHigh, setNudgeXHigh] = useState(0);\n const [verticalFlippedLeft, setVerticalFlippedLeft] = useState(false);\n\n const isControlled = controlledValue !== undefined;\n\n // Current values\n const currentRange: [number, number] = range\n ? isControlled\n ? (controlledValue as [number, number])\n : internalRange\n : [0, 0];\n const currentSingle: number = !range\n ? isControlled\n ? (controlledValue as number)\n : internalSingle\n : 0;\n\n // Progress percentages\n const progressSingle = !range\n ? ((currentSingle - min) / (max - min)) * 100\n : 0;\n const progressLow = range\n ? ((currentRange[0] - min) / (max - min)) * 100\n : 0;\n const progressHigh = range\n ? ((currentRange[1] - min) / (max - min)) * 100\n : 0;\n\n // Scale helper\n const scaleValue = useCallback(\n (v: number) => (scale ? scale(v) : v),\n [scale]\n );\n\n // Format helper\n const formatValue = useCallback(\n (v: number) => {\n const scaled = scaleValue(v);\n return formatOutput ? formatOutput(scaled) : scaled.toString();\n },\n [formatOutput, scaleValue]\n );\n\n // --- Handlers ---\n const handleSingleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = parseFloat(e.target.value);\n if (!isControlled) setInternalSingle(newValue);\n (onChange as ((v: number) => void) | undefined)?.(newValue);\n },\n [isControlled, onChange]\n );\n\n const handleRangeLowChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = parseFloat(e.target.value);\n const clamped = Math.min(raw, currentRange[1] - minDistance);\n const newRange: [number, number] = [clamped, currentRange[1]];\n if (!isControlled) setInternalRange(newRange);\n (onChange as ((v: [number, number]) => void) | undefined)?.(newRange);\n },\n [isControlled, onChange, currentRange, minDistance]\n );\n\n const handleRangeHighChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = parseFloat(e.target.value);\n const clamped = Math.max(raw, currentRange[0] + minDistance);\n const newRange: [number, number] = [currentRange[0], clamped];\n if (!isControlled) setInternalRange(newRange);\n (onChange as ((v: [number, number]) => void) | undefined)?.(newRange);\n },\n [isControlled, onChange, currentRange, minDistance]\n );\n\n // Key handler for Home/End\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Home') {\n e.preventDefault();\n if (!range) {\n if (!isControlled) setInternalSingle(min);\n (onChange as ((v: number) => void) | undefined)?.(min);\n }\n } else if (e.key === 'End') {\n e.preventDefault();\n if (!range) {\n if (!isControlled) setInternalSingle(max);\n (onChange as ((v: number) => void) | undefined)?.(max);\n }\n }\n },\n [range, isControlled, onChange, min, max]\n );\n\n // Tick positions\n const tickPositions = useMemo(\n () => getTickPositions(min, max, step, ticks, marks),\n [min, max, step, ticks, marks]\n );\n\n const hasLabels = tickPositions.some(t => t.label !== undefined);\n const isVertical = orientation === 'vertical';\n\n // Compute corrected thumb position CSS calc expression.\n // The browser insets the range input thumb by half its size from each edge,\n // so the tooltip left must account for this to align with the thumb center.\n const thumbVarName = size\n ? `slider-thumb-size-${size}`\n : 'slider-thumb-size';\n const thumbCssVar = `var(--bulma-${thumbVarName})`;\n const effectiveThumbExpr = isCircle\n ? `(${thumbCssVar} * 1.2)`\n : thumbCssVar;\n\n const getThumbLeft = (progressPct: number) => {\n const fraction = progressPct / 100;\n return `calc(${effectiveThumbExpr} / 2 + ${fraction} * (100% - ${effectiveThumbExpr}))`;\n };\n\n // Vertical tooltip offset: position to the right or left of the thumb\n const verticalTooltipOffset = `calc(50% + ${effectiveThumbExpr} / 2 + 0.5rem)`;\n\n // Get effective thumb size in px for nudge computation\n const getThumbSizePx = (): number => {\n const el = inputRef.current;\n if (!el) return 0;\n const style = getComputedStyle(el);\n const raw = style.getPropertyValue(`--bulma-${thumbVarName}`).trim();\n const value = parseFloat(raw);\n if (isNaN(value)) return 0;\n let px: number;\n if (raw.includes('rem')) {\n const rootFs =\n parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n px = value * rootFs;\n } else {\n px = value;\n }\n return isCircle ? px * 1.2 : px;\n };\n\n // Generate wrapper classes\n const classPrefix = useClassPrefix();\n const sliderClasses = usePrefixedClassNames('slider', {\n [`is-${size}`]: size,\n [`is-${color}`]: color,\n 'is-rounded': isRounded,\n 'is-circle': isCircle,\n 'is-disabled': disabled,\n 'has-output': tooltipMode !== 'hidden',\n 'has-output-always': tooltipMode === 'always',\n 'is-vertical': isVertical,\n 'is-range': range,\n 'has-ticks': tickPositions.length > 0,\n 'has-tick-labels': hasLabels,\n });\n\n const combinedClasses = classNames(\n sliderClasses,\n bulmaHelperClasses,\n className\n );\n\n // Combined ref for the first (or only) input\n const combinedRef = (node: HTMLInputElement | null) => {\n (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }\n };\n\n // Tooltip show/hide for auto mode\n const showTipLow =\n tooltipMode === 'always' || (tooltipMode === 'auto' && showTooltip);\n const showTipHigh =\n tooltipMode === 'always' || (tooltipMode === 'auto' && showTooltipHigh);\n\n // Aria value text\n const getAriaProps = (value: number) => {\n const ariaProps: Record<string, string> = {};\n if (getAriaValueText) {\n ariaProps['aria-valuetext'] = getAriaValueText(value);\n } else if (scale) {\n ariaProps['aria-valuetext'] = scaleValue(value).toString();\n }\n return ariaProps;\n };\n\n // Detect tooltip overflow: flip vertically if clipped at top,\n // nudge horizontally if clipped at left/right edge.\n // We compute the un-nudged tooltip position from the progress %\n // and wrapper rect to avoid feedback loops.\n const computeNudge = useCallback(\n (\n el: HTMLElement,\n wrapper: HTMLElement,\n progressPct: number,\n thumbSizePx: number\n ): number => {\n const wr = wrapper.getBoundingClientRect();\n const tooltipWidth = el.offsetWidth;\n // Corrected center: accounts for thumb inset from track edges\n const fraction = progressPct / 100;\n const centerX =\n wr.left + thumbSizePx / 2 + fraction * (wr.width - thumbSizePx);\n const tooltipLeft = centerX - tooltipWidth / 2;\n const tooltipRight = centerX + tooltipWidth / 2;\n if (tooltipLeft < wr.left) {\n return wr.left - tooltipLeft; // nudge right\n }\n if (tooltipRight > wr.right) {\n return wr.right - tooltipRight; // nudge left (negative)\n }\n return 0;\n },\n []\n );\n\n useClientLayoutEffect(() => {\n if (isVertical) return;\n const wrapper = wrapperRef.current;\n const el = outputRef.current;\n if (wrapper && el) {\n const wrapperTop = wrapper.getBoundingClientRect().top;\n const tooltipHeight = el.offsetHeight + 10;\n setFlipped(wrapperTop < tooltipHeight);\n const pct = range ? progressLow : progressSingle;\n const thumbPx = getThumbSizePx();\n setNudgeX(computeNudge(el, wrapper, pct, thumbPx));\n }\n });\n\n useClientLayoutEffect(() => {\n if (isVertical || !range) return;\n const wrapper = wrapperRef.current;\n const el = outputHighRef.current;\n if (wrapper && el) {\n const wrapperTop = wrapper.getBoundingClientRect().top;\n const tooltipHeight = el.offsetHeight + 10;\n setFlippedHigh(wrapperTop < tooltipHeight);\n const thumbPx = getThumbSizePx();\n setNudgeXHigh(computeNudge(el, wrapper, progressHigh, thumbPx));\n }\n });\n\n // Detect vertical tooltip overflow: flip to left if no space on right\n useClientLayoutEffect(() => {\n if (!isVertical) return;\n const wrapper = wrapperRef.current;\n const el = outputRef.current;\n if (!wrapper || !el) return;\n const wrapperRect = wrapper.getBoundingClientRect();\n const tooltipWidth = el.offsetWidth;\n const thumbPx = getThumbSizePx();\n const gap = 8; // 0.5rem\n // Tooltip right edge if placed to the right of the thumb\n const tooltipRightEdge =\n wrapperRect.left +\n wrapperRect.width / 2 +\n thumbPx / 2 +\n gap +\n tooltipWidth;\n setVerticalFlippedLeft(tooltipRightEdge > window.innerWidth);\n });\n\n // Vertical wrapper style\n const wrapperStyle = isVertical\n ? ({\n height: 'var(--bulma-slider-vertical-height, 200px)',\n } as React.CSSProperties)\n : undefined;\n\n // Render ticks\n const renderTicks = () => {\n if (tickPositions.length === 0) return null;\n return (\n <div className={prefixedClassNames(classPrefix, 'slider-ticks')}>\n {tickPositions.map((tick, i) => {\n const pct = ((tick.value - min) / (max - min)) * 100;\n const posStyle = isVertical\n ? { bottom: `${pct}%` }\n : { left: `${pct}%` };\n const isEndpoint = tick.value === min || tick.value === max;\n return (\n <span\n key={i}\n className={prefixedClassNames(classPrefix, 'slider-tick', {\n 'is-endpoint': isEndpoint,\n })}\n style={posStyle}\n >\n {tick.label !== undefined && (\n <span\n className={prefixedClassNames(\n classPrefix,\n 'slider-tick-label'\n )}\n >\n {tick.label}\n </span>\n )}\n </span>\n );\n })}\n </div>\n );\n };\n\n const helpClass = usePrefixedClassNames('help', {\n [`is-${messageColor}`]: !!messageColor,\n });\n const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n // --- Single slider ---\n const sliderElement = !range ? (\n <div ref={wrapperRef} className={combinedClasses} style={wrapperStyle}>\n <input\n ref={combinedRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentSingle}\n disabled={disabled}\n onChange={handleSingleChange}\n onKeyDown={handleKeyDown}\n onMouseEnter={() => setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n className={prefixedClassNames(classPrefix, 'slider-input')}\n style={\n {\n '--slider-progress': `${progressSingle}%`,\n } as React.CSSProperties\n }\n aria-valuenow={currentSingle}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n aria-label={ariaLabel as string | undefined}\n {...getAriaProps(currentSingle)}\n {...rest}\n // After the spread: an undefined `id` key in rest would wipe it.\n id={controlId}\n />\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputRef}\n className={prefixedClassNames(classPrefix, 'slider-output', {\n 'is-visible': showTipLow,\n 'is-flipped': flipped,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n })}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressSingle),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressSingle),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressSingle),\n transform: `translateX(calc(-50% + ${nudgeX}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentSingle)}\n </output>\n )}\n {renderTicks()}\n </div>\n ) : (\n // --- Range slider ---\n <div ref={wrapperRef} className={combinedClasses} style={wrapperStyle}>\n {/* Visible track background */}\n <div\n className={prefixedClassNames(classPrefix, 'slider-track')}\n style={\n isVertical\n ? ({\n '--slider-progress-low': `${progressLow}%`,\n '--slider-progress-high': `${progressHigh}%`,\n } as React.CSSProperties)\n : ({\n '--slider-progress-low': `${progressLow}%`,\n '--slider-progress-high': `${progressHigh}%`,\n } as React.CSSProperties)\n }\n />\n {/* Low thumb. nameLow overrides any `name` from rest so each thumb has its own form field. */}\n <input\n ref={combinedRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentRange[0]}\n disabled={disabled}\n onChange={handleRangeLowChange}\n onKeyDown={handleKeyDown}\n onMouseEnter={() => setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n className={prefixedClassNames(\n classPrefix,\n 'slider-input',\n 'slider-input-low'\n )}\n aria-valuenow={currentRange[0]}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n {...lowThumb.aria}\n {...getAriaProps(currentRange[0])}\n {...thumbRest}\n id={controlId}\n {...(nameLow !== undefined ? { name: nameLow } : {})}\n />\n {/* High thumb */}\n <input\n ref={inputHighRef}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={currentRange[1]}\n disabled={disabled}\n onChange={handleRangeHighChange}\n onMouseEnter={() => setShowTooltipHigh(true)}\n onMouseLeave={() => setShowTooltipHigh(false)}\n onFocus={() => setShowTooltipHigh(true)}\n onBlur={() => setShowTooltipHigh(false)}\n className={prefixedClassNames(\n classPrefix,\n 'slider-input',\n 'slider-input-high'\n )}\n aria-valuenow={currentRange[1]}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={isVertical ? 'vertical' : undefined}\n {...highThumb.aria}\n {...getAriaProps(currentRange[1])}\n name={nameHigh}\n />\n {/* Each wired thumb's own text, read after the label. A hidden element\n still names whatever points aria-labelledby at it. */}\n {[lowThumb, highThumb].map(\n thumb =>\n thumb.wired && (\n <span key={thumb.textId} id={thumb.textId} hidden>\n {thumb.text}\n </span>\n )\n )}\n {/* Low tooltip */}\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputRef}\n className={prefixedClassNames(\n classPrefix,\n 'slider-output',\n 'slider-output-low',\n {\n 'is-visible': showTipLow,\n 'is-flipped': flipped,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n }\n )}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressLow),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressLow),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressLow),\n transform: `translateX(calc(-50% + ${nudgeX}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeX}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentRange[0])}\n </output>\n )}\n {/* High tooltip */}\n {tooltipMode !== 'hidden' && (\n <output\n ref={outputHighRef}\n className={prefixedClassNames(\n classPrefix,\n 'slider-output',\n 'slider-output-high',\n {\n 'is-visible': showTipHigh,\n 'is-flipped': flippedHigh,\n 'is-flipped-left': isVertical && verticalFlippedLeft,\n }\n )}\n style={\n isVertical\n ? ((verticalFlippedLeft\n ? {\n bottom: getThumbLeft(progressHigh),\n right: verticalTooltipOffset,\n left: 'auto',\n }\n : {\n bottom: getThumbLeft(progressHigh),\n left: verticalTooltipOffset,\n right: 'auto',\n }) as React.CSSProperties)\n : ({\n left: getThumbLeft(progressHigh),\n transform: `translateX(calc(-50% + ${nudgeXHigh}px))`,\n '--slider-output-arrow-offset': `calc(50% - ${nudgeXHigh}px)`,\n } as React.CSSProperties)\n }\n >\n {formatValue(currentRange[1])}\n </output>\n )}\n {renderTicks()}\n </div>\n );\n\n let content = sliderElement;\n\n if (rendersOwnControl('Slider', { insideControl })) {\n content = <Control>{content}</Control>;\n }\n\n if (ownField) {\n return (\n <Field\n label={label}\n labelSize={labelSize}\n labelProps={fieldLabelProps}\n horizontal={horizontal}\n className={fieldClassName}\n >\n {content}\n {messageEl}\n </Field>\n );\n }\n\n return (\n <>\n {content}\n {messageEl}\n </>\n );\n }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../src/form/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The values the Switch `color` and `passiveType` props accept, as a readonly\n * tuple.\n *\n * Both props are typed from it, so they list the same values. Map over it to\n * build a color picker, or check a value that arrives at runtime before\n * passing it in: the component adds no class for a value outside the tuple.\n *\n * @example\n * import { Switch, switchColors } from '@allxsmith/bestax-bulma';\n *\n * switchColors.map(color => (\n * <Switch key={color} color={color} defaultChecked>\n * {color}\n * </Switch>\n * ));\n */\nexport const switchColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Switch `size` prop accepts, as a readonly tuple.\n *\n * `SwitchProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { switchSizes } from '@allxsmith/bestax-bulma';\n *\n * type SwitchSize = (typeof switchSizes)[number];\n */\nexport const switchSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Switch component.\n * @extraProp {boolean} [checked] - Controlled checked state.\n * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.\n * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Callback when switch state changes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface SwitchProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color variant for the switch. */\n color?: (typeof switchColors)[number];\n /** Size of the switch. */\n size?: (typeof switchSizes)[number];\n /** Use rounded switch style. */\n isRounded?: boolean;\n /** Use thin switch style. */\n isThin?: boolean;\n /** Use outlined switch style. */\n isOutlined?: boolean;\n /** Right-to-left layout (label on left). */\n isRtl?: boolean;\n /** Color when the switch is in the off/passive state. */\n passiveType?: (typeof switchColors)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Label content for the switch. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Switch` component provides a toggle switch for boolean on/off states.\n *\n * @function\n * @param {SwitchProps} props - Props for the Switch component.\n * @returns {JSX.Element} The rendered switch element.\n *\n * @example\n * // Basic switch\n * <Switch>Enable notifications</Switch>\n *\n * @example\n * // Colored and rounded switch\n * <Switch color=\"success\" isRounded checked>\n * Active\n * </Switch>\n *\n * @example\n * // Controlled switch\n * <Switch\n * checked={isEnabled}\n * onChange={(e) => setIsEnabled(e.target.checked)}\n * >\n * Feature enabled\n * </Switch>\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n color,\n size,\n isRounded,\n isThin,\n isOutlined,\n isRtl,\n passiveType,\n className,\n children,\n textColor,\n disabled,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // Generate Bulma classes with prefix\n const switchClasses = usePrefixedClassNames('switch', {\n [`is-${color}`]: color && switchColors.includes(color),\n [`is-${size}`]: size && switchSizes.includes(size),\n 'is-rounded': isRounded,\n 'is-thin': isThin,\n 'is-outlined': isOutlined,\n 'is-rtl': isRtl,\n [`is-${passiveType}-passive`]:\n passiveType && switchColors.includes(passiveType),\n });\n\n // Combine prefixed Bulma classes with unprefixed user className and helper classes\n const labelClasses = classNames(\n switchClasses,\n bulmaHelperClasses,\n className\n );\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={labelClasses}>\n <input ref={ref} type=\"checkbox\" disabled={disabled} {...rest} />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAQA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;;AAGV;;;;;;;;;;;;AAYG;AACI,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/form/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n useBulmaClasses,\n BulmaClassesProps,\n validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The values the Switch `color` and `passiveType` props accept, as a readonly\n * tuple.\n *\n * Both props are typed from it, so they list the same values. Map over it to\n * build a color picker, or check a value that arrives at runtime before\n * passing it in: the component adds no class for a value outside the tuple.\n *\n * @example\n * import { Switch, switchColors } from '@allxsmith/bestax-bulma';\n *\n * switchColors.map(color => (\n * <Switch key={color} color={color} defaultChecked>\n * {color}\n * </Switch>\n * ));\n */\nexport const switchColors = [\n 'primary',\n 'link',\n 'info',\n 'success',\n 'warning',\n 'danger',\n] as const;\n\n/**\n * The values the Switch `size` prop accepts, as a readonly tuple.\n *\n * `SwitchProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { switchSizes } from '@allxsmith/bestax-bulma';\n *\n * type SwitchSize = (typeof switchSizes)[number];\n */\nexport const switchSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Switch component.\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n * @extraProp {boolean} [checked] - Controlled checked state.\n * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.\n * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Callback when switch state changes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface SwitchProps\n extends\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type' | 'color'\n >,\n Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n /** Color variant for the switch. */\n color?: (typeof switchColors)[number];\n /** Size of the switch. */\n size?: (typeof switchSizes)[number];\n /** Use rounded switch style. */\n isRounded?: boolean;\n /** Use thin switch style. */\n isThin?: boolean;\n /** Use outlined switch style. */\n isOutlined?: boolean;\n /** Right-to-left layout (label on left). */\n isRtl?: boolean;\n /** Color when the switch is in the off/passive state. */\n passiveType?: (typeof switchColors)[number];\n /** Text color helper. */\n textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n /** Label content for the switch. */\n children?: React.ReactNode;\n}\n\n/**\n * The `Switch` component provides a toggle switch for boolean on/off states.\n *\n * @function\n * @param {SwitchProps} props - Props for the Switch component.\n * @returns {JSX.Element} The rendered switch element.\n *\n * @example\n * // Basic switch\n * <Switch>Enable notifications</Switch>\n *\n * @example\n * // Colored and rounded switch\n * <Switch color=\"success\" isRounded checked>\n * Active\n * </Switch>\n *\n * @example\n * // Controlled switch\n * <Switch\n * checked={isEnabled}\n * onChange={(e) => setIsEnabled(e.target.checked)}\n * >\n * Feature enabled\n * </Switch>\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n color,\n size,\n isRounded,\n isThin,\n isOutlined,\n isRtl,\n passiveType,\n className,\n children,\n textColor,\n disabled,\n ...props\n },\n ref\n ) => {\n const { bulmaHelperClasses, rest } = useBulmaClasses({\n color: textColor,\n ...props,\n });\n\n // Generate Bulma classes with prefix\n const switchClasses = usePrefixedClassNames('switch', {\n [`is-${color}`]: color && switchColors.includes(color),\n [`is-${size}`]: size && switchSizes.includes(size),\n 'is-rounded': isRounded,\n 'is-thin': isThin,\n 'is-outlined': isOutlined,\n 'is-rtl': isRtl,\n [`is-${passiveType}-passive`]:\n passiveType && switchColors.includes(passiveType),\n });\n\n // Combine prefixed Bulma classes with unprefixed user className and helper classes\n const labelClasses = classNames(\n switchClasses,\n bulmaHelperClasses,\n className\n );\n const checkClass = usePrefixedClassNames('check');\n const controlLabelClass = usePrefixedClassNames('control-label');\n\n return (\n <label className={labelClasses}>\n <input ref={ref} type=\"checkbox\" disabled={disabled} {...rest} />\n <span className={checkClass} />\n {children && <span className={controlLabelClass}>{children}</span>}\n </label>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAQA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,YAAY,GAAG;IAC1B,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;;AAGV;;;;;;;;;;;;AAYG;AACI,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO;AAwChE;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,EACN,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AACpD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClD,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,CAAC,CAAA,GAAA,EAAM,WAAW,CAAA,QAAA,CAAU,GAC1B,WAAW,IAAI,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC;AACpD,KAAA,CAAC;;IAGF,MAAM,YAAY,GAAG,UAAU,CAC7B,aAAa,EACb,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;AACjD,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,eAAe,CAAC;AAEhE,IAAA,QACEA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,YAAY,aAC5BC,GAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,EAAA,GAAM,IAAI,EAAA,CAAI,EACjEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,EAAA,CAAI,EAC9B,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC5D;AAEZ,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}
|