@cambly/syntax-core 20.4.0 → 20.6.0

package/dist/__chunks/ODMYZNLL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray700,\n  ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  on,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the component renders on a light or dark background. Changes the color of the text\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n    event,\n  ) => {\n    if (disabled || onClick == null) return;\n    if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n      onClick(event);\n    }\n  };\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (on === \"darkBackground\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\n  };\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color={textColor}>\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles.selectBoxCambio, {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n            [styles.transparentInputError]:\n              errorText && on === \"darkBackground\",\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            [styles.transparent]: on === \"darkBackground\",\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={24}\n          >\n            <path\n              fill={getArrowIconColor()}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_13v7l_1\",\"opacityOverlay\":\"_opacityOverlay_13v7l_7\",\"selectWrapper\":\"_selectWrapper_13v7l_11\",\"selectBox\":\"_selectBox_13v7l_16\",\"selectBoxCambio\":\"_selectBoxCambio_13v7l_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_13v7l_38\",\"unselected\":\"_unselected_13v7l_43\",\"selected\":\"_selected_13v7l_47\",\"transparent\":\"_transparent_13v7l_51\",\"arrowIcon\":\"_arrowIcon_13v7l_63\",\"selectErrorCambio\":\"_selectErrorCambio_13v7l_77\",\"selectColorwhite\":\"_selectColorwhite_13v7l_83\",\"transparentInputError\":\"_transparentInputError_13v7l_89\",\"transparenInputError\":\"_transparenInputError_13v7l_94\"}"]}