WRO-745: Clean up Spotlight document (#3069)

* WRO-745: remove redundant api list on Spotlight document
Enact-DCO-1.0-Signed-off-by: Jeonghee Ahn (jeonghee27.ahn@lge.com)

* add default prop value for restrict

* apply review

* minor changes of doc
Enact-DCO-1.0-Signed-off-by: Seungho Park <seunghoh.park@lge.com>

* Apply review

* remove space

* fix mistake

Co-authored-by: seunghoh <seunghoh.park@lge.com>

packages/spotlight/SpotlightContainerDecorator/SpotlightContainerDecorator.js

@@ -61,8 +61,10 @@ const defaultConfig = {
 
 	/**
 	 * The selector for the default spottable element within the container.
+	 * When an array of selectors is provided, the first selector that successfully matches a
+	 * node is used.
 	 *
-	 * @type {String}
+	 * @type {String|String[]}
 	 * @default '.spottable-default'
 	 * @memberof spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.defaultConfig
 	 * @public
@@ -99,7 +101,23 @@ const defaultConfig = {
 	 * @memberof spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.defaultConfig
 	 * @public
 	 */
-	preserveId: false
+	preserveId: false,
+
+	/**
+	 * Restricts or prioritizes navigation when focus attempts to leave the container. It
+	 * can be either 'none', 'self-first', or 'self-only'. Specifying 'self-first' indicates that
+	 * elements within the container will have a higher likelihood to be chosen as the next
+	 * navigable element. Specifying 'self-only' indicates that elements in other containers
+	 * cannot be navigated to by using 5-way navigation - however, elements in other containers
+	 * can still receive focus by calling `Spotlight.focus(elem)` explicitly. Specifying 'none'
+	 * indicates there should be no restrictions when 5-way navigating the container.
+	 *
+	 * @type {String}
+	 * @default 'self-first'
+	 * @memberof spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.defaultConfig
+	 * @public
+	 */
+	restrict: PropTypes.oneOf(['none', 'self-first', 'self-only'])
 };
 
 /**
@@ -182,6 +200,8 @@ const SpotlightContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * Used to identify this component within the Spotlight system.
 		 *
 		 * If the value is `null`, an id will be generated.
+		 * To keep the container information for restoring focus, it is required to specify
+		 * a unique identifier.
 		 *
 		 * @type {String}
 		 * @public
@@ -191,6 +211,10 @@ const SpotlightContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		/**
 		 * Whether or not the container is in muted mode.
 		 *
+		 * In muted mode, `:focus` CSS styles will not be applied to the
+		 * Spottable controls giving them the appearance of not having focus
+		 * while they still have focus.
+		 *
 		 * @type {Boolean}
 		 * @default false
 		 * @public
@@ -207,6 +231,7 @@ const SpotlightContainerDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * indicates there should be no restrictions when 5-way navigating the container.
 		 *
 		 * @type {String}
+		 * @default 'self-first'
 		 * @public
 		 */
 		spotlightRestrict: PropTypes.oneOf(['none', 'self-first', 'self-only'])

packages/spotlight/docs/index.md

@@ -215,12 +215,12 @@ matches `selector`. This method has no effect if Spotlight is paused.
 Moves focus in the specified direction of `selector`. If `selector` is not specified,
 Spotlight will move in the given direction of the currently spotted control.
 
-## HOC Parameters And Properties
+## HOC Configuration Parameters And Properties
 
-##### Spotlight HOC Parameters
+##### Spotlight HOC Configuration Parameters
 
-Parameters in the form of an object can be passed as an initial argument to a HOC when creating a
-Spotlight control. In these cases, the HOC parameter should remain static and unchanged in the
+Configuration parameters in the form of an object can be passed as an initial argument to a HOC when creating a
+Spotlight control. In these cases, the HOC configuration parameters should remain static and unchanged in the
 life-cycle of the control.
 
 ```js
@@ -246,7 +246,9 @@ const App = kind({
 
 ### Spottable
 
-##### Parameters
+For more details and full list of `Spottable` API, see [spotlight/Spottable](../../modules/spotlight/Spottable).
+
+##### Configuration Parameters
 
 `emulateMouse`
 + Type: [boolean]
@@ -269,14 +271,11 @@ May be added to temporarily make a control not spottable.
 
 A callback function to override default spotlight behavior when exiting the spottable control.
 
-`onSpotlightDisappear`
-+ Type: [function]
-
-A callback function to be called when the component is removed while retaining focus.
-
 ### Container
 
-##### Parameters
+For more details and full list of `Container` API, see [spotlight/SpotlightContainerDecorator](../../modules/spotlight/SpotlightContainerDecorator).
+
+##### Configuration Parameters
 
 `defaultElement`
 + Type: [string|string[]]
@@ -306,22 +305,6 @@ Whether the container will preserve the id when it unmounts.
 
 Specifies the container id. If the value is `null`, an id will be generated.
 
-`spotlightDisabled`
-+ Type: [boolean]
-+ Default: `false`
-
-When `true`, controls in the container cannot be navigated.
-
-`spotlightMuted`
-+ Type: [boolean]
-+ Default: `false`
-
-Whether or not the container is in muted mode. When in muted mode, Spottable controls within the container
-can still gain focus, however their `:focus` CSS styles will not be applied, giving them the appearance
-of not having focus. Muting a container is generally done to temporarily disable CSS changes and
-default `onFocus` and `onBlur` events without removing focus from the container itself - which would
-happen if you disabled the container using `spotlightDisabled`.
-
 `spotlightRestrict`
 + Type: [string]
 + Values: [`'none'`, `'self-first'`, or `'self-only'`]