@enact/limestone 1.3.0

package/ContextualPopupDecorator/ContextualPopup.module.css

@@ -0,0 +1,270 @@
+.contextualPopup {
+  font-weight: var(--primitive-font-weight-regular);
+  font-size: var(--primitive-font-size-60);
+  font-style: normal;
+  font-family: "Limestone";
+  line-height: 1.4em;
+  position: absolute;
+}
+:global(.enact-locale-non-latin) .contextualPopup {
+  font-family: "Limestone";
+}
+:global(.enact-locale-non-latin) .contextualPopup {
+  font-family: "Limestone";
+  font-weight: var(--primitive-font-weight-light);
+  font-size: 1.125rem;
+  font-style: normal;
+}
+:global(.enact-locale-km) .contextualPopup {
+  line-height: 1.7em;
+}
+:global(.enact-locale-si) .contextualPopup {
+  line-height: 1.7em;
+}
+:global(.enact-locale-th) .contextualPopup {
+  line-height: 1.7em;
+}
+:global(.enact-locale-vi) .contextualPopup {
+  line-height: 1.7em;
+}
+.contextualPopup a:link {
+  color: inherit;
+  text-decoration: none;
+}
+.contextualPopup a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+.contextualPopup a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+.contextualPopup a:active {
+  color: inherit;
+  text-decoration: none;
+}
+.contextualPopup .container {
+  position: absolute;
+  min-height: 4rem;
+  min-width: 4rem;
+  padding: 0.75rem 0;
+  background-clip: padding-box;
+  box-sizing: border-box;
+}
+.contextualPopup .container.none,
+.contextualPopup .container.center {
+  /* Needed to prevent global class being added in the DOM */
+}
+.contextualPopup .container.above.overlap {
+  margin-top: 0.75rem;
+}
+.contextualPopup .container.above.small {
+  margin-top: -0.375rem;
+}
+.contextualPopup .container.above.large {
+  margin-top: -0.75rem;
+}
+.contextualPopup .container.below.overlap {
+  margin-top: -0.75rem;
+}
+.contextualPopup .container.below.small {
+  margin-top: 0.375rem;
+}
+.contextualPopup .container.below.large {
+  margin-top: 0.75rem;
+}
+.contextualPopup .container.right.top.overlap,
+.contextualPopup .container.right.middle.overlap,
+.contextualPopup .container.right.bottom.overlap {
+  margin-left: -0.75rem;
+}
+.contextualPopup .container.right.top.small,
+.contextualPopup .container.right.middle.small,
+.contextualPopup .container.right.bottom.small {
+  margin-left: 0.375rem;
+}
+.contextualPopup .container.right.top.large,
+.contextualPopup .container.right.middle.large,
+.contextualPopup .container.right.bottom.large {
+  margin-left: 0.75rem;
+}
+.contextualPopup .container.left.top.overlap,
+.contextualPopup .container.left.middle.overlap,
+.contextualPopup .container.left.bottom.overlap {
+  margin-left: 0.75rem;
+}
+.contextualPopup .container.left.top.small,
+.contextualPopup .container.left.middle.small,
+.contextualPopup .container.left.bottom.small {
+  margin-left: -0.375rem;
+}
+.contextualPopup .container.left.top.large,
+.contextualPopup .container.left.middle.large,
+.contextualPopup .container.left.bottom.large {
+  margin-left: -0.75rem;
+}
+.contextualPopup .container.fixedSize {
+  overflow: hidden;
+}
+:global(.enact-locale-right-to-left) .contextualPopup .container {
+  direction: rtl;
+}
+.contextualPopup .arrow {
+  position: absolute;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.contextualPopup .arrow.above {
+  transform: rotate(180deg);
+}
+.contextualPopup .arrow.left {
+  transform: rotate(90deg);
+}
+.contextualPopup .arrow.right {
+  transform: rotate(-90deg);
+}
+.contextualPopup:global(.neutral) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) .contextualPopup:global(.neutral) .container {
+  box-shadow: none;
+}
+.contextualPopup:global(.neutral) .arrow {
+  stroke: var(--semantic-color-stroke-overlay-default);
+  stroke-width: 0.021rem;
+}
+.contextualPopup:global(.neutral) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+.contextualPopup:global(.neutral) .outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .container {
+  box-shadow: none;
+}
+:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow {
+  stroke: #7c848b;
+  stroke-width: 0.021rem;
+}
+:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+:global(.enact-a11y-high-contrast) .contextualPopup:global(.neutral):global(.highContrast) .outline {
+  outline-color: #7c848b;
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+.contextualPopup:global(.light) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) .contextualPopup:global(.light) .container {
+  box-shadow: none;
+}
+.contextualPopup:global(.light) .arrow {
+  stroke: var(--semantic-color-stroke-overlay-default);
+  stroke-width: 0.021rem;
+}
+.contextualPopup:global(.light) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+.contextualPopup:global(.light) .outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+.contextualPopup:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.contextualPopup:global(.game) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) .contextualPopup:global(.game) .container {
+  box-shadow: none;
+}
+.contextualPopup:global(.game) .arrow {
+  stroke: var(--semantic-color-stroke-overlay-default);
+  stroke-width: 0.021rem;
+}
+.contextualPopup:global(.game) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+.contextualPopup:global(.game) .outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.green) .contextualPopup:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .contextualPopup:global(.game) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) :global(.green) .contextualPopup:global(.game) .container {
+  box-shadow: none;
+}
+:global(.green) .contextualPopup:global(.game) .arrow {
+  stroke: var(--semantic-color-stroke-overlay-default);
+  stroke-width: 0.021rem;
+}
+:global(.green) .contextualPopup:global(.game) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+:global(.green) .contextualPopup:global(.game) .outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.orange) .contextualPopup:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .contextualPopup:global(.game) .container {
+  background-color: var(--semantic-color-surface-context-group);
+  border: 1px solid var(--semantic-color-stroke-overlay-default);
+  border-radius: var(--semantic-radius-container);
+  box-shadow: 0rem 0.75rem 1rem 0rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+}
+:global(.noAnimation) :global(.orange) .contextualPopup:global(.game) .container {
+  box-shadow: none;
+}
+:global(.orange) .contextualPopup:global(.game) .arrow {
+  stroke: var(--semantic-color-stroke-overlay-default);
+  stroke-width: 0.021rem;
+}
+:global(.orange) .contextualPopup:global(.game) .arrow .arrowFill {
+  fill: var(--semantic-color-surface-context-group);
+}
+:global(.orange) .contextualPopup:global(.game) .outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}

