@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/NewForm/FormSelect.js

@@ -1,144 +1,163 @@
-"use strict";
-
-exports.__esModule = true;
-exports.FormSelect = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Label = require("../Form/Label");
-var _FormSelectArrow = require("./FormSelectArrow");
-var _FormSelectContent = require("./FormSelectContent");
-var _Input = require("../Form/Input.styles");
-var _Form = require("../Form");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage"],
-  _excluded2 = ["options"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var MAX_SUGGESTED_OPTIONS = 15;
-var isDev = process.env.NODE_ENV !== 'production';
-var defaultStyles = _extends({}, _Input.baseControlStyle, {
-  paddingLeft: 3,
-  paddingRight: 40,
-  // 40px for the icon
-  py: 0,
-  appearance: 'none',
-  minHeight: '36px',
-  lineHeight: '36px'
-});
-var renderOption = function renderOption(label, value) {
-  return (0, _jsxRuntime.jsx)("option", {
-    value: value,
-    children: label
-  }, value);
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '../Form/Label';
+
+/**
+ * Internal dependencies
+ */
+import { FormSelectArrow } from './FormSelectArrow';
+import { FormSelectContent } from './FormSelectContent';
+import { baseControlStyle } from '../Form/Input.styles';
+import { Validation } from '../Form';
+
+const MAX_SUGGESTED_OPTIONS = 15;
+const isDev = process.env.NODE_ENV !== 'production';
+
+const defaultStyles = {
+	...baseControlStyle,
+	paddingLeft: 3,
+	paddingRight: 40, // 40px for the icon
+	py: 0,
+	appearance: 'none',
+	minHeight: '36px',
+	lineHeight: '36px',
 };
-var renderGroup = function renderGroup(groupLabel, groupOptions) {
-  return (0, _jsxRuntime.jsx)("optgroup", {
-    label: groupLabel,
-    children: groupOptions.map(function (_ref) {
-      var label = _ref.label,
-        value = _ref.value;
-      return renderOption(label, value);
-    })
-  }, groupLabel);
+
+const renderOption = ( label, value ) => {
+	return (
+		<option key={ value } value={ value }>
+			{ label }
+		</option>
+	);
 };
-var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
-  var isInline = _ref2.isInline,
-    placeholder = _ref2.placeholder,
-    _ref2$forLabel = _ref2.forLabel,
-    forLabel = _ref2$forLabel === void 0 ? 'vip-form-select' : _ref2$forLabel,
-    options = _ref2.options,
-    required = _ref2.required,
-    label = _ref2.label,
-    getOptionLabel = _ref2.getOptionLabel,
-    getOptionValue = _ref2.getOptionValue,
-    onChange = _ref2.onChange,
-    hasError = _ref2.hasError,
-    errorMessage = _ref2.errorMessage,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
-    // eslint-disable-next-line no-console
-    console.info('For 16 or more items, consider using another component with a typeahead capability.');
-  }
-  var getAllOptions = (0, _react.useMemo)(function () {
-    return [].concat(options.filter(function (option) {
-      return !option.options;
-    }), options.filter(function (option) {
-      return option.options;
-    }).map(function (option) {
-      return option.options;
-    })).reduce(function (a, b) {
-      return a.concat(b);
-    }, []);
-  }, [options]);
-  var optionLabel = (0, _react.useCallback)(function (option) {
-    return getOptionLabel ? getOptionLabel(option) : option.label;
-  }, [getOptionLabel]);
-  var optionValue = (0, _react.useCallback)(function (option) {
-    return getOptionValue ? getOptionValue(option) : option.value;
-  }, [getOptionValue]);
-  var getOptionByValue = (0, _react.useCallback)(function (value) {
-    return getAllOptions.find(function (option) {
-      return "" + optionValue(option) === "" + value;
-    });
-  }, [getAllOptions, optionValue]);
-  var onValueChange = (0, _react.useCallback)(function (event) {
-    return onChange ? onChange(getOptionByValue(event.target.value), event) : getOptionByValue(event.target.value);
-  }, [onChange, getOptionByValue]);
-  var SelectLabel = function SelectLabel() {
-    return (0, _jsxRuntime.jsx)(_Label.Label, {
-      required: required,
-      htmlFor: forLabel,
-      children: label
-    });
-  };
-  var inlineLabel = !!(isInline && label);
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
-      isInline: inlineLabel,
-      label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
-      children: [(0, _jsxRuntime.jsxs)("select", _extends({
-        onChange: onValueChange,
-        ref: forwardRef,
-        sx: defaultStyles,
-        required: required,
-        "aria-required": required,
-        "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
-        id: forLabel
-      }, props, {
-        children: [placeholder && (0, _jsxRuntime.jsx)("option", {
-          children: placeholder
-        }), options.map(function (_ref3) {
-          var groupOptions = _ref3.options,
-            option = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-          return groupOptions ? renderGroup(optionLabel(option), groupOptions) : renderOption(optionLabel(option), optionValue(option));
-        })]
-      })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
-    }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
-      isValid: false,
-      describedId: forLabel,
-      children: errorMessage
-    })]
-  });
-});
-exports.FormSelect = FormSelect;
+
+const renderGroup = ( groupLabel, groupOptions ) => {
+	return (
+		<optgroup key={ groupLabel } label={ groupLabel }>
+			{ groupOptions.map( ( { label, value } ) => renderOption( label, value ) ) }
+		</optgroup>
+	);
+};
+
+const FormSelect = React.forwardRef(
+	(
+		{
+			isInline,
+			placeholder,
+			forLabel = 'vip-form-select',
+			options,
+			required,
+			label,
+			getOptionLabel,
+			getOptionValue,
+			onChange,
+			hasError,
+			errorMessage,
+			...props
+		},
+		forwardRef
+	) => {
+		if ( isDev && options.length > MAX_SUGGESTED_OPTIONS ) {
+			// eslint-disable-next-line no-console
+			console.info(
+				'For 16 or more items, consider using another component with a typeahead capability.'
+			);
+		}
+
+		const getAllOptions = useMemo(
+			() =>
+				[
+					...options.filter( option => ! option.options ),
+					...options.filter( option => option.options ).map( option => option.options ),
+				].reduce( ( a, b ) => a.concat( b ), [] ),
+			[ options ]
+		);
+
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
+		);
+
+		const optionValue = useCallback(
+			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
+			[ getOptionValue ]
+		);
+
+		const getOptionByValue = useCallback(
+			value => getAllOptions.find( option => `${ optionValue( option ) }` === `${ value }` ),
+			[ getAllOptions, optionValue ]
+		);
+
+		const onValueChange = useCallback(
+			event =>
+				onChange
+					? onChange( getOptionByValue( event.target.value ), event )
+					: getOptionByValue( event.target.value ),
+			[ onChange, getOptionByValue ]
+		);
+
+		const SelectLabel = () => (
+			<Label required={ required } htmlFor={ forLabel }>
+				{ label }
+			</Label>
+		);
+
+		const inlineLabel = !! ( isInline && label );
+
+		return (
+			<>
+				{ label && ! isInline && <SelectLabel /> }
+
+				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
+					<select
+						onChange={ onValueChange }
+						ref={ forwardRef }
+						sx={ defaultStyles }
+						required={ required }
+						aria-required={ required }
+						aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
+						id={ forLabel }
+						{ ...props }
+					>
+						{ placeholder && <option>{ placeholder }</option> }
+						{ options.map( ( { options: groupOptions, ...option } ) =>
+							groupOptions
+								? renderGroup( optionLabel( option ), groupOptions )
+								: renderOption( optionLabel( option ), optionValue( option ) )
+						) }
+					</select>
+					<FormSelectArrow />
+				</FormSelectContent>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ forLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</>
+		);
+	}
+);
+
 FormSelect.propTypes = {
-  errorMessage: _propTypes["default"].string,
-  forLabel: _propTypes["default"].string,
-  getOptionLabel: _propTypes["default"].func,
-  getOptionValue: _propTypes["default"].func,
-  hasError: _propTypes["default"].bool,
-  isInline: _propTypes["default"].bool,
-  label: _propTypes["default"].string,
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
-  placeholder: _propTypes["default"].string,
-  required: _propTypes["default"].bool
+	errorMessage: PropTypes.string,
+	forLabel: PropTypes.string,
+	getOptionLabel: PropTypes.func,
+	getOptionValue: PropTypes.func,
+	hasError: PropTypes.bool,
+	isInline: PropTypes.bool,
+	label: PropTypes.string,
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	placeholder: PropTypes.string,
+	required: PropTypes.bool,
 };
