@hero-design/rn 8.82.2-alpha.2 → 8.83.0

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1460,6 +1460,214 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant filter and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant filter and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ece8ef",
+        "borderColor": "transparent",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Chip renders correctly with variant outlined and selected false 1`] = `
 <View
   style={
@@ -1685,3 +1893,229 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
   />
 </View>
 `;
+
+exports[`Chip renders correctly with variant selection and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant selection and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Cover my bills
+    </Text>
+    <View
+      marginLeft="small"
+      style={
+        [
+          {
+            "marginLeft": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="cancel"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            [
+              {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="selected-chip-icon-cancel"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Chip/__tests__/index.spec.tsx

@@ -87,6 +87,10 @@ describe('Chip', () => {
     ${'filled'}           | ${false}
     ${'outlined'}         | ${true}
     ${'outlined'}         | ${false}
+    ${'filter'}           | ${true}
+    ${'filter'}           | ${false}
+    ${'selection'}        | ${true}
+    ${'selection'}        | ${false}
     ${'compact'}          | ${true}
     ${'compact'}          | ${false}
     ${'compact-outlined'} | ${true}

package/src/components/Chip/index.tsx

@@ -4,6 +4,7 @@ import Box from '../Box';
 import { IconName } from '../Icon';
 import Typography from '../Typography';
 import { StyledChipIcon, StyledChipWrapper } from './StyledChip';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ChipProps extends ViewProps {
   /**
@@ -11,9 +12,15 @@ export interface ChipProps extends ViewProps {
    */
   label: string | ReactNode;
   /**
-   * Variant of the chip.
+   * Variant of the chip. `outlined` and `filled` are deprecated.
    */
-  variant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
+  variant?:
+    | 'selection'
+    | 'filter'
+    | 'compact'
+    | 'compact-outlined'
+    | 'outlined'
+    | 'filled';
   /**
    * Whether the chip is selected.
    */
@@ -40,17 +47,37 @@ const getChipLabel = (label: string | ReactNode) => {
   return label;
 };
 
+const getChipVariant = (variant: ChipProps['variant'] = 'selection') => {
+  switch (variant) {
+    case 'selection':
+    case 'filter':
+    case 'compact':
+    case 'compact-outlined':
+      return variant;
+    case 'outlined':
+      return 'selection';
+    case 'filled':
+      return 'filter';
+  }
+};
+
 const Chip = ({
   label,
-  variant = 'outlined',
+  variant = 'selection',
   selected = false,
   icon,
   onPress,
   showSelectedIcon = true,
   ...otherProps
 }: ChipProps) => {
+  useDeprecation(
+    'Chip variant `outlined` and `filled` are deprecated.',
+    variant === 'outlined' || variant === 'filled'
+  );
+  const renamedVariant = getChipVariant(variant);
+
   const shouldShowSelectedIcon =
-    (variant === 'outlined' || variant === 'compact-outlined') &&
+    (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') &&
     selected &&
     showSelectedIcon;
 
@@ -59,7 +86,7 @@ const Chip = ({
   return (
     <StyledChipWrapper
       onPress={onPress}
-      themeVariant={variant}
+      themeVariant={renamedVariant}
       themeSelected={selected}
       {...otherProps}
     >

package/src/components/Slider/RangeSlider.tsx

@@ -0,0 +1,187 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
+
+import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { StyledMarker } from './StyledRangeSlider';
+
+export type SliderRangeValue = {
+  start: number;
+  end: number;
+};
+
+export interface RangeSliderProps {
+  /**
+   * Minimum value of the slider.
+   */
+  minimumValue: number;
+  /**
+   * Maximum value of the slider.
+   */
+  maximumValue: number;
+  /**
+   * Step value of the slider.
+   * The value should be between 1 and (maximumValue - minimumValue).
+   * Defaults to 1.
+   */
+  step?: number;
+  /**
+   * Range value of the slider.
+   * Defaults to minimumValue.
+   */
+  value?: SliderRangeValue;
+  /**
+   * Whether the two markers should be allowed to overlap.
+   * Defaults to false.
+   */
+  allowOverlap?: boolean;
+  /**
+   * Callback continuously called while the user is dragging the slider.
+   */
+  onValueChange?: (value: SliderRangeValue) => void;
+  /**
+   * Callback that is called when the user picks up the slider.
+   * The initial value is passed as an argument to the callback handler.
+   */
+  onSlidingStart?: () => void;
+  /**
+   * Callback that is called when the user releases the slider, regardless if the value has changed.
+   * The current value is passed as an argument to the callback handler.
+   */
+  onSlidingComplete?: (value: SliderRangeValue) => void;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Slider = ({
+  minimumValue,
+  maximumValue,
+  step = 1,
+  value,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  disabled = false,
+  style,
+  testID,
+  allowOverlap = false,
+}: RangeSliderProps) => {
+  const theme = useTheme();
+  const handleTwoWaySliderChange = React.useCallback(
+    (values: number[]) => {
+      if (onValueChange) {
+        onValueChange({ start: values[0], end: values[1] });
+      }
+    },
+    [onValueChange]
+  );
+  const [layoutSize, setLayoutSize] = useState({ width: 0, height: 0 });
+  const nativeValue = useMemo(() => {
+    return [value?.start ?? minimumValue, value?.end ?? maximumValue];
+  }, [value?.start, value?.end, minimumValue, maximumValue]);
+
+  const {
+    trackBackground,
+    disabledTrackBackground,
+    thumbTint,
+    disabledThumbTint,
+  } = theme.__hd__.slider.colors;
+
+  const { trackHeight } = theme.__hd__.slider.sizes;
+
+  // Define styles for disabled and enabled states
+  const disabledStyles = {
+    track: {
+      backgroundColor: disabledTrackBackground,
+      height: trackHeight,
+    },
+    selected: {
+      backgroundColor: disabledThumbTint,
+    },
+  };
+
+  const enabledStyles = {
+    track: {
+      backgroundColor: trackBackground,
+      height: trackHeight,
+    },
+    selected: {
+      backgroundColor: thumbTint,
+    },
+  };
+
+  // Use styles based on the `disabled` state
+  const trackStyle = disabled ? disabledStyles.track : enabledStyles.track;
+  const selectedStyle = disabled
+    ? disabledStyles.selected
+    : enabledStyles.selected;
+
+  const handleOnValueChangeStart = useCallback(() => {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+
+  const handleOnValueChangeFinish = useCallback(
+    (values: number[]) => {
+      if (onSlidingComplete) {
+        onSlidingComplete({
+          start: values[0],
+          end: values[1],
+        });
+      }
+    },
+    [onSlidingComplete]
+  );
+
+  const onLayoutCallback = useCallback((event: LayoutChangeEvent) => {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height,
+    });
+  }, []);
+
+  const CustomMarker = useMemo(() => {
+    return () => <StyledMarker themeDisabled={disabled} />;
+  }, [disabled]);
+
+  return (
+    <View
+      onLayout={onLayoutCallback}
+      style={style}
+      testID={testID}
+      accessibilityState={{
+        disabled,
+      }}
+    >
+      <MultiSlider
+        values={nativeValue}
+        onValuesChange={handleTwoWaySliderChange}
+        onValuesChangeStart={handleOnValueChangeStart}
+        onValuesChangeFinish={handleOnValueChangeFinish}
+        sliderLength={layoutSize.width}
+        min={minimumValue}
+        max={maximumValue}
+        step={step}
+        enabledOne={!disabled}
+        enabledTwo={!disabled}
+        allowOverlap={allowOverlap}
+        trackStyle={trackStyle}
+        selectedStyle={selectedStyle}
+        customMarker={CustomMarker}
+      />
+    </View>
+  );
+};
+
+export default Slider;