package/ContextualPopupDecorator/ContextualPopupDecorator.d.ts

@@ -0,0 +1,182 @@
+// Type definitions for limestone/ContextualPopupDecorator
+
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface ContextualPopupDecoratorConfig extends Object {
+  /**
+   * `ContextualPopup`  without the arrow.
+   */
+  noArrow?: boolean;
+  /**
+   * Disables passing the  `skin`  prop to the wrapped component.
+   */
+  noSkin?: boolean;
+  /**
+ * The prop in which to pass the value of  `open`  state of ContextualPopupDecorator to the
+wrapped component.
+ */
+  openProp?: string;
+}
+export interface ContextualPopupDecoratorProps {
+  /**
+ * The component rendered within the
+  .
+ */
+  popupComponent: React.ComponentType;
+  /**
+   * Limits the range of voice control to the popup.
+   */
+  "data-webos-voice-exclusive"?: boolean;
+  /**
+   * Direction of popup with respect to the wrapped component.
+   */
+  direction?:
+    | "above"
+    | "above center"
+    | "above left"
+    | "above right"
+    | "below"
+    | "below center"
+    | "below left"
+    | "below right"
+    | "left middle"
+    | "left top"
+    | "left bottom"
+    | "right middle"
+    | "right top"
+    | "right bottom";
+  /**
+ * Disables closing the popup when the user presses the cancel/back (e.g.  `ESC` ) key or taps outside the
+popup.
+ */
+  noAutoDismiss?: boolean;
+  /**
+   * Offset from the activator to apply to the position of the popup.
+   *
+   * Only applies when  `noArrow`  is  `true` .
+   */
+  offset?: "none" | "overlap" | "small" | "large";
+  /**
+ * Called when the user has attempted to close the popup.
+ * 
+ * This may occur either when the close button is clicked or when spotlight focus
+moves outside the boundary of the popup. Setting  `spotlightRestrict`  to  `'self-only'` 
+will prevent Spotlight focus from leaving the popup.
+ */
+  onClose?: Function;
+  /**
+   * Called when the popup is opened.
+   */
+  onOpen?: Function;
+  /**
+   * Displays the contextual popup.
+   */
+  open?: boolean;
+  /**
+ * CSS class name to pass to the
+  .
+ * 
+ * This is commonly used to set width and height of the popup.
+ */
+  popupClassName?: string;
+  /**
+   * An object containing properties to be passed to popup component.
+   */
+  popupProps?: object;
+  /**
+ * The container ID to use with Spotlight.
+ * 
+ * The spotlight container for the popup isn't created until it is open. To configure
+the container using  `Spotlight.set()` , handle the  `onOpen`  event which is fired after
+the popup has been created and opened.
+ */
+  popupSpotlightId?: string;
+  /**
+ * The current skin for this component.
+ * 
+ * When  `noSkin`  is set on the config object,  `skin`  will only be applied to the
+   and not
+to the popup's activator component.
+ */
+  skin?: string;
+  /**
+ * Restricts or prioritizes spotlight navigation.
+ * 
+ * Allowed values are:
+ * *  `'none'`  - Spotlight can move freely within and beyond the popup
+ * *  `'self-first'`  - Spotlight should prefer components within the popup over
+components beyond the popup, or
+ * *  `'self-only'`  - Spotlight can only be set within the popup
+ */
+  spotlightRestrict?: "none" | "self-first" | "self-only";
+}
+export function ContextualPopupDecorator<P>(
+  config: ContextualPopupDecoratorConfig,
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ContextualPopupDecoratorProps>;
+
+export function ContextualPopupDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ContextualPopupDecoratorProps>;
+
+export interface ContextualPopupProps {
+  /**
+   * The contents of the popup.
+   */
+  children: React.ReactNode;
+  /**
+   * Style object for arrow position.
+   */
+  arrowPosition?: object;
+  /**
+   * Style object for container position.
+   */
+  containerPosition?: object;
+  /**
+   * Called with the reference to the container node.
+   */
+  containerRef?: object | Function;
+  /**
+   * Direction of ContextualPopup.
+   */
+  direction?:
+    | "above"
+    | "above center"
+    | "above left"
+    | "above right"
+    | "below"
+    | "below center"
+    | "below left"
+    | "below right"
+    | "left middle"
+    | "left top"
+    | "left bottom"
+    | "right middle"
+    | "right top"
+    | "right bottom";
+  /**
+   * Offset from the activator to apply to the position of the popup.
+   */
+  offset?: "none" | "overlap" | "small" | "large";
+  /**
+   * Shows the arrow.
+   */
+  showArrow?: boolean;
+}
+/**
+ * A popup component used by
+   to
+wrap its   .
+ * 
+ * `ContextualPopup`  is usually not used directly but is made available for unique application use
+cases.
+ */
+
+export class ContextualPopup extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ContextualPopupProps>
+> {}
+
+export default ContextualPopupDecorator;