@allxsmith/bestax-bulma 5.45.1 → 5.46.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/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/useVisibilityClasses.js.map +1 -1
- package/dist/index.cjs +190 -49
- package/dist/index.cjs.map +1 -1
- 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/useVisibilityClasses.d.ts +5 -1
- 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/useVisibilityClasses.d.ts +5 -1
- package/package.json +1 -1
|
@@ -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;;"}
|
|
@@ -6,6 +6,7 @@ import { useBulmaClasses } from './useBulmaClasses.js';
|
|
|
6
6
|
import { validRadii, validGaps } from './bulmaClassHelpers.js';
|
|
7
7
|
import { warnOnce, isDev } from './devWarnings.js';
|
|
8
8
|
import { useClassPrefix } from './Config.js';
|
|
9
|
+
import { useClientLayoutEffect } from './useClientLayoutEffect.js';
|
|
9
10
|
|
|
10
11
|
// --- Bulma v1 CSS variables Theme sets (originally generated from
|
|
11
12
|
// CSSVAR_KEYS), in two lists by where Bulma declares them ---
|
|
@@ -60,6 +61,21 @@ const bulmaGlobalVars = [
|
|
|
60
61
|
'--bulma-danger-h',
|
|
61
62
|
'--bulma-danger-s',
|
|
62
63
|
'--bulma-danger-l',
|
|
64
|
+
// the lightness of each color's label on a solid surface, and of its text
|
|
65
|
+
// on the page, which Bulma's Sass build picks for contrast with the color
|
|
66
|
+
// it was built with, so a new trio does not move them
|
|
67
|
+
'--bulma-primary-invert-l',
|
|
68
|
+
'--bulma-primary-on-scheme-l',
|
|
69
|
+
'--bulma-link-invert-l',
|
|
70
|
+
'--bulma-link-on-scheme-l',
|
|
71
|
+
'--bulma-info-invert-l',
|
|
72
|
+
'--bulma-info-on-scheme-l',
|
|
73
|
+
'--bulma-success-invert-l',
|
|
74
|
+
'--bulma-success-on-scheme-l',
|
|
75
|
+
'--bulma-warning-invert-l',
|
|
76
|
+
'--bulma-warning-on-scheme-l',
|
|
77
|
+
'--bulma-danger-invert-l',
|
|
78
|
+
'--bulma-danger-on-scheme-l',
|
|
63
79
|
// shadow (the upstream token .box/.card/.dropdown/.panel derive their own
|
|
64
80
|
// shadow variables from; overriding it from an ancestor is the route that
|
|
65
81
|
// cascades, since those selectors re-declare their derived var on
|
|
@@ -810,6 +826,104 @@ const setRootThemeRules = (order, rules) => {
|
|
|
810
826
|
}
|
|
811
827
|
renderRootThemeRules();
|
|
812
828
|
};
|
|
829
|
+
/** A value given per scheme, rather than as one string. */
|
|
830
|
+
const isSchemeValues = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
831
|
+
/**
|
|
832
|
+
* The selector of one of Bulma's schemes, as the stylesheet Theme is used
|
|
833
|
+
* with writes it: `[data-theme=dark], .theme-dark`, or with the class prefix
|
|
834
|
+
* in both names (`[data-bestax-theme=dark], .bestax-theme-dark`) for a
|
|
835
|
+
* prefixed build. A prefix that cannot be written into a selector as it
|
|
836
|
+
* stands gets the plain names, which `colorMode` writes under any prefix.
|
|
837
|
+
*/
|
|
838
|
+
const schemeSelector = (classPrefix, scheme) => {
|
|
839
|
+
const prefix = /^[A-Za-z_][\w-]*$/.test(classPrefix) ? classPrefix : '';
|
|
840
|
+
return `[data-${prefix}theme=${scheme}], .${prefix}theme-${scheme}`;
|
|
841
|
+
};
|
|
842
|
+
/**
|
|
843
|
+
* The `:root` rules for variables given a value per scheme, laid out the
|
|
844
|
+
* way Bulma lays out its own schemes so each value applies exactly where
|
|
845
|
+
* Bulma's would: under the visitor's OS preference, unless the page names
|
|
846
|
+
* the other scheme, and wherever the page names this one, on `<html>` or on
|
|
847
|
+
* an element inside. A scheme with no value gets no rules, which leaves the
|
|
848
|
+
* stylesheet's own value there.
|
|
849
|
+
*
|
|
850
|
+
* Every selector is as specific as `:root` (the guard is in `:where()`), so
|
|
851
|
+
* between Themes, and against a plain `:root` rule, the later one still
|
|
852
|
+
* wins, as it does for every other variable.
|
|
853
|
+
*/
|
|
854
|
+
const schemeRules = (vars, classPrefix) => {
|
|
855
|
+
const other = { light: 'dark', dark: 'light' };
|
|
856
|
+
const body = (scheme) => vars
|
|
857
|
+
.filter(([, values]) => values[scheme])
|
|
858
|
+
.map(([key, values]) => `${key}: ${values[scheme]};`)
|
|
859
|
+
.join(' ');
|
|
860
|
+
const schemes = ['light', 'dark']
|
|
861
|
+
.map(scheme => [scheme, body(scheme)])
|
|
862
|
+
.filter(([, declarations]) => declarations);
|
|
863
|
+
// Bulma's order: both preferences, then both names, the dark one last.
|
|
864
|
+
return [
|
|
865
|
+
...schemes.map(([scheme, declarations]) => `@media (prefers-color-scheme: ${scheme}) { :root:where(:not(` +
|
|
866
|
+
`${schemeSelector(classPrefix, other[scheme])})) { ${declarations} } }`),
|
|
867
|
+
...schemes.map(([scheme, declarations]) => `${schemeSelector(classPrefix, scheme)} { ${declarations} }`),
|
|
868
|
+
];
|
|
869
|
+
};
|
|
870
|
+
const schemeAttributes = new Map();
|
|
871
|
+
/** Set a theme attribute on `<html>`, or remove it for `null`. */
|
|
872
|
+
const setSchemeAttribute = (name, value) => {
|
|
873
|
+
const root = document.documentElement;
|
|
874
|
+
if (value === null) {
|
|
875
|
+
root.removeAttribute(name);
|
|
876
|
+
}
|
|
877
|
+
else {
|
|
878
|
+
root.setAttribute(name, value);
|
|
879
|
+
}
|
|
880
|
+
};
|
|
881
|
+
/**
|
|
882
|
+
* Write one Theme's value for a theme attribute, `null` removing it, and
|
|
883
|
+
* make that Theme the attribute's latest writer. Throws, recording nothing,
|
|
884
|
+
* when `name` cannot be an attribute name.
|
|
885
|
+
*
|
|
886
|
+
* A Theme that writes the value it already holds keeps its place and leaves
|
|
887
|
+
* the page alone. React runs a layout effect again when a `Suspense`
|
|
888
|
+
* boundary shows its tree again, with nothing changed, and that must not
|
|
889
|
+
* take the attribute back from a Theme that wrote after it.
|
|
890
|
+
*/
|
|
891
|
+
const writeSchemeAttribute = (order, name, value) => {
|
|
892
|
+
const held = schemeAttributes.get(name);
|
|
893
|
+
if (held?.writers.some(writer => writer.order === order && writer.value === value)) {
|
|
894
|
+
return;
|
|
895
|
+
}
|
|
896
|
+
const entry = held ?? {
|
|
897
|
+
original: document.documentElement.getAttribute(name),
|
|
898
|
+
writers: [],
|
|
899
|
+
};
|
|
900
|
+
setSchemeAttribute(name, value);
|
|
901
|
+
entry.writers = entry.writers.filter(writer => writer.order !== order);
|
|
902
|
+
entry.writers.push({ order, value });
|
|
903
|
+
schemeAttributes.set(name, entry);
|
|
904
|
+
};
|
|
905
|
+
/**
|
|
906
|
+
* Take one Theme off every theme attribute it wrote, except those named in
|
|
907
|
+
* `keep`. An attribute it was the latest writer of goes back to the value of
|
|
908
|
+
* the writer before it, or to what it held before any of them.
|
|
909
|
+
*/
|
|
910
|
+
const releaseSchemeAttributes = (order, keep = []) => {
|
|
911
|
+
for (const [name, entry] of schemeAttributes) {
|
|
912
|
+
const index = entry.writers.findIndex(writer => writer.order === order);
|
|
913
|
+
if (index === -1 || keep.includes(name)) {
|
|
914
|
+
continue;
|
|
915
|
+
}
|
|
916
|
+
const latest = index === entry.writers.length - 1;
|
|
917
|
+
entry.writers.splice(index, 1);
|
|
918
|
+
if (entry.writers.length === 0) {
|
|
919
|
+
schemeAttributes.delete(name);
|
|
920
|
+
setSchemeAttribute(name, entry.original);
|
|
921
|
+
}
|
|
922
|
+
else if (latest) {
|
|
923
|
+
setSchemeAttribute(name, entry.writers[entry.writers.length - 1].value);
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
};
|
|
813
927
|
/**
|
|
814
928
|
* Theme component that injects Bulma CSS variables either globally or locally.
|
|
815
929
|
*
|
|
@@ -896,7 +1010,9 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
|
|
|
896
1010
|
});
|
|
897
1011
|
// Merge bulmaVars and individual props, with props taking precedence
|
|
898
1012
|
const mergedVars = useMemo(() => {
|
|
899
|
-
const vars = {
|
|
1013
|
+
const vars = {
|
|
1014
|
+
...bulmaVars,
|
|
1015
|
+
};
|
|
900
1016
|
for (const [propName, cssVar] of Object.entries(bulmaVarPropMap)) {
|
|
901
1017
|
if (bulmaVarProps[propName] !== undefined) {
|
|
902
1018
|
vars[cssVar] = bulmaVarProps[propName];
|
|
@@ -910,61 +1026,99 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
|
|
|
910
1026
|
}
|
|
911
1027
|
return vars;
|
|
912
1028
|
}, [bulmaVars, bulmaVarProps, radiusVar, columnGapVar]);
|
|
1029
|
+
// The variables Theme writes, split by form: a value per scheme, or one
|
|
1030
|
+
// value for every scheme. A key Theme does not take, or an empty value, is
|
|
1031
|
+
// left out. A plain value is written as given, so a number untyped code
|
|
1032
|
+
// passes still works.
|
|
1033
|
+
const { plainVars, perSchemeVars } = useMemo(() => {
|
|
1034
|
+
const plain = [];
|
|
1035
|
+
const perScheme = [];
|
|
1036
|
+
for (const [key, value] of Object.entries(mergedVars)) {
|
|
1037
|
+
if (!value || !bulmaCssVars.includes(key)) {
|
|
1038
|
+
continue;
|
|
1039
|
+
}
|
|
1040
|
+
if (isSchemeValues(value)) {
|
|
1041
|
+
perScheme.push([key, value]);
|
|
1042
|
+
}
|
|
1043
|
+
else {
|
|
1044
|
+
plain.push([key, value]);
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
return { plainVars: plain, perSchemeVars: perScheme };
|
|
1048
|
+
}, [mergedVars]);
|
|
913
1049
|
// From an effect rather than the render body, so rendering does none of
|
|
914
1050
|
// this work, and a server render none at all. In production it returns
|
|
915
1051
|
// at its development check before looking at the variables.
|
|
916
1052
|
useEffect(() => {
|
|
917
1053
|
warnComponentVars(mergedVars);
|
|
918
1054
|
}, [mergedVars]);
|
|
919
|
-
//
|
|
1055
|
+
// A scoped Theme writes its variables as an inline style, which has no way
|
|
1056
|
+
// to say which scheme a value is for, so it skips a value given per
|
|
1057
|
+
// scheme. Say so, since nothing on the page does.
|
|
1058
|
+
useEffect(() => {
|
|
1059
|
+
if (isRoot || perSchemeVars.length === 0 || !isDev()) {
|
|
1060
|
+
return;
|
|
1061
|
+
}
|
|
1062
|
+
const keys = perSchemeVars.map(([key]) => key).sort();
|
|
1063
|
+
warnOnce(`Theme:scoped-scheme-values:${keys.join(',')}`, `[bestax-bulma] <Theme>: a scoped Theme writes its variables as an ` +
|
|
1064
|
+
`inline style, which cannot hold a value per scheme, so ` +
|
|
1065
|
+
`${keys.join(', ')} ${keys.length === 1 ? 'is' : 'are'} not set. ` +
|
|
1066
|
+
'Give a single string, set the values on an isRoot Theme, or set ' +
|
|
1067
|
+
'them in your CSS.');
|
|
1068
|
+
}, [isRoot, perSchemeVars]);
|
|
1069
|
+
// This Theme's place among the Themes on the page; see `rootThemeRules`
|
|
1070
|
+
// and `schemeAttributes`.
|
|
920
1071
|
const [rootOrder] = useState(() => nextRootOrder++);
|
|
921
|
-
//
|
|
1072
|
+
// Bulma names its scheme attribute after the class prefix a stylesheet was
|
|
1073
|
+
// built with (`data-<prefix>theme`), so the prefixed builds read
|
|
1074
|
+
// `data-bestax-theme` and never `data-theme`. Its scheme classes take the
|
|
1075
|
+
// prefix too (`.bestax-theme-dark`).
|
|
1076
|
+
const classPrefix = useClassPrefix();
|
|
1077
|
+
// The `:root` rules this Theme contributes, or '' when it contributes none:
|
|
1078
|
+
// one block for the plain values, then the rules for each value given per
|
|
1079
|
+
// scheme.
|
|
922
1080
|
const rootRules = useMemo(() => {
|
|
923
1081
|
if (!isRoot) {
|
|
924
1082
|
return '';
|
|
925
1083
|
}
|
|
926
|
-
const
|
|
927
|
-
|
|
928
|
-
.
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
}, [
|
|
1084
|
+
const plain = plainVars.map(([key, value]) => `${key}: ${value};`);
|
|
1085
|
+
return [
|
|
1086
|
+
...(plain.length > 0 ? [`:root { ${plain.join(' ')} }`] : []),
|
|
1087
|
+
...schemeRules(perSchemeVars, classPrefix),
|
|
1088
|
+
].join('\n');
|
|
1089
|
+
}, [plainVars, perSchemeVars, classPrefix, isRoot]);
|
|
932
1090
|
// Inject CSS variables globally at :root level, alongside any other root
|
|
933
1091
|
// Themes. Clearing `isRoot` or every variable passes '', which withdraws
|
|
934
|
-
// this Theme's rules.
|
|
935
|
-
|
|
1092
|
+
// this Theme's rules. A layout effect, so they are in place before the
|
|
1093
|
+
// browser paints what this Theme rendered.
|
|
1094
|
+
useClientLayoutEffect(() => {
|
|
936
1095
|
setRootThemeRules(rootOrder, rootRules);
|
|
937
1096
|
}, [rootOrder, rootRules]);
|
|
938
1097
|
// Withdraw them on unmount. Kept apart from the effect above so a change
|
|
939
1098
|
// rewrites the shared element in place rather than removing and recreating
|
|
940
|
-
// it between the cleanup and the next run
|
|
1099
|
+
// it between the cleanup and the next run, and passive, so a Theme that a
|
|
1100
|
+
// `Suspense` fallback hides keeps its variables meanwhile: React cleans up
|
|
1101
|
+
// a hidden tree's layout effects, but not its passive ones.
|
|
941
1102
|
useEffect(() => () => setRootThemeRules(rootOrder, ''), [rootOrder]);
|
|
942
|
-
// Bulma names its scheme attribute after the class prefix a stylesheet was
|
|
943
|
-
// built with (`data-<prefix>theme`), so the prefixed builds read
|
|
944
|
-
// `data-bestax-theme` and never `data-theme`.
|
|
945
|
-
const classPrefix = useClassPrefix();
|
|
946
1103
|
// Toggle Bulma's light/dark scheme by writing the theme attribute on the
|
|
947
1104
|
// document root (<html>). This is always global, even on a scoped Theme.
|
|
948
1105
|
// Under a class prefix the prefixed attribute is written as well as
|
|
949
1106
|
// `data-theme`, so whichever build is loaded sees it; with no prefix only
|
|
950
1107
|
// `data-theme` is. `'system'` removes them so Bulma follows the OS
|
|
951
|
-
// preference.
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
const
|
|
1108
|
+
// preference. Written before the browser paints, and handed back on
|
|
1109
|
+
// unmount, for the reasons the two effects above give; `schemeAttributes`
|
|
1110
|
+
// keeps the two in step.
|
|
1111
|
+
useClientLayoutEffect(() => {
|
|
1112
|
+
const names = colorMode === undefined
|
|
1113
|
+
? []
|
|
1114
|
+
: classPrefix
|
|
1115
|
+
? ['data-theme', `data-${classPrefix}theme`]
|
|
1116
|
+
: ['data-theme'];
|
|
1117
|
+
const value = colorMode === undefined || colorMode === 'system' ? null : colorMode;
|
|
1118
|
+
releaseSchemeAttributes(rootOrder, names);
|
|
961
1119
|
for (const name of names) {
|
|
962
|
-
if (colorMode === 'system') {
|
|
963
|
-
root.removeAttribute(name);
|
|
964
|
-
continue;
|
|
965
|
-
}
|
|
966
1120
|
try {
|
|
967
|
-
|
|
1121
|
+
writeSchemeAttribute(rootOrder, name, value);
|
|
968
1122
|
}
|
|
969
1123
|
catch {
|
|
970
1124
|
// A class prefix can hold characters an attribute name cannot.
|
|
@@ -977,32 +1131,20 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
|
|
|
977
1131
|
'with that prefix keeps its scheme.');
|
|
978
1132
|
}
|
|
979
1133
|
}
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
const value = previous[i];
|
|
984
|
-
if (value === null) {
|
|
985
|
-
root.removeAttribute(name);
|
|
986
|
-
}
|
|
987
|
-
else {
|
|
988
|
-
root.setAttribute(name, value);
|
|
989
|
-
}
|
|
990
|
-
});
|
|
991
|
-
};
|
|
992
|
-
}, [colorMode, classPrefix]);
|
|
1134
|
+
}, [colorMode, classPrefix, rootOrder]);
|
|
1135
|
+
// Hand the attributes back on unmount.
|
|
1136
|
+
useEffect(() => () => releaseSchemeAttributes(rootOrder), [rootOrder]);
|
|
993
1137
|
// For local injection (when isRoot is false), prepare style object for CSS vars
|
|
994
1138
|
const style = useMemo(() => {
|
|
995
1139
|
if (isRoot) {
|
|
996
1140
|
return {};
|
|
997
1141
|
}
|
|
998
1142
|
const styleObj = {};
|
|
999
|
-
for (const [key, value] of
|
|
1000
|
-
|
|
1001
|
-
styleObj[key] = value;
|
|
1002
|
-
}
|
|
1143
|
+
for (const [key, value] of plainVars) {
|
|
1144
|
+
styleObj[key] = value;
|
|
1003
1145
|
}
|
|
1004
1146
|
return styleObj;
|
|
1005
|
-
}, [
|
|
1147
|
+
}, [plainVars, isRoot]);
|
|
1006
1148
|
// Generate combined class names for the wrapper div
|
|
1007
1149
|
const combinedClassName = useMemo(() => {
|
|
1008
1150
|
if (isRoot) {
|