@cloudscape-design/components-themeable 3.0.636 → 3.0.638

package/lib/internal/template/slider/internal.js

@@ -0,0 +1,119 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component/index.js';
+import { fireNonCancelableEvent } from '../internal/events/index.js';
+import { useFormFieldContext } from '../internal/context/form-field-context.js';
+import { useUniqueId } from '../internal/hooks/use-unique-id/index.js';
+import Tooltip from '../internal/components/tooltip/index.js';
+import customCssProps from '../internal/generated/custom-css-properties/index.js';
+import { useInternalI18n } from '../i18n/context';
+import styles from './styles.css.js';
+import SliderLabels from './slider-labels.js';
+import SliderTickMarks from './tick-marks.js';
+import { getPercent, getStepArray, findLowerAndHigherValues, valuesAreValid, THUMB_SIZE } from './utils.js';
+export default function InternalSlider(_a) {
+    var { value, min, max, onChange, step, disabled, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, __internalRootRef = null } = _a, rest = __rest(_a, ["value", "min", "max", "onChange", "step", "disabled", "ariaLabel", "ariaDescription", "referenceValues", "tickMarks", "hideFillLine", "valueFormatter", "i18nStrings", "__internalRootRef"]);
+    const baseProps = getBaseProps(rest);
+    const i18n = useInternalI18n('slider');
+    const handleRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const labelsId = useUniqueId('labels');
+    const { ariaLabelledby, ariaDescribedby, controlId, invalid } = useFormFieldContext(rest);
+    if (referenceValues && valuesAreValid(referenceValues) === false) {
+        warnOnce('Slider', 'All reference values must be integers. Non-integer values will not be displayed.');
+    }
+    if (min >= max) {
+        warnOnce('Slider', 'The min value cannot be greater than the max value.');
+    }
+    if (step && step > max - min) {
+        warnOnce('Slider', 'The step value cannot be greater than the difference between the min and max.');
+    }
+    if (step && value !== undefined && (value - min) % step !== 0) {
+        warnOnce('Slider', 'Slider value must be a multiple of the step. The value will round to the nearest step value.');
+    }
+    const getValue = () => {
+        const stepIsValid = step && step < max - min && step > min;
+        if (value === undefined) {
+            // this is the default html input's fallback value
+            return max < min ? min : min + (max - min) / 2;
+        }
+        if (!step) {
+            return value;
+        }
+        // if the value is not a multiple of the step, then find the closest step
+        // and make that the value (this is also the native input behavior)
+        if (step && stepIsValid && (value - min) % step !== 0) {
+            const closest = getStepArray(step, [min, max]).reduce(function (prev, curr) {
+                return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
+            });
+            return closest;
+        }
+        return value;
+    };
+    const sliderValue = getValue();
+    const percent = getPercent(Math.max(Math.min(sliderValue, max), min), [min, max]);
+    const getAriaValueText = () => {
+        if (valueFormatter && valueFormatter(sliderValue)) {
+            return valueFormatter(sliderValue);
+        }
+        if (valueFormatter && !valueFormatter(sliderValue)) {
+            const middleValues = referenceValues ? referenceValues : [];
+            const valueArray = [min, ...middleValues, sliderValue, max];
+            const prevAndNext = findLowerAndHigherValues(valueArray, sliderValue);
+            const previousValue = prevAndNext.lower ? valueFormatter(prevAndNext.lower) : valueFormatter(min);
+            const nextValue = prevAndNext.higher ? valueFormatter(prevAndNext.higher) : valueFormatter(max);
+            const value = sliderValue;
+            return i18n('i18nStrings.valueTextRange', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valueTextRange(previousValue, value, nextValue), format => format({ value, previousValue, nextValue }));
+        }
+        return undefined;
+    };
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root) }),
+        showTooltip && (React.createElement(Tooltip, { value: valueFormatter ? valueFormatter(sliderValue) : sliderValue, trackRef: handleRef })),
+        React.createElement("div", { ref: handleRef, className: clsx(styles['tooltip-thumb']), style: {
+                [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${THUMB_SIZE}px)`,
+            } }),
+        React.createElement("div", { className: styles.slider },
+            React.createElement("div", { className: clsx(styles['slider-track'], {
+                    [styles.disabled]: disabled,
+                }) }),
+            !hideFillLine && (React.createElement("div", { className: clsx(styles['slider-range'], {
+                    [styles.error]: invalid,
+                    [styles.active]: isActive,
+                    [styles['error-active']]: invalid && isActive,
+                    [styles.disabled]: disabled,
+                }), style: { [customCssProps.sliderRangeInlineSize]: `${percent}%` } }))),
+        !!step && tickMarks && (React.createElement(SliderTickMarks, { hideFillLine: hideFillLine, disabled: disabled, invalid: invalid, isActive: isActive, step: step, min: min, max: max, value: sliderValue })),
+        React.createElement("input", { 
+            // we need to add this because input[type=range] isn't natively focusable in Safari.
+            tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby, "aria-describedby": valueFormatter ? (ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId) : ariaDescribedby, "aria-valuetext": getAriaValueText(), "aria-invalid": invalid ? 'true' : undefined, id: controlId, type: "range", min: min, max: max, disabled: disabled, onFocus: () => {
+                setShowTooltip(true);
+                setIsActive(true);
+            }, onBlur: () => {
+                setShowTooltip(false);
+                setIsActive(false);
+            }, onMouseEnter: () => {
+                setShowTooltip(true);
+            }, onMouseLeave: () => {
+                setShowTooltip(false);
+            }, onTouchStart: () => {
+                setShowTooltip(true);
+                setIsActive(true);
+            }, onTouchEnd: () => {
+                setShowTooltip(false);
+                setIsActive(false);
+            }, step: step, value: sliderValue, onChange: event => {
+                onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) });
+            }, className: clsx(styles.thumb, {
+                [styles.error]: invalid,
+                [styles.disabled]: disabled,
+                [styles.min]: sliderValue <= min || max < min,
+                [styles.max]: sliderValue >= max && min < max,
+            }) }),
+        React.createElement(SliderLabels, { min: min, max: max, referenceValues: referenceValues, valueFormatter: valueFormatter, labelsId: labelsId, ariaDescription: ariaDescription })));
+}
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/slider/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/slider/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport { useInternalI18n } from '../i18n/context';\n\nimport styles from './styles.css.js';\nimport { SliderProps } from './interfaces.js';\nimport SliderLabels from './slider-labels.js';\nimport SliderTickMarks from './tick-marks.js';\nimport { getPercent, getStepArray, findLowerAndHigherValues, valuesAreValid, THUMB_SIZE } from './utils.js';\n\nexport interface InternalSliderProps extends SliderProps, InternalBaseComponentProps {}\n\nexport default function InternalSlider({\n  value,\n  min,\n  max,\n  onChange,\n  step,\n  disabled,\n  ariaLabel,\n  ariaDescription,\n  referenceValues,\n  tickMarks,\n  hideFillLine,\n  valueFormatter,\n  i18nStrings,\n  __internalRootRef = null,\n  ...rest\n}: InternalSliderProps) {\n  const baseProps = getBaseProps(rest);\n  const i18n = useInternalI18n('slider');\n\n  const handleRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n  const labelsId = useUniqueId('labels');\n  const { ariaLabelledby, ariaDescribedby, controlId, invalid } = useFormFieldContext(rest);\n\n  if (referenceValues && valuesAreValid(referenceValues) === false) {\n    warnOnce('Slider', 'All reference values must be integers. Non-integer values will not be displayed.');\n  }\n\n  if (min >= max) {\n    warnOnce('Slider', 'The min value cannot be greater than the max value.');\n  }\n\n  if (step && step > max - min) {\n    warnOnce('Slider', 'The step value cannot be greater than the difference between the min and max.');\n  }\n\n  if (step && value !== undefined && (value - min) % step !== 0) {\n    warnOnce('Slider', 'Slider value must be a multiple of the step. The value will round to the nearest step value.');\n  }\n\n  const getValue = () => {\n    const stepIsValid = step && step < max - min && step > min;\n\n    if (value === undefined) {\n      // this is the default html input's fallback value\n      return max < min ? min : min + (max - min) / 2;\n    }\n\n    if (!step) {\n      return value;\n    }\n\n    // if the value is not a multiple of the step, then find the closest step\n    // and make that the value (this is also the native input behavior)\n    if (step && stepIsValid && (value - min) % step !== 0) {\n      const closest = getStepArray(step, [min, max]).reduce(function (prev, curr) {\n        return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;\n      });\n\n      return closest;\n    }\n\n    return value;\n  };\n\n  const sliderValue = getValue();\n  const percent = getPercent(Math.max(Math.min(sliderValue, max), min), [min, max]);\n\n  const getAriaValueText = () => {\n    if (valueFormatter && valueFormatter(sliderValue)) {\n      return valueFormatter(sliderValue);\n    }\n\n    if (valueFormatter && !valueFormatter(sliderValue)) {\n      const middleValues = referenceValues ? referenceValues : [];\n      const valueArray = [min, ...middleValues, sliderValue, max];\n      const prevAndNext = findLowerAndHigherValues(valueArray, sliderValue);\n      const previousValue = prevAndNext.lower ? valueFormatter(prevAndNext.lower) : valueFormatter(min);\n      const nextValue = prevAndNext.higher ? valueFormatter(prevAndNext.higher) : valueFormatter(max);\n      const value = sliderValue;\n\n      return i18n('i18nStrings.valueTextRange', i18nStrings?.valueTextRange(previousValue, value, nextValue), format =>\n        format({ value, previousValue, nextValue })\n      );\n    }\n\n    return undefined;\n  };\n\n  return (\n    <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n      {showTooltip && (\n        <Tooltip value={valueFormatter ? valueFormatter(sliderValue) : sliderValue} trackRef={handleRef} />\n      )}\n      <div\n        ref={handleRef}\n        className={clsx(styles['tooltip-thumb'])}\n        style={{\n          [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${THUMB_SIZE}px)`,\n        }}\n      />\n      <div className={styles.slider}>\n        <div\n          className={clsx(styles['slider-track'], {\n            [styles.disabled]: disabled,\n          })}\n        />\n\n        {!hideFillLine && (\n          <div\n            className={clsx(styles['slider-range'], {\n              [styles.error]: invalid,\n              [styles.active]: isActive,\n              [styles['error-active']]: invalid && isActive,\n              [styles.disabled]: disabled,\n            })}\n            style={{ [customCssProps.sliderRangeInlineSize]: `${percent}%` }}\n          />\n        )}\n      </div>\n      {!!step && tickMarks && (\n        <SliderTickMarks\n          hideFillLine={hideFillLine}\n          disabled={disabled}\n          invalid={invalid}\n          isActive={isActive}\n          step={step}\n          min={min}\n          max={max}\n          value={sliderValue}\n        />\n      )}\n\n      <input\n        // we need to add this because input[type=range] isn't natively focusable in Safari.\n        tabIndex={0}\n        aria-label={ariaLabel}\n        // aria-labelledby has precedence over aria-label in accessible name calculation.\n        // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n        // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n        aria-labelledby={ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby}\n        // Slider labels, if present and something other than numbers, should be associated to the input with aria-describedby\n        aria-describedby={\n          valueFormatter ? (ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId) : ariaDescribedby\n        }\n        aria-valuetext={getAriaValueText()}\n        aria-invalid={invalid ? 'true' : undefined}\n        id={controlId}\n        type=\"range\"\n        min={min}\n        max={max}\n        disabled={disabled}\n        onFocus={() => {\n          setShowTooltip(true);\n          setIsActive(true);\n        }}\n        onBlur={() => {\n          setShowTooltip(false);\n          setIsActive(false);\n        }}\n        onMouseEnter={() => {\n          setShowTooltip(true);\n        }}\n        onMouseLeave={() => {\n          setShowTooltip(false);\n        }}\n        onTouchStart={() => {\n          setShowTooltip(true);\n          setIsActive(true);\n        }}\n        onTouchEnd={() => {\n          setShowTooltip(false);\n          setIsActive(false);\n        }}\n        step={step}\n        value={sliderValue}\n        onChange={event => {\n          onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) });\n        }}\n        className={clsx(styles.thumb, {\n          [styles.error]: invalid,\n          [styles.disabled]: disabled,\n          [styles.min]: sliderValue <= min || max < min,\n          [styles.max]: sliderValue >= max && min < max,\n        })}\n      />\n\n      <SliderLabels\n        min={min}\n        max={max}\n        referenceValues={referenceValues}\n        valueFormatter={valueFormatter}\n        labelsId={labelsId}\n        ariaDescription={ariaDescription}\n      />\n    </div>\n  );\n}\n"]}

package/lib/internal/template/slider/slider-labels.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface SliderLabelProps {
+    min: number;
+    max: number;
+    referenceValues?: ReadonlyArray<number>;
+    valueFormatter?: (value: number) => string;
+    labelsId: string;
+    ariaDescription?: string;
+}
+export default function SliderLabels({ min, max, referenceValues, valueFormatter, labelsId, ariaDescription, }: SliderLabelProps): JSX.Element;
+//# sourceMappingURL=slider-labels.d.ts.map

package/lib/internal/template/slider/slider-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-labels.d.ts","sourceRoot":"","sources":["../../../src/slider/slider-labels.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AACD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAG,EACH,eAAe,EACf,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,EAAE,gBAAgB,eAgHlB"}

package/lib/internal/template/slider/slider-labels.js

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { useMobile } from '../internal/hooks/use-mobile/index.js';
+import customCssProps from '../internal/generated/custom-css-properties/index.js';
+export default function SliderLabels({ min, max, referenceValues, valueFormatter, labelsId, ariaDescription, }) {
+    const isMobile = useMobile();
+    const MAX_LABEL_COUNT = isMobile ? 4 : 10;
+    const minDistance = (max - min) / MAX_LABEL_COUNT;
+    // Returns only values that have enough distance between them to show properly.
+    // We also remove non-integer values and any values outside of the slider range.
+    const getVisibleReferenceValues = () => {
+        if (!referenceValues || referenceValues.length === 0) {
+            return [];
+        }
+        const values = [];
+        let lastValue = min;
+        for (let i = 0; i <= referenceValues.length; i++) {
+            if (referenceValues[i] > min &&
+                referenceValues[i] < max &&
+                Math.abs(referenceValues[i] - lastValue) >= minDistance &&
+                Math.abs(max - referenceValues[i]) >= minDistance &&
+                Number.isInteger(referenceValues[i])) {
+                values.push(referenceValues[i]);
+                lastValue = referenceValues[i];
+            }
+        }
+        return values;
+    };
+    function getLabelPosition(index) {
+        const colSpan = Math.floor(minDistance / 2);
+        const positionStart = index - colSpan;
+        const positionEnd = index + colSpan;
+        // We simplify label treatment if the range is less than the max label count.
+        // This is because we don't need to add extra grid columns for necessary width.
+        const hasSmallRange = max - min <= MAX_LABEL_COUNT;
+        if (hasSmallRange) {
+            return {
+                min: 1,
+                max: (max - min) * 2 - 1,
+                posStart: (index - min) * 2,
+                posEnd: (index - min) * 2,
+            };
+        }
+        const roundedHalfCol = Math.round(colSpan / 2);
+        return {
+            min: colSpan * 2 + roundedHalfCol,
+            max: (max - min - colSpan) * 2 - roundedHalfCol + 1,
+            // add one to center the label
+            posStart: (positionStart - min) * 2 + 1 + roundedHalfCol,
+            posEnd: (positionEnd - min) * 2 - roundedHalfCol,
+        };
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { role: "list", "aria-hidden": !valueFormatter && !referenceValues ? 'true' : undefined, className: clsx(styles.labels, {
+                [styles['labels-noref']]: getVisibleReferenceValues().length === 0,
+            }), style: {
+                [customCssProps.sliderLabelCount]: getVisibleReferenceValues().length === 0 ? 2 : (max - min) * 2,
+            }, id: !ariaDescription ? labelsId : undefined },
+            React.createElement("span", { role: "listitem", className: clsx(styles.label, styles['labels-min']), style: {
+                    [customCssProps.sliderMinEnd]: getLabelPosition(0).min,
+                } }, valueFormatter ? valueFormatter(min) : min),
+            getVisibleReferenceValues().map(step => {
+                return (React.createElement("span", { role: "listitem", key: step, style: {
+                        [customCssProps.sliderReferenceColumn]: getLabelPosition(step).posStart,
+                        [customCssProps.sliderNextReferenceColumn]: getLabelPosition(step).posEnd,
+                    }, className: clsx(styles.label, styles['labels-reference']) }, valueFormatter ? valueFormatter(step) : step));
+            }),
+            React.createElement("span", { role: "listitem", className: clsx(styles.label, styles['labels-max']), style: {
+                    [customCssProps.sliderMaxStart]: !referenceValues ? 2 : getLabelPosition(0).max,
+                } }, valueFormatter ? valueFormatter(max) : max)),
+        ariaDescription && (React.createElement("div", { className: clsx(styles['labels-aria-description']), id: labelsId }, ariaDescription))));
+}
+//# sourceMappingURL=slider-labels.js.map