-FormSelect.displayName = 'FormSelect';
+
+FormSelect.displayName = 'FormSelect';
+
+export { FormSelect };

package/build/system/NewForm/FormSelect.stories.d.ts

@@ -0,0 +1,137 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace placeholder {
+            namespace type {
+                let name: string;
+                let required: boolean;
+            }
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+        }
+        namespace label {
+            export namespace type_2 {
+                let name_1: string;
+                export { name_1 as name };
+                let required_1: boolean;
+                export { required_1 as required };
+            }
+            export { type_2 as type };
+            export namespace control_1 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export function Default({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace Default {
+    namespace args {
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let required_2: boolean;
+        export { required_2 as required };
+        export { options };
+    }
+}
+export function WithErrors({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace WithErrors {
+    export namespace args_1 {
+        let placeholder_2: string;
+        export { placeholder_2 as placeholder };
+        let required_3: boolean;
+        export { required_3 as required };
+        export let hasError: boolean;
+        export let errorMessage: string;
+        export { options };
+    }
+    export { args_1 as args };
+}
+export function WithGroup({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace WithGroup {
+    export namespace args_2 {
+        let label_1: string;
+        export { label_1 as label };
+        let options_1: ({
+            value: string;
+            label: string;
+        } | {
+            label: string;
+            options: {
+                value: string;
+                label: string;
+            }[];
+        })[];
+        export { options_1 as options };
+    }
+    export { args_2 as args };
+}
+export function IsInline({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace IsInline {
+    export namespace args_3 {
+        let label_2: string;
+        export { label_2 as label };
+        export let isInline: boolean;
+        export let width: string;
+        export { groupedOptions as options };
+    }
+    export { args_3 as args };
+}
+export function WithOptionLabelAndValue({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace WithOptionLabelAndValue {
+    export namespace args_4 {
+        let label_3: string;
+        export { label_3 as label };
+        let width_1: string;
+        export { width_1 as width };
+        let options_2: {
+            name: string;
+            id: string;
+        }[];
+        export { options_2 as options };
+        export function getOptionLabel(option: any): any;
+        export function getOptionValue(option: any): any;
+    }
+    export { args_4 as args };
+}
+export function WithOnChange(): import("react").JSX.Element;
+declare const options: {
+    value: string;
+    label: string;
+}[];
+declare const groupedOptions: {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}[];

package/build/system/NewForm/FormSelect.stories.jsx

@@ -0,0 +1,138 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { useCallback, useState } from 'react';
+import * as Form from '.';
+import { Link } from '../Link';
+
+export default {
+	title: 'Form/Select',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry Chocolate Vanilla Chocolate Vanilla' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+const groupedOptions = [
+	{
+		label: 'Group name',
+		options,
+	},
+	{
+		label: 'Another Group name',
+		options,
+	},
+];
+
+// eslint-disable-next-line react/prop-types
+const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
+	<>
+		<p>
+			This is a simple wrapper at the top of a browser default select component. This component
+			should be used for situations where you have up to <strong>15 options</strong>. If you need to
+			use a auto-complete, searchable solution, please use another component with a typeahead
+			capability.
+		</p>
+
+		<p>
+			This component was heavily inspired by the{ ' ' }
+			<Link
+				href="https://designsystem.digital.gov/components/select/"
+				target="_blank"
+				rel="noreferrer"
+			>
+				{ ' ' }
+				U.S. Web Design System (USWDS) Select component
+			</Link>
+			.
+		</p>
+		<Form.Root>
+			<div sx={ { width } }>
+				<Form.Select forLabel="form-select" label={ label } onChange={ onChange } { ...rest } />
+			</div>
+		</Form.Root>
+	</>
+);
+
+export const Default = DefaultComponent.bind( {} );
+Default.args = {
+	placeholder: '- Select -',
+	required: true,
+	options,
+};
+
+export const WithErrors = DefaultComponent.bind( {} );
+WithErrors.args = {
+	placeholder: '- Select -',
+	required: true,
+	hasError: true,
+	errorMessage: 'This is an error message',
+	options,
+};
+
+export const WithGroup = DefaultComponent.bind( {} );
+
+WithGroup.args = {
+	label: 'Group Label',
+	options: [ ...options, ...groupedOptions ],
+};
+
+export const IsInline = DefaultComponent.bind( {} );
+
+IsInline.args = {
+	label: 'Inline Select',
+	isInline: true,
+	width: '100%',
+	options: groupedOptions,
+};
+
+export const WithOptionLabelAndValue = DefaultComponent.bind( {} );
+
+WithOptionLabelAndValue.args = {
+	label: 'Select with getOptionLabel / getOptionValue',
+	width: '100%',
+	options: options.map( ( { label, value } ) => ( {
+		name: label,
+		id: value,
+	} ) ),
+	getOptionLabel: option => option.name,
+	getOptionValue: option => option.id,
+};
+
+export const WithOnChange = () => {
+	const [ option, setOption ] = useState( null );
+
+	const onChange = useCallback( ( val, event ) =>
+		setOption( { obj: val, eventValue: event.target.value } )
+	);
+
+	const args = {
+		label: 'Select with onChange',
+		placeholder: '- Select -',
+		width: '100%',
+		onChange,
+		options: [ ...options, ...groupedOptions ],
+	};
+
+	return (
+		<>
+			<DefaultComponent onChange={ onChange } { ...args } />
+			{ option && <p>Object to JSON: { JSON.stringify( option.obj ) }</p> }
+			{ option && <p>Original Event Value: { option.eventValue }</p> }
+		</>
+	);
+};

package/build/system/NewForm/FormSelect.test.d.ts

@@ -0,0 +1 @@
+export {};