@itwin/core-react 4.0.0-dev.10 → 4.0.0-dev.11

package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss

@@ -1,89 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../base/base";
-@import "../variables";
-
-.core-number-input-container {
-  position: relative;
-  padding:  0;
-  margin:   0;
-  box-sizing: border-box;
-
-  input {
-    margin:       0;
-    padding-right: 1.5em;
-
-    &.iui-input {
-      padding: $uicore-iui-input-padding;
-    }
-  }
-
-  &.core-number-buttons-for-touch {
-    input {
-      padding-right: 3.5em;
-    }
-  }
-
-  .core-number-input-buttons-container {
-    position: absolute;
-    top:      0;
-    right:    0;
-    width:    20px;
-    height:   100%;
-    padding-top: 1.5px;
-    @include uicore-centered;
-    flex-direction: column;
-
-    .core-number-input-button {
-      font-size: 8px;
-      outline: none;
-      height: 100%;
-      width: 100%;
-      @include uicore-centered;
-      &:hover {
-        color: $buic-foreground-primary-tone;
-        transition-duration: 150ms;
-      }
-      &.core-number-input-button-up {
-        padding-top: 1px;
-      }
-      &.core-number-input-button-down {
-        padding-top: 1px;
-      }
-    }
-
-    &.core-number-buttons-for-touch {
-      width:    3.5em;
-      flex-direction: row-reverse;
-
-      .core-number-input-button {
-        font-size: 1em;
-        &:hover {
-          color: unset;
-          transition-duration: unset;
-        }
-
-        &.core-number-input-button-up {
-          padding-top: 2px;
-        }
-        &.core-number-input-button-down {
-          padding-top: 2px;
-        }
-      }
-    }
-  }
-  &.core-number-input-disabled {
-    .core-number-input-button-up {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-
-    .core-number-input-button-down {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../base/base";
+@import "../variables";
+
+.core-number-input-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  input {
+    margin: 0;
+    padding-right: 1.5em;
+
+    &.iui-input {
+      padding: $uicore-iui-input-padding;
+    }
+  }
+
+  &.core-number-buttons-for-touch {
+    input {
+      padding-right: 3.5em;
+    }
+  }
+
+  .core-number-input-buttons-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    @include uicore-centered;
+    flex-direction: column;
+
+    .core-number-input-button {
+      font-size: 8px;
+      outline: none;
+      height: 100%;
+      width: 100%;
+      @include uicore-centered;
+      &:hover {
+        color: var(--iui-color-text-accent-hover);
+        transition-duration: 150ms;
+      }
+      &.core-number-input-button-up {
+        padding-top: 1px;
+      }
+      &.core-number-input-button-down {
+        padding-top: 1px;
+      }
+    }
+
+    &.core-number-buttons-for-touch {
+      width: 3.5em;
+      flex-direction: row-reverse;
+
+      .core-number-input-button {
+        font-size: 1em;
+
+        &:hover {
+          color: unset;
+          transition-duration: unset;
+        }
+
+        &.core-number-input-button-up {
+          padding-top: 2px;
+        }
+        &.core-number-input-button-down {
+          padding-top: 2px;
+        }
+      }
+    }
+  }
+  &.core-number-input-disabled {
+    .core-number-input-button-up {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    .core-number-input-button-down {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+  }
+}

package/lib/cjs/core-react/inputs/variables.scss

@@ -1,38 +1,38 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/baseline";
-@import "../style/themecolors";
-
-// cspell:ignore unbordered
-
-$uicore-inputs-height: 22px;
-$uicore-inputs-height-large: 40px;
-$uicore-line-height: calc(var(--iui-size-s) * 1.4);
-$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
-$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
-
-$uicore-inputs-padding: calc(
-  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
-); // TODO: What should we do here?
-$uicore-inputs-padding-large: calc(
-  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
-); // TODO: What should we do here?
-$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
-$uicore-inputs-padding-bordered-large: calc(
-  #{$uicore-inputs-padding-large} - 2px
-);
-
-$uicore-inputs-margin: calc(
-  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
-);
-$uicore-inputs-margin-large: calc(
-  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
-); // TODO: What should we do here?
-
-$uicore-inputs-border-color: $buic-inputs-border;
-
-$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
-
-$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/baseline";
+@import "../style/themecolors";
+
+// cspell:ignore unbordered
+
+$uicore-inputs-height: 22px;
+$uicore-inputs-height-large: 40px;
+$uicore-line-height: calc(var(--iui-size-s) * 1.4);
+$uicore-bordered-padding: calc(#{$uicore-bordered-padding} * 0.5);
+$uicore-unbordered-padding: calc(#{$uicore-unbordered-padding} * 0.5);
+
+$uicore-inputs-padding: calc(
+  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-large: calc(
+  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
+$uicore-inputs-padding-bordered-large: calc(
+  #{$uicore-inputs-padding-large} - 2px
+);
+
+$uicore-inputs-margin: calc(
+  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
+);
+$uicore-inputs-margin-large: calc(
+  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
+);
+
+$uicore-inputs-border-color: $buic-inputs-border;
+
+$uicore-inputs-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+
+$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);

package/lib/cjs/core-react/layout-variables.scss

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./z-index";
-
-:root {
-
-  /** Default Widget Opacity */
-  --buic-widget-opacity:      0.90;
-  /** Default Toolbar Opacity */
-  --buic-toolbar-opacity:     0.50;
-
-  /** CSS variables for each z-index layer */
-  @include uicore-z-index-variables();
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./z-index";
+
+:root {
+
+  /** Default Widget Opacity */
+  --buic-widget-opacity:      0.90;
+  /** Default Toolbar Opacity */
+  --buic-toolbar-opacity:     0.50;
+
+  /** CSS variables for each z-index layer */
+  @include uicore-z-index-variables();
+
+}

package/lib/cjs/core-react/listbox/Listbox.d.ts

@@ -1,56 +1,56 @@
-import * as React from "react";
-import "./Listbox.scss";
-/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */
-/**
- * `Listbox` value.
- * @alpha
- */
-export declare type ListboxValue = string;
-/**
- * `Listbox` Props.
- * @alpha
- */
-export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
-    id?: string;
-    selectedValue?: ListboxValue;
-    ariaLabel?: any;
-    ariaLabelledBy?: any;
-    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
-}
-/**
- * `ListboxItem` Props.
- * @alpha
- */
-export interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
-    /** The unique item's value. */
-    value: ListboxValue;
-    /** set if item is disabled. */
-    disabled?: boolean;
-}
-/**
- * `Listbox` Context.
- * @alpha
- */
-export interface ListboxContextProps {
-    listboxId?: string;
-    listboxValue?: ListboxValue;
-    focusValue?: ListboxValue;
-    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
-    listboxRef?: React.RefObject<HTMLUListElement>;
-}
-/**
- * Context set up by listbox for use by `ListboxItems` .
- * @alpha
- */
-export declare const ListboxContext: React.Context<ListboxContextProps>;
-/**
- * Single select `Listbox` component
- * @alpha
- */
-export declare function Listbox(props: ListboxProps): JSX.Element;
-/**
- * `ListboxItem` component.
- * @alpha
- */
-export declare function ListboxItem(props: ListboxItemProps): JSX.Element;
+import * as React from "react";
+import "./Listbox.scss";
+/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */
+/**
+ * `Listbox` value.
+ * @alpha
+ */
+export declare type ListboxValue = string;
+/**
+ * `Listbox` Props.
+ * @alpha
+ */
+export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+    id?: string;
+    selectedValue?: ListboxValue;
+    ariaLabel?: any;
+    ariaLabelledBy?: any;
+    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+}
+/**
+ * `ListboxItem` Props.
+ * @alpha
+ */
+export interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+    /** The unique item's value. */
+    value: ListboxValue;
+    /** set if item is disabled. */
+    disabled?: boolean;
+}
+/**
+ * `Listbox` Context.
+ * @alpha
+ */
+export interface ListboxContextProps {
+    listboxId?: string;
+    listboxValue?: ListboxValue;
+    focusValue?: ListboxValue;
+    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    listboxRef?: React.RefObject<HTMLUListElement>;
+}
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+export declare const ListboxContext: React.Context<ListboxContextProps>;
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export declare function Listbox(props: ListboxProps): JSX.Element;
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export declare function ListboxItem(props: ListboxItemProps): JSX.Element;
 //# sourceMappingURL=Listbox.d.ts.map