package/lib/internal/template/slider/slider-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-labels.js","sourceRoot":"","sources":["../../../src/slider/slider-labels.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAUlF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAG,EACH,eAAe,EACf,cAAc,EACd,QAAQ,EACR,eAAe,GACE;IACjB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1C,MAAM,WAAW,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,eAAe,CAAC;IAElD,+EAA+E;IAC/E,gFAAgF;IAChF,MAAM,yBAAyB,GAAG,GAAG,EAAE;QACrC,IAAI,CAAC,eAAe,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;YACpD,OAAO,EAAE,CAAC;SACX;QAED,MAAM,MAAM,GAAkB,EAAE,CAAC;QAEjC,IAAI,SAAS,GAAG,GAAG,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAChD,IACE,eAAe,CAAC,CAAC,CAAC,GAAG,GAAG;gBACxB,eAAe,CAAC,CAAC,CAAC,GAAG,GAAG;gBACxB,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,WAAW;gBACvD,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,WAAW;gBACjD,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EACpC;gBACA,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;gBAChC,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;aAChC;SACF;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,SAAS,gBAAgB,CAAC,KAAa;QACrC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,KAAK,GAAG,OAAO,CAAC;QACtC,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;QAEpC,6EAA6E;QAC7E,+EAA+E;QAC/E,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,IAAI,eAAe,CAAC;QAEnD,IAAI,aAAa,EAAE;YACjB,OAAO;gBACL,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;gBACxB,QAAQ,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC;gBAC3B,MAAM,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC;aAC1B,CAAC;SACH;QACD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAE/C,OAAO;YACL,GAAG,EAAE,OAAO,GAAG,CAAC,GAAG,cAAc;YACjC,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC;YACnD,8BAA8B;YAC9B,QAAQ,EAAE,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,cAAc;YACxD,MAAM,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,cAAc;SACjD,CAAC;IACJ,CAAC;IAED,OAAO,CACL;QACE,6BACE,IAAI,EAAC,MAAM,iBACE,CAAC,cAAc,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;gBAC7B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,yBAAyB,EAAE,CAAC,MAAM,KAAK,CAAC;aACnE,CAAC,EACF,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,yBAAyB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;aAClG,EACD,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YAE3C,8BACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EACnD,KAAK,EAAE;oBACL,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG;iBACvD,IAEA,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CACtC;YACN,yBAAyB,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACtC,OAAO,CACL,8BACE,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,IAAI,EACT,KAAK,EAAE;wBACL,CAAC,cAAc,CAAC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ;wBACvE,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,MAAM;qBAC1E,EACD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAExD,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC,CACR,CAAC;YACJ,CAAC,CAAC;YACF,8BACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EACnD,KAAK,EAAE;oBACL,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG;iBAChF,IAEA,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CACtC,CACH;QACL,eAAe,IAAI,CAClB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,IAClE,eAAe,CACZ,CACP,CACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useMobile } from '../internal/hooks/use-mobile/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\n\nexport interface SliderLabelProps {\n  min: number;\n  max: number;\n  referenceValues?: ReadonlyArray<number>;\n  valueFormatter?: (value: number) => string;\n  labelsId: string;\n  ariaDescription?: string;\n}\nexport default function SliderLabels({\n  min,\n  max,\n  referenceValues,\n  valueFormatter,\n  labelsId,\n  ariaDescription,\n}: SliderLabelProps) {\n  const isMobile = useMobile();\n  const MAX_LABEL_COUNT = isMobile ? 4 : 10;\n  const minDistance = (max - min) / MAX_LABEL_COUNT;\n\n  // Returns only values that have enough distance between them to show properly.\n  // We also remove non-integer values and any values outside of the slider range.\n  const getVisibleReferenceValues = () => {\n    if (!referenceValues || referenceValues.length === 0) {\n      return [];\n    }\n\n    const values: Array<number> = [];\n\n    let lastValue = min;\n    for (let i = 0; i <= referenceValues.length; i++) {\n      if (\n        referenceValues[i] > min &&\n        referenceValues[i] < max &&\n        Math.abs(referenceValues[i] - lastValue) >= minDistance &&\n        Math.abs(max - referenceValues[i]) >= minDistance &&\n        Number.isInteger(referenceValues[i])\n      ) {\n        values.push(referenceValues[i]);\n        lastValue = referenceValues[i];\n      }\n    }\n    return values;\n  };\n\n  function getLabelPosition(index: number) {\n    const colSpan = Math.floor(minDistance / 2);\n    const positionStart = index - colSpan;\n    const positionEnd = index + colSpan;\n\n    // We simplify label treatment if the range is less than the max label count.\n    // This is because we don't need to add extra grid columns for necessary width.\n    const hasSmallRange = max - min <= MAX_LABEL_COUNT;\n\n    if (hasSmallRange) {\n      return {\n        min: 1,\n        max: (max - min) * 2 - 1,\n        posStart: (index - min) * 2,\n        posEnd: (index - min) * 2,\n      };\n    }\n    const roundedHalfCol = Math.round(colSpan / 2);\n\n    return {\n      min: colSpan * 2 + roundedHalfCol,\n      max: (max - min - colSpan) * 2 - roundedHalfCol + 1,\n      // add one to center the label\n      posStart: (positionStart - min) * 2 + 1 + roundedHalfCol,\n      posEnd: (positionEnd - min) * 2 - roundedHalfCol,\n    };\n  }\n\n  return (\n    <>\n      <div\n        role=\"list\"\n        aria-hidden={!valueFormatter && !referenceValues ? 'true' : undefined}\n        className={clsx(styles.labels, {\n          [styles['labels-noref']]: getVisibleReferenceValues().length === 0,\n        })}\n        style={{\n          [customCssProps.sliderLabelCount]: getVisibleReferenceValues().length === 0 ? 2 : (max - min) * 2,\n        }}\n        id={!ariaDescription ? labelsId : undefined}\n      >\n        <span\n          role=\"listitem\"\n          className={clsx(styles.label, styles['labels-min'])}\n          style={{\n            [customCssProps.sliderMinEnd]: getLabelPosition(0).min,\n          }}\n        >\n          {valueFormatter ? valueFormatter(min) : min}\n        </span>\n        {getVisibleReferenceValues().map(step => {\n          return (\n            <span\n              role=\"listitem\"\n              key={step}\n              style={{\n                [customCssProps.sliderReferenceColumn]: getLabelPosition(step).posStart,\n                [customCssProps.sliderNextReferenceColumn]: getLabelPosition(step).posEnd,\n              }}\n              className={clsx(styles.label, styles['labels-reference'])}\n            >\n              {valueFormatter ? valueFormatter(step) : step}\n            </span>\n          );\n        })}\n        <span\n          role=\"listitem\"\n          className={clsx(styles.label, styles['labels-max'])}\n          style={{\n            [customCssProps.sliderMaxStart]: !referenceValues ? 2 : getLabelPosition(0).max,\n          }}\n        >\n          {valueFormatter ? valueFormatter(max) : max}\n        </span>\n      </div>\n      {ariaDescription && (\n        <div className={clsx(styles['labels-aria-description'])} id={labelsId}>\n          {ariaDescription}\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/lib/internal/template/slider/styles.css.js

@@ -0,0 +1,28 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_pcgz5_stdm1_103",
+  "slider": "awsui_slider_pcgz5_stdm1_143",
+  "slider-track": "awsui_slider-track_pcgz5_stdm1_147",
+  "slider-range": "awsui_slider-range_pcgz5_stdm1_147",
+  "disabled": "awsui_disabled_pcgz5_stdm1_162",
+  "error": "awsui_error_pcgz5_stdm1_171",
+  "active": "awsui_active_pcgz5_stdm1_174",
+  "error-active": "awsui_error-active_pcgz5_stdm1_177",
+  "labels": "awsui_labels_pcgz5_stdm1_184",
+  "labels-noref": "awsui_labels-noref_pcgz5_stdm1_190",
+  "labels-reference": "awsui_labels-reference_pcgz5_stdm1_193",
+  "labels-min": "awsui_labels-min_pcgz5_stdm1_200",
+  "labels-max": "awsui_labels-max_pcgz5_stdm1_206",
+  "labels-aria-description": "awsui_labels-aria-description_pcgz5_stdm1_214",
+  "ticks": "awsui_ticks_pcgz5_stdm1_232",
+  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_stdm1_238",
+  "tick": "awsui_tick_pcgz5_stdm1_232",
+  "middle": "awsui_middle_pcgz5_stdm1_253",
+  "filled": "awsui_filled_pcgz5_stdm1_256",
+  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_stdm1_272",
+  "thumb": "awsui_thumb_pcgz5_stdm1_280",
+  "min": "awsui_min_pcgz5_stdm1_295",
+  "max": "awsui_max_pcgz5_stdm1_298"
+};
+